web前端模块化开发

定义与由来

定义

模块就是实现特定功能的相互独立的一组方法。

由来背景

随着网站逐渐的开发,嵌入网页的js代码越来越庞大,而网页也越来越像桌面程序,需要一个团队去分工协作,进行管理和测试等等。为了更好的管理网页的业务逻辑,也就产生了模块化编程的理念。

为了让开发者方便地加载各种模块,因此需要一套编写模块的规范,而且目前通行的JavaScript的模块规范有两种:CommonJS 和AMD。另外,在模块化开发问题上,一方面以AMD/CMD为代表的规范在过去几年时间及大地提升了前端生产力。另一方面,随着ES6,Web Components的临近,开发者们面临着承前启后的巨大挑战。。。。这也给前端小伙伴带来了新一轮知识学习挑战。。。。呵呵,深入学习吧,且行且珍惜

模块加载器的作用

模块加载器主要是为了解决两个问题:

  1. 实现js的异步加载,避免网页失去响应;
  2. 管理模块之间的依赖性,便于代码的维护和编写

模块化的核心价值

代码复用;提升维护性也即是:公共模块通常用于促进代码复用;业务模块通常用于提升可维护性
在前端项目中经常使用的如JQuery,underscore.js等库,其实可以看做是公共模块,他们对常用的、工具性的代码提供了抽象。

CommonJS规范

模块化开发对服务器端开发是必须的,nodejs的模块系统就是参照CommonJS规范实现的。因此,可以理解为CommonJS即为服务器端模块的规范。根据CommonJS的规范,一个单独的文件就是一个模块,加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象。另外,CommonJS规范加载模块是同步的,只有加载完成,才能执行。由于Node.js主要用于服务器端编程,模块文件一般都已经存在本地硬盘,所以加载起来比较快,不用考虑非同步加载方式,所以CommonJS规范比较适合。但是,如果是浏览器环境,要从服务器端加载模块,这时就需要采用非同步模式,因此,浏览器段一般都是采用AMD/CMD规范

commonJS期望用其API写出的应用可以具备跨宿主环境执行的能力,这样不仅可以利用js开发富客户端应用,而且还可以编写以下应用:

  1. 服务器端js应用程序
  2. 命令行工具
  3. 桌面图形界面应用程序
  4. 混合应用(Titanium 和 Adobe AIR等形式的应用)
    commonJS规范涵盖了模块、二进制、Buffer、字符集编码、I/O流、进程环境、文件系统、套接字、单元测试、Web服务器网关接口、包管理等

AMD规范

AMD即能在客户端环境,并且能兼容服务器端模块的一种模块规范。

AMD规范使用define定义模块,例子如下:

define(['package/lib'],funciton(lib){
    funciton foo (){
        lib.log("hehe");
    }
    return {
        foo : foo
    };
});

define的第一个参数表示依赖的模块数组,第二个为加载完依赖的模块数组后,模块执行函数


AMD模块加载定义,require方法

与CommonJS一样,AMD也采用require()语句加载模块,但是不同的是有两个参数:require([module],callback);

第一个参数[module]是一个数组,其成员就是要加载的模块;

第二个参数callback,则是加载成功后的回调函数。

require(['package/moduleA'],funciton(moduleA){
    moduleA.add(3,4);
});

moduleA.add()与moduleA模块加载不是同步的,十分适合浏览器的环境.引入AMD规范的js库实现目前主要有两个:require.js 和curl.js

requireJS 与SeaJS

(来自玉伯的blog:)

相同之处

两者都是模块加载器,倡导模块化开发理念,核心价值都是让JavaScript的模块化开发变得简单自然。

不同之处

  1. **定位有差异,**RequireJS想成为浏览器段的模块加载器,同时也形成为Rhino/node等环境的模块加载器;SeaJS则专注于web浏览器端,同时通过Node扩展的方式可以很方便地跑在Node环境中。
  2. 遵循的规范不同,RequireJS遵循AMD(异步模块定义)规范,seaJS遵循CMD(通用模块定义)规范。规范的不同,导致了两者API不同。SeaJS更贴近 CommonJS Modules/1.1 和Node Modules规范。
  3. 推广理念有差异,RequireJS在尝试让第三方库修改自身支持RequireJS,目前只有少数社区采纳。SeaJS不强推,采用自主封装的范式来“海纳百川”,目前已有成熟的封装策略。
  4. 对开发调试的支持有差异,SeaJS非常关注代码的开发调试,有nocache、debug等用于调试的插件。RequireJS无这方面的明显支持。
  5. 插件机制不同,RequireJS采取的是在源码中预留接口的形式,插件类型比较单一。SeaJS采取的是通用事件机制,插件类型更丰富。

你可能感兴趣的:(Web前端开发)