详解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 相关文章推荐
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
javascript随机变色实例代码
Oct 15 Javascript
node.js事件轮询机制原理知识点
Dec 22 Javascript
webpack 最佳配置指北(推荐)
Jan 07 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入门速成(2)
2006/10/09 PHP
Cannot modify header information错误解决方法
2008/10/08 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
ArrayList类(增强版)
2007/04/04 Javascript
一个符号插入器 中用到的js代码
2007/09/04 Javascript
javascript Base类 包含基本的方法
2009/07/22 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
javascript时区函数介绍
2012/09/14 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
javascript中的this详解
2014/12/08 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
python统计一个文本中重复行数的方法
2014/11/19 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
python用post访问restful服务接口的方法
2018/12/07 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
django-初始配置(纯手写)详解
2019/07/30 Python
Python计算信息熵实例
2020/06/18 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
static函数与普通函数有什么区别
2015/12/25 面试题
2014年挂职干部工作总结
2014/12/06 职场文书
2015年度企业工作总结
2015/05/21 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang