seajs 模块化编程js代码

seajs是我刚入门前端就接触到的一个javaScript模块加载框架。运用seajs后javaScript代码的可读性和清晰度有了很大的提拔,插件的运用和组装变的很轻易。越发轻易代码的晋级和保护。引荐运用插件比较多的项目运用。或许运用requirejs也比较盛行。

ps:假如想知道RequireJS、SeaJS哪一个好用的能够自行对照,或许检察

seajs 的简朴上手

起首先去官网下载最新版本。
下载后,假定把它放在js子目录下面,就能够加载了。

   <script type="text/javascript" src="js/sea.js"></script>
          

加载seajs后我们还需要加载本身的js设置文件

   <script type="text/javascript" src="js/sea-config.js"></script>  
          

seajs 的简朴设置

      //.sea-config.js 
      seajs.config({
          base: "../plug-js/",
          alias: {
            "jquery": "jquery/1.10.1/jquery.js"
          }
      })  

简朴运用

  // 一切模块都经由过程define来定义
  define(function(require,exports,module){
        // 经由过程require来引入jquery
        var $ = require('jquery');
        
        console.log($);
  })

seajs参数

define

运用全局函数define来定义函数

define(id?,dependencies?,factory);

id: 当前模块的唯一标识。该参数可选。假如没有指定,默以为模块地点文件的接见途径。假如指定的话,必需是顶级或相对标识。
dependencies: 当前模块所依靠的模块,是一个由模块标识构成的数组。
factory: 模块的事情函数。模块初始化时,会挪用且仅挪用一次该工场函数。

define(function(require,exports,module){
    //The module code goes here
})

**注重:不引荐不要设定id和dependencies参数。

exports

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(){}
    }
})
可简化为:
define({
   foo : 'bar',
   doSomething : function(){} 
})

require

require函数用来接见其他模块供应的API

define(function(require){
   var a = require('./a');
   a.doSomething();
})

require.async: 异步加载模块,并在加载完成后实行回调函数
require.resolv: 运用require()的内部机制来剖析并返回模块途径。该函数不会加载模块,只返回剖析后的途径。
require.load: 该要领可用异步加载剧本,并在加载完成后,实行指定的回调函数。
require.constructor: 给一切require参数对象增加一些公用属性或要领。

module

modeule 参数存储模块的元信息

module.id: 当前模块的唯一标识。
module.dependencies: 示意当前模块的依靠列表
module.exports: exports是某个类的实例

   define(function(require,exports,module){
         console.log(module.exports === exports); // true
         module.exports = new SomeClass();
         console.log(module.exports === exports); // false
   })

module.constructor: 给module参数对象增加一些公用属性或要领。

api手册

seajs的模块化插件

    原文作者:LuDongWei
    原文地址: https://segmentfault.com/a/1190000004116521
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