Javascript模块化开发-轻巧自制
一、前言
现在javascript的流行,前端的代码越来越复杂,所以我们需要软件工程的思想来开发前端。模块化是必不可少的,这样不仅能够提高代码的可维护性、可扩展性以及鲁棒性,更大的好处就是能够提升整个团队的开发效率,也能够让新进的程序员更快的接手工作。今天晚上根据前辈们的经验,写啦一个简单的模块定义的封装组件,当是练手吧。不过感觉还是蛮好用的。
二、学习模块化前我们应该先了解点什么呢?
其实突然就学习模块化的javascript开发,那还是比较丈二和尚,摸不着头脑的。不过如果是做过后台开发的程序员们,可能对于模块化的开发思想并不陌生,因为后台的这方面技术已经很熟悉了。那么这里我就分享一下前端javascript模块化开发的学习。
1. 了解模块化开发思想
如果有软件工程背景,那么这一思想就是你自身就应该掌握的。模块(module)就是可以组合、分解以及更换的单元,其实也满足组合大于继承等这些带来的好处吧。如果看成一个系统的话,我们可以从软件体系结构来理解,模块是较大系统中的独立部件,功能、状态与接口反映外部特性,逻辑反映的是内部特性。
2. 了解前端模块化开发带来的好处
模块化的开发模式为前端带来了新大陆,这点不得不承认,现在前端的越发成熟,需要软件工程的这种思想。
玉伯也发表过前端模块化开发的价值
3.了解目前技术,哪些和模块化开发沾边
1) 开发功能模块的时候,可以采用Eva的解决方案(YUI3 + Minify)。
2) 使用流行的javascript模块加载框架:seajs。
3) 如果喜欢轻巧的东西,也可以尝试带刀的easy.js,不错的一个模块加载框架。
4) 也可以尝试支付宝的Alice,这是一款基于CMD规范的东东,首页倒是挺小清新的。
5) 如今比较火的NodeJS这是必须要了解和学习的。
好啦,了解完上面那些技术后,模块化的前端模式应该很熟悉了,如果想扎实一下的话还可以了解一下AMD、CMD规范,具体是什么东西,google一下。接下来我们就来构造一个简单的模块定义器吧,其实写的时候还挺简单的,不过主要是吸收思想,这样学习技术才不会跟不上时代。
三、轻巧范例
1. 模块的数据结构(JSON表示)
module: {
    //模块名称
    moduleName: moduleName,
    //模块依赖集合
    dependencies: dependencies,
    //模块实例工厂
    factory: factory
}
2. 模块定义
所以我们最后能够形成模块定义的代码如下:
define: function ( moduleName, dependencies, factory ) {
    if( !modules[moduleName] ) {
        //模块信息
        var module = {
            moduleName: moduleName,
            dependencies: dependencies,
            factory: factory
        };

modules[moduleName] = module;
    }

return modules[moduleName];
}
3. 模块调用
这样我们就定义好了模块,那么我们的入口在哪里呢?我们还需要定义一个use的方法,来成为所谓的main,这样绑定好了才能够调用,现在想来程序也都是这样的。下面这段代码通过递归的产生模块依赖的所有实例,但是这里浪费了一部分instances数组的空间,有时间可以再做哈优化。
use: function ( moduleName ) {
    //使用括号的方式访问属性,实现动态的赋值(详情查阅“.”和[]的区别)
    var module = modules[moduleName];

//产生单个实例
    if( !module.instance ) {
        var instances = [],
            len = module.dependencies.length - 1;

for( var i = 0; i <= len; i++ ) {
                var dependency = module.dependencies[i],
                    instance = dependency.instance;

if( instance ) {
                    instances.push( instance );
                } else {
                    //递归,将每次产生的实例放入数组
                    instances.push( arguments.callee( dependency ) );
                }
            }
            //生成实例
            module.instance = module.factory.apply( null, instances );
    }

return module.instance;
}
4. 完整代码
最后我形成完整的自己的小库。
(function ( window, undefined ) {
    var modules = {};
    var Sky = {
        //定义模块的基本信息
        //1.模块名称,2.模块的依赖,3.产生实例的工厂
        define: function ( moduleName, dependencies, factory ) {
            if( !modules[moduleName] ) {
                //模块信息
                var module = {
                    moduleName: moduleName,
                    dependencies: dependencies,
                    factory: factory
                };

modules[moduleName] = module;
            }

return modules[moduleName];
        },
        //使用依赖
        use: function ( moduleName ) {
            var module = modules[moduleName];

//产生单个实例
            if( !module.instance ) {
                var instances = [],
                    len = module.dependencies.length - 1;

for( var i = 0; i <= len; i++ ) {
                    var dependency = module.dependencies[i],
                        instance = dependency.instance;

if( instance ) {
                        instances.push( instance );
                    } else {
                        //递归,将每次产生的实例放入数组
                        instances.push( arguments.callee( dependency ) );
                    }
                }
                //生成实例
                module.instance = module.factory.apply( null, instances );
            }

return module.instance;
        }
    };

window.Sky = Sky || {};
})(window);
下面我们来一个完整的例子来使用一下以上我们构建的轻巧代码。
Sky.define("constant.PI", [], function() {
    return 3.1415926;
});

