js模块化开发

什么是模块化?

一个模块就是实现特定功能的文件，有了模块，我们就可以更加方便地使用别人的代码，想要什么功能，就加载什么模块,但在ES6之前是没有模块化的

模块化有什么特点和好处

特点

1.形成一个独立的文件，例如：.js文件
2.有封闭的环境，对外提供接口，外面才能使用模块
3.模块与模块之间可以互相调用

好处

1. 可以使用第三方模块
2. 解决冲突
3. 解决依赖

ES6模式

a文件

export var b = 456;
export var c = 789;
    function show() {
        console.log(10,11,12);
    }
export default show
//expotr var b = 456    这个是多接口的写法
//export default show   这个是单接口的写法

b文件

import show,{ b , c } from '这里写a文件的路径'
 //单接口↑     ↑多接口的写法    
'./1.js'
console.log(b,c);
show()

html文件

<script src="这里写b文件的路径" type="module">script>
//type写module这个属性

require.js库

官网地址
这个库好坑…用的时候遇到了好多坑,憋了好几分钟,搞懂了之后用起来真香嘻嘻嘻嘻~
1.定义模块:define()
2.页面调用模块:data-main
3.配置路径

requirejs.config({
                paths : {
                        "jquery" : "../lib/jquery-3.4.1.min"//(这个路径有个坑)
                }
            })

下面上代码

---

a文件

define(function () {
    let a = 123;
    let b = 456;
    return {a,b} //接口
})

---

b文件

//define(['第一个路径是a模块的 注意!不用写文件后缀名','第二个路径是require的,就直接写jquery就可以了'],function(第一个参数是a模块接口的,第二个参数是require接口的){})
define(['./a','jquery'], function(i, $) {
    console.log(i.a,i.b);//输出a和b的值
    $('body').css('background','green')//直接测试修改body的背景色
});

---

html文件

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

 requirejs.config({
            paths: {
                "jquery": "../../jquery-3.4.1"
                //这里的坑要注意下,这个路径是相对于使用了requirejs库文件的jquery路径,
                //上面的b文件使用了requirejs库,所以这个路径是b文件相对于jQuery的路径,!!!同样也不用写文件的后缀名!!!
            }
        })