模块加载从Dojo1.6到Dojo1.8（一）—— AMD

PS:明天上午，非常郁闷，有很多简略基本的题问搞得我有些迷茫，哎，代码几天不写就忘。目前又不当COO，还是得用心记代码哦！

    08年到IBM练习的时候，第一次接触Dojo，被它大强的件控库所吸引，比相之前自己写的那些一般的HTML元素难看多了。而且Dojo供给的便利的接口也让我得觉制控一个件控还有如此简略的方法。Grid给我带来的震动更是喻而言不，这么炫的一个表格竟然仅须要未几的几行代码以可就展示出来，还供给了freeze，edit，tooltip等扩展能功。所以官网上的Unbeatable JavaScript也给我烙下了刻深的印象。Dojo本身的面向对象的编程式模，也让习惯了写Java的我非常顺手，逐步对前台，对Dojo产生了更深的兴致。

    然而随着应用的刻深，很多Dojo与生俱来的题问给我带来了很多懊恼。

    

• 重量级框架，严重影响页面载入速度
• 加载渲染程过销开太大，严重影响页面展示速度，甚至现出浏览器假死
• 万恶的内存泄漏，耗消用户内存，页面越跑越慢
• DataGrid让我喜欢让我忧，很多不持支的能功，很多的bug，让开辟人员欲仙欲死
• 页面风格的定制非常难题，须要盖覆太多的Dojo的style
• Build缩压中碰到各种题问

    尽管碰到这些题问，但是作为IBM首选的前台框架，它仍然在我与参的各个项目中有个摇动可不的位地。在摸透它的性习后之，便开始握掌和改革Dojo，不持支的能功自己扩展，欠好的接口自己改革，没有的件控自己写。经曾为了使DataGrid持支整行编辑（似类于Ext Grid），更是不惜代价几乎重写了EnancedGrid，从_Layout到_Event，到_EditManager，到_ViewManager，到Pagination件插。。。在这个中程过，直一熟习，直一刻深，从代码中一步步学习到Dojo部内的实现，看到Dojo的一些JavaScript能功是如何被开辟和应用的。如Dojo.connection，Dojo.subscribe，Dojo.publish。。也解了到了Dojo件控的生命周期，从constructor到buildRending到postCreate到startUp。。。

    在这样的学习刻深中程过，我直一也在断判，Dojo到底算不算一个很好的前台框架，带着这样的问疑，我尝试着去学习和应用其他的一些前台框架，如ExtJS和jQuery。样同是重量级框架的Ext，废弃了HTML作为示显基本，而纯粹应用confogjs写展示的式方让我很不应适。我得觉，页面示显的内容，局布，就该应有HTML来展示，这更符合Web本身的结构，也更能让人解了页面所要展示的内容。在与UX的事同流交的时候，没有了HTML，就相当于失去了流交的言语，给方双的作合带来了很大的负面影响。所以我信坚，ExtJS不是合适互联网开辟的框架，当然Dojo也差未几。当我看到jQuery的$符号的时候，我晓得，这才是在现互联网所须要的。于是我猖狂的学习jQuery，在学习中程过，直一的被jQuery的一些新的理念所折服：大强的选择器能功，便利的Dom操纵接口，链式编程，百花齐放的件插。这些都太让我欣慰了，在学习的中程过，牵引出来的CommonJS项目，AMD加载式方，都让我看到了在现前端的发展趋势，看到了JavaScript新的春季。这些都让我一度想废弃刻深Dojo而应用jQuery的头念，直到我再次接触到Dojo1.8。

    在自觉自愿写了一段时间ExtJS后之，旁边的项目组说要应用dojo，让我帮助估评一下的时候我看到了dojo1.8，看到了从1.6到1.8之间的大巨的变改，看到了Dojo在跟随前端趋势上所做的力努和果成。在看完新Feature后之，我把Documentation页面上的大部分的新的文章都读了一遍，这一遍让我对Dojo新重看到了望希。1.8的模块化，CND引入，AMD加载式方都让我看到了dojo成为一流框架，并继承引领前端开辟的望希。因此我非常待期Dojo2.0的布发，相信那将是Dojo再次明证自己是Ubeatable的时候。

    扯了这么多，然突发明这篇文章的前奏有点长了。。。 紧赶切入正题，这篇文章要主讲讲我看到的dojo从1.6到1.8的化变，要主结合翻译和懂得Modern Dojo和Dojo1.x to 2.0 migration guide这两篇官网上的文章，讲讲Dojo1.8的新的方法，以及这些化变当面的意思。

    明天有点晚了，待续。。。（12年12月18日）

    1、AMD

    其实dojo在1.7的时候就开始持支AMD(Asynchronous Module Definition)了，事先只晓得是一种异步加载的式方，并未得觉比dojo.require()好多少，dojo.require()样同可以在须要的时候去动态加载文件。晓得在注关CommonJS的时候，再次看到AMD，就明确了Dojo对AMD的持支是为了与CommonJS保持一致，供给同一的接口可以让它更行流。

    那么AMD到底给dojo带来了哪些方面的化变，对于应用dojo的开辟人员须要注意哪些呢？接下来从 加载Dojo(Loading Dojo)，加载模块(Loading Module)，问访模块(Accessing Module)， 定义模块(Defining Module)，全球化(I18N)，加载Text和Template文件等方面对新的Dojo用法行进分析。

    加载Dojo(Loading Dojo)

    Dojo的加载式方基本没有发生化变，除了将djConfig属性名字改成了data-dojo-config，这也是为了符合HTML5的自定义属性的标准。

