前端模块化两种规范

前端模块化，是指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)
})

 

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

                       

//定义模块有两种形式：函数式和对象式
define(function() {  //函数式
    function add(a,b){
        console.log(a + b)
        return a + b;
    }
    return {
        add: add
    }
});
// define([
//     'require',
//     'dependency'
// ], function(require, factory) {
//     'use strict';
    
// });
// define({   //对象式
//     add:function(a,b){
//         console.log(a + b)
//         return a + b;
//     }
// });

 

 

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