Web前端之路Web 前端开发

关于 ES6 的 import 与 export 的思考

2017-10-29  本文已影响48人  梁同桌

前言

模块划分,为了解耦,所以才出了这些规定。
我在学习这些模块化的时候,思考到如果你的代码规范,项目复杂度不高。完全不用这些语法,并且你可以自由的定义全局变量,非常的自由高效快速。
在 Node.js 上就有模块化,我另外一篇文章具体分析 CommonJS 模块底层如何实现

忧虑

  1. 现在我还没有体会到把一个文件里的代码写到不可维护的程度,就要学习模块划分。
  2. 这样其实有点拔苗助长,另外 ES6 module 没有达到我心目中的模块划分极致简约语法
  3. 模块化的出现是为了妥协,向大型项目妥协,向多人开发妥协。
  4. 现在的项目越来越大,新语法新规定越来越多。这无疑加重了我们的学习时间。程序员不仅仅是为了技术(技术更新迭代非常快,也经常抽象分层)是为了创造好的产品项目才去学习的。最终我们的目的是创造好的项目,进而改变世界 。(不排除有程序员单纯的热爱技术与编码艺术)

我心目中的 import 与 export

const a = import('路径');
export = a;

总结现在 ES6 的 module 语法规范

导出,导入

export const animal = {
  bird: 'bird',
  pig: 'pig'
}
import {bird as duck, pig} from 'animal'; //导出修改名字

变量提升

console.log(pig); 
import {bird as duck, pig} from 'animal';

静态执行

import { 'p' + 'ig' } from 'animal';//报错
if (x === 1) {
  import { pig } from 'animal';//报错
}

整体导入

import * as animal from 'animal';
//animal.bird;
//animal.pig;

default

export default {
  bird: 'bird',
  pig: 'pig'
}
import xxx from 'animal';

输入输出结合

export * from 'animal'; //这样的语法有必要存在吗?也许有少许场景把
export {bird as duck, pig} from 'animal';
上一篇下一篇

猜你喜欢

热点阅读