模块化开发

模块化开发

1. requirejs
   (1) RequireJS的目标是鼓励代码的模块化，它使用在js中加载js文件的方式代替传统的 script加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化
   
   (2) requirejs的出现主要解决两个问题
     ① 实现js文件的异步加载，避免网页失去响应
     ② 管理模块之间的依赖性，便于代码的编写和维护

   官网： http://requirejs.org/
   中文网：http://www.requirejs.cn/

2. 使用
   (1) 按照requireJS当中的规范要求，你只需加载一个文件就可以而，并指定页面主模块 main.js，由于requirejs默认的文件后缀名是js，所以可以把main.js简写成main

 	<script src ="require.js" data-main ="main"></script>

   (2) data-main属性的作用是，指定网页程序的主模块，main.js文件如下

    //main.js-----
    requirejs(['common','moduleA','moduleB','moduleC'],function(jq){
        //这里的代码等common，moduleA，moduleB，moduleC模块都加载完成后执行
        //但不保证以上模块的加载顺序
    });

  (3) 基础路径baseUrl (任何文件的加载都是基于此路径)
   ① 默认值是加载require.js的HTML文件所在的路径
   ② 但如果用了data-main属性，则主模块所在的目录就变成baseUrl

3. 常用方法
   (1) 配置参数：requirejs.config/require.config
   (2) 加载模块：requirejs/require
   (3 )定义模块：define

4. 配置config
   (1) 这个require.js你可以从官网下载，这个config.js你必须自己完成。不用担心，它写起 来非常简单

    //config.js-----
    requirejs.config({
        baseUrl : "js",
        paths : {
             "jquery": "lib/jquery.1.11.3"
        }
    });

  (2) baseUrl：指定基础路径

  (3) paths：path映射那些不直接放置于baseUrl下的模块名。设置path时起始位置是相对于baseUrl的
    以上配置路径 “jquery”: “lib/jquery.1.11.3”
冒号左边jquery模块名称，右边则是文件路径，注意文件没有后缀名，因为在 require看来所有的模块都是JS文件
    真实路径为：js/lib/jquery.1.11.3.js

  (4) shim配置(了解)

严格意义上来说，requirejs必须加载由define()函数定义的模块，但有一些插件，本身 未return任何对象或函数，只是对某个框架的扩展，例如 jquery.scroll.js 该怎么实 现模块化加载，答案是shim配置

    requirejs.config({
         baseUrl: "js",
         paths: {
             "jquery" :  "lib/jquery.1.11.3",
             "jquery.scroll" : "lib/jquery.scroll"
         },
         shim: {
             "jquery.scroll": {
                 deps: ["jquery"],//设置依赖
                 exports: "jQuery.fn.scroll"//暴露接口以便在回调函数中调用
             }
        }
    });

5. 加载模块
   (1) 以上配置好后，就可以加载模块了，requireJS把一个js文件当作一个模块，如加载jquery 只需如下代码

    	requirejs(['jquery'],function(jq){
        	//这里的jq就是jquery，原理请看模块的定义
    	});

6. 定义模块
   (1) 使用define方法定义模块必须符合require的规范要求，格式如下

	//把commonjs定义成模块
	//在引入模块时，回调函数中得到什么取决于定义模块时返回了什么
	define(function(){
	     return {
	          getStyle : function(){ ........ },
	          randomColor : function(){ ......... }
	     }
	})

  (2) 如果定义的模块需依赖其他模块，格式如下，这种模块加载方式称为：预加载

	//本模块依赖jquery
	//第一个参数为依赖模块，可以是多个，这里的路径同样基于baseUrl或path
	define(["jquery"],function(jq){
	    return {
	        start: function(){
	            jq("#box").show(1000);
	            console.log("模块提供的start方法");
	        }
	    }
	 })

(3) 如果需要在define内部依赖其他模块，则写法如下，这种模块加载方式称为：延迟加载

	define(["require","jquery"],function(require){
	        var a = require('./js/a');
	});

ES6 module

(在ES6前，前端就使用RequireJS或者seaJS实现模块化，ES原生支持模块)

1. export (格式：export{接口})
   (1) export 输出：可输出对象、函数、类、变量
   (2) default 匿名输出，导入时可使用任意变量

	//导出lib.js
	let myname = laoxie;
	export default myname;

    //导入
    import nickname from './lib';

2. import
   (1) *:导入所有接口

3. as:重命名，避免命名冲突

    //lib.js
    let getData = (data)=>{console.log(data)}
    
    //导出重命名
    export getData as get;

    //导入重命名
    import get as g from './lib';

4. 另一种导出导入模式(一般用于后端)

	//导出：
	module.exports = { insert, find }
	
	//导入：
	const { insert, find } = require(‘../utils/mongodb.js’)

模块化开发的优点

(1) 避免命名冲突

你有没有发现,整个项目当中,再也没有出现一个全局变量?即使两个框架名字冲突了也没关系

(2) 更好的依赖处理

你有没有发现，你再也没有考虑过加载顺序的问题

(3) 按需加载

更好的代码组织方式，而且你肯定没有发现，所有的JS文件的加载过程，已经变成了异步

(4) 面向对象编程

最后，你还发现，用了requireJS，你的代码想不写成面相对象都难

模块化规范与框架

1.commonJS：通用的模块规范(同步)
模块化框架：nodejs

2.AMD：异步模块定义规范(预加载)
模块化框架：requirejs

3.CMD：通用模块定义规范(延迟加载)
模块化框架：seajs
官网：http://seajs.org
五分钟上手教程：http://seajs.org/docs/#quick-start