前端模块化个人理解

什么是模块化？

        1.简单来说模块化就是将一段代码根据一定的规则封装起来。一整个项目由n个封装好的代码组成，就是模块化

        2.每个模块内部的代码大多数都应该是封闭私有的，留一些接口与外部进行通讯。

模块化的发展

        1.function 的封装

                特点：将不同功能封装成不同的全局函数，通过形参改变实参来进行调用

                缺点：全局变量，容易出现命名冲突，成员关系不明确

function module (res){
   console.log(res)
}
module("函数的封装")
 

        2.对象封装

                特点：创建一个对象，把数据和方法绑定在对象上，可以通过prototype来继承

                缺点：外部可以直接修改内部模块数据，

const Module={
    data:"你好"，
    func(){
        console.log("你好")
    }
}

console.log(Module.data) //你好
Module.func()            //你好

     3.js文件的封装

                特点：把一整个js文件作为一个模块，用导入的方法使用

                缺点：文件容易过多，如果嵌套层数过多，溯源困难

       

document1.js    文件1

export default hallo = function hallo (){
    console.log("hallo")
}

document2.js    文件2

import hallo from "./document1.js"

hallo()    //hallo

4.引入依赖

        特点：数据是私有的，只能通过暴漏方法操作

        缺点：模块之间存在强关联，一个出现问题整个文件都有可能出现问题

index.html 文件
<script type="text/jsvascript" scr='jquery.js'></script>
<script>
$("button").on("click",function(){
    var version = $().jquery;
    alert("你正在运行的jQuery版本为: " + version);
})
</script>

模块化的优点

        1.避免了命名冲突

        2.更好的分离项目，按需加载

        3.提高复用性

        4.提高可维护性

模块化缺点

        1.系统分层，调用链长

        2.模块之间通讯比较困难

        3.复用组件后，做差异化比较难。