我的模块加载系统 v17的入门教程2
第一节，我们聊到相对于当前目录用“./”，相对于父目录用“”，相对于父父目录用“http://www.cnblogs.com/”，如果是远程文件直接用URL。其实模块标识还有一种是相对于根目录，这特指是mass.js所在的目录。当然你可以通过配置手段修改根目录，但不建议这样干。比如aaa.js与mass.js是会于同一目录,用么沿着第一节的例子:
<!DOCTYPE HTML>
< html >
< head >
< title >AMD</ title >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >
< script src = "mass.js" >
</ script >
< script >
//相当于$.require("./aaa", fn),只有模块与mass.js是位于同一模块才能这样干
$.require("aaa", function(a,b){
alert(a+b)
})
</ script >
</ head >
< body >
< h2 >欢迎加入mass Framework团队！</ h2 >
</ body >
</ html >
别名机制
比如一个项目,a页面引用N个JS文件,b页面要引用N个js文件,那么当我们用$.require调用它们可能很麻烦,不断地通过"./",""来定位到目标JS文件中。这时我们可能用一个专门的JS文件对这些模块进行别名，方便引用。
比如我们在第一节提到aaa.js, bbb.js, ccc.js, ddd.js，我们用一个modules保存它们的别名.
//$.core.base 为mass.js的目录
$.config({
alias:{
$aaa: $.core.base + "aaa.js",
$bbb: $.core.base + "bbb.js",
$ccc: $.core.base + "ccc.js",
$ddd: $.core.base + "ddd/ddd.js"
}
})
然后在页面上这样引用ddd.js模块
<!DOCTYPE HTML>
< html >
< head >
< title >AMD</ title >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >
< script src = "mass.js" >
</ script >
< script src = "modules.js" >
</ script >
< script >
//相当于$.require("./aaa", fn),只有模块与mass.js是位于同一模块才能这样干
$.require("$ddd", function(d){
alert(d)
})
</ script >
</ head >
< body >
< h2 >欢迎加入mass Framework团队！</ h2 >
</ body >
</ html >
相对应的,这些JS模块也可以改为
//aaa.js 没有依赖不用改
define( "aaa" , function (){
return 1
})
//bbb.js 没有依赖不用改
define( "bbb" , function (){
return 2
});
//ccc.js
define( "ccc" ,[ "$aaa" ], function (a){
return 10+a
})
//ddd/ddd.js
define( "ddd" ,[ "$ddd" ], function (c){
return c+100
});
那么它就会正确弹出111!
万一有一天,我们把ddd.js移到其他目录,如变成http://xdsfsd/sadfs/ddd.js,那么我们只需要改modules目录就行了!不用改$.require,也不用改ddd的依赖列表!
//$.core.base 为mass.js的目录
$.config({
alias:{
$aaa: $.core.base + "aaa.js" ,
$bbb: $.core.base + "bbb.js" ,
$ccc: $.core.base + "ccc.js" ,
$ddd: " http://xdsfsd/sadfs/ddd.js "
}
})
好了,我们再来看看jQuery与mass.js的使用。jQuery虽说是加了几行支持AMD，其实非常鸡肋！不过jQuery的多库共存做得很不错！我们只需要在外面包一层就能用了。到 jQuery官网 下载jQuery源码，无论是压缩版还是注释版。新建一个jquery.js文件，与mass.js同一目录，内容如下：
define( "jquery" , function (){
//*********jquery源码*********
return jQuery.noConflict( true );
})
<!DOCTYPE HTML>
< html >
< head >
< title >AMD</ title >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >
< script src = "mass.js" >
</ script >
< script >
$.require("jquery", function(jQuery){
$.log(jQuery.fn.jquery);//这是jquery
$.log($.mass); //这是mass.js
})
setTimeout(function(){
$.log($)//这也是mass.js，jquery没有污染都外边的
},1000)
</ script >
</ head >
< body >
</ body >
</ html >
我们打开firebug可以看到以下日志：
jquery插件的使用，也是外包一层
( function ($)
$.fn.overlabel = function () {
this .each( function (index) {
var label = $( this ); var field;
var id = this .htmlFor || label.attr( 'for' );
if (id && (field = document.getElementById(id))) {
var control = $(field);
label.addClass( "overlabel-apply" );
if (field.value !== '' ) {
label.css( "text-indent" , "-1000px" );
}
control.focus( function () {label.css( "text-indent" , "-1000px" );}).blur( function () {
if ( this .value === '' ) {
label.css( "text-indent" , "0px" );
}
});
label.click( function () {
var label = $( this ); var field;
var id = this .htmlFor || label.attr( 'for' );
if (id && (field = document.getElementById(id))) {
field.focus();
}
});
}
});
};
})(jQuery)
改造为
define( "jquery_overlabel" ,[ "./jquery" ], function (jQuery){
( function ($){
//************
})(jQuery);
})
本节完！
标签: javascript , mass
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于我的模块加载系统 v17的入门教程2的详细内容...