5-es6的模块化开发与其它的不同
1、加载机制不同
es是静态加载,其它是动态加载。
Es6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。
CommonJS 和 AMD、CMD 模块,都只能在运行时确定这些东西。
比如,其它模块就是对象(运行时,查找对象),输入时必须查找对象属性。ES6 模块不是对象,而是通过export命令显式指定输出的代码(编译时,代码合并重构),再通过import命令输入。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比其它模块的加载方式高
2、输出值不同
加载机制不同,导致了他们export输出的也不同
其它模块机制输出的是一个值的拷贝,而ES6模块输出的是值的引用。
其它模块输出的是被输出值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值
由于ES6输入的模块变量,只生成一个动态的只读引用,所以这个变量是只读的,对它进行重新赋值会报错,只能改变对象属性的值,不能够改变引用。如果是一个基本数据类型,不是引用类型的数据,也不能改变他的值,按照js尿性字符串和布尔就不是引用,举例子不能用这种类型数据写demo,否则演示不出效果
实例证明
(CMD)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="wrapp">
<button>改变</button>
</div>
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/sea.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
/**
*模块:
*功能:入口
*/
seajs.use(['./js/hello'],function (hello) {
$('button').click(function () {
hello.up()
console.log(hello.msg)
})
});
hello.js
define(function (require, exports, modul) {
var msg=0;
function up() {
msg++
}
modul.exports={
up:up,
msg:msg
};
})
效果
Es6
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="wrapp">
<button>改变</button>
</div>
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="bundle.js"></script>
</body>
</html>
app.js
/**
*模块:
*功能:入口
*/
import * as hello from './hello';
$('button').click(function () {
hello.up()
console.log(hello.msg)
})
hello.js
var msg=0;
function up() {
msg++
}
export {up,msg} ;
效果
3、总结
现在es6模块开发尚未被浏览器实现,所有的理论都是在webpack基础上的,不代表最终结果,随时可能被颠覆
参考
http://blog.csdn.net/pcaxb/article/details/53670097
https://www.cnblogs.com/diligenceday/p/5503777.html
5-es6的模块化开发与其它的不同的更多相关文章
- [译]使用6to5,让今天就来写ES6的模块化开发!
http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium= ...
- 使用6to5,让今天就来写ES6的模块化开发!
http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium= ...
- 模块化开发 | es6模块暴露与引入
CommonJS模块开发 CommonJS定义 每个文件就一个模块,有自己的作用域.在一个文件里面定义的变量.函数.类,都是私有的,对其他文件不可见. 私有作用域不会污染全局作用域. 模块可加载多次, ...
- JAVAScript:前端模块化开发
目录 一:前端模块化概要 1.1.模块化概要 1.2.函数封装 1.3.对象封装 1.4.立即执行函数表达式(IIFE) 1.5.模块化规范 1.5.1.CommonJS 1.5.2.AMD((Asy ...
- JavaScript学习总结(六)——前端模块化开发
早期的javascript版本没有块级作用域.没有类.没有包.也没有模块,这样会带来一些问题,如复用.依赖.冲突.代码组织混乱等,随着前端的膨胀,模块化显得非常迫切. 前端模块化规范如下: 一.前端模 ...
- require.js模块化开发
模块化开发的原因: 1.引入的js过多然后在加载的过程中容易出现假死的状态,导致页面会发生白屏 2.变量名的问题 在多人协作开发的时候容易出现变量名的冲突 面向对象 3.引入优先级的问题 模块化开发分 ...
- javascript模块化开发(二)
模块化开发(一) ES6模块化 详解 ES6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict". 顶层的this指向undefined,即不应该在顶层代码 ...
- javascript 模块化开发(一)
什么是模块化 将一组模块(及其依赖项)以正确的顺序拼接到一个文件(或一组文件)中的过程. 传统的模块化做法. 模块是实现特定功能的一组属性和方法的封装. 将模块写成一个对象,所有的模块成员都放到这个对 ...
- webpack前置知识1(模块化开发)
webpack前置知识1(模块化开发) 新建 模板 小书匠 在开始对模块化开发进行讲解之前,我们需要有这么一个认识,即 在没有过多第三方干扰时,成本低收益高的事物更容易获得推广和信赖. 模块化开发就 ...
- webpack初体验之模块化开发
写在前面的话 上次写过一篇关于webpack入门的博客,当时只是说借助node来完成开发,并用webpack打包以让浏览器识别.其实其主要思想就是实现前端模块化开发. 众所周知,历史上,JavaScr ...
随机推荐
- 基于struts2框架文件的上传与下载
在开发一些社交网站时,需要有允许用户上传自己本地文件的功能,则需要文件的上传下载代码. 首先考虑的是文件的储存位置,这里不考虑存在数据库,因为通过数据库查询获取十分消耗资源与时间,故需将数据存储在服务 ...
- exif_imagetype() 函数在linux下的php中不存在
1.问题,项目中上传文件使用插件时,windows上支持函数exif_imagetype(),而在linux上不支持. 2.PHP exif_imagetype的本质 PHP exif_imagety ...
- Ubuntu16.04 Tomcat9的安装
1. 从http://tomcat.apache.org/download-90.cgi 下载apache-tomcat-9.0.0.M11.tar.gz 2. 上传到Linux后移动到/opt/to ...
- 1-1、superset开发环境搭建
在对superset进行二次开发的过程中,往往需要搭建本地开发环境,修改后立即看到效果,下面我们就讲下开发环境的搭建. 1.打开PyCharm,在菜单栏上执行VCS-->Checkout fro ...
- cocos2dx游戏--三国关羽传【角色扮演类】Demo的制作及实现
项目地址:https://github.com/moonlightpoet/GuanYuZhuan 主要类及其对应效果: MainScene:菜单界面(用于选择不同剧本) StoryScene:故事界 ...
- JSP内置对象——request 及其响应get和post请求的实例
request对象客户端的请求信息被封装在request对象中,通过它才能了解到客户的需求,然后做出响应.它是HttpServletRequest类的实例.request对象具有请求域,即完成客户端的 ...
- 参数估计(1):从最小二乘到最小b乘
机器学习到底学习到了什么,或者说“训练”步骤到底在做些什么?在我看来答案无非是:所谓的“学习”就是把大量的数据归纳到少数的参数中,“训练”正是估计这些参数的过程.所以,除了“参数估计”, 我想不到还有 ...
- a 标签 download 和 target 不配合
发现一个奇怪的事,看代码 <a id="downloadAlink" target="_blank" href="http://www.baid ...
- tomcat启动报错:注释指定的bean类.与现有的冲突.相同的名称和类
错误: Unexpected exception parsing XML document from ServletContext resource [/WEB-INF/business/config ...
- CMDB实现的四种方式
第一种(agent): 这种方式是通过向每一台服务器安装agent脚本,然后通过中控机的API,来收集所需要的数据,最后放到数据库中,在通过web的方式显示出来. 实现流程图: 1.录入资产(主机名, ...