回首萧瑟,残月挂角,孤草弄影。

  看了一下上一篇随笔的日期,距离上一篇日志又过去了许久。在这段时间中,我尽全力去拯救那间便利店,可惜到最后依然失败,这一次是所有的出路全部没有了,我也做了所有的努力。闲下来来了,补篇日志吧。

  今天想写的是js中的AMD规范。AMD,即Asynchronous Module Definition的缩写,它是前端代码大爆炸后,为了更好的管理js代码所做出的一种努力。它来源于commonjs,一个野心勃勃的组织。发展至今已经为许多著名的js库所使用。我最先接触它是在使用nodejs+express+jade进行web编辑的时候,后来一时兴趣又接触到了dojo,再然后jquery也开始使用AMD来组织代码。昨天在翻看园子里面js的文章的时候,又看到Sea.js这个代码库,看了一下,它是AMD的一个实践,这也是我写这篇日志的起因。

  AMD规范从名字来看,模块化和异步是他的核心。事物的发展是由需求驱动的,js的发展也一样。在前端的js大爆炸之后,js的代码量越来越大,问题也不断的出现—功能边界模糊,命名冲突,依赖混乱,代码冗余等等。AMD在功能模块话的基础上进化而来,用模块管理功能,用异步的方式加载模块。说了这么多,那么AMD的代码定义是什么呢?

  define([module-name?], [array-of-dependencies?], [module-factory-or-object])

就是上面的一行API。很简单的一行,实现起来也不难。我自己就仿照这个造过一个木轮子,思路如下:

  全局对象:$libs(object),require(function),模块函数块中要公开的对象全部悬挂于$libs上,使用require('module Name')获得接口;

   核心对象:module(moduleName,refFunc,refModules);

  js文件加载与通知(原生js,为了简单,没有使用addEventListener,使用=进行事件挂载)

    createScripts:function(moduleName){
var sc = document.createElement("script");
sc.setAttribute("type", "text/javascript");
sc.src = setting.getModulePath(moduleName);
sc.onload = sc.onreadystatechange = this.reached;
sc.onerror = this.error;
document.body.appendChild(sc);
}
reached:function(event){
var node = event?event.target:window.event.srcElement;
if(!node.readyState || node.readyState == "loaded" || node.readyState == "complete"){
mfMatrix.update(setting.getModuleName(node.getAttribute("src")),"success");
node.onload = node.onreadystatechange = null;
node.parentNode.removeChild(node);
}
}

  模块执行:executeModule(module),关键在于参数传入

function executeModule(module){
if(module.refModules.length == 0){
module.refFunc();
return;
} var prs = [];
var order = "module.refFunc(";
for(var i = 0;i!=module.refModules.length;i++){
prs.push(eval("require('"+module.refModules[i]+"')"));
order += "prs["+i+"]";
if(i < module.refModules.length - 1) paras+=',';
}
order +=")"; eval(order);
}
  上面也说了,这是一个木轮子,仅供参考,要想投入实用,还有一些细节要处理,比如模块名称与js文件名称的转换,js文件加载失败后的重新再次加载处理错误捕捉等等,都是应该考虑的问题。

js中的AMD规范的更多相关文章

  1. 浅析JS中的模块规范(CommonJS,AMD,CMD)////////////////////////zzzzzz

    浅析JS中的模块规范(CommonJS,AMD,CMD)   如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已.     ...

  2. JS中的模块规范(CommonJS,AMD,CMD)

    JS中的模块规范(CommonJS,AMD,CMD) 如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已. 现在就看看吧, ...

  3. JS 模块化 - 03 AMD 规范与 Require JS

    1 AMD 规范介绍 AMD 规范,全称 Asynchronous Module Definition,异步模块定义,模块之间的依赖可以被异步加载. AMD 规范由 Common JS 规范演进而来, ...

  4. 浅析JS中的模块规范(CommonJS,AMD,CMD)

    如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已. 现在就看看吧,这些规范到底是啥东西,干嘛的. 一.CommonJS ...

  5. 理解JS中的模块规范(CommonJS,AMD,CMD)

    随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做 ...

  6. 浅析JS中的模块规范AMD和CMD

    一.AMD AMD就只有一个接口:define(id?,dependencies?,factory); 它要在声明模块的时候制定所有的依赖(dep),并且还要当做形参传到factory中,像这样: d ...

  7. js模块化开发——AMD规范

    这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就 ...

  8. js中的命名规范

    在实际开发中规范的命名,不仅方便自己查看,理解变量的实际意义,而且在团队开发中也能提高开发效率. 下面将介绍javascript中的变量的命名规范: 1)首先,变量名要有实际意义,不建议使用单个的字母 ...

  9. JavaSript模块规范 - AMD规范与CMD规范介绍

    JavaSript模块化   在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?       模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题 ...

随机推荐

  1. CSS hack 如何区分所有IE浏览器和非IE浏览器

    网上方法很多,例如,测试后得出以下结论,多余的话不说了,直入主题: 1.所有的推理IE浏览器 正解:此写法仅仅被lE浏览器识别,非IE浏览器不识别. <!--[if IE]> <st ...

  2. 【百度地图API】北京周边7日游——图标按路线轨迹行动

    原文:[百度地图API]北京周边7日游--图标按路线轨迹行动 任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路.计划好路线后,就开始 ...

  3. [CLR via C#]5.4 对象哈希码和dynamic基元类型

    原文:[CLR via C#]5.4 对象哈希码和dynamic基元类型 FCL的设计者认为,如果能将任何对象的任何实例放到一个哈希表集合中,会带来很多好处.为此,System.Object提供了虚方 ...

  4. 整理Ruby相关的各种概念(rvm, gem, bundle, rake, rails等)

    转自:http://henter.me/post/ruby-rvm-gem-rake-bundle-rails.html Ruby 这个就不用多说了 RVM 用于帮你安装Ruby环境,帮你管理多个Ru ...

  5. hadoop 2.2.0集群安装

    相关阅读: hbase 0.98.1集群安装 本文将基于hadoop 2.2.0解说其在linux集群上的安装方法,并对一些重要的设置项进行解释,本文原文链接:http://blog.csdn.net ...

  6. 修改 dll

    由于没有源码,想改dll,就要依靠反汇编了. 输入 ildasm.exe 据说也可以直接 C:\Program Files\Microsoft SDKs\Windows\v7.0A\bin 找到该软件 ...

  7. TextView随键盘弹出上移高度

    很多时候我们都在为键盘遮挡了原本就不大的屏幕时而烦恼,特别是当用户处于编辑状态时,键盘下面的内容就看不见了,用户只能处于盲打状态了.现在有一种简单的解决办法,基本思路就是,添加通知.一直监听键盘事件, ...

  8. 多种语言socket编程集锦—win32

    原文 http://www.blogjava.net/huyi2006/articles/263831.html 借此地方整理以下socket编程的多种语言的实现,socket可以跨平台的通信,因此多 ...

  9. JS中实现A*算法寻路

    <html><head><title>use A* to find path...</title></head><body style ...

  10. PE文件结构(五岁以下儿童)基地搬迁

    PE文件结构(五岁以下儿童) 參考 书:<加密与解密> 视频:小甲鱼 解密系列 视频 基址重定位 链接器生成一个PE文件时,它会如果程序被装入时使用的默认ImageBase基地址(VC默认 ...