前端模块化两种规范

前端模块化，是指js编写的的模块化规范。

本文参考：大神偶像阮一峰老师的文章

为什么要模块化？

1.一个文件需要很多js文件做依赖的时候，这些js文件之间的关系很容易让人眩晕，模块化后可以现用现引；

2. 模块后可以防止模块内的变量和模块外的变量相互污染；

模块化发展经历了哪些阶段？链接

模块化分类

js是前、后端都可以用的语言，针对前后端不同的加载速度，模块化规范也分为两种：后端的CommonJs 和前端的AMD规范

CommonJs 的应用者就是nodejs。（webpack和它什么关系？？？？？？）

CommonJs 规范是同步加载的，正是因为这一点，CommonJs 不适合作为前端规范来用，

（因为前端由于网速限制，每个文件都加载模块的话会产生大量的网络请求，只适合作为服务器的规范来使用）

nodejs每个文件都是一个模块；

通过module.export /export暴露接口来输出，通过require来引入（这些必须在学习完nodejs之后才能理解）；

AMD规范的应用者是requir.js；

require.js通过define来定义模块，通过require来加载模块，加载完模块后执行后面的回调函数，回调函数的参数就是加载的模块

具体操作（在html文件里引入<script src='./js/require.js' data-main ='./js/main.js'></script>）

main.js里配置（通常都有单独的配置文件）和引用

//main.js
require.config({
    baseUrl: ' ./tool'
    paths: {
        'jquery': 'jquery',//如果没有baseUrl，写：'./too/query'
        'math': 'math'
    }
})
//关于config属性的参数，是一个对象，对象的属性常用的有pahts（复数），baseUrl，

require(['jquery', 'math'], function ($, math) {//不配置的话会默认去找父级文件下的jQuery文件
    console.log($());
    math.add(1, 2)
})

定义模块：两种方法，函数式和对象式，通常使用函数式，也可以引用依赖的模块

 1 //定义模块有两种形式：函数式和对象式
 2 define(function() {  //函数式
 3     function add(a,b){
 4         console.log(a + b)
 5         return a + b;
 6     }
 7     return {
 8         add: add
 9     }
10 });
11 // define([
12 //     'require',
13 //     'dependency'
14 // ], function(require, factory) {
15 //     'use strict';
16     
17 // });
18 // define({   //对象式
19 //     add:function(a,b){
20 //         console.log(a + b)
21 //         return a + b;
22 //     }
23 // });

require.js的应用者是谁，和webpack有什么关系，为什么webpack的配置文件和CommonsJs的配置文件格式那么像？？？？？？？