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 ...
随机推荐
- php和js实现文件拖拽上传
Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...
- 浅谈Spring(一)
Spring 框架是一个分层架构,由 7 个定义良好的模块组成.Spring 模块构建在核心容器之上,核心容器定义了创建.配置和管理 bean 的方式. watermark/2/text/aHR0cD ...
- [转]Linux动态库的种种要点
linux下使用动态库,基本用起来还是很容易.但如果我们的程序中大量使用动态库来实现各种框架/插件,那么就会遇到一些坑,掌握这些坑才有利于程序更稳健地运行. 本篇先谈谈动态库符号方面的问题. 测试代码 ...
- u盘作为git仓库,完成不同地方的代码同步
参考网上一篇 "把Git Repository建到U盘上去" 1.我经常有这样的需求,工作.家里需要对同一份代码或文档编辑,并希望在不同地方能同步: 如果是私密性不那么强,可以直接 ...
- Spring_day04--课程安排_回顾SSH框架知识点_SSH框架整合思想
Spring_day04 上节内容回顾 今天内容介绍 回顾SSH框架知识点 Hibernate框架 Struts2框架 Spring框架 SSH框架整合思想 整合struts2和spring框架 Sp ...
- 自动化测试环境准备robotframework
(一)针对python2.7版本的自动化环境准备: python 下载地址: https://www.python.org/downloads/ 这里选择Python2.7系列的,后面涉及到wxPyt ...
- studio导入Eclipse 项目要改的文件
添加下面文件即可,一个不能少 1. project 2.project.properties 3.classpath 4.AndroidManifest.xml 以上目录都有可以正常导入studio中
- IOS实现打电话后回调
本文转载至 http://blog.csdn.net/cerastes/article/details/38340687 UIWebView *callWebview =[[UIWebView a ...
- wap开发体会<转载>
前二天因工作需要,上头要求做一个wap版的网站,到网上学习了一天,弄了个beta版出来(http://wap.luckty.com 功能很一般),整理几点经验如下: 1.wap网站用的是wml标识,非 ...
- docker的私有仓库的搭建
author: headsen chen date:2018-06-30 23:14:16 服务端(私有仓库:centos7_64位),使用端:centos6_64位 1.仓库的搭建: 安装dock ...