javascript模块化

2023年9月2日 156次阅读 来源: webCoder

我们为什么要模块化？
一般出来什么东西，说明当前的工具有其缺陷，或者是为了方便什么。
那么我们就来看看通过模块，我们可以做到什么？
我们可以只关注自己的核心逻辑，而不用考虑其中的辅助功能。比如我们想要实现计算两个文本框中数值的和，我们只需要关注业务逻辑,而不需要关注自己如何查找到该元素（查找到元素可以交给jquery来做，还解决了兼容性问题）。
通过模块，我们可以方便的使用别人的代码，需要什么模块就引入对应的依赖模块。

我们先来看看几种原生js的实现模块化得方法（下面说的每一个方法都是为了解决上一种方法出现的问题）：

  • 原始的模块写法：

        function a1(){

    }

    function a2(){

    }
  缺点：污染全局变量，可能造成变量冲突，无法直观的显示二者的联系

  • 解决上一问题

var module = {
    a1: function(){
    
    },
    a2: function(){
    
    }
}
缺点：用户可以在外面修改module内的变量
  • 解决上一问题
var module = (function(){
    var m1 = function(){
    };
    var m2 = function(){
    };

    return {
        m1 : m1,
        m2 : m2
    };
});
通过立即执行函数，这样就解决了模块内部变量可能被修改的问题
缺点： 如果此模块需要依赖另一个模块才能生效
  • 解决上一问题
var module = (function(mod){
    mod.m1 = function(){
    };
    return mod;
})(another_module);

下面我们介绍现在应用广泛的javascript模块规范：CommonJS,AMD,以及国内的CMD。

  1. CommonJS
    我们先来说CommonJS，在其中有一个require()方法，用于加载模块
    比如：
    假设我们的一个模块（add_module）中有一个求两数之和的方法，在另一个地方我们就可以通过下面的方法使用这个求和方法。
var addModule = require(‘add_module’);
addModule.add(1,2);
  1. AMD
    既然已经有了CommonJS，为什么还会出现AMD呢？
因为CommonJS不适合浏览器环境，上面的代码假如在浏览器中执行，那么浏览器需要时间来加载add_module，如果网络条件不好，浏览器会出现“假死”状态。因此浏览器端不能采用“同步加载”，而应该使用“异步加载”。

AMD（异步模块定义），采用异步的方式加载模块，所有需要依赖其他模块的语句都被定义在回调函数中。
用AMD的语法改写上面CommonJS的写法：

require([‘add_module’],function(addModule){
    addModule.add(1,2);
});
  1. 基于AMD规范的javascript库：require.js
    require.js是为了实现下面的两个效果：
  • 实现js文件的异步加载，避免网页失去响应；
  • 管理模块之间的依赖性，便于代码的编写和维护。

3.1 使用require.js
从官网下载require.js，在html中引入

<script src="js/require.js" defer async="true" ></script>

async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。
引入我们自己写的需要执行的js文件

<script src="js/require.js" data-main=“main” defer async="true" ></script>

data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

  main.js文件:
require(['moduleA', 'moduleB'], function (moduleA, moduleB){
　　　　// some code here
　　});

require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，上例就是[‘moduleA’, ‘moduleB’]，即主模块依赖这2个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。
require()异步加载moduleA，moduleB，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。

比如我们需要依赖jquery
require(['jquery'], function ($){
　　　　// some code here
　　});

  主模块的依赖模块是['jquery']。
默认情况下，require.js假定这个模块与main.js在同一个目录，文件名为jquery.js，然后自动加载。
使用require.config()方法，我们可以对模块的加载行为进行自定义。require.config()就写在主模块（main.js）的头部。
参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。
如果我们的依赖文件和main.js不在同一文件夹下呢？
require.config({
　　　　paths: {
　　　　　　"jquery": "lib/jquery.min"
　　　　}
　　});
也可以通过配置baseUrl来改变基目录
require.config({
　　　　baseUrl: "js/lib",
　　　　paths: {
　　　　　　"jquery": "jquery.min"
　　　　}
　　});
自定义的require.js加载的模块，采用AMD规范，即就是模块必须采用特定的define()函数来定义。
  • 如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。
define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});
  • 如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。
define(['myLib'], function(myLib){
　　　　function foo(){
　　　　　　myLib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});
加载非规范的模块

理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js是否能够加载非规范的模块呢？
回答是可以的。
这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。
举例来说，underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。

  require.config({
　　　　shim: {
　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},
　　　　　　'backbone': {
　　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'
　　　　　　}
　　　　}
　　});

require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。

4.CMD
关于CMD的介绍，大家可以点击这里查看；
关于AMD和CMD的比较，大家可以点击这里看玉伯写的一篇评论；
SeaJS和RequireJS的区别，大家可以点击这里。

本文内容是我自己在阮一峰博客的基础上整理的，原文大家可以查看：
http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
http://www.ruanyifeng.com/blog/2012/11/require_js.html

    原文作者：webCoder
    原文地址: https://www.jianshu.com/p/1d2a21d5deb3
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