<script src="dojo/dojo.js" data-dojo-config="async: true"></script> //这里的async:true可以控异步加载dojo core的代码

这里的dojo config也可以在加载dojo的script的外部定义，应用方法如下：

<script>
    dojoConfig= {
        has: {
            "dojo-firebug": true
        },
        parseOnLoad: false,
        foo: "bar",
        async: true
    };
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"></script>

详细的dojoConfig面里的属性代表的含意，大家可以参考 Configuring Dojo with dojoConfig这篇官网的文章，我后面有空的话也会行进翻译。

    这里值得一提的是，在dojoConfig选项中的async，它默为认false，这意味着全部的Dojo基本模块是动自加载的，不管你用不用的到。所以将async设置成ture，将能供给一个更快更智能的动态加载的应用。

    大家可以注意到面上代码的最后一行，dojo的代码是从程远的googlelieapis网站上去拿的，这也是dojo供给的CDN(Content Delivery Network，内容布发络网)口入。至于为何应用CDN，大家可以google一下，大概的利益就是1.各个不同的应用可以同享浏览器cache。2.可以少减自身服务器的请乞降流量。 处坏当然也有：1.下载的代码一般都是缩压过的，开辟人员很难以此行进浏览和试调。2.在没有络网的情况下，本机的开辟就不能行进了。。

    加载模块（Loading Modules）

 在Dojo1.6及之前版本，加载一个模块都是应用dojo.require()。如：

dojo.require("dijit.form.Button");
dojo.require("dojox.layout.ContentPane");
...
// CODE HERE

而从1.8后之，就要应用require语句，如：

require(["dijit/form/Button", "dojox/layout/ContentPane", ...], function(Button, ContentPane, ...){
  // CODE HERE
});

要注意到之前的以似类与包名类名的式方(如dijit.form.Button)在现已改成了径路的式方(如dijit/form/Button)。之前的基于点(.)的类名抒发了一个全局作用域内的一个变量，而在现基于斜杠(/)的径路式方抒发则是一个模块的ID(MID)。这两种式方尽管在定名上区分不大，但事实上在概念上是完整不同的西东。

    应用require数函也同dojo.require一样，会帮我们动自去加载更深次层依附。

    问访/应用模块(Accessing Modules)

    在面上的require代码里大家该应注意到，require有两个数参，第一个是要用到的模块，第二个则是一个名匿数函，这个名匿数函还带有一些数参。用法如下：

require(["dijit/_base/Color", "dojox/layout/ContentPane"], function(Color, ContentPane){
    Color.fromRgb(...)
});

