zoukankan      html  css  js  c++  java
  • Sea.js 提供简单、极致的模块化开发体验

    参考:http://seajs.org/docs/#intro

    为什么使用 Sea.js ?

    Sea.js 追求简单、自然的代码书写和组织方式,具有以下核心特性:

    • 简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码。
    • 自然直观的代码组织方式:依赖的自动加载、配置的简洁清晰,可以让我们更多地享受编码的乐趣。

    Sea.js 还提供常用插件,非常有助于开发调试和性能优化,并具有丰富的可扩展接口。

    兼容性

    Sea.js 具备完善的测试用例,兼容所有主流浏览器:

    Chrome 3+         ✔
    Firefox 2+        ✔
    Safari 3.2+       ✔
    Opera 10+         ✔
    IE 5.5+           ✔
    

    Sea.js 可运行在 Mobile 端,包括 Hybrid 模式的 App 上。理论上,Sea.js 可以运行在任何浏览器引擎上。

    引用文献:

    前端模块化开发的价值

    一步步学会使用SeaJS 2.0

    API 快速参考 

    seajs.config

    用来对 Sea.js 进行配置。

    seajs.config({
    
      // 设置路径,方便跨目录调用
      paths: {
        'arale': 'https://a.alipayobjects.com/arale',
        'jquery': 'https://a.alipayobjects.com/jquery'
      },
    
      // 设置别名,方便调用
      alias: {
        'class': 'arale/class/1.0.0/class',
        'jquery': 'jquery/jquery/1.10.1/jquery'
      }
    
    });
    

    更多配置项请参考:#262

    seajs.use

    用来在页面中加载一个或多个模块。

    // 加载一个模块
    seajs.use('./a');
    
    // 加载一个模块,在加载完成时,执行回调
    seajs.use('./a', function(a) {
      a.doSomething();
    });
    
    // 加载多个模块,在加载完成时,执行回调
    seajs.use(['./a', './b'], function(a, b) {
      a.doSomething();
      b.doSomething();
    });
    

    更多用法请参考:#260

    define

    用来定义模块。Sea.js 推崇一个模块一个文件,遵循统一的写法:

    define(function(require, exports, module) {
    
      // 模块代码
    
    });

    也可以手动指定模块 id 和依赖,详情请参考:#242
    requireexports 和 module 三个参数可酌情省略,具体用法如下。

    require

    require 用来获取指定模块的接口。

    define(function(require) {
    
      // 获取模块 a 的接口
      var a = require('./a');
    
      // 调用模块 a 的方法
      a.doSomething();
    });
    

    注意,require 只接受字符串直接量作为参数,详细约定请阅读:#259

    require.async

    用来在模块内部异步加载一个或多个模块。

    define(function(require) {
    
      // 异步加载一个模块,在加载完成时,执行回调
      require.async('./b', function(b) {
        b.doSomething();
      });
    
      // 异步加载多个模块,在加载完成时,执行回调
      require.async(['./c', './d'], function(c, d) {
        c.doSomething();
        d.doSomething();
      });
    
    });
    

    详细说明请参考:#242

    exports

    用来在模块内部对外提供接口。

    define(function(require, exports) {
    
      // 对外提供 foo 属性
      exports.foo = 'bar';
    
      // 对外提供 doSomething 方法
      exports.doSomething = function() {};
    
    });

    详细说明请参考:#242

    module.exports

    与 exports 类似,用来在模块内部对外提供接口。

    module.exports 与 exports 的区别,以及详细说明请参考:#242

    CMD 模块定义规范

    模块标识

    require 书写约定

    模块的加载启动

    配置

    标准构建

    插件

     加载模板字符串

    加载 Handlebars 模板并进行预编译

    加载 JSON 数据

    seajs.importStyle(cssText, id?)

    减少 HTTP 请求数是性能优化中非常重要的一条准则。使用 combo 插件,配合服务器的 nginx-http-concat服务(安装指南),可自动对同一批次的多个模块进行合并下载。

    通过 combo 插件,我们可以对同一数组中的加载项进行合并加载。通过 flush 插件,我们可以更进一步减少 HTTP 请求数。

     调试插件

     加载 seajs-log 插件后,seajs 会拥有 log 方法。

    通过 health 插件,可以分析当前页面模块的健康情况。

    多版本共存

     seajs.cache Object

     通过 seajs.cache,可以查阅当前模块系统中的所有模块信息

     seajs.reslove Function

     类似 require.resolve,会利用模块系统的内部机制对传入的字符串参数进行路径解析。

     seajs.require Function

     全局的 require 方法,可用来直接获取模块接口

     seajs.data Object

      通过 seajs.data,可以查看 seajs 所有配置以及一些内部变量的值,可用于插件开发。当加载遇到问题时,也可用于调试。

     seajs.log Function

     由 seajs-log 插件提供

    使用 seajs.use 或 require 进行引用的文件,如果是具名模块(即定义了 ID 的模块),会把 ID 和 seajs.use 的路径名进行匹配,如果一致,则正确执行模块返回结果。反之,则返回 null

    改造现有文件为 CMD 模块

    插件开发指南

     Sea.js 通过事件提供可扩展接口。要给 Sea.js 开发插件,需要了解 Sea.js 内部所提供的事件类型。

     

  • 相关阅读:
    [Winform]Media Player com组件应用中遇到的问题
    [Winform]Media Player播放控制面板控制,单击事件截获
    [Winform]Media Player组件全屏播放的设置
    [EF]数据上下文该如何实例化?
    [Winform]在关闭程序后,托盘不会消失的问题
    咏南中间件跨平台解决方案
    硬件中间件
    BASE64使用场景
    DELPHI7 ADO二层升三层新增LINUX服务器方案
    NGINX心跳检测
  • 原文地址:https://www.cnblogs.com/tonyIt/p/3817049.html
Copyright © 2011-2022 走看看