第一节,我们聊到相对于当前目录用“./”,相对于父目录用“../”,相对于父父目录用“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" , } }) |
好了,我们再来看看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