es6模块化语法（模块化开发的核心）

本文目录

• 模块化开发的核心
• 如何使用 javascript中的import，export 语法
• html中import*is是重命名
• vue组件注册为什么有时候要在require后面加上default
• chrome 什么时候能支持es6模块化

模块化开发的核心

模块化开发就是有组织地把一个大程序拆分成独立并互相依赖的多个小文件（模块）。

模块内部有许多私有属性，只向外暴露一部分公开的接口(如可以修改私有属性的方法等)

ES6之前，JavaScript语言一直没有模块（module）体系，无法把大文件有组织地划分成小块，并管理之间地依赖。但是模块化的思想一直存在。因为用Javascript写的代码越来越庞大，而网页也越来越像桌面APP。如此庞杂的代码，如果不进行模块化，就可能引发命名冲突，造成不易复用、维护性高。

核心：导出和导入；

1、普通模块化：

同级新建文件index.html,a.js.b.js三个文件；

index.html中引入a.js和b.js。（a.js在前）

《scriptsrc="a.js"》《/script》

《scriptsrc="b.js"》《/script》

a.js中导出：

varmodules=(function(){

varname=’jack’;

varflag=true;

functionnum(a,b){

returna+b;

}

varobj={};

obj.flag=flag;

obj.num=num;

obj.name=name;

returnobj;

})()

b.js中导入：

console.log(modules.name)//jack

console.log(modules.num(1,6))//7

console.log(modules.flag)//true

在b.js可以取出a.js中obj的值。

2、commonJs模块化：export

a.js导出：

varname=’jack’;

varflag=true;

functionnum(a,b){

returna+b;

}

export.module({

name,

flag,

num

)}

b.js导入：

var{name,flag,num}=require(’a.js的路径’);//name,flag,num可以直接用

varobj=require(’a.js的路径’);//obj.name=’jack’,obj.flag=true,obj.num(1,6)=7

3、es6模块化：export导出,import导入

export的基本使用：

a.js:

导出方式一：

exportvarname="jack";

exportvarheight=1.88;

导出方式二：

varname="jack";

varheight=1.88;

export{name,height};

b.js

import{name,height}from’a.js’;

console.log(name);//jack

console.log(height);//1.88

4、导出函数或类：

//直接导出

//exportconstnum1=123;

//导出函数：

exportfunctionadd(num1,num2){

returnnum1+num2

}

//导出类

exportclassPerson{

run(){console.log(’this.a’)}

}

//导入函数和类

import{add,Person}from’./export.js’

console.log(add(1,2));

constp=newPerson();

p.run()

5、exportdefault:导入者自己命名。(同一个模块中只能有一个default)

//导出

exportdefaultfunction(){

console.log(’this.default’);

}

//导入

importdefrom’./export.js’;

de();

6、普通html中引入export的两个js文件，需要给script的type设为module;

《scripttype="module"src="a.js"》《/script》

7、全部统一导出：*可以导入模块中所有的export变量，

import*asallfrom’./export.js’;//all，为*的别名，方便后续使用。

console.log(all.num1,’aaa’)

如何使用 javascript中的import，export 语法

      ES6的Class只是面向对象编程的语法糖，升级了ES5的构造函数的原型链继承的写法，并没有解决模块化问题。Module功能就是为了解决这个问题而提出的。

    历史上，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如Ruby的`require`、Python的`import`，甚至就连CSS都有`@import`，但是JavaScript任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。    

    在ES6之前，社区制定了一些模块加载方案，最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。    

// React js ES6代码中的实例
import React from ’react’
import ReactDOM from ’react-dom’
import { createStore, combineReducers } from ’redux’
import { Provider } from ’react-redux’
import { Router, Route, IndexRoute, browserHistory } from ’react-router’
import { syncHistoryWithStore, routerReducer } from ’react-router-redux’
import { createDevTools } from ’redux-devtools’
import LogMonitor from ’redux-devtools-log-monitor’
import SliderMonitor from ’redux-slider-monitor’
import DockMonitor from ’redux-devtools-dock-monitor’
// other file js
import countReducers from ’./countReducers’
export default countReducers

