jquery.js与sea.js综合使用

jquery.js与sea.js综合使用

 

目录
  模块定义
  define
    id
    dependencies
    factory
  exports
  require
    require.async
    require.resolve
    require.load
    require.constructor
  module
   module.id
   module.dependencies
   module.exports
   module.constructor
seajs.config
alias

jquery.js与sea.js综合使用
简介:
SeaJS:javascrīpt模块化开发
jQuery:javascrīpt框架
简介:
SeaJS:javascrīpt模块化开发
jQuery:javascrīpt框架
1、jQuery定义 2、加载jQuery文件
//jquery-sea.js
define(function(require, exports, module) = { 
    //原jquery.js代码... 
    module.exports = $.noConflict(true);
});
seajs.config({
  alias: {
    ‘jquery‘: ‘/static/lib/seajs/jquery-sea.js‘
  }
});
 3、模块定义  4、define,使用全局函数 define 来定义模块:
 
在 SeaJS 中,所有 JavaScript 文件都应该用模块的形式来书写,并且一个文件只包含一个模块。
 
define(id?, dependencies?, factory);
 5、id  6、dependencies
 当前模块的唯一标识。该参数可选。如果没有指定,默认为模块所在文件的访问路径。如果指定的话, 必须是顶级或绝对标识(不能是相对标识)。  
技术分享
当前模块所依赖的模块,是一个由模块标识组成的数组。该参数可选。如果没有指定,模块加载器会从 factory.toString() 中解析出该数组。

** 注意:强烈推荐不要设定 id 和 dependencies 参数。 在开发阶段,模块加载器会自动获取这两个参数。部署上线时,则可以通过优化工具来提取这两个参数。
技术分享

 

 7、factory  8、exports
 
技术分享
模块的工厂函数。模块初始化时,会调用且仅调用一次该工厂函数。factory 可以是函数, 也可以是对象、字符串等任意值,这时 module.exports 会直接设置为 factory 值。
factory 函数在调用时,会始终传入三个参数: require、exports 和 module, 这三个参数在所有模块代码里可用。

define(function(require, exports, module) {
  // The module code goes here  
});
技术分享

9、require

技术分享
require 函数用来访问其他模块提供的 API.

define(function(require) {
  var a = require(‘./a‘);
  a.doSomething();
});
它接受 模块标识 作为唯一参数。

请牢记,为了使静态分析能成功获取到模块依赖信息,在书写模块时,需要遵循一些简单的 规则。
技术分享

 10、require.async

技术分享
该方法可用来异步加载模块,并在加载完成后执行回调函数。
define(function(require, exports, module) {
  // 加载一个模块
  require.async(‘./b‘, function(b) {
    b.doSomething();
  });
  
  // 加载多个模块
  require.async([‘./c‘, ‘./d‘], function(c, d) {
    // do something
  });
});
技术分享

 

 
技术分享
exports 用来向外提供模块的 API.

define(function(require, exports) {
  // snip...
  exports.foo = ‘bar‘;
  exports.doSomething = function() {};
});
除了给 exports 对象增加成员,还可以使用 return 直接向外提供 API.

define(function(require, exports) {
  // snip...
  return {
    foo: ‘bar‘,
    doSomething: function() {};
  };
});
如果 return 语句是模块中的唯一代码,可简化为:

define({
  foo: ‘bar‘,
  doSomething: function() {};
});
上面这种格式特别适合定义 JSON 数据。

** 注意:下面这种写法是错误的!

define(function(require, exports) {
  // snip...
  exports = { // 错误!
    foo: ‘bar‘,
    doSomething: function() {};
  };
});
模块加载器不能获取到新赋给 exports 变量的值。 请使用 return 或 module.exports 。
技术分享

 

 11、require.resolve  12、require.load
使用 require() 的内部机制来解析并返回模块路径。该函数不会加载模块,只返回解析后的路径。
该方法可用来异步加载脚本,并在加载完成后,执行指定的回调函数。开发插件时, 可以通过覆盖该方法来实现自定义的资源加载。
13、require.constructor 14、module
有时候,我们需要给所有 require 参数对象添加一些公用属性或方法。这时, 使用 require.constructor 来实现会非常方便。
module 参数存储模块的元信息。拥有以下成员:

 

15、module.id 16、module.dependencies
技术分享
当前模块的唯一标识。 require(module.id) 必然返回此模块的 exports 。

define(function(require, exports, module) {
  console.log(module.id); // http://path/to/this/file.js
  console.log(require(module.id) === exports); // true
});
技术分享
module.dependencies 是一个数组,表示当前模块的依赖列表。

该数组只读:模块加载完成后,修改该数组不会有任何效果。

 

17、module.exports  18、module.constructor
技术分享

exports 对象由模块系统创建,这不能满足开发者的所有需求, 有时候会希望 exports 是某个类的实例。 这时可用 module.exports 来实现:


define(function(require, exports, module) {
console.log(module.exports === exports); // true
module.exports = new SomeClass();
console.log(module.exports === exports); // false
});
注意,对 module.exports 的赋值需要同步执行,它不能放在回调函数里。 下面这样是不行的:


x.js:


define(function(require, exports, module) {
setTimeout(function() {
module.exports = { a: "hello" };
}, 0);
});
y.js:


define(function(require, exports, module) {
var x = require(‘./x‘);
console.log(x.a); // undefined
});


技术分享
 
技术分享
有时候,我们需要给所有 module 参数对象添加一些公用属性或方法。在这种情况下, 使用 module.constructor 可以很好地满足需求。

extend.js:

define(function(require, exports, module) {
  var Module = module.constructor;

  Module.prototype.filename = function() {
    var id = this.id;
    var parts = id.split(‘/‘);
    return parts[parts.length - 1];
  };
});
a.js:

define(function(require, exports, module) {
  exports.filename = module.filename();
});
技术分享

 

   



郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。