美文网首页Web前端之路Web 前端开发
关于 ES6 的 import 与 export 的思考

关于 ES6 的 import 与 export 的思考

作者: 梁同桌 | 来源:发表于2017-10-29 11:07 被阅读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';
    

    相关文章

      网友评论

        本文标题:关于 ES6 的 import 与 export 的思考

        本文链接:https://www.haomeiwen.com/subject/aoxypxtx.html