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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

Asp.Net4.0/VS2010新变化(5):可扩展的(分布式)缓存

.net3.0/3.5时代,asp.net的outPut缓存默认只能存放于内存中,但是内存资源是有限的,这就导致了缓存的无法扩展。 而asp.net4.0中允...

1875
来自专栏Java帮帮-微信公众号-技术文章全总结

Linux查看日志命令【面试+工作】

2634
来自专栏IMWeb前端团队

html5 article & section

html5 article & section 关于 article & section 关于 article 和 section 的区别也是老生常谈的事了 但...

2026
来自专栏kevin-blog

解决在/etc/porfile下设置环境变量以后zsh没有起效的问题

今天在添加java的环境变量的时候,我在/etc/profile添加了环境变量,因为我使用的是zsh,在source /etc/profile以后,zsh的主题...

2851
来自专栏hbbliyong

运行yum时出现/var/run/yum.pid已被锁定,PID为xxxx的另一个程序正在运行的问题解决

删除文件后再次运行yum可用。 --------------------- 作者:黯淡荣耀 来源:CSDN 原文:https://blog.csdn.ne...

1592
来自专栏蓝天

与慢速设备通讯异步化方案

与慢速设备通讯异步化方案.pdf像MySQL、被对接的银行系统等,都可称作慢速设备。它们的共同特点是只提供了同步调用接口,而且响应通常会比较慢。

731
来自专栏酷玩时刻

H5仿微信支付键盘

视频地址:https://github.com/Javen205/IJPay-Demo/blob/master/doc/pay_keyboard.m4v

1312
来自专栏木子昭的博客

webpack多入口多出口的实现

对古老的网站进行维护, 短时间内用react或vue组件化重写全部页面不太现实,但用webpack做个打包, 还是可行性的, 配置好webpack多入口多出口,...

1604
来自专栏专注数据中心高性能网络技术研发

Chrome插件Tampermonkey--自定义过滤百度网页搜索结果并去除广告栏和自动推荐

1.目的 过滤百度搜索的种种无内涵、低信息量、低质量的网页。 ---- 2.所需工具 浏览器:Chrome 插件:Tampermonkey  自定义脚本: ? ...

5415
来自专栏Python

$.cookie is not a function;原因及解决办法

一、没有引入jQuery库文件 二、jQuery库文件和jquery.cookie.js文件的顺序问题。须先引入jQuery库文件再引入cookie插件文件 ...

22110

扫码关注云+社区