脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Javascript模块化开发

了解Javascript的模块化开发

 更新时间：2015年03月02日 10:18:50   投稿：junjie  
这篇文章主要介绍了了解Javascript的模块化开发,本文讲解了为什么需要模块化开发,模块化开发的形成原因等内容,需要的朋友可以参考下

小A是某个创业团队的前端工程师，负责编写项目的Javascript程序。

全局变量冲突

根据自己的经验，小A先把一些常用的功能抽出来，写成函数放到一个公用文件base.js中：

复制代码 代码如下:

var _ = {
    $: function(id) { return document.getElementById(id); },
    getCookie: function(key) { ... },
    setCookie: function(key, value) { ... }
};

小A把这些函数都放在_对象内，以防过多的全局变量造成冲突。他告诉团队的其他成员，如果谁想使用这些函数，只要引入base.js就可以了。

小C是小A的同事，他向小A反映：自己的页面引入了一个叫做underscore.js的类库，而且，这个类库也会占用_这个全局变量，这样一来就会跟base.js中的_冲突了。小A心想，underscore.js是第三方类库，估计不好改，但是base.js已经在很多页面铺开，不可能改。最后小A只好无奈地把underscore.js占用的全局变量改了。

此时，小A发现，把函数都放在一个名字空间内，可以减少全局变量冲突的概率，却没有解决全局变量冲突这个问题。

依赖

随着业务的发展，小A又编写了一系列的函数库和UI组件，比方说标签切换组件tabs.js，此组件需调用base.js以及util.js中的函数。

有一天，新同事小D跟小A反映，自己已经在页面中引用了tabs.js，功能却不正常。小A一看就发现问题了，原来小D不知道tabs.js依赖于base.js以及util.js，他并没有添加这两个文件的引用。于是，他马上进行修改：

复制代码 代码如下:

<script src="tabs.js"></script>
<script src="base.js"></script>
<script src="util.js"></script>

然而，功能还是不正常，此时小A教训小D说：“都说是依赖，那被依赖方肯定要放在依赖方之前啊”。原来小D把base.js和util.js放到tabs.js之后了。

小A心想，他是作者，自然知道组件的依赖情况，但是别人就难说了，特别是新人。

过了一段时间，小A给标签切换组件增加了功能，为了实现这个功能，tabs.js还需要调用ui.js中的函数。这时，小A发现了一个严重的问题，他需要在所有调用了tabs.js的页面上增加ui.js的引用！！！

又过了一段时间，小A优化了tabs.js，这个组件已经不再依赖于util.js，所以他在所有用到tabs.js的页面中移除了util.js的引用，以提高性能。他这一修改，出大事了，测试组MM告诉他，有些页面不正常了。小A一看，恍然大悟，原来某些页面的其他功能用到了util.js中的函数，他把这个文件的引用去掉导致出错了。为了保证功能正常，他又把代码恢复了。

小A又想，有没有办法在修改依赖的同时不用逐一修改页面，也不影响其他功能呢？

模块化

小A逛互联网的时候，无意中发现了一种新奇的模块化编码方式，可以把它之前遇到的问题全部解决。

在模块化编程方式下，每个文件都是一个模块。每个模块都由一个名为define的函数创建。例如，把base.js改造成一个模块后，代码会变成这样：

复制代码 代码如下:

define(function(require, exports, module) {
    exports.$ = function(id) { return document.getElementById(id); };
    exports.getCookie = function(key) { ... };
    exports.setCookie = function(key, value) { ... };
});

base.js向外提供的接口都被添加到exports这个对象。而exports是一个局部变量，整个模块的代码都没有占用半个全局变量。

那如何调用某个模块提供的接口呢？以tabs.js为例，它要依赖于base.js和util.js：

复制代码 代码如下:

define(function(require, exports, module) {
    var _ = require('base.js'), util = require('util.js');
    var div_tabs = _.$('tabs');
    // .... 其他代码
});

