前端开发中最常用是使用匿名函数闭包形式组织代码将对象、属性封装到一个特别的对象中避免暴露的对象、属性太多引起冲突,这种方式一般没有什么问题。
一种新的方式是在以往的基础上规范模块化开发。Node的出现,这种规范又分为浏览器端与服务端。
浏览器端规范
AMD(Asynchromous Module Definition) 代表:require.js
CMD(Common Module Definition) 代表:Sea.js
服务器端规范
CommonJS 代表:node.js
umd是AMD和CommonJS的糅合。
还有ECMAScript 2015 (ES6)模块化规范。
Demo http://download.csdn.net/detail/linjiqian/9762298
seajs与requirejs都是可以做到懒加载,其中ionic就使用了requirejs。
1.简单的Sea.jsDemo
使用sea.js需注意加载模块时的路径问题,当前同目录使用./。sea.js是会在一开始就把所有模块加载进来,所以在逻辑判断中才加载某模块这个判断是无效的,因为不管条件是否成立都会被加载(预加载懒执行)。
sea.js在加载模块时其实也只是动态创建script标签加载脚本代码。
Sea.js http://seajs.org/docs/
Sea.js主要的四个关键字
define 定义一个模块
require 加载一个模块
export 暴露一个模块
module 模块
子模块seademomodule.js
暴露两个函数,分别根据DOM的id改变其color为红色和蓝色:
//子模块
//调用define函数定义一个模块
define(function(require,exports,module){
//子模块提供函数
function setColorRedById(id){
document.getElementById(id).style.color = "red";
}
function setColorBlueById(id){
document.getElementById(id).style.color = "blue";
}
//暴露出去的是个对象,将要暴露的函数包装进对象中
module.exports = {
setColorRedById:setColorRedById,
setColorBlueById:setColorBlueById
};
});
主模块seaMainmodule.js
,加载子模块seademomodule.js
,使用子模块暴露出来的功能函数:
//sea主模块
define(function(require,exports,module){
//require 加载子模块
var seademomodule = require("./seademomodule.js");
var red = document.getElementById("red");
var blue = document.getElementById("blue");
red.onclick = function(){
seademomodule.setColorRedById("hiht");
}
blue.onclick = function(){
seademomodule.setColorBlueById("hiht");
}
});
HTML文件seademo.html
引入sea.js使用主模块:
sea
hiht
sea.js可以把jzepto改造成一个符合cmd规范的模块。在zepto.js中原有的(function(global, factory) { factory(global)
前加个判断:
(function(global, factory) {
if (typeof define === 'function' && define.amd)
define(function() { return factory(global) })
else
factory(global)
}(this, function(window)...
2.require.jsDemo
子模块requireDemomodule.js
//子模块
//调用define函数定义一个模块
define(function(){
//子模块提供函数
function setColorRedById(id){
document.getElementById(id).style.color = "red";
}
function setColorBlueById(id){
document.getElementById(id).style.color = "blue";
}
//暴露出去的是个对象,将要暴露的函数包装进对象中 return
return {
setColorRedById:setColorRedById,
setColorBlueById:setColorBlueById
}
});
主模块requireMainmodule.js
//require主模块
define(['./requireDemomodule'],function(requireDemomodule){
var red = document.getElementById("red");
var blue = document.getElementById("blue");
red.onclick = function(){
requireDemomodule.setColorRedById("hiht");
}
blue.onclick = function(){
requireDemomodule.setColorBlueById("hiht");
}
});
静态文件requiredemo.html
requiredemo
require hiht
3.相似与不同
sea.js、require.js中每个模块是单独的一个文件。每个模块都是define函数中设置暴露的功能。每个模块都是一个单独的作用域。
Sea.js与Require.js发展方向有差异,Require.JS在发展成浏览器端的模块加载器的同时向 Rhino / Node 等环境的模块加载器发展。Sea.js 专门发展 Web 浏览器端,同时通过 Node 扩展的方式也可以 在Node 环境中使用。