JavaScript 模块化

向大牛学习 http://www.ruanyifeng.com/blog/2012/11/require_js.html

1.模块就是实现特定功能的一组方法。可以用过加载写好的模块，实现特定的功能

2.模块的编写方法：

（1）ECMA6 中的新语法实现模块化（目前只有chrome浏览器支持）：

<script type = "module">

//......

</script>

ES6的模块是通过export命令显示指定输出的代码，再通过import命令引入。

在ECMA6中每一个模块即是一个文件，在文件中定义的变量、函数、对象在外部是无法获取的。如果希望外部可以获取到则要用

export进行导出

 1.export 的用法：

  声明一个模块：  

可以用import 导入一个模块：

默认导出 default export：一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致。

注： 默认导出不需要加{}

(2) require.js  -- > 实现js文件异步加载，管理模块间的依赖性

步骤：

 1. 先下载最新版的 node.js

 2.放在 js文件夹的子目录里，在需要使用的html文件中引入 ：

<script src="js/require.js"></script>

 3.添加需要加载的自己的代码，假定为 main.js，放在js目录下

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

data-main : 指定网页程序的主模块。

先加载require.js，在加载main.js

主模块的写法：

1.如果主模块不依赖于其他模块，可直接写原生

2.主模块依赖于其他模块时，要使用AMD规范中的 require()函数

 require()函数接收两个参数，第一个参数是一个数组，用来放所依赖的模块，第二个参数是一个回调函数，

当模块都加载完成（浏览器异步加载）时调用，加载的模块会以参数形式传入函数，从而在回调函数内部

进行使用。

配置文件 config.js

使用requirejs.config（）函数

path 指定各个模块的加载路径

requirejs.config({

//baseUrl 基目录
    baseUrl : "http://127.0.0.1:8848/gp1911/requireJS/",
    paths : {
        "jquery" : "scripts/jquery-2.0.3", //省略后缀 .js
        "sw" : "scripts/swiper",
        "bootstrap" : "scripts/bootstrap",
        "jquery.ui" : "scripts/jquery-ui",
        "css" : "scripts/css"  //加载CSS文件的插件
    },

//加载非规范模块时，要先定义他们的特性。shim 用来配置不兼容的模块，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。
    shim : {
        "jq.cookie" : {
            deps : ["jquery"]
        },
        "sw" : {
            deps : ["css!styles/swiper.css"]
        },
        "bootstrap" : {
            deps : [
                "jquery",
                "css!styles/bootstrap.css"
            ]
        }
    }
})