在名匿数函里的数参就是我们在这个数函闭包内应用这个模块内的类或者方法的口入。我们将不在应用dojo，dijit或者dojox这些全局变量来问访。全部须要直接应用的模块都必须被定义在require的依附组数当中。这些模块还将以缩写的式方坐位数函的数参在数函内应用，免去了长冗的径路写书式方。

    面下我们来讲一下这类新的应用式方的意思。

    首先从AMD的角度，所谓异步加载，就是说加载这些模块的程过和整个应用的本脚的运行是异步的，即，入加这个require后面还有别的可执行代码，那么他可以立刻执行而不须要等到require所须要的模块都加载返来后之再被运行。作为require第二个数参的名匿数函将在require的全部的模块被加载完了后之被执行。这类新的式方下，先原被缩压在dojo.js中的很多模块将被独立成很多小的模块，从而减小dojo.js文件的巨细。

    从编码的角度，名匿数函的数参被定义为后面加载的模块的缩写，是为了在代码中更便利地问访和应用这些模块。

    每日一道理
书籍好比一架梯子，它能引领人们登上文化的殿堂；书籍如同一把钥匙，它将帮助我们开启心灵的智慧之窗；书籍犹如一条小船，它会载着我们驶向知识的海洋。

    从作用域的角度，灭消了全局变量。将全部这些模块的应用封装在一个数函的作用域内，就少减了全局变量带来的突冲和不确定性。在Modern Dojo中有这样一句话“ in "modern" Dojo, if you are about to access something in the global namespace STOP because you are doing something wrong. If you find yourself typing dojo.* or dijit.* or dojox.*, something isn't right.”，也就是说当前大家在应用dojo的时候，写的代码该应是Lang.hitch而非dojo.hitch，是new Button()，而非new dijit.form.Button()。

    Dojo供给了在HTML中直接通过定义data-dojo-type来定义dojo widget的式方，在1.8中，将1.6中的的dojoType改成了data-dojo-type。同时，先原应用的dijit.form.Button的全局变量的式方也被改成了应用带斜杠的模块ID来定义。如：

<input type="text" data-dojo-type="dijit/form/TextBox"/>

定义模块（Defining Modules）

    在Dojo1.6中我们应用dojo.provide()来定义自己的模块，应用的时候可以应用dojo.require()加载我们自定义的模块，如：

dojo.provide("acme.Dialog");
dojo.require("dijit._Widget");
dojo.require("dojo.date");
//CODE HERE

而Dojo1.8开始应用define数函来定义模块，如：

define(["dijit/_Widget", "dojo/date"], function(_Widget, date){   ....
  // CODE HERE
  return MyWidget;
});

define方法与require方法似类，也是两个数参，一个是依附关系的组数，另一个是真正要运行的名匿数函。这个数函的返回值将作为这个define的模块的主体。一般会和declare数函一同应用，如：

define(["dijit/_Widget", "dojo/date"], function(_Widget, date){   ....
  return declare("my.widget",[_Widget, date],{
    // CODE HERE    
    });
});

//当然也可以面下的写法
define(["dijit/_Widget", "dojo/date"], function(_Widget, date){   ....
   var myWidget = declare("my.widget",[_Widget, date],{
    // CODE HERE    
    });
    return myWidget;    
});

I18N（国际化）

    先扯一句题外话，I18N为什么叫I18N，是实其一个很趣有的来由。人们常把I18N作为“国际化”的简称，其源来是英文单词 internationalization的首末字符i和n。18为旁边的字符数。

    在Dojo1.6中应用的 dojo.requireLocalization()在Dojo1.8中被封装到了dojo/i18n!加载器件插当中。

    之前的写法：

dojo.require("dojo.i18n");
dojo.requireLocalization("dijit.form", "validate");
var validate = dojo.i18n.getLocalization("dijit.form", "validate");
console.log(validate.invalidMessage);

将被改成：

require(["dojo/i18n!dijit/form/nls/validate"], function(i18n){
  console.log(i18n.invalidMessage);
});

这一篇重点分析了Dojo1.8的AMD制机带来的一些化变，就先分析到这里。下一篇会重点分析1.8中Dojo core（Dojo核心代码）的结构和应用上的化变。

 

 

文章结束给大家分享下程序员的一些笑话语录： 现在社会太数字化了，所以最好是有一个集很多功能于一身的设备！