详解Js模块化的作用原理和方案


Posted in Javascript onApril 29, 2021

一、模块化概念

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起;块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信。

二、模块化作用

为什么要用模块化的JavaScript?

因为在实际的开发过程中,经常会遇到变量、函数、对象等名字的冲突,这样就容易造成冲突,还会造成全局变量被污染;
同时,程序复杂时需要写很多代码,而且还要引入很多类库,这样稍微不注意就容易造成文件依赖混乱;
为了解决上面的的问题,我们才开始使用模块化的js,所以说模块化的作用就是:

  • 避免全局变量被污染
  • 便于代码编写和维护

三、模块化历程

1、普通写法(全局函数及变量)

其实只要是不同的函数或变量放一起就是简单的模块,这样弊端很明显,就是变量容易被污染;

var name = '卡卡';
function cat1(){
    name = '年年';
}
function cat2(){
    name = '有鱼';
}

2、对象封装

将整个模块放在一个对象里面,外部访问时直接调用对象的属性或者方法就行

var cat = {
    name:'卡卡',
    cat1:function(){
        var name = '年年';
        console.log(name);
    },
    cat2:function(){
        var name = '有鱼';
        console.log(name);
    }
}
cat.name;// 卡卡
cat.cat1();// 年年
cat.cat2();// 有鱼

这种方法虽然解决了变量冲突问题,但是容易被外部随意修改:

cat.name = '楼楼';

3、匿名函数方式

var cat = (function () {
    // 匿名函数的局部变量name
    var name = '卡卡';
    // 匿名函数的局部函数cat1
    var cat1 = function () {
        var name = '年年';
        console.log(name);
    };
    // 匿名函数的局部函数cat2
    var cat2 = function () {
        var name = '有鱼';
        console.log(name);
    };
    //通过window暴露一个对外的口,想要被外界访问,可以放到这里
    window.myModule = {
        cat1:cat1,
        cat2:cat2,
        name:name,
    };
})();
console.log(myModule.name);// name变量放入暴露口内,可以输出,结果为:卡卡
myModule.cat1();// cat1函数放入暴露口内,可以输出,结果为:年年
myModule.cat2();// cat2函数放入暴露口内,可以输出,结果为:有鱼

如果把变量name移除,此时再访问就访问不了,结果为undefined,这样就实现了变量不被随意修改的问题,即:

window.myModule = {
    cat1:cat1,
    cat2:cat2,
};
console.log(myModule.name);// undefined

匿名函数方式基本上解决了函数污染及变量随意被修改问题,这个也是模块化规范的基石!

详解Js模块化的作用原理和方案

四、模块化方案

根据匿名函数自调用的方式,同时为了增强代码依赖性,现在大部分JavaScript运行环境都有自己的模块化规范;

可以分为:Commonjs、AMD、CMD、ES6 module四大类

1、CommonJS

①在node环境下使用,不支持浏览器环境
②NodeJS遵循的规范
③使用require()进行引入依赖
④使用exports进行暴露模块

2、AMD

①浏览器环境下的异步加载模块
②RequireJS遵循的规范
③依赖于require.js模块管理工具库
④AMD 推崇依赖前置

3、CMD

①浏览器环境下,同时支持异步和同步加载
②SeaJS遵循的规范
③CMD 推崇依赖就近

4、ES6 module

ES6模块化语法在编译时就能确定模块的依赖关系,还能确定好输入输出的变量声明,已经不仅仅是模块规范,现在已经作为JS语言的标准语法使用,有以下特性:

①浏览器环境、服务器环境都支持
②编译时就能确定模块的依赖关系及变量,其他模块规范都是在运行时确定的
③export命令用于规定模块的对外接口
④import命令用于输入其他模块提供的功能

这里补充一点:ES5版本的模块化方案,仅在语言的层面上实现了模块化,缺点在于无法直接运行在大部分 JavaScript 运行环境下,必须通过构建工具转换成标准的 ES5 后才能正常运行,这里就需要使用自动化构建工具webpack。

以上就是详解Js模块化的作用原理和方案的详细内容,更多关于Js模块化的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
详解JavaScript中的执行上下文及调用堆栈
JavaScript实现淘宝商品图切换效果
JavaScript实现显示和隐藏图片
Apr 29 #Javascript
JS Canvas接口和动画效果大全
Apr 29 #Javascript
JS ES6异步解决方案
Apr 29 #Javascript
聊聊JS ES6中的解构
Apr 29 #Javascript
详解TypeScript中的类型保护
Apr 29 #Javascript
You might like
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php模板函数 正则实现代码
2012/10/15 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
请说出几个常用的异常类
2013/01/08 面试题
工作中个人的自我评价
2013/12/31 职场文书
自我鉴定注意事项
2014/01/19 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
交通违章检讨书
2014/09/21 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书