html中import*is是重命名

在HTML中，
import * as
语法不是有效的HTML语法，而是ES6模块化语法的一部分，用于在JavaScript中导入和导出模块。
在JavaScript中，
import * as
语法用于从一个模块中导入所有的导出，并将它们绑定到一个命名空间对象上。例如：
// 导入一个模块并绑定到命名空间对象上import * as myModule from ’./myModule.js’;// 调用myModule中的方法myModule.myMethod();
在这个例子中，
myModule
是一个命名空间对象，它包含了myModule.js
模块中所有的导出。我们可以通过命名空间对象来访问和调用模块中的方法和变量。
需要注意的是，这种语法在HTML中是无效的，因为HTML不支持ES6模块化语法。在HTML中，可以使用
《script》
标签来引入JavaScript文件，但是需要使用特定的语法和属性来实现导入和导出。

vue组件注册为什么有时候要在require后面加上default

webpack 打包时支持 CommonJS、AMD 和 ES6 的模块化系统。

我们通常写 .vue 单文件组件时，在 script 语言块中使用的是 ES6 的语法，使用 export default 进行默认导出。

1.使用require 是 CommonJS的模块导入方式，不支持模块的默认导出，因此导入的结果其实是一个含 default 属性的对象，因此需要使用 .default 来获取实际的组件选项。
2.使用 ES6 的 import 语句，ES6 的模块化导入导出语法。import 时需要给定一个变量名，所有 import 语句必须统一放在模块的开头。

如果 .vue 文件中使用的本来就是 CommonJS 或者 AMD 的模块化系统语法，导出的是 module.exports 对象作为组件选项，那么使用 require 导入时就不需要使用 .default 来获取。

chrome 什么时候能支持es6模块化

首先要指出的就是FireFox在对ES6的支持上一直都比Chrome浏览器要领先，主要是因为，ES6的很大推动力来自于FF那帮JS元老（包括JS之父Brendan Eich等）
当年ES4难产，主要就是因为FF帮那边的人对语法改动太过激进，导致在ES4标准制定的时候冲突不断，所以最后才给下一代ES定了个harmony（和谐）的代号。
Firefox在ES规范之前就已经做了很多私有的语法制定，比如说迭代器，现在可以给对象指定个Symbol.iterator的key来实现一个迭代器，而FF很早就已经实现了形如obj=function(){}的迭代器。
所以ES6的标准，firefox的SpiderMonkey是实现最迅速的，而chrome的V8，却一直比较反复，特别是像Proxy这种特性，V8在大约一年半以前临时实现过一种，用了两个版本以后，突然彻底下架，然后一年多以来，这个Proxy的特性就一直没加回来，包括计划列表里都没有这玩意。
需要指出的是，题图里关于ES6的支持对比，firefox丢分在于没有支持class关键字，而Edge13却完整支持了ES6 class的语法糖，包括super。
其实class关键字一直存在于firefox的夜间版上面，可惜的是不知道什么原因，已经过了这么长的时间了，FF也没有把class移植到正式版上面。
其他FF相比于edge13丢分的在于内置对象的子类支持，就是形如class A extends Function这种，这个没的说，Edge13确实是领先其他浏览器。
但FF也有Edge13没有支持的一些特性，典型的比如：函数定义时的参数默认值，《!--var a =1;--》这种HTML注释JS的手段等等。
更何况FF还有一个很省事的语法糖：解构，这个解构语法就是FF那帮人造出来的，所以他们实现的最早，而其他浏览器也跟进的最慢，Edge13貌似现在也还未实现。
所以总体来说，这两个浏览器在特性支持上基本上在持平状态，FF如果把class从夜间版弄到正式版的话，就可以覆盖到90%了。