JS模块化开发

js开发的问题

冲突
依赖
js引入的文件,产生依赖.

命名空间的弊端
调用的时候 名字比较长.
只能减低冲突,不能完全避免

seajs使用

  1. 引入sea.js的库

  2. 如何变成模块? define

  3. 如何调用模块? exports 和 seajs.use

  4. 如何依赖模块? require

//html://            console.log( seajs );seajs.use('./js/main.js',function ( main ) {    main.show();});            
//main.jsdefine(function ( require,exports,module ) {    var header = require('./header.js');    function show () {        alert(123);    }    exports.show = show;});

seajs.use()

加载一个或多个模块

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

seajs.use 与 DOM ready 事件没有任何关系。如果某些操作要确保在 DOM ready 后执行,需要使用 jquery 等类库来保证。

seajs.use(['jquery','./main'],function ( $,main ) {    $(function () {        main.init();    })});

use方法第一个参数一定要有,但是可以是null,也可以是一个变量

var app = ['app.js', 'header.css', 'header.js'];seajs.use(app, function( app ) {    //do something});

seajs.use() 只用于加载启动, 不应该出现在define的模块代码中,如果模块代码里需要加载其它模块时,使用 require() ,需要加载异步其它异步模块时,使用 require.async()

seajs.use 是模块加载器必备的一个接口

define函数

当传递一个参数时候,那么这个参数就是一个模块,参数可以是任意类型
传递一个字符串,那么这个模块就是一个字符串模块
传递一个对象的时候,那么这个模块就是一个对象模块

传递一个函数(最常用的方式)
这函数自带三个参数
Require:引用其他模块的工厂方法
Exports:返回的接口对象
Module:模块module属性

当传递过参数时(两个,或者三个)
如果传递两个参数的时候,第一个该模块依赖的模块数组集合,最后一个参数是function
如果传递三个参数的时候,第一个表示该模块的名称,第二个参数表示该模块依赖的模块集合,第三个

//第一个参数,当前模块的ID,也就是当前模块的地址//第二个参数,以来模块的地址的数组define('./main.js',['./drag.js'],function( require,exports,moduels ){});

三个参数解释

require

  1. require不能简写

  2. require不能被重定义
    不能赋值:var req = require
    不能定义函数:function require
    不能被子函数当成参数
    不能在子函数作用域内重定义

// 错误 - 重命名 "require"!
var req = require, mod = req("./mod");

// 错误 - 重定义 "require"!
require = function() {};

// 错误 - 重定义 "require" 为函数参数!
function F(require) {}

// 错误 - 在内嵌作用域内重定义了 "require"!
function F() {

 var require = function() {};

}

  1. require的参数只能是完整的字符串 require(‘abc’ + ‘bcd’)是不允许的

exports

  1. 模块的接口

  2. 第一种,直接对exports添加属性,如exports.color = 'red'

  3. 第二种,通过module来定义,module.exports.color = 'red'

  4. 第三种,通过module来定义,module.exports = {color: 'orange'}

  5. 第四种,通过return来定义, return {color: 'green'}

  6. 在一个模块中定义接口时候要用一种方式,不能混用

  7. 注意,不可以直接对exports赋值新对象

module

  1. 模块的属性

  2. id:表示模块的id

  3. uri:表示该模块文件对应的url

  4. exports:表示模块返回的接口集合

  5. dependencies:表示依赖模块集合(数组表示形式)

  6. deps:表示依赖模块集合(对象表示形式)

CMD 模块定义规范

一个模块就是一个文件

define 是一个全局函数, 用来定义模块

define( facotry )

facotry可以是一个函数,也可以是一个对象或字符串

definde( { color: 'tan' } );

当参数为 函数时。 默认会有三个参数 :require,exports,module

definde( function ( require,exports,module ) {} );

define ([id,deps],factory)

define 也可以接受两个以上的参数,字符串id表示模块标识。deps是模块依赖。

define('main',['mina.js'],function ( require,exports,module ) {    //模块代码});

id ,deps 参数省略,可以通过构建工具自动生成。
id和 deps 参数, 不属于CMD规范。

require function

require 是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口。

deifne(function ( requrie,exports ) {    //获取模块 main 的接口    var main = require('./main');    //调用 模块 main 中的定义方法    main.init();});

require.async(id,[cb]);
模块内部异步加载模块,并在加载完成后执行指定的回调函数。

require.async('./a',function(){});//加载多个异步模块require.async(['./a','./b'],function(){});    
//异步加载 所需要的模块define(function ( require,expotrs,module ) {    var loadSync = false;    if ( loadSync ) {        var skin = require.async('./skin');    } else {        var header = require.async('./header');    }});

exports
exports , 用来向外提供模块接口

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

通过return 提供接口

define(function () {    //通过 return 直接提供接口    return {        color: 'deeppink',        sayName: function () {}    }});

CMD模块中,经常使用的API 有:define,require,require.async,exports,module.expotrs

seajs 配置

关键字:JavaScript

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部