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

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

  今天想写的是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. DeviceIOControl具体解释-各个击破

    DeviceIoControl这个api我们用的不多,可是非常重要,有时会帮助我们实现一些特别的需求, 如获取硬件设备信息.与硬件设备通信(读写数据)等,对比msdn,以下我们详解一下这个api的使用 ...

  2. android USB OTG功能实现

    一个.检查HW概要,确认是否支持OTG特征(vbus无论是动力,IDDIG pin连接是否正确) 两.如果HW确认支持OTG特征,然后根据以下方法被打开USB OTG功能及实现山: 如何打开USB O ...

  3. WebForm MapPageRoute 路由配置

    WebForm MapPageRoute 路由配置   MapPageRoute 应该是 ASP.NET 4.0 中的东西,但现在我是第一次使用它,使用场景是:MVC 混合使用 WebForm,然后对 ...

  4. javascript通过数日两个日期之间的比较分离

    $(function () {  var starttime = transdate("2014-09-30 15:53:00");  var endtime = transdat ...

  5. Kaggle入门——使用scikit-learn解决DigitRecognition问题

    Kaggle入门--使用scikit-learn解决DigitRecognition问题 @author: wepon @blog: http://blog.csdn.net/u012162613 1 ...

  6. dom01

    事件冒泡:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). 事件捕获:即不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件. ...

  7. AppiumDriver升级到2.0.0版本引发的问题--Cannot instantiate the type AppiumDriver

    1. 问题描述和起因 在使用Appium1.7.0及其以下版本的时候,我们可以直接使用如下代码来创建一个AppiumDriver实例进行对安卓设备的操作. driver = new AndroidDr ...

  8. 让Windows 8 / 8.1 以及 Windows Server 2012 / 2012 R2的桌面,显示我的电脑图标

    cmd ->  运行[rundll32.exe shell32.dll,Control_RunDLL desk.cpl,,0],然后勾上[我的电脑]即可.

  9. AutoCAD 2012安装错误,与.net framework (1603错误)以及ms2005vc++的问题。

    首先,这是AutoCAD2012的问题.因为,如果一台计算机已经安装了这些软件,AutoCAD是无法识别出来,因此AutoCAD就只能报错.正确的做法是:如果检测到这些软件已经被安装,则需要忽略这些问 ...

  10. jQuery圆形统计图实战开发

    今天我给大家介绍一款圆形统计图circliful,它基于HTML5的画布和jQuery,无需使用图像轻松实现圆形统计图,而且有很多属性设置,使用起来非常方便. 首先我们需要将jquery库文件和jqu ...