js模块化 理论学习

119 阅读1分钟

1.全局方法

    function a(){
        
    }
    function b(){
        
    } 

缺点:容易产生全局污染

2.结构/对象封装

     let module = {
        data:'aaa',
        funcA(){
            console.log("funcA",data)
        }
    } 
    module.data = 'bbb' //可以直接修改,破坏了原来的结构
    module.funcA()

缺点:对象/结构的内容会外部修改

3.自执行函数

(function(window){
    let data = ''
    function funcA() {
    
    }
    window.module = {funcA}

})(window)
module.data //访问失败
module.funcA() // 正常访问

缺点:如果这时候需要引用别的模块访问不了

4.自执行函数(带参数)

(function(window,$){
    let data = ''
    function funcA() {
        $("#xxxx").html("yyyy") // 这里可以正常使用别的模块代码 jquery操作dom
    }
    window.myModule = {funcA}
})(window,jquery)
myModule.funcA() // 正常访问
<!-- 使用方式-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="myModule.js"></script>
<script >
    myModule.funcA()
</script>

缺点:参数不灵活,