抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

前言

网站越来越复杂,js代码、js文件也越来越多,会遇到一些问题

  • 文件依赖

  • 全局污染、命名冲突

程序模块化包括:

  • 日期模块

  • 数学计算模块

  • 日志模块

  • 登陆认证模块

  • 报表展示模块等。

所有这些模块共同组成了程序软件系统。

一次编写,多次使用,才是提高效率的核心。

模块化的理解

什么是模块化

概念:将一个复杂的程序依据一定的规则(规范)封装成几个块(文件),并组合在一起。

模块的内部数据、实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信。

最早的时候,我们会把所有的代码都写在一个js文件里,那么,耦合性会很高(关联性强),不利于维护;而且会造成全局污染,很容易命名冲突。

模块化的好处

  • 避免命名冲突,减少命名空间污染

  • 降低耦合性;更好地分离、按需加载

  • 高复用性:代码方便重用,别人开发的模块直接拿过来就可以使用,不需要重复开发类似的功能。

  • 高可维护性:软件的声明周期中最长的阶段其实并不是开发阶段,而是维护阶段,需求变更比较频繁。使用模块化的开发,方式更容易维护。

  • 部署方便

模块化规范

模块化规范的引入

假设我们引入模块化,首先可能会想到的思路是:在一个文件中引入多个js文件。如下:

1
2
3
4
5
6
7
<body>
<script src="zepto.js"></script>
<script src="fastClick.js"></script>
<script src="util/login.js"></script>
<script src="util/base.js"></script>
<script src="util/city.js"></script>
</body>

但是这样做会带来很多问题:

  • 请求过多:引入十个js文件,就有十次http请求。

  • 依赖模糊:不同的js文件可能会相互依赖,如果改其中的一个文件,另外一个文件可能会报错。

以上两点,最终导致:难以维护

于是,这就引入了模块化规范。

模块化的概念解读

模块化起源于 Node.js。Node.js 中把很多 js 打包成 package,需要的时候直接通过 require 的方式进行调用(CommonJS),这就是模块化的方式。

那如何把这种模块化思维应用到前端来呢?这就产生了两种伟大的 js:RequireJS 和 SeaJS。

模块化规范

服务器端规范:

CommonJS 就是一套约定标准,不是技术。用于约定我们的代码应该是怎样的一种结构。

浏览器端规范:

1
2
3
4
5
- 异步加载模块;

- 依赖前置、提前执行:require([`foo`,`bar`],function(foo,bar){}); /