现在嵌入页面里面的javascript代码越来越复杂,于是可能依赖也越来越严重,使用别人开发的js也越来越多,于是在理想情况下,我们只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。

于是js模块化开发就显的越来越重要了,但是,Javascript不是一种模块化编程语言,它不支持""(class),更遑论"模块"(module)了。(正在制定中的ECMAScript标准第六版,将正式支持"类"和"模块",但还需要很长时间才能投入实用。)在现有的开发中,使用“模块的效果”。于是我们简单的总结了几种模块开发的方式。

(1)原始写法:

模块就是实现特定功能的一组方法。

只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。

function f1(){

}
function f2(){ }

然后我们直接调用就可以了,但是这个做法有很多的弊端。例如:"污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。

(2):使用对象的写法

为了解决上面的缺点,可以把模块写成一个对象,所有的模块成员都放到这个对象里面。这个写法在我现在的项目中经常使用。

var func={
var count=0;
inti:function(){ },
getValues:function(){ }
}

然后我们要使用的话直接 func.inti() .但是这个方式有一个缺点:这样的写法会暴露所有模块成员,内部状态可以被外部改写。func.count=1,这样就很不安全。

(3):立即执行函数写法

这个就可以防止修改内部的成员。

var func=({
var count=0;
inti:function(){ },
getValues:function(){ }
})():

func就是Javascript模块的基本写法。可以起到很好的保护私有成员的作用。

(4):放大模式

如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用"放大模式"

 var func = (function (fn){
    fn.m = function () {
      //...
    };
    return fn;
  })(func)

  上面的代码为func模块添加了一个新方法m(),然后返回新的func模块。

(5):宽放大模式

在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载。如果采用上一节的写法,第一个执行的部分有可能加载一个不存在空对象,这时就要采用"宽放大模式"。

var func = ( function (fn){
    //...
    return fun;
  })(window.func || {});

与"放大模式"相比,"宽放大模式"就是"立即执行函数"的参数可以是空对象。

(6):输入全局变量

独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互。为了在模块内部调用全局变量,必须显式地将其他变量输入模块。

 var func = (function ($, baidu) {
    //...
  })(jQuery, baidu);

  上面的func模块需要使用jQuery库和baidu库,就把这两个库(其实是两个模块)当作参数输入func。这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显。

待续:js模块加载器

js模块开发(一)的更多相关文章

  1. js模块开发

    js模块开发(一) 现在嵌入页面里面的javascript代码越来越复杂,于是可能依赖也越来越严重,使用别人开发的js也越来越多,于是在理想情况下,我们只需要实现核心的业务逻辑,其他都可以加载别人已经 ...

  2. js 模块开发之一(模块开发价值)

    首先引用我们的今天的主角 ----<前端模块化开发的价值> 1,前端开发最常见的两个问题 ---命名冲突和文件依赖 2,对于命名冲突的基本解决办法就是学习其他语言的习惯,添加命名空间 va ...

  3. Developer - 如何自我保证Node.js模块质量

    组里正在做SaaS产品,其中一些模块(Module)是Node.js实现,这里我们主要使用Node.js实现Web Server来提供服务. 在做SaaS项目之前,组里的开发模式是传统的Deverlo ...

  4. JS模块式开发

    问题:js文件须严格保证加载顺序(比如上例的1.js要在2.js的前面),依赖性最大的模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难! C语言中模块开发-include ...

  5. JS模块化开发:使用SeaJs高效构建页面

    一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...

  6. electron之Windows下使用 html js css 开发桌面应用程序

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  7. seajs实现JavaScript 的 模块开发及按模块加载

    seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http:/ ...

  8. 第三课:sea.js模块加载原理

    模块加载,其实就是把js分成很多个模块,便于开发和维护.因此加载很多js模块的时候,需要动态的加载,以便提高用户体验. 在介绍模块加载库之前,先介绍一个方法. 动态加载js方法: function l ...

  9. DNN模块开发之利器篇:七种武器

    我们在进行DNN模块开发时经常需要调用Dotnetnuke.dll中的方法函数,模块开发用到DNN的方法函数会让你的开发更加得心应手,下面我们就来介绍一下.   1) PortalModuleBase ...

随机推荐

  1. ecshop 多表删除

    $sql = 'DELETE O, G FROM ' . $GLOBALS['ecs']->table('delivery_order') . ' AS O, ' . $GLOBALS['ecs ...

  2. Redis【知识点】批量删除指定Key

    Redis中有删除单条数据的命令DEL但是他没有批量删除多条数据的方法,那我们怎么去批量删除多条数据呢! 第一种方式 /work/app/redis/bin/redis-cli -a youpassw ...

  3. C# 异步

    private void GetHttpResponse() { var client = new Microsoft.HBase.Client.HBaseClient(new ClusterCred ...

  4. Linux 命令行总结

    1.使用ln不加参数,会创建硬链接,如果要创建软连接,需要加-s 参数. # ln test1 test8 -rw-r--r-- root root Nov : test1 -rw-r--r-- ro ...

  5. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(2)CSS3利用图层叠加实现多背景

    CSS 3允许设置多个背景图片,每个背景图片占一层,层的上下按照在CSS中书写的顺序来定,最先写的背景在最上层,每层图片定义使用英文逗号隔开. 例如下面的代码: background:url(http ...

  6. 如何撤销 PhpStorm/Clion 等 JetBrains 产品的 “Mark as Plain Text” 操作 ?

    当把某个文件“Mark as Plain Text”时,该文件被当做普通文本,就不会有“代码自动完成提示”功能,如下图所示: 但是呢,右键菜单中貌似没有 相应的撤销 操作, 即使是把它删除,再新建一个 ...

  7. PHP 的异常处理、错误处理:error_reporting,try-catch,trigger_error,set_error_handler,set_exception_handler,register_shutdown_function

    一.错误.异常 等级常量表 error:不能在编译期发现的运行期错误,比如试图用 echo 输出一个未赋值的变量,这类问题往往导致程序或逻辑无法继续下去而需要中断: exception:程序执行过程中 ...

  8. from collections import OrderedDict

    在python中,dict这个数据结构由于hash的特性,是无序的,这在有时候会给我们带来一些麻烦,幸运的是, collections模块为我们提供了OrderdDict,当你要获取一个有序的字典对象 ...

  9. tornadod的异步代码

    #!/usr/bin/env python # -*- coding: utf-8 -*- import tornado.httpserver import tornado.ioloop import ...

  10. myecplise 中文乱码

    一.设置新建常见文件的默认编码格式,也就是文件保存的格式. 在不对MyEclipse进行设置的时候,默认保存文件的编码,一般跟简体中文操作系统(如windows2000,windowsXP)的编码一致 ...