前端模块化开发 教程|前端开发者
一、原始写法
[code]function m1(){
//…
}
function m2(){
//…
}[/code]
二、对象写法
[code]var module1 = new Object({
_count : 0,
m1 : function (){
//…
},
m2 : function (){
//…
}
});[/code]
[code]module1.m1();[/code]
[code]module1._count = 5;[/code]
三、立即执行函数写法
[code]var module1 = (function(){
var _count = 0;
var m1 = function(){
//…
};
var m2 = function(){
//…
};
return {
m1 : m1,
m2 : m2
};
})();[/code]
[code]console.info(module1._count);//undefined[/code]
四、放大模式
[code]var module1 = (function(mod){
mod.m3 = function (){
//…
};
return mod;
})(module1);[/code]
五、宽放大模式(Loose augmentation)
[code]var module1 = (function (mod){
//…
return mod;
})(window.module1 || {});[/code]
六、输入全局变量
[code]var module1 = (function ($, YAHOO){
//…
})(jquery, YAHOO);[/code]
七、模块的规范
八、CommonJS
[code]var math = require(‘math’);[/code]
[code]var math = require(‘math’);
math.add(2,3);//5[/code]
九、浏览器环境
[code]var math = require(‘math’);
math.add(2, 3);[/code]
十、AMD
[code]require([module], callback);[/code]
[code]require([‘math’], function(math){
math.add(2, 3);
});[/code]
十一、为什么要用require.js?
[code]<script src=”1.js”></script>
<script src=”2.js”></script>
<script src=”3.js”></script>
<script src=”4.js”></script>
<script src=”5.js”></script>
<script src=”6.js”></script>[/code]
(1)实现js文件的异步加载,避免网页失去响应;
(2)管理模块之间的依赖性,便于代码的编写和维护;
十二、require.js的加载
[code]<script src=”js/require.js”></script>[/code]
[code]<script src=”js/require.js” defer async=”true” ></script>[/code]
[code]<script src=”js/require.js” data-main=”js/main”></script>[/code]
十三、主模块的写法
[code]//main.js
alert(“加载成功!”);[/code]
[code]//main.js
require([‘moduleA’, ‘moduleB’, ‘moduleC’], function (moduleA, moduleB, moduleC){
//some code here
});[/code]
[code]require([‘jquery’, ‘underscore’, ‘backbone’], function ($, _, Backbone){
//some code here
});[/code]
十四、模块的加载
[code]require.config({
paths:{
“jquery”: “jquery.min”,
“underscore”: “underscore.min”,
“backbone”: “backbone.min”
}
});[/code]
[code]require.config({
paths:{
“jquery”: “lib/jquery.min”,
“underscore”: “lib/underscore.min”,
“backbone”: “lib/backbone.min”
}
});[/code]
[code]require.config({
baseUrl: “js/lib”,
paths:{
“jquery”: “jquery.min”,
“underscore”: “underscore.min”,
“backbone”: “backbone.min”
}
});[/code]
[code]require.config({
paths:{
“jquery”: “https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
}
});[/code]
十五、AMD模块的写法
[code]//math.js
define(function(){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});[/code]
[code]//main.js
require([‘math’], function (math){
alert(math.add(1,1));
});[/code]
[code]define([‘myLib’], function(myLib){
function foo(){
myLib.doSomething();
}
return {
foo:foo
};
});[/code]
十六、加载非规范的模块
[code]require.config({
shim:{
‘underscore’:{
exports:’_’
},
‘backbone’: {
deps:[‘underscore’, ‘jquery’],
exports:’Backbone’
}
}
});[/code]
(1)exports值(输出的变量名),表明这个模块外部调用时的名称;
(2)deps数组,表明该模块的依赖性。
[code]shim:{
‘jquery.scroll’:{
deps:[‘jquery’],
exports:’jQuery.fn.scroll’
}
}[/code]
十七、require.js插件
[code]require([‘domready!’], function(doc){
//called once the DOM is ready
});[/code]
[code]define([
‘text!review.txt’,
‘image!cat.jpg’
],
function(review,cat){
console.log(review);
document.body.appendChild(cat);
}
);
前端模块化开发 教程|网站前端开发
评论前必须登录!
注册