前端自动化系列(三)之Babel、ES6、JavaScript转码

连css这种标记型语言都开始进化了;

那么在前端飞速发展的今天;

那门用一周时间设计出来的JavaScript;

也必须得不断的升级;以适应新的时代;

js最新的版本是ECMAScript 2015;

或者大家更普遍的称其为ES6;

ES6有大量的新特性非常值得我们学习;

举一筐栗子;


首先是可以设置参数默认值了;

function test(a = 1) {
    console.log(a);
}
test();

这要搁以前;想实现同样的功能;是要写成这个样子的;

function test(a) {
    var a = arguments[0] ? arguments[0] : 1;
    // 或者是下面这种稍微简短点的
    // var a = a || 1;
    console.log(a);
}
test();


还有个超实用的功能;模板字符串;

君还记得当年用jquery的ajax一起拼接过的字符串么?

$.post('xxx.com', function(data) {
    var str = '<div>'+
                  '<p class="name">'+data.name+'</p>'+
                  '<p class="age">'+data.age+'</p>'+
              '</div>';
    $('#user').append(str);
});

当有一大段html需要拼接的时候;

上面这还好歹还是整齐缩进了;

要是遇到连缩进都懒得对齐的;

比如这样:

// 模板字符串
$.post('xxx.com', function (data) {
    var str = '<div><p class="name">' + data.name + '</p><p class="age">' + data.age + '</p></div>';
    $('#user').append(str);
});

那一堆的引号和加号;尤其是维护起来;

那种痛苦;痛彻心扉啊;

为此;我还专门安利过vue.js;对照着jquery来学vue.js系列之ajax获取遍历数据

放在本文章中;使用ES6的模板字符串也能大大的缓解这种痛;

上面的这段代码;用ES6的写法的话;是这个样子;

$.post('xxx.com', function(data) {
    var str = `<div>
                  <p class="name">${data.name}</p>
                  <p class="age">${data.age}</p>
              </div>`;
    $('#user').append(str);
});

就是用反引号 ` 来包裹代码块;用 ${} 包裹变量;


以及最受关注的箭头函数;

先来两段常见的js代码;

// 定义函数
function test(a) {
    return alert(a);
};

// 绑定click事件 弹出鼠标距离浏览器左侧的距离
$('#test').click(function (event) {
    alert(event.offsetX);
});

下面用ES6的箭头函数来实现;简化的非常残忍;

// 定义函数
test=a=>alert(a);

// 绑定click事件 弹出鼠标距离浏览器左侧的距离
$('#test').click((event)=>alert(event.offsetX));


好了;上面这些是简单介绍下ES6;

本文的目的是介绍有这样一个好东西值得学习使用;

为后续的gulp文章做铺垫;

更详细的可以参考 阮一峰的 ECMAScript 6入门


但是问题来了;很多浏览器暂时还不支持ES6;

主要就是指的IE家族系列;

以及国内各种穿了个漂亮外衣的IE嫡系浏览器;


为了兼容他们;那么本文的主角来了;babel;

babel的作用就是把潮流的ES6代码转成更具兼容性的ES5代码;

先来安装;这次稍微麻烦点;

// ES2015转码规则
cnpm install --save-dev babel-preset-es2015

// react转码规则
cnpm install --save-dev babel-preset-react

ES7不同阶段语法提案的转码规则
cnpm install --save-dev babel-preset-stage-2

// babel命令行
cnpm install --global babel-cli

然后在项目根目录创建 .babelrc 文件;写如下内容;

{
  "presets": [
    "es2015",
    "react",
    "stage-2"
  ],
  "plugins": []
}

然后新建 example.js 文件;把上面哪些ES6的代码扔进去;

// 默认值
function example(a = 1) {
    console.log(a);
}

// 模板字符串
$.post('xxx.com', function(data) {
    var str = `<div>
                  <p class="name">${data.name}</p>
                  <p class="age">${data.age}</p>
              </div>`;
    $('#user').append(str);
});

// 箭头函数
test=a=>alert(a);
$('#test').click((event)=>alert(event.offsetX));

命令行执行 :

babel example.js -o compiled.js

即可生成 compiled.js ;

'use strict';

// 默认值
function example() {
    var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;

    console.log(a);
}

// 模板字符串
$.post('xxx.com', function (data) {
    var str = '<div>\n                  <p class="name">' + data.name + '</p>\n                  <p class="age">' + data.age + '</p>\n              </div>';
    $('#user').append(str);
});

// 箭头函数
test = function test(a) {
    return alert(a);
};
$('#test').click(function (event) {
    return alert(event.offsetX);
});


白俊遥博客

白俊遥博客
请先登陆后发表评论
  • 最新评论
  • 总共2条评论
白俊遥博客

Hx:好

2016-12-09 09:27:19 回复

白俊遥博客

文艺春秋:(`・ω・)

2016-11-26 13:18:31 回复