前端模块化CommonJSES6
一、CommonJS(同步加载模块)
允许模块通过require方法来同步加载所要依赖的其他模块,然后通过exports或者module.exports来导出需要暴露的接口。
使用方式:
//导入 require('module'); require('../app.js'); //导出 exports.getInfo=function(){}; module.exports=someValue;
CommonJS必须在node环境下才能使用,而浏览器是不支持CommonJS的,必须使用一些转换工具,将我们服务器端的CommonJS语法转化为浏览器识别的语句。
二、AMD
Common为服务器端而生,采用同步加载的方式,因此不适用浏览器。
AMD规范则是异步加载模块,允许指定回调函数,等模块异步加载完成后即可调用回调函数。
AMD的核心思想是通过define来定义一个模块,然后使用require来加载模块。
使用方式:
//Math.js define([], function(){return {'add': function(a, b) {return a + b;}} }) //main.js require.config({paths : {"math" : "Math"} }); require(['math'], function (math) {console.log(math.add(2, 3)); }); console.log('done'); //done //5
三、CMD
CMD跟AMD的主要区别在于:
(1)对于以来的模块,AMD是提前执行,提前加载依赖,CMD是延迟执行;
(2)AMD推崇依赖前置,而CMD推崇依赖就近,按需加载。
四、ES6
ES6自带模块化,可以使用import关键字引入模块,通过export关键字导出模块,但由于ES6目前无法在浏览器中执行,所以只能通过babel将不被支持的import编译成当前受到广泛支持的require。
ES6和CommonJS模块的差异
(1)CommonJS模块输出的是一个值的拷贝,ES6模块输出的是值得引用;
CommonJS对于基本数据类型,属于复制,同时在另一个模块可以对该模块输出的变量重新复制;
对于复杂数据类型,属于浅拷贝,由于两个模块引用的对象指向同一内存空间,因此对该模块的值做修改会影响另一个模块;
ES6模块中的值属于【动态只读引用】
- 对于只读来说,即不允许修改引入变量的值,import的变量是只读的,不论是基本数据类型还是复杂数据类型。当模块遇到import命令时,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。
- 对于动态来说,原始值发生变化,import加载的值也会发生变化。不论是基本数据类型还是复杂数据类型。
(2)CommonJS模块是在运行时加载,而ES6模块是在编译时输出接口。因为CommonJS加载的是一个对象(module.exports属性),该对象只有在脚本运行完才会生成;而ES6模块不是一个对象,他的对外接口只是一种静态定义,在代码静态解析阶段就会生成。
转载于:https://www.cnblogs.com/xiaoan0705/p/11250914.html
前端模块化CommonJSES6相关推荐
- 前端模块化开发学习之gulpbrowserify篇
随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发 ...
- 模块化加载_前端模块化简单总结
来源 | http://www.fly63.com/article/detial/9827 前言 JavaScript初期就是为了实现简单的页面交互逻辑,如今CPU.浏览器性能得到了极大的提升,很多页 ...
- web前端模块化开发_真正的模块化Web应用程序:为什么没有开发标准?
web前端模块化开发 OSGI , SpringSource , Jboss模块 ,J2EE和清单永远不会结束.所有这些技术都向他们的最终用户/开发人员保证了相同的东西,或多或少是Java模块化Web ...
- requirejs加载顺序_前端模块化之AMD — Requirejs的使用
前言 随着Ajax技术的兴起,前后端分离的开发模式逐渐占领了几乎整个市场,现在的服务器带宽也足够完成大量数据交互,于是很多以前在服务器端的逻辑也可以移植到前端来处理了,从而减轻服务器的压力,当然,这样 ...
- [ES6] 细化ES6之 -- 前端模块化
前端模块化 前言 前端开发领域发展到目前阶段: 零件化 - 最终呈现给用户是一个完整的产品(由各个零件组成的) 降低生产成本 – 多人协作(每个人各司其职) 降低使用成本 - 各个零件之间是低耦合的 ...
- ❤️《大前端—模块化》
<大前端-模块化> 1.简介 模块化产生的背景 随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. Javascript ...
- 最全面、最详细的“前端模块化”总结
背景 随着前端功能越来越复杂,前端代码日益膨胀,为了减少维护成本,提高代码的可复用性,前端模块化势在必行. 所有js文件都在一个html中引入,造成以下不良影响: 请求过多.首先我们要依赖多个模块,那 ...
- 模块化加载_前端模块化概述
前端模块化开发 随着前端应用的不断复杂,我们不得不花大量的时间去管理.模块化呢,就是一种最主流的代码组织方式.它通过把我们的复杂代码,按照功能的不同,划分为不同的模块,单独维护.提高我们的开发效率,降 ...
- 前端模块化、组件化的理解
前端模块化.组件化的理解 到底什么是前端工程化.模块化.组件化 前端组件化思想 浅谈前端架构的工程化.模块化.组件化.规范化
最新文章
- php 安全上传图片,php 图片上传安全探讨
- 数据预处理之归一化(normalization)
- 32 - I. 从上到下打印二叉树
- javascript window Timing
- linux下tomcat发布网站验证码获取不到
- 第十五章 面向对象程序设计
- 挽救数据库性能的 30 条黄金法则 | 原力计划
- UVA621 Secret Research【水题】
- C语言实现加密解密功能 附带详细注释源码
- 计算机二级试题17,《计算机二级考试试题及答案17》.doc
- 微软服务器系统补丁kb2919355,Windows 8.1补丁KB2919355无法安装的解决方法
- 实验一:VLAN实验
- QQ聊天记录统计可视化分析
- 小米手机后台弹出界面(允许应用在后台弹出界面)权限问题解决方案
- java8中的Stream用法详解
- 菜鸟官网下载爱装apache
- C#,佩尔数(Pell Number)的算法与源代码
- 北邮智能车仿真培训(二)—— 搭建仿真模型
- 故障分析 | 从 data_free 异常说起
- C++进制转换(十进制转二进制、八进制、随意进制)