Sky.define("shape.Circle", ["constant.PI"], function( pi ) {
    function Circle(r) {
        this.r = r || 0;
    };

Circle.prototype.area = function() {
        return pi * this.r * this.r;
    };

return Circle;
});

Sky.define("shape.Rectangle", [], function() {
    function Rectangle(width, height) {
        this.width = width || 0;
        this.height = height || 0;
    };

Rectangle.prototype.area = function() {
        return this.width * this.height;
    };

return Rectangle;
});

Sky.define("ShapeTypes", ["shape.Circle", "shape.Rectangle"], function( Circle, Rectangle ) {
    return {
        'CIRCLE': Circle,
        'RECTANGLE': Rectangle
    };
});

Sky.define("ShapeFactory", ["ShapeTypes"], function( ShapeTypes ) {
    return {
        getShape: function(type) {
            var shape;

switch (type) {
            case 'CIRCLE':
                shape = new ShapeTypes[type](arguments[1]);
                break;
            case 'RECTANGLE':
                shape = new ShapeTypes[type](arguments[1], arguments[2]);
                break;
            }
            return shape;
        }
    };
});

var ShapeFactory = Sky.use("ShapeFactory");
console.log(ShapeFactory.getShape("CIRCLE").area());
console.log(ShapeFactory.getShape("RECTANGLE", 2, 3).area());

Javascript模块化开发-轻巧自制的更多相关文章

  1. Javascript模块化开发,使用模块化脚本加载工具RequireJS,提高你代码的速度和质量。

    随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...

  2. Javascript 模块化开发上线解决方案

    最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...

  3. JavaScript模块化开发整理

    在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错 ...

  4. JavaScript模块化开发的那些事

    模块化开发在编程开发中是一个非常重要的概念,一个优秀的模块化项目的后期维护成本可以大大降低.本文主要介绍了JavaScript模块化开发的那些事,文中通过一个小故事比较直观地阐述了模块化开发的过程. ...

  5. 详解JavaScript模块化开发

    什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...

  6. 2.精通前端系列技术之JavaScript模块化开发 seajs(一)

    在使用seajs模块化开发之前,直接在页面引用js会容易出现冲突及依赖相关的问题,具体问题如下 问题1:多人开发脚本的时候容易产生冲突(比如全局参数冲突,方法名冲突),可以使用命名空间降低冲突,不能完 ...

  7. JavaScript模块化开发实例

    最近接触了一些JavaScript开发的例子,在这里与大家一起分享一下: 例子:当我们一个团队在写Js文件的时候,你一个人写的JS代码自己可以看懂也可以维护,但是别人想对你的JS进行扩展的话,如果都在 ...

  8. JavaScript模块化开发&&模块规范

    在做项目的过程中通常会有一些可复用的通用性功能,之前的做法是把这个功能抽取出来独立为一个函数统一放到commonFunctions.js里面(捂脸),实现类似于snippets的代码片段收集. fun ...

  9. (转)详解JavaScript模块化开发

    https://segmentfault.com/a/1190000000733959 什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来j ...

随机推荐

  1. MAVEN ERROR: unable to find valid certification path to requested target 解决办法

    第一次使用MAVEN编译项目,出现如下错误 解决办法:Maven的setting.xml中添加如下代码 <mirrors> <mirror> <id>Central ...

  2. Java:IO流之字符流Reader、Writer详解

    java.io包中:字符流   字符流的两个抽象基类:   Reader         Writer   文件的读取:Reader抽象类(java.io包中) 直接子类的构造方法: FileRead ...

  3. Android 实现Path2.0中绚丽的的旋转菜单

    上图先: 那么下面开始吧~ 首先,将整个菜单动画分解开来. 1.       一级菜单按钮的旋转动画2个,十字和叉叉状态的转换. 2.       二级菜单按钮的平移动画2个,弹簧效果的in和out ...

  4. chrome开发配置(三)安装开发工具

    1.安装 VisualStudio2010,设置环境变量 GYP_MSVS_VERSION=2010 2.安装 VisualStudio2010 SP1 3.安装 windows 8.0 sdk(不要 ...

  5. 关于Linux操作系统下文件特殊权限的解释

    文件特殊权限的解释. -rwsr-xr-x = 4755 文件执行的时候,会以owner的身份来执行,就是setuid . 例如:-rwxr-xr-t 1 root wheel 0 7 9 18:24 ...

  6. CNN卷积神经网络在自然语言处理的应用

    摘要:CNN作为当今绝大多数计算机视觉系统的核心技术,在图像分类领域做出了巨大贡献.本文从计算机视觉的用例开始,介绍CNN及其在自然语言处理中的优势和发挥的作用. 当我们听到卷积神经网络(Convol ...

  7. 事务回滚后,自增ID仍然增加

    回滚后,自增ID仍然增加. 比如当前ID是7,插入一条数据后,又回滚了.然后你再插入一条数据,此时插入成功,这时候你的ID不是8,而是9.因为虽然你之前插入回滚,但是ID还是自增了. 如果你认为自增I ...

  8. Entity Framework Architecture

    http://www.entityframeworktutorial.net/EntityFramework-Architecture.aspx The following figure shows ...

  9. hdu 5718 Oracle 高精度

    Oracle Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) Problem ...

  10. hdu3333(线段树)

    区间更新,单点查询. hdu3333 #include <iostream> #include <stdio.h> #include <string.h> #inc ...