JS模块与命名空间的介绍

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

一般来讲,模块是一个独立的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);

为此,导出公共API的方式已经讲完。

原文发布于微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文发表时间:2016-01-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏步履前行

深入理解JVM--(1)运行时的数据区域划分--java虚拟机栈

  之前我们了解了程序计数器,接下来了解第二个线程私有的数据区域--虚拟机栈。 虚拟机栈是线程私有的,每创建一个线程,虚拟机就会为这个线程创建一个虚拟机栈,虚...

3175
来自专栏Java后端技术栈

Java大型互联网公司经典面试题,论JDK源码的重要性的无限思考

论JDK源码的重要性:一道面试题引发的无限思考!大家在看到这个标题时想的是什么?小编我为什么要讲这个问题呢?

1151
来自专栏蛋未明的专栏

PHP分割两个数组的相同元素和不同元素的两种方法

2154
来自专栏coding for love

JS入门难点解析8-作用域,作用域链,执行上下文,执行上下文栈等分析

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

941
来自专栏Java职业技术分享

Java技术——你真的了解String类的intern()方法吗

是不是感觉莫名其妙,新定义的str2好像和str1没有半毛钱的关系,怎么会影响到有关str1的输出结果呢?其实这都是intern()方法搞的鬼!看完这篇文章,你...

1470
来自专栏全沾开发(huā)

拿Proxy可以做哪些有意思的事儿

2528
来自专栏用户画像

浅析JAVA堆内存和栈内存的区别

堆内存:https://baike.baidu.com/item/%E5%A0%86%E5%86%85%E5%AD%98/7270805?fr=aladdin

1321
来自专栏游戏开发那些事

【游戏开发】小白学Lua——从Lua查找表元素的过程看元表、元方法

在上篇博客中,我们简单地学习了一下Lua的基本语法。其实在Lua中有一个还有一个叫元表的概念,不得不着重地探讨一下。元表在实际地开发中,也是会被极大程度地所使用...

1643
来自专栏Redis源码学习系列

Redis源码学习之对象系统

在前面的文章中,我介绍了Redis的底层数据结构,但Redis对外提供的命令并没有直接使用它们,而是基于它们构建更高级的数据对象,总共包括5中对象类型,分别为【...

1333
来自专栏Python小白进阶之旅

Python中比list更加值得我们使用的一种数据结构,性能优化

说到容器类型,大家第一时间想到的多半是list,而list确实也能解决大部分的需要,但碰到列表内的数据量相当大的时候,性能问题就显得尤为重要;再或者列表被恶意注...

802

扫码关注云+社区

领取腾讯云代金券