资讯专栏INFORMATION COLUMN

ES6学习总结(四)

Carson / 3287人阅读

摘要:模块化之前,前端模块化之路可谓是布满沧桑,从最开始的刀耕火种,无数的脚本层叠在一起引入到匿名函数自执行封装代码再到后来的,以及后面的和可以看出前端模块化一直在进步,但是始终没有一致的标准,直到实现模块化之后,前端的模块化之路才慢慢的变得比较

ES6模块化之前,前端模块化之路可谓是布满沧桑,从最开始的刀耕火种,无数的脚本层叠在一起引入




到匿名函数自执行封装代码

(function(window){
    // your code here
 })();

再到后来的common.js,以及后面的require.js和AMD

// a.js
exports.add = function() {

};
// b.js
var add = require("a").add;
exports.increment = function() {
    
};
// c.js
var inc = require("b").increment;

可以看出前端模块化一直在进步,但是始终没有一致的标准,直到ES6实现模块化之后,前端的模块化之路才慢慢的变得比较统一,ES6使用import和export来实现模块化,,默认情况下,模块皆是在严格模式下运行可以导出外层函数,类与对象或者所有定义的变量

// a.js
export function hello() {
    return "hello world" 
}
// b.js 
import {hello} from "a.js";
function sayHello() {
    hello();  
}
sayHello();

ES6模块化中import和export也可以重命名,若是有时候导出的名字跟其他的正在使用中的名字有冲突的时候,在导入的时候可以使用as来重命名(突然间想起来SQL)

import {hello as cala} from "a.js";

可以用两个不一样的名字来导出相同的值,ES6中可以使用default关键字来实现默认导出,不能在语句和函数之内使用export关键字,只能在模块顶部使用

function hello() {
    return "hello world" 
}

export {
  hello as foo,
  hello as bar
}

//default
var obj={
  key1:value1,
  key2:value2
};
export {obj as default}
export default{
  key1:value1,
  key2:value2
}        

ES6模块化负责处理不同模块间的耦合关联,具体到编译时处理所有的模块依赖,将模块打包成文件传输等工作可以用打包工具webpack等来完成,目前来说,ES6模块化的标准仍然在路上,不过也已经普及,以后希望能继续发展,让前端更好的发展。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87293.html

相关文章

  • 教你如何打好根基快速入手react,vue,node

    摘要:谨记,请勿犯这样的错误。由于在之前的教程中,积累了坚实的基础。其实,这是有缘由的其复杂度在早期的学习过程中,将会带来灾难性的影响。该如何应对对于来说,虽然有大量的学习计划需要采取,且有大量的东西需要学习。 前言倘若你正在建造一间房子,那么为了能快点完成,你是否会跳过建造过程中的部分步骤?如在具体建设前先铺设好部分石头?或直接在一块裸露的土地上先建立起墙面? 又假如你是在堆砌一个结婚蛋糕...

    ddongjian0000 评论0 收藏0
  • 教你如何打好根基快速入手react,vue,node

    摘要:谨记,请勿犯这样的错误。由于在之前的教程中,积累了坚实的基础。其实,这是有缘由的其复杂度在早期的学习过程中,将会带来灾难性的影响。该如何应对对于来说,虽然有大量的学习计划需要采取,且有大量的东西需要学习。 前言倘若你正在建造一间房子,那么为了能快点完成,你是否会跳过建造过程中的部分步骤?如在具体建设前先铺设好部分石头?或直接在一块裸露的土地上先建立起墙面? 又假如你是在堆砌一个结婚蛋糕...

    LiangJ 评论0 收藏0
  • JavaScript系列--八种【数组去重】方法的总结

    摘要:缺点不兼容以下浏览器七高阶函数方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回,否则返回。方法六高阶函数优点高阶函数的高级用法。 一、前言 数组去重是一个老生常谈的问题,但是有时候会弹出点其他东西。 二、双重循环 这个方法是最常见的,最原始的方法。 // 方法一:双重循环 var array = [1,1,1,2,1,1,2] function unique(arr...

    Xufc 评论0 收藏0
  • 前端资源系列(4)-前端学习资源分享&前端面试资源汇总

    摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...

    princekin 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<