起因
将代码组织到类中的一个重要原因是让代码更加“模块化”,可以在很多不同的场景中实现代码的重用。但类不是唯一的模块化代码的方式。

一般来讲,模块是一个独立的JS文件。模块文件可以包含一个类定义、一组相关类、一个实用函数库或者一些待执行的代码。

模块化的目标是支持大规模的程序开发,处理分散源中代码的组装,并且能让代码正确运行,哪怕包含了不需要的模块代码,也可以正确执行代码。

理想状态下,所有模块都不应当定义超过一个全局标识。

模块函数
通过把模块定义在某个函数的内部来实现,定义的变量和函数都属于该函数的局部变量,在函数外不可见。实际上,可以将这个函数作用域用做模块的命名空间(模块函数)

一旦将模块代码封装进一个函数中,就需要一些方法导出公用API,以便在模块函数外部调用它们。下面有几种方式导出公用API:

首先创建一个命名空间

// 创建一个全局变量用来存放与学校相关的模块
var school;                // 创建school命名空间
if(!school) school = {};

1. 利用构造函数

// 返回Student构造函数来导出公共API
school.Student = (function() {
    function Student() {

}
    // ...... 定义Student的原型对象和私有属性和方法 ........
    return Student;        // 返回Student构造方法导出公共API
})();

2. 返回命名空间对象

如果模块API包括多个单元,则它可以返回命名空间对象

// 为school添加students模块
school.students = (function() {
    // 这里定义了很多类如课程类/成绩类, 使用局部变量和函数
    function Subject() { /* ... */ }
    function Grade() { /* ... */ }

// 通过返回命名空间对象将API导出
    return {
        Subject: Subject,
        Grade: Grade
    };
})();

3. 通过关键字new调用

另外一种类似类似技术:把模块函数当做构造函数,通过new来调用。把它们(公共API)赋值给this属性来将其导出

school.students = (new function() {
    // ..... 这里省略了代码 ......

// 将API导到this对象中
    this.Subject = Subject;
    this.Grade = Grade;

// 注意,这里没有返回值
}());    // 括号写在里面。这里是创建新实例,new后面应紧跟构造函数的调用而不是表达式

4. 已定义命名空间对象

作为一种替代方案,如果已经定义了全局命名空间对象,通过模块函数可以直接设置那个对象的属性。

// 如果已经定义了命名空间对象
var school;                // 创建school命名空间
if(!school) school = {};
school.students = {};    // student命名空间已经定义
(function(students) {
    // ..... 这里省略了代码 ......

// 将公共API导到上面定义的命名空间中
    students.Subject = Subject;
    students.Grade = Grade;
    // 这里也不需要返回值
})(school.students);

JS模块与命名空间的介绍的更多相关文章

  1. JS模块与命名空间的介绍二

    区别一:

  2. js模块,类,继承,命名空间,私有属性等相关概念梳理

    js确切的说是一种基于对象的语言,和纯面向对象的语言(比如as)稍微有点区别,js中没有类的概念.虽然有继承但是基于原型的继承.随着前段越来越受重视,jser们利用js的一些特性他们制造出了和纯面向对 ...

  3. 七、CommonJS规范和Note.js模块概念的介绍

    在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护.为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多 ...

  4. 第一课:js命名空间的介绍,js对象的扩展以及js数组化

    1.命名空间: js里面的命名空间就是使用对象的属性来扩展的.比如,用户定义一个A对象,A对象下面有B属性和C属性,同时B属性和C属性又是对象.因此A={B:{},C:{}},这时用户就可以在B对象和 ...

  5. Js模块模式

    模块模式 索引 引子 什么是模块模式 命名空间模式 声明依赖 私有和特权成员 即时函数 揭示模块模式 结语 引子 这篇算是对第9篇中内容的发散和补充,当时我只是把模块模式中的一些内容简单的归为函数篇中 ...

  6. 彻底搞清楚javascript中的require、import和export(js模块加载规范的前世今生)

    为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Javascript不是一种模块化编程语言,在es6以前,它是不支持”类”(class),所以也 ...

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

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

  8. Node.js模块

    每一个Node.js都是一个Node.js模块,包括JavaScript文件(.js).JSON文本文件(.json)和二进制模块文件(.node). mymodul.js function Hell ...

  9. 基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)介绍(二)

    基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)介绍(二) 之前文章中给大家说明了下我这个小小的想法,发现还是有不少人的支持和关注.你们的鼓励是对我最大的支持. 我总结了了 ...

随机推荐

  1. Android剪裁图片简单的方法

    /** * 按正方形裁切图片 */ public static Bitmap ImageCrop(Bitmap bitmap) { int w = bitmap.getWidth(); // 得到图片 ...

  2. iOS当该装置是水平屏,frame和bounds分别

    project那里有两个ViewControllers.间ViewController它是root view controller,红色背景,有一个顶button,点击加载后GreenViewCont ...

  3. MySQL存储过程:用户授权量

    写这些脚本需求放缓的调查记录到数据库,方便观看. 1. 因为默认mysql.slow_log表使用csv数据引擎,该数据不支持指数,因此,有必要改变MyISAM发动机.和query_time字段索引, ...

  4. 【LeetCode】3Sum 解决报告

    这个问题是我目前的知识回答,不来,只有良好的网上搜索解决方案,发现 K Sum 它是一类问题,但是,互联网是没有更简洁的代码,我想对于谁刚开始学习的人.您可能仍然想看看这个问题该怎么解决,然后看看他们 ...

  5. Cocos2d-x 3.2 大富翁游戏项目开发-第八部分 角色的散步路径

    获得所述路径之后.我们将能够使根据的步行路径的作用,当您点击gobutton什么时候.我们呼吁player的startGo()办法.传入的参数是保存路径2一维数组 void GameBaseScene ...

  6. registerForRemoteNotificationTypes: is not supported in iOS 8.0 and

    注册模式: if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 8.0) { [[UIApplication sharedA ...

  7. [ACM] ZOJ 3816 Generalized Palindromic Number (DFS,暴力枚举)

    Generalized Palindromic Number Time Limit: 2 Seconds      Memory Limit: 65536 KB A number that will ...

  8. DDD领域驱动设计初探

    DDD领域驱动设计初探1 前言:又有差不多半个月没写点什么了,感觉这样很对不起自己似的.今天看到一篇博文里面写道:越是忙人越有时间写博客.呵呵,似乎有点道理,博主为了证明自己也是忙人,这不就来学习下D ...

  9. 通达OA web页面与精灵显示内容更新后不一致的问题

    前一段就发现有这种问题.就是在开发的电话查询里更新的信息,可是在精灵对话窗体上显示的还是原来的信息.这样导致从新开发入口更新信息就不能使用.一開始还以为是厂家升级,变更了存储的表结构.感觉下载近期的升 ...

  10. USACO dualpal

    /* ID:kevin_s1 PROG:dualpal LANG:C++ */ #include <iostream> #include <cstdio> #include & ...