zoukankan      html  css  js  c++  java
  • ES6学习笔记(1)——模块化

      最近学习ReactJS经常遇见ES6语法,为了尽快弄懂ReactJS,因此想方设法绕过ES6,但是随着学习的深入,需要查阅的资料越来越多,发现大部分与之相关的框架和学习资料都是采用ES6写的,终究发现这是一个绕不过去的坎啊。ES6是JavaScript新一代的标准规范,其主要变化为:变量的解构赋值、箭头函数、Generator函数、Promise对象、类与继承、模块化这几个大方面,我学习时为了能看懂ES6写的代码,就先从这几个大的方面开始下手了,细节部分随着应用的需要再去查阅资料,学习参考资料为:ES6标准入门第二版(阮一峰)

    一、严格模式

    ES6模块自动采用严格模式,不管有没有在模块头部加上 " use strict " 

    二、export与import命令

    模块功能主要由两个命令构成:export和import。export命令用于规定模块对外接口,import命令用于输入其他模块提供的功能。

    export:

    export命令可以用来输出变量、函数或者类:

    1.输出变量

    export var a = 1 ;
    export var b = 2 ;
    export var c  = 3 ;

     其等效写法为:

    var a = 1;
    var b = 2 ;
    var c  = 3 ;
    export {a,b,c} ;

     2.输出函数或类

    export function name(x,y){
        return x * y ;
    }

     可以使用关键字as重命名函数的对外接口:

    function name(x,y){
        return x * y ;
    }
    
    export  name as  rename ;

    注意:export命令不能出现在块级作用域内,其语句输出的值是动态绑定,绑定其所在的模块

    import:

    import命令可以用来加载使用export命令定义的具有对外接口的模块

    import {a,b,c} from 'export.js'

    当模块没有默认输出时,模块导入的变量名必须与被导入模块(export.js)对外接口名字相同

    import使用as关键字可以重新命名

    注意:import命令具有提升效应

    export default:

    export default:为模块指定默认输出,当使用import命令加载模块时,不必需要知道原来模块的输出变量或者函数名字,可以自己取名字,而且import命令后不需要加大括号。

    注意:一个模块只能有一个默认输出

    export function exp(){
        //...
    }
    
    import {exp} from "exp";
    
    export default function exp(){
        //...
    }
    
    import exp from "exp";

       

    对内贵有志气,对外贵得人心
  • 相关阅读:
    个人学习jQuery笔记
    (转载) jQuery页面加载初始化的3种方法
    [转]学会和同事相处的30个原则
    解决iis出现这个问题-2147467259 (0x80004005)
    不规则瀑布流图片墙
    实现图片大小的自动控制( 图片大小控制CSS代码)
    (转载)DataTable使用技巧总结
    (转载) jQuery 页面加载初始化的方法有3种
    ajax连接数据库并操作数据库
    java Semaphore实现ABC三个线程循环打印
  • 原文地址:https://www.cnblogs.com/worldly1013/p/6036881.html
Copyright © 2011-2022 走看看