seajs简记

参考seajs快速入门

一、前端模块化的价值

  1. 解决命名冲突
  2. 摆脱文件依赖
  3. 性能优化
  4. 提高可维护性
  5. seajs.use方法调用
    通过exports暴露接口
    通过require引入依赖

二、Sea.js 的常用 API

  1. seajs.config

    base string    Sea.js 在解析顶级标识时，会相对 base 路径来解析 

  2. seajs.use

    用来在页面中加载模块

  3. require

    是一个方法，接受 模块标识 作为唯一参数，用来获取其他模块提供的接口
    require 的参数值 必须 是字符串直接量

  4. require.async

    require.async 方法用来在模块内部异步加载模块，并在加载完成后执行指定回调。callback 参数可选
     1 define(function(require) {
 2 
 3   // 异步加载一个模块，在加载完成时，执行回调
 4   require.async('./b', function(b) {
 5     b.doSomething();
 6   });
 7 
 8   // 异步加载多个模块，在加载完成时，执行回调
 9   require.async(['./c', './d'], function(c, d) {
10     c.doSomething();
11     d.doSomething();
12   });
13 
14 });

  5. exports

    exports 是一个对象，用来向外提供模块接口

    可以直接将方法赋给接口，也可以将其添加到对象里面赋给接口

    1 define(function(require, exports) {
2 
3   // 对外提供 foo 属性
4   exports.foo = 'bar';
5 
6   // 对外提供 doSomething 方法
7   exports.doSomething = function() {};
8 
9 });
    1 define(function(require, exports, module) {
2 
3   // 对外提供接口
4   module.exports = {
5     name: 'a',
6     doSomething: function() {};
7   };
8 
9 });

三、模块

  1. 系统
    构建：a. 定义系统成员     b. 约定系统通讯
  2. 模块
    a. js代码，统一固定的格式      b. 通过基本交互规则，能彼此引用协同工作
  3. 模块标识
    相对标识：相对标识以 . 开头，只出现在模块环境中（define 的 factory 方法里面）。
    顶级标识：顶级标识不以点（.）或斜线（/）开始， 会相对模块系统的基础路径（即 Sea.js 的 base 路径）来解析

四、 使用步骤

    1. 引入sea.js文件（方法与引用jQuery相同）
    2. 配置信息
      在<script>中，方式与写jQuery代码相同
       1 seajs.config({
 2 
 3   // 别名配置
 4   alias: {
 5     'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
 6     'json': 'gallery/json/1.0.2/json',
 7     'jquery': 'jquery/jquery/1.10.1/jquery'
 8   },
 9 
10   // 路径配置
11   paths: {
12     'gallery': 'https://a.alipayobjects.com/gallery'
13   },
14 
15   // 变量配置
16   vars: {
17     'locale': 'zh-cn'
18   },
19 
20   // 映射配置
21   map: [
22     ['http://example.com/js/app/', 'http://localhost/js/app/']
23   ],
24 
25   // 预加载项
26   preload: [
27     Function.prototype.bind ? '' : 'es5-safe',
28     this.JSON ? '' : 'json'
29   ],
30 
31   // 调试模式
32   debug: true,
33 
34   // Sea.js 的基础路径
35   base: 'http://example.com/path/to/base/',
36 
37   // 文件编码
38   charset: 'utf-8'
39 });
      View Code
    3. 配置sea.js的基础路径  及加载模块
       1 通过 use 方法，可以在页面中加载任意模块：
 2 
 3 // 加载模块 main，并在加载完成时，执行指定回调
 4 seajs.use('./main', function(main) {
 5   main.init();
 6 });
 7 use 方法还可以一次加载多个模块：
 8 
 9 // // 并发加载模块 a 和模块 b，并在都加载完成时，执行指定回调
10 seajs.use(['./a', './b'], function(a, b) {
11   a.init();
12   b.init();
13 });
    4. 写基础模块
    5. 写引用模块（main）
posted @ 2015-09-04 15:05  超然haha  阅读(289)  评论(1)  编辑  收藏  举报
back to top