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";

   

时间: 2024-12-28 12:50:09

ES6学习笔记(1)——模块化的相关文章

thinkphp学习笔记5—模块化设计

1.模块结构 完整的ThinkPHP用用围绕模块/控制器/操作设计,并支持多个入口文件盒多级控制.ThinkPHP默认PATHINFO模式,如下: http://serverName/index.php(或者其他应用入口文件)/模块/控制器/操作/[参数名/参数值...] 应用:由同一个入口文件访问的项目称为一个应用,在完整版的代码中就是Application 模块:一个应用下面可以包含多个模块,每个模块对应独立的目录,在完整版的代码中有Admin,Home,Common,Runtime四个模块

es6学习笔记初步总结

es6学习笔记初步总结 1. let.const 和 block 作用域 在ES6以前,var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部).这就是函数变量提升例如: let 关键词声明的变量不具备变量提升(hoisting)特性 let 和 const 声明只在最靠近的一个块中(花括号内)有效 当使用常量 const 声明时,请使用大写变量,如:CAPITAL_CASING const 在声明时必须被赋值 否则报语法错误SyntaxError

ES6学习笔记(一)

1.ES6学习之let.const (1).var.let.const 变(常)量声明 ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景. 在ES6中let就诞生了,实际上它为javascript新增了块级作用域. let只在变量声明时 ,所在的代码块中有效. 由于这一特性,let很适合在for循环中使用. 如下图是一个demo: let声明变量的特点: a:不存在变量提升: console.log(m);//Uncaught ReferenceError: m is

ES6学习笔记<三> 生成器函数与yield

为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口(Interface),yield则是生成器函数中表示 返回 或 继续 执行的关键字. 弄清楚这两个概念后,先看一个例子: function* fun(val) { yield 1*val; yield 2*val; yield 3*val; yield 4*val; return 5*val; }

我的es6学习笔记

前两个月看了一套es6的教程,现在将当时我做的笔记分享出来,与大家一起分享,我的不足之初也希望大家可以指出来.虽然简单学过一遍,但是我项目中用到的也就const,let,解构赋值,默认参数,箭头函数,promiss,模板字符串差不多这几个吧,其他的还不是很了解.现在再拿出来结合阮一峰老师的书再重新的学习一遍. ES6 npm install babel-cli -g npm install babel-cli babel-preset-es2015 --save-dev babel es6.js

ES6学习笔记(二)——字符串扩展

相信很多人也和我一样,不喜欢这样循规蹈矩的逐条去学习语法,很枯燥乏味.主要是这样学完一遍之后,没过一段时间就忘到九霄云外了.不如实际用到的时候研究它记得牢靠,所以我就整理成笔记,加深记忆的同时便于复习查看. 在这样不断的学习过程中,也提高了自己的总结能力:) 1.字符串的遍历器接口 ES5,数组和对象可以进行遍历,使用for() 和 for...in,还有jq中的each()方法进行遍历. ES6为我们提供了字符串遍历器  for...of 循环遍历 优点:可以识别大于0xFFFF的码点,传统的

ES6学习笔记之Promise

入职百度EFE团队实习已经三周了,实习中接触到了生产环境的技术和开发流程,大开眼界,和自己在学校接小作坊式项目是很不一样的体验.其中一个很大的感触是,ES6早已不是“选修”的尝鲜技术,而是已经全面普及应用.非学不可的“必修”技术,看来该版本新加入的特性的确解决了前端项目开发中的痛点,有利于提升开发效率. 说到ES6,像let,const,箭头函数这些特性简单易懂,很快就实现了无痛上手:然而Promise不是那么直观,项目文档里大量的“返回一个Promise对象”让初接触这一概念的我一度懵比,于是

ES6学习笔记之变量声明let,const

最近用淘宝的weex做了个项目,最近稍微闲下来了.正好很久没有接触RN了,所以趁这个机会系统的学习一下ES6的相关知识. 孔子说:没有对比就没有伤害.所以我们要拿ES6和ES5好好对比的学习.这样才能明白es6是多少的好,积极的拥抱她! 1.let 用let声明的变量,只会在let命令所在的代码块内有效. let的块状作用域 我们来看一个简单的例子: 'use strict'; { let name = 'cloud'; var age = 21; } name;//ReferenceError

ES6学习笔记<五> Module的操作——import、export、as

import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小工程,再用一种简单的方法把这些小工程连接在一起. 这有可能导致两个问题: 一方面js代码变得很臃肿,难以维护 另一方面我们常常得很注意每个script标签在html中的位置,因为它们通常有依赖关系,顺序错了可能就会出bug 在es6之前为解决上面提到的问题,我们得利用第三方提供的一些方案,主要有两种