我的模块加载系统 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);
})

本节完！

我的模块加载系统 v17的入门教程2相关推荐

未能加载文件或程序集rsy3_abp vnext2.0之核心组件模块加载系统源码解析
abp vnext是abp官方在abp的基础之上构建的微服务架构,说实话,看完核心组件源码的时候,很兴奋,整个框架将组件化的细想运用的很好,真的超级解耦.老版整个框架依赖Castle的问题,vnext ...
abp vnext2.0之核心组件模块加载系统源码解析
abp vnext是abp官方在abp的基础之上构建的微服务架构,说实话,看完核心组件源码的时候,很兴奋,整个框架将组件化的细想运用的很好,真的超级解耦.老版整个框架依赖Castle的问题,vnext ...
JS框架设计之加载器所在路径的探知一模块加载系统
1.要加载一个模块,我们需要一个URL作为加载地址,一个script作为加载媒介,但用户在require是都用ID,我们需要一个将ID转换为URL的方法,思路很简单,强加个约定,URL的合成规则是为: ...
Linux模块加载流程及如何让系统开机自动加载模块
Linux模块加载 Linux系统加载哪些内核模块,和配置文件有关系. 模块保存在/lib/modules/下. 使用/etc/modules-load.d/来配置系统启动时加载哪些模块. 使用/et ...
64位操作系统注册ocx控件失败，提示：模块加载失败请确保该二进制存储在指定路径中。
64位操作系统注册ocx控件失败,提示:模块加载失败请确保该二进制存储在指定路径中我的解决方案: 1.找到位于windows下的syswow64文件夹下的cmd 2.并拷贝需注册的ocx文件到sys ...
FreeSwitch 的初始化及其模块加载过程
FS 主函数main() Freeswitch的主函数是在文件switch.c中定义的,该文件的260行是整个程序的入口,主函数主要完成的功能是包括,命令行解析,初始化apr库,构建全局内存池,模块加 ...
模块加载过程代码分析1
一.概述模块是作为ELF对象文件存放在文件系统中的,并通过执行insmod程序链接到内核中.对于每个模块,系统都要分配一个包含以下数据结构的内存区. 一个module对象,表示模块名的一个以null ...
Node.js中模块加载机制
Node.js中模块加载机制模块查找规则-当模块拥有路径但没有后缀时 1. require方法根据模块路径查找模块,如果是完整路径,直接引入模块. 2. 如果模块后缀省略,先找同名JS文件再找同名J ...
php入门篇-------PHPCMS 入口文件，自动加载系统函数和URL规则
这里主要分析PHPCMS的入口文件和系统自动加载配置文件和系统函数,还有URL的规则: 首先是入口文件分析: index.php 2,框架主文件分析:(这里主要分析加载配置文件和公共函数,还有URL规 ...

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

别名机制

我的模块加载系统 v17的入门教程2相关推荐

最新文章

热门文章