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

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

  今天想写的是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. Codeforces Round #243 (Div. 1)-A,B,C-D

    此CF真是可笑.. . 由于早晨7初始点,因此,要做好CF时间已经17没有休息一小时,加上中午5小时耐力赛. 心里很清楚.是第一个问题的时候,几乎被解读为寻求最大的领域和.然后找到一个水体,快速A降. ...

  2. 基于ip san的iscsi操作执行过程

    SAN它是storage area network(存储区域网络)速记,早期san光纤通道技术被用于.当迟到iscsi协议后出现,为了在这两者之间区分.它分IP SAN和FC SAN.FC SAN由于 ...

  3. python解析Yahoo的XML格式的天气预报,获取当天和近期几天的天气:

    下面是接口xml格式数据: <rss xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo=& ...

  4. struts2的Action该方法不能去

    最近做的一个特征,使用struts2,input标签内容,并与相应的内容背景的实体类,当提交方法,无法进入action该方法和程序没有报错被,检验N通方法还没有找到,查找终于找到了,它是input标签 ...

  5. HDU 4052 Adding New Machine(矩形面积并)

    Adding New Machine Problem Description Incredible Crazily Progressing Company (ICPC) suffered a lot ...

  6. BZOJ 2120 色彩数 暴力

    标题效果:给定一个序列,两种操作: 1.询[l,r]间隔多少个不同的号码 2.单点变化 n,m<=1W 树盖树?树董事长?因此不必! 暴力之前,这个问题2s,不想复杂!适当的水太! 离散化一下! ...

  7. tomcat的webapps文件夹下放更新后的项目就訪问不了

    昨天给同事更新完程序,同事说更新后的程序訪问不了.它曾经的程序叫tj52,更新后的程序叫webapp.也就是tomcat的文件夹有两个文件架,一个叫webapp,一个叫tj52.最后另外一同事给了解决 ...

  8. 图片alpha blending的计算

    转载时请注明出处和作者联系方式:http://blog.csdn.net/mimepp作者联系方式:YU TAO <yut616 at sohu dot com> 一幅彩色图像的每一个像素 ...

  9. 在地图中使用Java

    Map以按键/数值对的形式存储数据,和数组很类似,在数组中存在的索引,它们本身也是对象.       Map的接口       Map---实现Map       Map.Entry--Map的内部类 ...

  10. Python 2.7.3 Time与DateTime格式化

    import time import datetime class TimeX: '''时间工具,目前用于格式化时间''' @staticmethod def GetLocalTimeString_T ...