ES6

ES6作为新一代JavaScript标准，已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解，Mozilla Web开发者博客推出了《 ES6 In Depth 》系列文章。CSDN已获授权，将持续对该系列进行翻译，组织成 【探秘ES6】系列专栏 ，供大家学习借鉴。本文为该系列的第九篇。 本文接下来讲述的是有关Babel和Broccoli（花椰菜）的使用。 Babel的使用 Babel是一个源代码到源代码的转换器，例如ES6到ES5的转换并使代码在主流JS引擎中执行。 在项目中可通过多种方式来使用Babel，例如命令行方式，其格式为： babel script.js --out-file script-compiled.js 在浏览器中使用也是可以的，可以把Babel作为常规的JS库进行链接使用： <script src="node_modules/babel-core/browser.js"></script> <script type="text/babel"> // Your ES6 code </script> 不过当你的基代码不断增加，则需要更具扩展性的方法以管道方式整合Babel。接下来会介绍如何使用创建工具Broccoli.js来对Babel进行整合。 第一个Broccoli及Babel项目 Broccoli是一个帮助快速创建项目的工具

ES6作为新一代JavaScript标准，已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解，Mozilla Web开发者博客推出了《 ES6 In Depth 》系列文章。CSDN已获授权，将持续对该系列进行翻译，组织成 【探秘ES6】系列专栏 ，供大家学习借鉴。本文为该系列的第七篇。 本文接下来讲述的是有关ES6箭头函数（Arrow functions）的使用。 热身 箭头符号在JS中一直扮演着重要的角色。在JS教程里，一开始都会介绍如何使用箭头括号来加注释。例如： <script language="javascript"> <!-- document.bgColor = "brown"; // red // --> </script> 旧版浏览器接收的是两个不支持的标签和一句注释，只有新版浏览器才会识别这是JS代码。 为了处理这种奇怪的表达方式，浏览器的JS引擎会把<!—识别为一行注释的开始位置。这种处理机制一直沿用至今，现在于Node中也适用。除此之外，-->还可以作为递增/减的操作符，例如while(n-->0) //n递减至0。 我们先回顾下箭头符号的一般用法： <!-- 单行注释 --> 递增/减的操作符 <= 小于等于 => ? =>是ES6中新的用法，也就是本节要讲述的内容。 随处可见的函数式表达

