JavaScript模块化编程方案+模块异步加载方案

最近更新时间：2017年8月2日14:07:31

    技术需要学习，更需要实践和积累，随着web项目的健壮，前端的岗位职责越来越重大，本文主要详解JavaScript模块化编程方案和模块异步加载方案

1、最佳模块化编程方案：立即执行函数写法封装独立模块的私有变量和方法

    比如，项目整体需要封装一个 用户输入信息（手机号、身份证号、邮箱）的校验模块，可采用如下模块化方案，模块内部对象成员私有化不对外暴露，即外部无法修改内部私有成员，只能访问。

//commonJS.js

var commonJS = (function(){

  var statement = "this module is a common JS function!";

  var isPhone = function(){if(true) return true};

  var isIdcard = function(){if(true) return true};

  var isEmail = function(){if(true) return true};

  return {

    statement:statement,

    isPhone:isPhone,

    isIdcard:isIdcard,

    isEmail:isEmail

  }

})();

2、模块使用全局变量的方案

//commonJS.js

var commonJS = (function($){

  //

})(jQuery);

3、JavaScript模块规范

    目前民间的两种Javascript模块规范：CommonJS和AMD

CommonJS规范中的模块加载方案，require("commonJS.js")，用于加载模块，属于同步加载，并且只有一个参数；

AMD规范中的模块加载方案，require("commonJS.js",function(){})，属于异步加载模块，第一个参数为加载的模块，第二个参数为模块加载成功的回调函数；

3、模块异步加载方案

    解决的问题：实现js文件的异步加载，避免网页失去响应；管理模块之间的依赖性，便于代码的编写和维护。

    具体方案如下：

<script type="text/javascript" src="require.js" defer async="true" data-main="../../home"></script>

注意：data-main是我们自己写的用来操作页面的js文件，称作主模块，相对路径是相对于require.js的路径！

    在主模块中需要配置它的依赖，这是就需要用到require的异步加载机制；

    require.js加载的模块采用AMD规范，模块必须按照AMD的规定来写，模块必须采用特定的define()函数来定义；如果没有使用AMD规范的define函数，需要在require.config.shim属性做兼容配置；