一个模块可以通过局部函数require获取其他模块的接口。此时，变量_和util都是局部变量，并且，变量名完全是受开发者控制的，如果你不喜欢_，那也可以用base：
复制代码 代码如下:

define(function(require, exports, module) {
    var base = require('base.js'), util = require('util.js');
    var div_tabs = base.$('tabs');
    // .... 其他代码
});

一旦要移除util.js、添加ui.js，那只要修改tabs.js就可以了：
复制代码 代码如下:

define(function(require, exports, module) {
    var base = require('base.js'), ui = require('ui.js');
    var div_tabs = base.$('tabs');
    // .... 其他代码
});

加载器

由于缺乏浏览器的原生支持，如果我们要用模块化的方式编码，就必须借助于一个叫做加载器（loader）的东西。

目前加载器的实现有很多，比如require.js、seajs。而JRaiser类库也有自己的加载器。

您可能感兴趣的文章:

相关文章

  • 简单聊一聊原生Ajax与JQuery Ajax

    简单聊一聊原生Ajax与JQuery Ajax

    AJAX 是一种用于创建快速动态网页的技术,下面这篇文章主要给大家介绍了关于原生Ajax与JQuery Ajax的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • JavaScript实现枚举的几种方法总结

    JavaScript实现枚举的几种方法总结

    在前端开发中,我们可能经常需要用到枚举,使用枚举的好处是为了让代码的可读性更强,避免直接使用数字或未知的字符串,但是在JavaScript中,要自己实现一个枚举功能,那么大家能想到多少种实现枚举的方法呢,我将介绍几种实现枚举的好方法
    2023-08-08
  • ES6学习教程之对象的扩展详解

    ES6学习教程之对象的扩展详解

    这篇文章主要给大家介绍了ES6中对象扩展的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-05-05
  • 小议Function.apply() 之一------(函数的劫持与对象的复制)

    小议Function.apply() 之一------(函数的劫持与对象的复制)

    小议Function.apply() 之一------(函数的劫持与对象的复制)...
    2006-11-11
  • 利用10行js代码实现上下滚动公告效果

    利用10行js代码实现上下滚动公告效果

    这篇文章主要给大家介绍了关于利用10行js代码实现滚动公告效果的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧。
    2017-12-12
  • js与jquery获取input输入框中的值实例讲解

    js与jquery获取input输入框中的值实例讲解

    在本篇文章里小编给大家整理了关于js与jquery获取input输入框中的值实例讲解，需要的朋友们可以学习参考下。
    2020-02-02
  • Typescript中extends关键字的基本使用

    Typescript中extends关键字的基本使用

    extends表示具体的泛型类型只能是object类型,某个变量如果能断言成object类型[变量as object],那么这个变量的类型符合T extends object,下面这篇文章主要给大家介绍了关于Typescript中extends关键字基本使用的相关资料,需要的朋友可以参考下
    2022-08-08
  • javascript引用类型之时间Date和数组Array

    javascript引用类型之时间Date和数组Array

    引用类型的值（对象）其实就是引用类型的一个实例，接下来，通过本篇文章给大家介绍javascript引用类型之时间Date和数组Array，需要的朋友可以参考下
    2015-08-08
  • javascript实现保留两位小数的多种方法

    javascript实现保留两位小数的多种方法

    这篇文章主要介绍了javascript实现保留两位小数的多种方法，如果数字的原本小数位数不到两位，那么缺少的就自动补零，感兴趣的小伙伴们可以参考一下
    2015-12-12
  • TypeScript中枚举类型的理解与应用场景

    TypeScript中枚举类型的理解与应用场景

    如 TypeScript 官方文档所说，枚举类型是对 JavaScript 标准数据类型集的扩充,所以下面这篇文章主要给大家介绍了关于TypeScript中枚举类型的理解与应用场景的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-09-09

最新评论