我的模块加载系统 v17的入门教程2
by 司徒正美
at 2012-08-30 16:04:00
original http://www.cnblogs.com/rubylouvre/archive/2012/08/30/2663759.html
第一节，我们聊到相对于当前目录用“./”，相对于父目录用“../”，相对于父父目录用“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.jsdefine("ccc",["$aaa"],function(a){ return 10+a})//ddd/ddd.jsdefine("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);})
本节完！