跨环境实现通用模块seajs

优点：

解决了，单文件过大，维护成本高，有损性能的好处

异步并行加载，提高了网站打开的速度

命名控件的记忆负担与冲突

开发、部署与上线后的bug fix不够便捷

跨环境开发的通用模块共享问题

高性能：异步+并行

使用简单：自动管理依赖+约定优于配置

可维护性：命名冲突和多版本共存

弱依赖：浏览器即服务器

跨环境：通用模块只需要编辑一次

可扩展性：通过插件可以满足自定义需求

安装node

spm:$npm install spm -g

下载seajs【$spm install seajs】

一个模块一个文件

使用define定义模块

使用use进行异步加载模块

实例:

如果模板里面有很多js的调用，则其他页面也要调用这些js造成页面引入的负担，可以减少代码量。一旦项目不断扩大的话，js的数量也会不断增多，页面就不好维护。此时seajs方可解决这类问题。

html

首先引入sea.js文件

例子：

<script>//引入多个文件【用数组表示】

seajs.use(['./js/1,'./js/2'']，function(a,b){

a.init();//表示的是 ./js/1给外界提供的接口，

b.init();//同上

})

</script>

js

其次定义模块：

define(function(require,exports,moudle){ //代码})

搞清楚依赖关系：

eg:define(function(require,exports,moudle){

$ = require('./jquery.min.js')；//引入jQuery，不加var的话就是全局变量，其他模块可以直接使用

var yilai1 = require('./yilai1.js')($)；//表示的是yilai1.js要依赖jQuery.min.js

require('./yalai2.js')(yilai1)；//yilai2是要同时依赖yilai1和jquery存在的

var init = function(){

$(function(){

//此处就是jQuery要写的内容了

})

}

exports.init2 = init;  //之后要使用此页面的js的话就直接调用init2即可。

})

html调用

最后调用：

 在相应的html页面里面进行调用模块

seajs.use(['./js/1','./js/main'],function(m,n){

m.init();

n.init2();

})

需要注意的是：如果需要用jQuery的话需要修改配置文件，因为直接使用seajs找不到jQuery，如下修改jQuery文件

define(function(){

//jquery的代码

return $.noConflict();

})

如果依赖的是jQuery的插件同样修改源代码如下：

define(function(){

return  function(jquery){

//代码

}

})

练习如图所示：

需要注意的是要依赖服务才可以，写的太过详细了……………………