首页 HTML5前端框架正文

seajs和requirejs简单用法

俩人都属于模块化加载器(库):网上的文档教程灰常多,这里只做个存档!
seajs和requirejs:
seajs官网:http://seajs.org/docs/
requirejs官网:http://www.requirejs.org/
两者的区别在此不多说,不过俩人遵循的规范简单说下:
seajs采用的是CMD(common module define)规范,公共模块定义
require采用的是AMD(Asynchronous module define)规范,异步模块定义
所以导致用法略有不同,这里只是简答说下用法。
好处:
1. 自动引入js文件
2. 解决文件之间的依赖
3. 防止变量名冲突
* 友情提示:最好放到服务器环境下测试

seajs的用法:
1. 定义模块

define(function(require,exports,module){
    //require 引入其他模块
    //exports 向外界导出一个模块
    //module.exports={}     批量导出模块
});

向外界导出模块的方式:

  • ·直接使用exports.a=12; (常用)

  • return {a:12};

  • 当然也可以直接 define({a:12}),直接过来的就是一个json

require引入其他模块,解决依赖:

  • ·var mod=require(‘1.js’);  //同步引入(常用)

  • ·require.async(‘1.js’,function(mod){mod.a});  //异步引入

module本身有很多东西,id啥的,这里实说module.exports:

    define(function(require,exports,module){
        module.exports={
            a:function(){},
            b:function(){}
        }
    })

 2. 使用模块,在html这边使用

首先必须在html中引入seajs文件。
seajs.use(文件名,function(a){a.xx}); 使用一个模块
seajs.use([文件名,文件名2],function(a,b){}) 使用多个

* 当然本身也可以直接 <script src=”sea.js” data-main=’init’></script> init初始化模块

3. seajs的配置

seajs.config({
  alias: {
       'm':'a/b/c/1.js'  //设置别名,路径长的话可以起个外号
  },
  preload: [
    ‘sum’
  ],
  debug: true,  //可以设置成2,每次请求新文件,防止缓存,调试有用
  charset: 'utf-8',
  timeout: 20000
});
  • requirejs的简单用法:
    1. 定义模块
    ·跟seajs一样
    ·define(文件模块,function(mod){mod})
    2. 使用模块
    require([‘1′],function(mod,mod2){})

ps: 暂时到这里!基本用法差不多了!…..


版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论