js模块化方案【转】

(function(){
    var CENTER = new EvtCenter();
    var Loaded={};
    var Modules={};
    function loadScript(name,url){
        if(!(name in Loaded)){
            Loaded[name]=!0;
            var js=document.createElement("script");
            js.src=url;
            document.head.appendChild(js);
        }
    }

    function require(name){return Modules[name]}
    function exports(obj){
        var name=this.name;
        this.exports=obj;
        if(name in Modules){
            for(var key in obj){
                Modules[name]=obj[key];
            }
        }else{
            Modules[name]=obj;
        }
        this.trigger(CENTER,"load");
    }

    function Module(name,factory){
        var self = this;
        if(!(self instanceof Module)) return new Module(name,factory);
        if(factory===undefined){factory=name;name=factory.name}
        self.name = name||"anonymous";
        self.factory=factory;
        self.inited=false;
        Loaded[self.name]=!0;
        self.process();
        if(self.depends){
            self.on(CENTER,"load",function(e){
                if((!self.inited)&&(self.depends[e.sender.name])){
                    self.check()&&self.init();
                }
            });
        }else{
            setTimeout(function(){
                self.init();
            },0)
        }
    }
    Eventable(Module);
    Module.prototype.init=function(){
        this.inited=true;
        this.factory(require.bind(this),exports.bind(this));
        if(!/exports\(/.test(this.txt)){
            Modules[this.name]=null;
            this.trigger(CENTER,"load");
        }
        delete this.txt;
    }
    Module.prototype.check=function(){
        var k,flag=true;
        for(k in this.depends){
            if(!(k in Modules)){
                flag=false;
                break;
            }
        }
        return flag;
    }
    Module.prototype.process=function(){
        var txt,url,name,i,list,tmp,reg = /require\(([^\)]+)\)/;
        this.txt=this.factory.toString();
        list=this.txt.split(/\r?\n/);
        for(i=0,l=list.length;i<l;i++){
            txt=list[i];
            if(reg.test(txt)){
                tmp = reg.exec(txt)[1].replace(/^\s*|\s*$/g,‘‘).split(/\s*,\s*/);
                url = tmp[1]&&(tmp[1].replace(/‘|"/g,‘‘));
                name= tmp[0].replace(/‘|"/g,‘‘);
                if(url&&!/\.js$/.test(url))url=url+‘.js‘;
                if(!(name in Loaded) && url) setTimeout(function(){loadScript(name,url)},0);
                if(!this.depends) this.depends={};
                this.depends[name]=!0;
            }
        }
    }

    window.Module=Module;
})();//module

使用简单的依赖预处理(无法辨别是否在注释或者字符串中)

转载自:http://www.cnblogs.com/ss0102113/p/6114485.html

时间: 2024-11-04 21:51:20

js模块化方案【转】的相关文章

前端模块化方案:CommonJS/AMD/CMD/ES6规范

模块化的开发方式可以提高代码复用率,方便进行代码的管理.通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数.目前流行的js模块化规范有CommonJS.AMD.CMD以及ES6的模块系统.前端模块化的演进过程可以看看阮一峰老师的文章.本文主要介绍各规范下的模块化实现方式. 一.CommonJS Node.js是commonJS规范的主要实践者,它有四个重要的环境变量为模块化的实现提供支持:module.exports.require.global.实际使用时,用module.e

JS 模块化和打包方案收集

1.这里想讨论的是拆分规则,不是在问哪个工具怎么使用.2.这里没有在想找正确答案,因为感觉这个问题要结合具体业务场景. 随着项目开发越来越大,一开始代码全打包到一个文件的方式,让文件越来越大,接下来要做拆分,可具体的拆分规则又不是很熟悉,或者说,我没有一个很好的方案,所以想到这是一个值得讨论的话题,想提问的形式拿出来,请各位大神有这方面接触的分享一下自己的经验. 这个问题有一定局限性,因为不同的业务场景,可能拆分方式还有不同,所以,可否想讨论的朋友能把具体的业务场景细说一下,再结合具体业务场景给

JS模块化历程

这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生与变迁,展望ES6模块化标准的未来.经历过这段历史的人或许会感到沧桑,没经历过的人也应该知道这段历史. 一.无模块时代 在ajax还未提出之前,JS还主要用来在网页上进行表单校验.实现简单的动画效果等等,你可以回想一下那个网页上到处有公告块飘来飘去的时代. 这个时候并没有前端工程师,服务端工程师只需在页面上随便写写js就能搞定需求.那个时候的前端代码大概像这样: if(xx){ //....... } else{ //xxxxxx

前端性能优化-常见的模块化方案

兼容各种加载规范 常见的模块化方案有:AMD.CMD.UMD.ES6 实现异步加载依赖模块,提前加载(AMD)Node.js采用了这个规范(CommonJS)关键词:define()SeaJS(CMD) (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD define(['jquery', 'underscore'], factory); } else if (typeof

关于js模块化历程的长长的流水账

无模块时代 在ajax还未提出之前,js还只是一种“玩具语言”,由Brendan Eich花了不到十天时间发明,用来在网页上进行表单校验.实现简单的动画效果等等,你可以回想一下那个网页上到处有公告块飘来飘去的时代. 这个时候并没有前端工程师,服务端工程师只需在页面上随便写写js就能搞定需求.那个时候的前端代码大概像这样: if(xx){ //.......} else{ //xxxxxxxxxxx} for(var i=0; i<10; i++){ //........} element.onc

JS模块化进程

js的模块化进程 现在前端技术日新月异,对于同一个问题痛点,各个时段有各自的解决方案,这就带来了很大差异.今天我就打算梳理js模块化的历史进程,讲一讲这些方案要做什么,怎么做. js模块化进程的起因 现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包.当一个项目开发的越来越复杂的时候,你会遇到一些问题:命名冲突(变量和函数命名可能相同),文件依赖(引入外部的文件数目.顺序问题)等. javascript发展的越来越快,超过了它产生时候的自我定位.这

js 模块化历程

作者:吕大豹 网址:http://www.cnblogs.com/lvdabao/p/js-modules-develop.html 这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生与变迁,展望ES6模块化标准的未来.经历过这段历史的人或许会感到沧桑,没经历过的人也应该知道这段历史. 无模块时代 在ajax还未提出之前,js还只是一种“玩具语言”,由Brendan Eich花了不到十天时间发明,用来在网页上进行表单校验.实现简单的动画效果等等,你可以回想一下那个网页上到处有公告

js模块化/js模块加载器/js模块打包器

之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7628(大神的文章写的很详细,建议先看完大神的文章) 一.js模块化 什么是js模块化,我们从历史说起. 1.一开始我们怎么写脚本?就是在html文件中用<script></script>写代码 这种方式的缺点:代码复用靠复制,基本是全局变量. 2.后来我们用js文件写代码,用<

一览js模块化:从CommonJS到ES6

本文由云+社区发表 模块化是指把一个复杂的系统分解到一个一个的模块. 模块化开发的优点: (1)代码复用,让我们更方便地进行代码管理.同时也便于后面代码的修改和维护. (2)一个单独的文件就是一个模块,是一个单独的作用域,只向外暴露特定的变量和函数.这样可以避免污染全局变量,减少变量命名冲突. js模块化规范有:CommonJS.AMD.CMD.ES6的模块系统.本文将依次介绍下每个规范. 0.早期:用script来引入js模块 <script type="text/javascript&