构建微型dojo amd loader

最新推荐文章于 2025-09-07 21:17:08 发布

weixin_30565327

最新推荐文章于 2025-09-07 21:17:08 发布

阅读量96

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/blablabird/archive/2012/07/30/2615212.html

本文探讨了JavaScript模块化技术中的AMD规范，并介绍了遵循该规范的Dojo框架如何实现超小型加载器，使得加载速度更快，体积更小。

最近研究javascript的模块化技术，从而了解到这项努力已经比较火热。、

js模块从物理上看，就是一个js文件。但与普通的js文件又不同，模块文件要求遵照模块化规范来编写。模块化规范有N种，目前业界最被认可的web前端模块化规范是AMD(Asynchronous Module Definition)，这儿有比较好的介绍http://www.cnblogs.com/happyPawpaw/archive/2012/05/31/2528864.htm l，还有这https://github.com/amdjs/amdjs-api/wiki/AMD

目前国内比较火的是SeaJS，作者是支付宝的“玉伯”，可看这里了解详情：http://lifesinger.iteye.com。不过SeaJS声称遵循一种名为“CMD(Common Module Definition)”的规范，此规范也被CommonJS列为模块化草案之一，又称为“Modules/Wrappings”。玉伯及其支持者相信CMD在其目标领域优于AMD。

但是世界上支持CMD规范的除了SeaJS，只有一个名为FlyScript的项目，而且已经关闭。并且像dojo、jQuery、backbone、MooTools、XStyle等框架都直接或很容易的对AMD提供直接或间接的支持。因此可以说目前AMD规范是业界实事上的主导规范。

支持AMD规范的模块加载器有requirejs、curljs等。

早在dojo 1.6时，它就支持AMD规范，在新版本中，dojo声称它的微内核可以做到“极小并且快速”(Extremely Small and Fast)。dojo 1.7重构了自身为一些相互独立的模块集合，这些模块可以被dojo新的轻量级AMD加载器所加载。从此，dojo的各个模块可以根据需要来自由加载，并且非常快速。它同样完全遵循AMD规范，它完全因此它引起了我的兴趣！

dojo声称它的nano core可以做到只有3.8kb(compressed & gzipped)。但是我们下载的dojo release或src的dojo.js都有好几十k，经过压缩后也有23k+。

后来经过研究发现，要基于dojo-release-src及dojo build system(http://dojotoolkit.org/reference-guide/1.7/build/)。能够做到这种程度的代码构建及简化还要感谢has.js框架(http://hasjs.org/)在dojo中的应用。在构建的过程中，需要配置使用google的closure，同时应用合适的staticHasFeatures(配置给has.js用)。

构建nano loader的profile如下，摘自https://gist.github.com/3163114

var profile = (function(){
    return {
        layerOptimize: "closure",
        releaseDir: "http://www.cnblogs.com/../release",

        packages:[{
            name:"dojo",
            location:"http://www.cnblogs.com/../dojo"
        }],

        defaultConfig:{
            hasCache:{
                'dojo-built': 1,
                'dojo-loader': 1,
                'dom': 1,
                'host-browser': 1,
                "config-selectorEngine": "lite"
            },
            async:1
        },

        dojoBootText:"require.boot && require.apply(null, require.boot);",

        staticHasFeatures:{
            'config-dojo-loader-catches': 0,
            'config-tlmSiblingOfDojo': 0,
            'dojo-log-api': 0,
            'dojo-sync-loader': 0,
            'dojo-timeout-api': 0,
            'dojo-sniff': 0,
            'dojo-cdn': 0,
            'dojo-loader-eval-hint-url': 1,
            'config-stripStrict': 0,
            'ie-event-behavior': 0,
            'dojo-config-api': 0
        },

        layers: {
            "dojo/dojo": {
                include: [],
                customBase: 1
            }
        }
    };
})();