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

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

  今天想写的是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. linux_vim_快捷键

    1.vim ~/.vimrc 进入配置文件 如果不知道vimrc文件在哪,可使用 :scriptnames 来查看 set nu #行号 set tabstop=4 #一个tab为4个空格长度 set ...

  2. java_JFrame_demo

    不要见笑,cs基本入行很少做 留个demo备忘 /* * Copyright (c) 2014-2024 . All Rights Reserved. * * This software is the ...

  3. HDU1325 Is It A Tree? 【并查集】

    Is It A Tree? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  4. 编程算法 - 切割排序 代码(C)

    切割排序 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 排序切割, 把一个数组分为, 大于k\小于k\等于k的三个部分. 能够使用高速排序的Parti ...

  5. LSM树存储模型

    ----<大规模分布式存储系统:原理解析与架构实战>读书笔记 之前研究了Bitcask存储模型,今天来看看LSM存储模型,两者尽管同属于基于键值的日志型存储模型.可是Bitcask使用哈希 ...

  6. Php设计模式(三):行为型模式part2

    原文详见:http://www.ucai.cn/blogdetail/7023?mid=1&f=5 可以在线运行查看效果哦! <接上文> 5.中介者模式(Mediator) : 用 ...

  7. C++内存泄露的有效预防方法:谁使用,谁删除 (1.2)

    内存泄露就是new出来的东西没有delete,我们能够这样:创建动态对象的人虽然使用new来创建对象:使用此对象的人负责释放此内存块. 比如:我和他人共享一个消息队列,他人将消息(new出来的对象)放 ...

  8. 超高性能的json序列化

    超高性能的json序列化之MVC中使用Json.Net 超高性能的json序列化之MVC中使用Json.Net 先不废话,直接上代码 Asp.net MVC自带Json序列化 1 /// <su ...

  9. 学习Swift写iOS?那写安卓和WinPhone呢?请看一石三鸟终极解决方案 - Silver!

    首先,你必须知道的是,Silver是苹果最新编程语言Swift的免费实现版本. 通过Silver,你可以使用Swift语言来编写.NET,Java,安卓和Cocoa APIs.你甚至可以在这些平台上共 ...

  10. 上海及周边地区产品技术创业QQ群:98905958

    创业是一件骄傲的事,每一个行业里最棒人才都应该创业或參与创业或以一个创业者的心态进行职业远景规划: 创业是一件寻常的事,跟上班打工一样寻常,没有什么必须的前置条件才干够開始,也没有什么前置条件能保证我 ...