seajs

wuzlun 2016-11-27

seajs是实现JavaScript的模块化开发及按模块加载,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便代码的编写和维护。说白了就是能够引入导出js,并进行加载。还有另外一个好处:不用考虑命名空间了!

模块系统

1.模块是一段 JavaScript 代码,具有统一的基本书写格式。

2.模块之间通过基本交互规则,能彼此引用,协同工作。

aliasObject

别名配置,配置之后可在模块中使用require调用 require('jquery');

seajs.config({

    alias: { 'jquery': 'jquery/jquery/1.10.1/jquery' }

});

define(function(require, exports, module) {

    //引用jQuery模块

    var $ = require('jquery');

});

pathsObject

设置路径,方便跨目录调用。通过灵活的设置path可以在不影响base的情况下指定到某个目录。

seajs.config({

    //设置路径

    paths: {

        'gallery': 'https://a.alipayobjects.com/gallery'

    },

    // 设置别名,方便调用

    alias: {

        'underscore': 'gallery/underscore'

    }

});

define(function(require, exports, module) {

    var _ = require('underscore');

     //=> 加载的是 https://a.alipayobjects.com/gallery/underscore.js

});

baseString

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

通过 exports 暴露接口。通过 exports 就可以向外提供接口。##可以理解为转换为一个接口

通过 require 引入依赖。通过 require 可以获取其他模块提供的接口。##相当于java中的import功能

想在页面中使用某个组件时,只要通过 seajs.use 方法调用。

// 加载多个模块,在加载完成时,执行回调

seajs.use(['./a', './b'], function(a, b) {

  a.doSomething();

  b.doSomething();

});

module.exports与exports的区别:

  1. module.exports 初始值为一个空对象 {}
  2. exports 是指向的 module.exports 的引用
  3. require() 返回的是 module.exports 而不是 exports
  4. 即 module.exports 指向新的对象时,exports 断开了与 module.exports 的引用,那么通过 exports = module.exports 让 exports 重新指向 module.exports 即可。
  5. exports是引用 module.exports的值。module.exports 被改变的时候,exports不会被改变,而模块导出的时候,真正导出的执行是module.exports,而不是exports

关于模块标识

Seajs模块标识主要以小驼峰字符串、.或..

// 在 http://example.com/js/a.js 的 factory 中:

require.resolve('./b');

  // => http://example.com/js/b.js

// 在 http://example.com/js/a.js 的 factory 中:

require.resolve('../c');

  // => http://example.com/c.js

分为 相对 与 顶级 标识。以.或..开头,则为相对标识 。以小驼峰字符串开关,则为顶级标识。

// 假设 base 路径是:http://example.com/assets/

// 在模块代码里:

require.resolve('gallery/jquery/1.9.1/jquery');

  // => http://example.com/assets/gallery/jquery/1.9.1/jquery.js

官方示例:

通过 script 引入 sea.js 后,有一段配置代码:

// seajs 的简单配置

seajs.config({

  base: "../sea-modules/",

  alias: {

    "jquery": "jquery/jquery/1.10.1/jquery.js"

  }

})

// 加载入口模块

seajs.use("../static/hello/src/main")

sea.js 在下载完成后,会自动加载入口模块。

// 所有模块都通过 define 来定义

define(function(require, exports, module) {

  // 通过 require 引入依赖

  var $ = require('jquery');

  var Spinning = require('./spinning');

  // 通过 exports 对外提供接口

  exports.doSomething = ...

  // 或者通过 module.exports 提供整个接口

  module.exports = ...

});

相关推荐

GhostStories / 0评论 2017-09-26
GhostStories / 0评论 2017-09-26
binglingnew / 0评论 2017-08-29

binglingnew / 0评论 2017-07-29