欢迎访问响应式个人博客!
男生版
女生版
初遇时,她的微笑,她往日的深情、承诺和傻劲,两个人共度的美丽时刻,一一印在回忆里,今天的感情已经比不上从前,但是我爱着恋着往日的她,舍不得离开!
排行
详情
您当前的位置>首页 > 正文
你不得不学的es6
2017-09-26 10:08:19   来源:   评论:0 点击:

js 中出现加载同一个模块,而循环加载却不常见,nodejs 使用 CommonJS 模块机制,CommonJS 的循环加载采用的是加载多少,输出多少,就像是我们平时打了断点一样,会跳到另外一个文件,执行完在跳回来。

//a.js
exports.done = '1';
var a = require('./b.js');
console.log('half a=%s', a);
exports.done = '3';
console.log('done a');

//b.js
exports.done = '2';
var b = require('./a.js');
console.log('half b=%s', b);
exports.done = '4';
console.log('done b');

//main.js
var a = require('./a.js');
var b = require('./b.js');
console.log('all done! a=%s,b=%s',a,b)

node main.js 的结果:

half a=2
done a
half b=3
done b
all done! a=3,b=4

这就是 CommonJS 所谓的循环加载。

而 ES6 采用的加载模式也不一样,因为使用动态引用,必须要开发者保证能 import 到值:

// a.js如下
import {bar} from './b.js';
console.log('a.js');
console.log(bar);
export let foo = 'foo';

// b.js
import {foo} from './a.js';
console.log('b.js');
console.log(foo);
export let bar = 'bar';

结果:

$ babel-node a.js
b.js
undefined
a.js
bar

循环加载稍有不慎,就会 underfined。

字符串模版

ES6 在字符串上面可是下了不少功夫,先是解决了字符 unicode 的 bug,增加了一些处理多字节字符串 codePointAt 函数,还多了字符串的遍历接口 for...of,这个遍历借口有点仿造 python 的感觉。只要有迭代器功能的对象,都可以用 for...of 来遍历。

ES6 添加了一些有意思的函数,比如 repeat(),前几天比较火的文章‘五道经典的前端面试题’,就有提到一个在字符串上实现原生的重复方法,这里的 repeat 可以直接解决。

关于字符串上的新内容,非常有帮助的还是模版字符串。之前在 js 中跨行的字符串实现起来很别扭,而 python 可以用三个反引号来实现。

ES6 中的模版字符串使用需要注意以下内容:

// ` 可以跨行
var html = `
  
  • first
  • second
` //${} 调用变量和函数 var name = 'window'; var str = `my name is ${name};`; // my name is window; var add = (a, b)=> a+b; var str = `2 + 3 = ${add(2,3)}`; // "2 + 3 = 5"

用过 ejs 、swig 或 hbs 等模版,它们可以嵌入 js 代码,ES6 的模版字符串也可以。使用 <%...%> 放置 JavaScript 代码,使用 <%= ... %> 输出 JavaScript 表达式。

var template = `
  
  • <% data.forEach(function(item){ %>
    • <%= item %>
    • <% }) %>
    `

    下面就可以写正则表达式替换掉自定义字符并执行函数:

    function compile(str){
      var evalExpr = /<%=(.+?)%>/g;
      var expr = /

相关热词搜索:

上一篇:如果要学习web前端开发,需要学习什么?
下一篇:分享一个目前可用的翻墙方法

收藏