北妈每日一学:ES6 之 模块化-重要!
北妈每日一学
《北妈每日一学》
北妈每日一学用最短的篇幅 ,最好的排版,最简洁的例子和大家一起学习、入坑。
今天来学 风靡网络的- es6箭头函数
ES6 简介
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。
也就是说,ES6就是ES2015。
虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6,但为了看懂别人写的代码你也必须要懂ES6的语法了...
北妈一句白话就是:之前用的,你所熟悉的js语法是es5标准,现在是es6标准,恩就这么多。
ES6模块的import和export用法总结
ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。同时还有CMD规范,为同步加载方案如seaJS。
ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。
ES6模块主要有两个功能:export和import
export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口
import用于在一个模块中加载另一个含有export接口的模块。
也就是说使用export
命令定义了模块的对外接口以后,其他JS文件就可以通过import
命令加载这个模块(文件)。如下图(假设a和b文件在同一目录下)
// a.js
var sex="boy";
var echo=function(value){
console.log(value)
}
export {sex,echo}
//通过向大括号中添加sex,echo变量并且export输出,就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
//不能写成export sex这样的方式,如果这样就相当于export "boy",外部文件就获取不到该文件的内部变量sex的值,因为没有对外输出变量接口,只是输出的字符串。
// b.js
通过import获取a.js文件的内部变量,{}括号内的变量来自于a.js文件export出的变量标识符。
import {sex,echo} from "./a.js"
console.log(sex) // boy
echo(sex) // boy
a.js文件也可以按如下export语法写,但不如上边直观,不太推荐。
// a.js
export var sex="boy";export var echo=function(value){ console.log(value) }
//因为function echo(){}等价于 var echo=function(){}所以也可以写成
export function echo(value){
console.log(value)
}
以上是export与module的基本用法,再进行拓展学习
前面的例子可以看出,b.js使用import
命令的时候,用户需要知道a.js所暴露出的变量标识符,否则无法加载。可以使用export default
命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。
//a.js
var sex="boy";export default sex(sex不能加大括号)
//原本直接export sex外部是无法识别的,加上default就可以了.但是一个文件内最多只能有一个export default。
其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default,自然default只能有一个值,所以一个文件内不能有多个export default。
// b.js
本质上,a.js文件的export default
输出一个叫做default
的变量,然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名,且不需要用大括号包含import any from "./a.js"
import any12 from "./a.js" console.log(any,any12) // boy,boy
参考:http://es6.ruanyifeng.com/#docs/module
北妈每日一学:ES6 之 模块化-重要!相关推荐
- 北妈每日一学:ES6语法之 箭头函数(附免费学习资料)
北妈每日一学 <北妈每日一学> 北妈每日一学用最短的篇幅 ,最好的排版,最简洁的例子和大家一起学习.总结.入坑. 今天来学 风靡网络的- es6箭头函数 ES6 简介 ECMAScript ...
- 北妈每日一学:ES6语法入门 之开门见山
北妈每日一学 <北妈每日一学> 我决定从今天开始,发布新栏目:"北妈每日一学",每天发布一个或者一系列的技术知识点来给大家,这样我们每天可以一起总结和学习,也算一个好的 ...
- 北妈每日一题:如何拿到 金条、蛋糕和大钻石
点击上方"前端你别闹",关注并星标 喜欢我的都关注我了 北妈每日一题 题目一:你让工人为你工作7天,给工人的回报是一根金条.金条平分成相连的7段,你必须在每天结束时给他们一段金条, ...
- 北妈每日一题:JS从无序乱码找我要的数字!
点击上方"前端你别闹",关注并星标 喜欢我的都关注我了 北妈每日一题 我需要整齐排列 问题1:有这样一串杂乱无章的数据: [dahsidoai 213907;a oas198jdo ...
- 北妈每日一题:到底谁养了我的鱼!
点击上方"前端你别闹",关注并星标 喜欢我的都关注我了 北妈每日一题 谁养了鱼? 题目一.此题源于1981年柏林的德国逻辑思考学院,它是由爱因斯坦在20世纪初提出的: 问题是:根据 ...
- 北妈每日总结: 2019年前端人必须学会写博客
这个年底相信对于很多程序猿来说都不算太好过,是的,资本的寒冬已经到来.无论是传言某厂停止社招还是某商城末尾淘汰,亦或者某知名论坛因为"现金流"问题大裁员.这个年底,已经听到了很多知 ...
- 北妈每日一题:如何甩锅给后端!
一 之前的我一直强调,我们应该主动承担责任,这样可以使你快速成长,年轻人一定要主动而又时刻保持热情. 但后一句还有:仅限于年轻人! 如今,甩锅,绝对是你要修炼的一门技能,如果这门技能,不炉火纯青,你会 ...
- React Native 每日一学(Learn a little every day)
本文出自<React Native学习笔记>系列文章. 每天一个知识点(技巧,经验,填坑日记等),每天学一点,离大神近一点. 汇聚知识,分享精华. 如果你是一名React Native爱好 ...
- es6在原生代码的用法_关于ES6的模块化
历史上,JavaScript一直没有自己模块体系(module),无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来. 其他语言如java.python等都具备这项功能,唯独Javascr ...
最新文章
- Linux Ubuntu从零开始部署web环境及项目 -----tomcat+jdk+mysql (二)
- Tornado多进程启动的2种方法
- 发现一个控件,介绍一下
- Java 对象初始化过程
- css 选择href属性值,巧用CSS属性值正则匹配选择器(小技巧)
- 【区间DP】摆渡线路(2017 特长生 T4)
- Vue源码学习: 关于对Array的数据侦听
- dynamips tutorial
- 中兴c语言 面试题,中兴手机嵌入式开发面试题汇总(1)
- JDBC的下载和安装教程
- selenium测试框架快速搭建(ui自动化测试)
- 从MSDN我告诉你下载镜像
- 少儿编程启蒙课程9:善用变量 拥抱变化
- 银行账户管理系统(一)
- linux su命令在哪里,Linux su命令
- 计算机读不了硬盘分区,电脑开机后读不到硬盘怎么办
- android 自定义拍照模糊,Android自定义相机拍照模糊处理
- mysql声明存储过程_MySQL 声明变量及存储过程分析
- 软件项目管理Follow Me--如何进行项目估算
- 重装系统计算机无法启动,重装系统时重启电脑总是显示windows无法启动,原因可能是最近更改了硬件或软件...
热门文章
- 数据产品经理为什么吃香?
- c语言数组左下角便*,数据结构 - 数组
- 大型网站技术架构:核心原理与案例分析 mobi_大数据技术经典学习路线
- servlet为什么要别名呢_servlet --2
- python填空题_Python题库-填空题
- 2015年《大数据》高被引论文Top10文章No.5——对大数据的再认识
- 作者:孙傲冰(1978-),男,博士,东莞中国科学院云计算产业技术创新与育成中心电子政务事业部副研究员...
- 《大数据》2015年第4期“金融、安全与情报大数据”专刊征文通知
- 【C语言】使用指针得到数组的最后一个数
- 贪心の纪念品分组(洛谷P1094题题解,Java语言描述)