目录结构 scripts main.es6 products.es6 temp gulpfile.js package.json index.html 文件内容 package.json { "devDependencies": { "browserify": "^11.2.0", "gulp": "^3.9.0", "gulp-babel": "^5.2.1", "gulp-buffer": "0.0.2", "gulp-clean": "^0.3.1", "gulp-uglify": "^1.4.1", "vinyl-source-stream": "^1.1.0" } } gulpfile.js var gulp = require('gulp'), babel = require('gulp-babel'), browserify = require('browserify'), source = require('vinyl-source-stream'), buffer = require('gulp-buffer'), uglify = require('gulp-uglify'), clean = require('gulp-clean') ; gulp.task('help', function () { console.log( `使用帮助: gulp

ECMAScript6(简称ES6)，是JavaScript的下一代标准，因为ES6是在2015年发布的，所以又称ECMAScript2015（ES6 === ECMAScript2015） 目前不是所有的浏览器都完全兼容ES6,但很多程序猿已经开始使用ES6了，所以了解并逐步掌握ES6，甚至在你的项目中使用ES6,是非常有必要的，至少也要看得懂小伙伴写的ES6代码吧？ 在说ES6之前，我们先来了解下Babel，这是个什么鬼？它是一个广泛使用的ES6转码器，可以将我们写的ES6代码转换成能在当前所有浏览器中执行的ES5代码。你可以在你习惯使用的工具中集成Babel，方便它来工作，具体使用请查看Babel官网( http://babeljs.io ) 下面我们来看下最常用的一些ES6特性： let,const class,extends,super arrow functions template string destructuring default rest arguments let,const let是用来声明变量的，与var相似，const是定义常量的。我们先来看下面的例子 while (true) { var name = 'obama'; console.log(name); //obama break; } console.log(name); //obama

ES6作为新一代JavaScript标准，即将与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解，Mozilla Web开发者博客推出了《 ES6 In Depth 》系列文章。CSDN已获授权，将持续对该系列进行翻译， 组织成 【探秘ES6】系列专栏 ， 供大家学习借鉴。本文为该系列的第一篇。 欢迎来到深入ES6系列！在该系列中，我们将深入探索即将到来的新一代JavaScript标准——ECMAScript 6。ES6包含了许多新的语言特性，这会让JS变的更加强大且富有表现力。我们将会在接下来的几周内逐步介绍这些新特性。但在此之前，我们有必要花点时间来介绍一下ES6到底是什么以及有哪些令人期待的地方。 ECMAScript包含了哪些内容？ JavaScript是对由ECMA（European Computer Manufacturer’s Association，欧洲计算机制造商联合会,一个跟W3C类似的标准化组织）定义的ECMAScript标准的实现。ECMAScript主要定义了以下内容： 语法 ——解析规则、关键字,、语句、声明、运算符等；. 类型 ——Boolean、Number、String、Object等； 原型和继承规则 ； 内置对象和函数的 标准库 —— JSON 操作、 Math 对象、 数组操作方法 、 对象自省方法 等 而与HTML和CSS

简介： webpack ：是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。 react ：现在最热门的前端框架，毫无疑问是 React 。 es2015 ：ECMAScript 6。 以上是她们的基本定义，想想能将她们结合在一起开发我们的项目是多么的激动人心啊。当然在正式开发之前我们也有很多准备工作需要做好，这也可能是对新手最棘手的问题。下面我们就直接进入正题吧。 环境搭建： 首选我们需下载安装Node.js,下载地址： https://nodejs.org/en/ （注意：为了能支持es2015请下载4.0以上版本） 安装了node之后我们还需要npm也就是包管理器，当然新的node已经集成了npm的。所以此步骤可以跳过了 有了npm后，win+r然后输入cmd打开，然后输入命令： npm install webpack -g 执行命令后我的webpack就全局安装好了，这里提醒一下，在项目文件中我们还需要将webpack写入 package.json(局部安装) 项目创建： 在D盘创建我们的项目文件“reactPro”，目录结构如下： 在cmd中定位项目地址，执行命令： cd D:\reactPro D: 定位完成后，我们利用npm生成package.json文件，执行命令：

笔记笔记,网上很多例子都是过期的啊= = 因为jsx转换器整合到babel中了,根本不需要网上所说的jsx-loader sudo npm install webpack webpack-dev-server babel -g sudo npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-preset-es2015 babel-preset-react --save-dev module.exports = { entry: { main: './src/index.jsx', es5:'./src/es6.js' }, output: { path: 'build', filename: '[name].build.js' }, resolve: { extensions: ['','.js', '.jsx'] }, module: { loaders: [{ test: /\.jsx$/, loader: 'babel-loader', query:{ presets:['es2015','react'] } }, { test: /\.js$/, loader: 'babel-loader', query:{

在app/app.html中,我们看到了这样一行代码 <ion-nav #content [root]="rootPage"></ion-nav> 注意 [root] 属性的绑定,它声明了 ion-nav 控制的root页面:当导航控制器被加载后, rootPage 组件中声明的页面将会被当作root页面. 在 app/app.js中,根组件MyApp在它的构造器中做了如此声明 import {App, IonicApp, Platform} from 'ionic/ionic'; import {HelloIonicPage} from './hello-ionic/hello-ionic'; import {ListPage} from './list/list'; class MyApp { constructor(app: IonicApp, platform: Platform) { // set up our app this.app = app; this.platform = platform; this.initializeApp(); // set our app's pages this.pages = [ { title: 'Hello Ionic', component: HelloIonicPage }, { title: 'My First List'

原文地址： http://www.2ality.com/2014/10/es6-promises-api.html 原文作者：Dr. Axel Rauschmayer 译者：倪颖峰 原博客已经标明：本博客文档已经过时，可进一步阅读“Exploring ES6”中的 “ Promises for asynchronous programming ”。仔细对比了下，两者的确存在一些差异。本文是在原来的译文基础上修订的。 博文下半部分为纯干活内容，包括介绍的 ES6 中 Promise API，以及其简单的实现方式与思想，以及一些拓展内容。 9. 速查表：ES6的 Promise API 这里简单的给出一下 ES6 Promise 的API 简述，详细描述请看规范http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects 9.1. 术语 P romise 的 API 就是关于异步获取结果。一个Promise 对象（简称Promise）是一个独立的对象，会通过该对象传递结果。 状态： 一个Promise 处于以下三个（互斥）状态中的某一个状态 ： 1. 结果未完成时，Promise 状态为 pending。 2. 得到结果时，Promise 状态为 fulfilled。 3. 当错误发生时，Promise 状态为