http://it.njjyzj.gov.cn

浅谈JS前端模块化的几种规范_JavaScript_网络编程

前言

有这样一个场景,客户端运行很久,但是法务部和数据部需要收集用户的一些信息,这些信息收集好之后需要进行相应的数据处理,之后上报到服务端。客户端提供一个纯粹的执行引擎,不需要 WebView 容器。iOS 端有成熟的Core、android 可以使用 V8 引擎。这样一个引擎配套有一个 SDK,访问 Native 的基础能力和数据运算能力,可以看成是一个阉割版的 Hybrid SDK 额外增加了一些数据处理能力。

问题结束了吗?处理逻辑的时候还需要用到2个库:cheerio和sql。因为都是 Node 工程,所以纯粹的js环境是没办法直接执行。所以需求就进行了转变 ———— 将 Node 项目打包成 UMD 规范。这样就可以在纯粹的 JS 环境下运行。接下来的文章就分析下各种规范。其实也就是前端模块化的几种规范。

前端模块化开发的价值

随着互联网的飞速发展,前端开发越来越复杂。本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及以 Sea.js 为例讲解如何进行前端的模块化开发。

恼人的命名冲突

我们从一个简单的习惯出发。我做项目时,常常会将一些通用的、底层的功能抽象出来,独立成一个个函数,比如

function each(arr) { // 实现代码 } function log(str) { // 实现代码 }

并像模像样的将这些代码抽取出来并统一到util.js中,在需要使用的地方引入该文件,看起来很棒,团队内的同事很感激我提供了这么便利的工具包。

vLYbXVnopk

直到团队越来越大,开始有人抱怨

小杨:我定义了一个 each 方法遍历对象,但是 util.js 中已经存在一个 each 方法,每次都需要改方法名,我只能叫 eachObject 方法。<br>张三:我定义了一个 log 方法,可是王武的代码出问题了,谁来看看?

抱怨越来越多,最后参照 java 的方式,引入命名空间解决问题。于是 util.js 代码变成了

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

可能看上去的代码很 low,其实命名空间在前端领域的布道者是 Yahoo!的 YUI2 项目,看看下面的代码,是 Yahoo!的一个开源项目

if (org.cometd.Utils.isString(response)) { return org.cometd.JSON.fromJSON(response); } if (org.cometd.Utils.isArray(response)) { return response; }

通过命名空间虽然可以极大的解决冲突问题,但是每次在调用一个方法时都需要写一大堆命名空间相关的代码,剥夺了编码乐趣。

另一种方式是一个自执行函数来实现。

(function (args) { //... })(this);

繁琐的文件依赖

继续上述场景,很多情况下都需要开发 UI 层通用组件,这样项目组就不需要重复造轮子。其中有一个高频使用的组件就是 dialog.js

<script src="util.js"></script> <script src="dialog.js"></script> <script> org.Dialog.init({ /* 传入配置 */ }); </script>

虽然公共组做项目都会编写使用文档、发送邮件告知全员(项目地址、使用方式等),但是还是有人问「为什么 dialog.js 有问题」,最后排查的结果基本都是没有引入 util.js

<script src="dialog.js"></script> <script> org.Dialog.init({ /* 传入配置 */ }); </script>

命名冲突和文件依赖是前端开发中2个经典问题,经过开发者不断的思考和研究,诞生了模块化的解决方案,以 CMD 为例

define(function(require, exports) { exports.each = function (array) { // ... }; exports.log = function(message) { // ... }; });

通过 exports 就可以向外提供接口, dialog.js 代码变成

define(function(require, exports) { var util = require('./util.js') exports.编程客栈init = function () { // ... }; });

使用的时候可以通过require('./util.js')获取到 util.js 中通过 exports 暴露的接口。 require 的方式在其他很多语言中都有解决方案:include、

模块化的好处

1.模块的版本管理:通过别名等配置,配合构建工具,可以轻松实现模块的版本管理

2.提高可维护性: 模块化可以实现每个文件的职责单一,非常有利于代码的维护。

3.前端性能优化: 对于前端开发来说,异步加载模块对于页面性能非常有益。

4.跨环境共享模块: CMD 模块定义规范与 NodeJS 的模块规范非常相近,所以通过 Sea.JS 的 NodeJS 版本,可以方便的实现模块的跨服务器和浏览器共享。

CommonJS 规范

CommonJS 是服务器端模块的规范。NodeJS 采用了这个规范。CommonJS 加载模块是同步的,所以只有加载完成后才能执行后面的操作。

因为服务器的特点,加载的模块文件一般都存在在本地硬盘,所以加载起来比较快,不用考虑异步的方式。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

上一篇:如何在Nodejs中使用模块fs文件系统_JavaScript_网络编程
下一篇:详解JS中的对象字面量_JavaScript_网络编程