我的模块加载系统 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); })本節完！
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的我的模块加载系统 v17的入门教程2的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 利用rpm包搭建lamp环境及论坛的创建
- 下一篇： 腾讯微博Android客户端开发——OA