JavaScript 模块化开发入门

最新推荐文章于 2024-01-31 11:24:44 发布

codingap

最新推荐文章于 2024-01-31 11:24:44 发布

阅读量413

点赞数

分类专栏： Web JQuery 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/iamcnnetiger/article/details/126919331

版权

Web 同时被 2 个专栏收录

10 篇文章 2 订阅

订阅专栏

JQuery

4 篇文章 0 订阅

订阅专栏

JS 为什么要模块化

JavaScript 语言最初设计的主要作用仅仅是用来验证表单输入的有效性，为Web页面添加一些动画效果等，并不包含太多的高级语言的特性，此时通常直接在HTML页面中编写简单的 JS 代码或从外部引入一个 JS 文件即可。

随着前端开发技术的发展和演化，JS 在应用程序中的地位显著提升（甚至已经扩展到了服务端应用，如：Node.js），伴随而来的是前端 JS 代码的复杂度也在相应的不断提高，因此 JS 模块化编程成为了一个迫切需要解决的问题。

什么是 JS 模块化

JS 模块化是将一个大的 JS 文件根据功能或职责的需要，拆分成多个相互独立或依赖的小 JS 文件，再进行统一的拼装或加载。

JS 文件拆分后进一步细化了每个文件的具体职责：

提高代码可复用性
降低代码偶合度
更有利于多人协作开发和维护
…

JS模块化开发 - 全局函数

在早期的开发过程中就是将重复的代码封装到函数中，再将一系列的函数放到一个文件中（HTML或JS）

这种情况下全局函数的方式只能认为它们属于一个模块，但是程序并不能区分哪些函数是同一个模块，如果仅仅从代码的角度来说，这时没有任何模块的概念。

<script>    
// 全局 加法(转换成数字再相加)    
function add(a, b) {        
    return parseFloat(a) + parseFloat(b);    
}   
 
// 全局 减法    
function substract(a, b) {        
    return parseFloat(a) - parseFloat(b);    
}

console.log('1+2=' + add('1', '2'));
</script>

JS模块化开发 - 对象封装

通过添加命名空间的形式从某种程度上解决了变量命名冲突的问题，但是并不能从根本上解决命名冲突。

此时从代码级别可以明显区分出哪些函数属于同一个模块。

<script>    
// 计算器对象    
var calculator = {       
    count: 0,        
    // 加法        
    add: function (a, b) {            
        return parseFloat(a) + parseFloat(b);        
    },        
   // 减法        
   substract: function (a, b) {            
        return parseFloat(a) - parseFloat(b);        
    }    
}    
console.log(calculator.add('1', '2'));
</script>

JS模块化开发 - 立即执行函数

利用此方式将函数包装成一个独立的作用域，私有空间的变量和函数不会影响到全局作用域（私有公有成员分离）。

以返回值的方式得到模块的公共成员，公开公有方法，可以隐藏私有空间内部的属性。此方式可以有选择的对外暴露自身成员。从某种意义上来说，解决了变量命名冲突的问题。

<script>    
var calculator = (function () {        
    var count = 0;        
    // 加法        
    function addFun(a, b) {            
        return parseFloat(a)+parseFloat(b);        
    };  
      
    return {            
        add: addFun        
    }    
})();  
  
console.log(calculator.add('1', '2'));
</script>