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 ...
随机推荐
- JQuery获取和设置select下拉框的值
获取Select : 获取select 选中的 text : $("#sid").find("option:selected").text(); 获取selec ...
- ThinkPHP跳转与重定向的区别
跳转: 浏览器认为: 当前URL请求成功, 重新请求新的URL. 浏览器会 记录当前的URL 和 新的URL 在请求历史记录中. 回退, 是可以回退到, 当前的URL上的. (无论 success, ...
- 360破解大赛crackme分析--之3DES解密附加数据
具体的分析这里有.本人仅仅是对这里面有趣的算法进行了一些学习 分析链接 这次是逆向的使用3DES解密的过程中的内容: 使用微软的crypt库 使用3DES解密程序中的附加数据 代码: VOID enc ...
- zara
[1]ZARA是西班牙Inditex集团旗下的一个子公司,它既是服装品牌,也是专营ZARA品牌服装的连锁零售品牌.1975年设立于西班牙的ZARA,隶属于Inditex集团,为全球排名第三.西班牙排名 ...
- hdu 2196(求树上每个节点到树上其他节点的最远距离)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2196 思路:首先任意一次dfs求出树上最长直径的一个端点End,然后以该端点为起点再次dfs求出另一个 ...
- 如何使用phpmyadmin建立外键约束
之前都是用sql语句进行的主外键的关联,现在用可视化的phpmyadmin感觉方便了很多,但是在做主外键约束的时候却十中找不到操作在哪里.网上搜索的也是千奇百怪五花八门的,都说的很晦涩,很多都说需要使 ...
- php事件钩子
PHP中钩子函数的实现与认识: http://rmingwang.com/set-php-hooks.html 1.钩子函数是预设并在特定的条件下触发的. 2.钩子函数接管程序后可以影响到程序的走向 ...
- ajax请求步骤
ajax步骤:第一步:创建xmlhttprequest对象,var xmlhttp = new XMLHttpRequest(); XMLHttpRequest对象和服务器交换数据.第二步:使用xml ...
- Linux系统时间快8个小时
1.vi /etc/sysconfig/clock #编辑文件ZONE="Asia/Shanghai"UTC=false #设 ...
- sql语句中left join、right join 以及inner join之间的使用与区别
sql语句中left join.right join 以及innerjoin之间的使用与区别 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join( ...