专栏首页性能与架构JS模块化开发的价值

JS模块化开发的价值

非模块化方式开发的痛苦

(1)命名冲突

起初,我们定义了一个通用功能的JS文件,例如 utils.js(其中有一个 each 函数),谁需要谁调用即可

但随着项目和团队越来越大,就会出现问题

小杨在自己的 a.js 中也定义了一个 each 函数,这时有人同时引用了 utils.js 和 a.js,冲突就出现了,小杨只好把自己的 each函数名改为别的,再通知别人改名了,之后,不同开发人员之间不断出现这类问题

后来,团队决定引入命名空间,对 utils.js 进行改造

var org = {};
org.CoolSite = {};
org.CoolSite.Utils = {};
org.CoolSite.Utils.each = function (arr) {
  // 实现代码
};

这时,为了调用一个简单的each函数,就要记住一长串的包名

(2)文件依赖

团队又写了一个工具文件,叫 dialog.js,其中需要使用 utils.js 其中的函数,在文档中明确指出使用 dialog.js时必须要先引入 utils.js

有一个 b.js,使用了 dialog.js,页面中就必须引入多个文件,并且顺序不能错

<script src="util.js"></script>
<script src="dialog.js"></script>
<script src="b.js"></script>

现在就很容易的出现了两个问题

1)开发人员常忘记引用被依赖的文件

2)要使用某个功能时,要引入多个其他文件,最后页面中的引用可能会非常多

模块化开发的好处

现在已经有了多个JS模块化开发规范和相应的具体实现,我们只要选择其中一种,按照约定来开发,就可以完全避免命名冲突和文件依赖的问题

只需关心当前模块本身的功能开发,需要其他模块的支持时,在模块内调用目标模块即可

模块化开发示例

CMD是比较常用的模块化规范,下面就使用CMD方式作为示例

目录结构

|-js
|--|-common
|-------|-utils.js
|--|-a.js
//------utils.js------
define(function(require, exports) {
  // 对外提供 each 方法
  exports.each = function() {...};
});
//------a.js------
define(function(require, exports) {
  // 调用其他模块
  var utils = require('common/utils');
  utils.each();
  // ... 
  // 对外提供自己的 each 方法
  exports.each = function() {...};
});

可以看到,非常简单,CMD规定一个文件就是一个模块,其中有3个重要的关键字:

1)define

定义一个模块

2)require

用来调用其他模块

3)exports

用来暴露自己对外提供的接口

本文分享自微信公众号 - 性能与架构(yogoup)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-09-16

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端工程 - 静态资源的更新

    示例 <html> <head> <link href='a.css' type='text/css'/> <script src="b.js"><...

    dys
  • 前端模块化工具 Browserify

    Browserify 是什么 Browserify 是一个浏览器端代码模块化的工具 为什么要使用 Browserify 浏览器端的代码模块化有2个明显的...

    dys
  • WEB开发将不再重度依赖JS

    Mozilla、谷歌、微软、苹果 4大浏览器一致通过了一个标准:WebAssembly WebAssembly 允许使用更多的语言来开发web应用,并且有接近...

    dys
  • 微信小程序从零开始开发步骤(七)引入外部js 文件

    祈澈菇凉
  • 为什么应该学javascript-浏览器

    打开一个链接是一个很神奇的操作。我们接触到的软件有各种各样的形式。windows的安装包,iOS的app,安卓的app。但是我们最容易获得的软件是什么?wind...

    于欣轩
  • 快速学习ReactJS-搭建环境

    在UmiJS的约定中,config/config.js将作为UmiJS的全局配置文件。

    cwl_java
  • Python3 调用 js 函数

    py3study
  • Javascript无阻塞加载方法

    看了《高性能JavaScript》的读书笔记 几个原则: 1、将脚本放在底部 <link>还是在head中,用以保证在js加载前,能加载出正常显示的页面。 <s...

    小端
  • 内容平台 Medium 的技术体系

    Medium 是全球知名的内容平台,访问量惊人 据半年前的数据统计,用户在 Medium 上阅读时间的总和已经达到 2600年,每月有2500万阅读者,每周有数...

    dys
  • Java的IO流

    注:抽象流实质上就是抽象类,实际上使用到的是继承于它们的子类!FileInputStream、FileOutputStream、FileReader、FileW...

    爱学习的孙小白

扫码关注云+社区

领取腾讯云代金券