我的模块加载系统 v17的入门教程2

最新推荐文章于 2025-09-06 08:01:57 发布

转载最新推荐文章于 2025-09-06 08:01:57 发布 · 110 阅读

文章标签：

本文探讨了AMD模块化机制及其与jQuery的整合方法，包括模块引用、别名机制和与mass.js的协同工作。重点介绍了如何通过配置实现模块路径的灵活管理，并通过实例展示了如何简化模块引入过程，以及如何利用别名机制方便地引用多个JS文件。同时，通过整合jQuery源码，演示了如何在外层包裹实现多库共存，确保不同库之间的互不影响。

第一节，我们聊到相对于当前目录用“./”，相对于父目录用“../”，相对于父父目录用“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);
})

本节完！