ES6

上一篇文章 主要写了关于react组件化开发的一些基本配置，慢慢的深入到每个组件的详细介绍中，今天我们就来分享react的分页组件 组件基本数据 current:当前页码，默认是第一个 pageSize:每页显示的页数，默认是10页 pagesLength： （很重要） 这个参数的主要作用是用于控制分页的按钮个数，默认是9页，当数据小于90条(因为每页是10条数据，则页数小于9页),则所有的页码直接显示，如图： 如果大于9页，则采用显示部分的形式，如图显示： 下面来具体介绍内部逻辑。 调用函数初始化 在构造函数里面初始化基本调用的函数，主要有：上一页、下一页、点击页码直接跳转、前五页、后五页，基本调用函数介绍完，则要开始着手分页的显示逻辑了。 _initMPagination()函数负责分页的逻辑，先处理基本数据，pageSize,current,还要计算总页数(总页数需要向上取整)，现在我们得到了：当前页码，总页数，每页大小(即每页显示数据的条数)。那么接下来需要做的处理就是判断总页数和页面显示页数的大小，如果总页数小于等于页面显示页数的大小，则直接全部显示，如图： 需要为每一个页码绑定一个唯一的key值，判断当前的页面是否等于i,给当前页码不同的样式，并且为每一个页码绑定click函数，这样点击页码的时候能获取到正确的索引值，这个相对比较简单，如果总页数大于页面显示页数的大小

原文地址： http://www.2ality.com/2014/10/es6-promises-api.html 原文作者：Dr. Axel Rauschmayer 译者：倪颖峰 原博客已经标明：本博客文档已经过时，可进一步阅读“Exploring ES6”中的 “ Promises for asynchronous programming ”。仔细对比了下，两者的确存在一些差异。本文是在原来的译文基础上修订的。 （文章第二部分实在是太长，所以在此分成两部分翻译） 本文是通过普通的Promises 和 ES6的 Promise API 来介绍异步编程。这是两篇系列文章的第二部分 - 第一部分介绍了一下异步编程的基础（你需要充分理解一下以便明白这篇文章）。 1. 概述 下面函数通过一个 Promise异步返回结果： function asyncFunc() { return new Promise( function (resolve, reject) { resolve(value); // success ··· reject(error); // failure });} 可以像下面这样来调用 asyncFunc() ： asyncFunc() .then(value => { /* success */ }) .catch(error => { /* failure */

本文转载自： 众成翻译 译者： loveky 链接： http://www.zcfy.cc/article/580 原文： http://rainsoft.io/how-three-dots-changed-javascript/ 当在函数调用中通过 arguments 对象访问参数时，我总是感觉很不爽。它那硬编码的名字使得要想在内层函数(它拥有自己的 arguments )中访问外层函数的 arguments 变得很困难。 更糟糕的是它是一个类数组对象。这意味着你不能直接在它身上调用类似 .map() 或是 .forEach() 这样的方法。 要想在内层函数里访问外层的 arguments ，你需要采用把它保存在一个单独变量里这样的变通方法。并且当需要遍历这个类数组对象时，你不得不使用鸭子类型并进行间接调用。看看下面的例子： function outerFunction() { // 把arguments保存在单独变量中 var argsOuter = arguments; function innerFunction() { // args is an array-like object var even = Array.prototype.map.call(argsOuter, function(item) { // 访问argsOuter }); } }

#ES6中的模板字符串和新XSS Payload 众所周知，在XSS的实战对抗中，由于防守方经常会采用各种各样严格的过滤手段来过滤输入，所以我们使用的XSS Payload也会根据实际情况作出各种各样的调整，最常见的如避免括号，避免引号，避免关键字等，以绕开过滤函数的检查，从而成功将代码注入到网页中运行。 在传统的XSS Payload变形中，常用的无非有以下几种： 使用String.fromCharCode来避免关键字，如String.fromCharCode(97,108,101,114,116,40,49,41); 使用URL编码来避免括号的识别，如location=’alert%281%29’; 使用正则对象的特点来避开引号，如alert(/1/); 在多年的研究中基本上传统的变形手段都被研究的差不多了，很难找到创新的绕开手段。 然而，近几年ECMAScript新版本的不断发展和推行，在带来了各种激动人心的语言特性的同时，也不可避免地带来了一些新的安全挑战。本文中所说的模板字符串，便是 ECMAScript 6草案中的一种新特性 。 如** MDN **中所述，模板字符串（Template literals）允许嵌入表达式，并且支持多行字符串和字符串插补特性。基本语法为以下几种： 其中第一行为最基本用法 ，即使用反引号 (‘`’) 来代替普通字符串中的用双引号和单引号。

在写一个对象的时候，ES6给我们提供了一种简写的方式。例子如下： <script type="text/javascript"> let username = "张三"; let age = 18; //普通方式声明一个对象obj let obj = { username: username, age: age, add: function() { return this.age+34; } } console.log(obj); //简写方式声明一个对象obj_t let obj_t = { username,//属性名、属性的值对应的变量名，是同名的，可以简写。 age, add() { //方法简写。可以去掉冒号和后面的function关键字“: function” return this.age+34; } } console.log(obj_t); console.log(obj_t.add()); </script> 上面普通方式写一个对象： let obj = { username: username, age: age, add: function() { return this.age+34; } } 这里的属性名 username 和属性值的变量名是一样的，所以开源简写。方法没有什么前提条件，直接可以把冒号和后面的function去掉。( : function

3 月，跳不动了？>>> Getting started Gulp Angular generator is simple and stupid, but it does not embrace Angular 1.5 completely now. And I would like use Webpack in the new Angular 1.x project. AngularClass provides a very simple mininal NG6-starter project with Webpack support. Create project Clone a copy directly into your local disk. git clone https://github.com/AngularClass/NG6-starter <your project name> Enter the project root folder, let's have a glance at the proejct structure. The client holds all source codes of this project. Under client , there is index.html file which is the entry of this

3 月，跳不动了？>>> HTTP In the posts component, the posts data is initialized in th $onInit method of posts controller class. In a real world application, it could be fecthed from external resources, such as third party APIs. Angular service is a good place to do this work. Service Extract posts data codes and put into a standalone class called Post service. common/services/post.service.js : class Post { constructor() { } getAllPosts(){ return [ { id: 1, title: 'Getting started with REST', content: 'Content of Getting started with REST', createdAt: '9/22/16 4:15 PM' }, { id: 2, title: 'Getting

3 月，跳不动了？>>> Apply Container/Presenter pattern If you have used React, you could be fimilar with Container/Presenter pattern. The presenter component is responsive for rendering view and notifying event handlers to handle events. The container component handles events, interacts with external resources, eg, in a React application, the container is the glue codes with Redux. In this post, I just try to split component into small components by different responsibilities. Go back to post detail component as an example. The post details view includes three sections: Post details Comment list of

3 月，跳不动了？>>> Handling form submission We have created posts list page and fetched posts data from real remote APIs. In before steps, we have created dummy files by gulp component for adding new posts and editing existing post. Let's enrich the content of them. Add post Firstly add a savePost method in Post service. It can save a post or update a post. // Creates or updates an post save(post) { let request = {}; // If there's a id, perform an update via PUT w/ post's id if (post.id) { request.url = `${this._AppConstants.api}/posts/${post.id}`; request.method = 'PUT'; // Delete the id from the

3 月，跳不动了？>>> 1.什么是ECMAScript 6？ ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。可能大家会疑惑ECMAScript和JavaScript是什么关系？为什么不是统一命名。 ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还有Jscript和ActionScript）。在日常场合，这两个词是可以互换的。主要是区分一是因为商标（Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript本身也已经被Netscape公司注册为商标。）和二是体现这门语言的制定者是ECMA，不是Netscape，这样有利于保证这门语言的开放性和中立性。 2.ECMAScript 6 中变量声明let和const 2.1 ES6新增了let命令，用来声明变量 它的用法类似于 var ，但是所声明的变量，只在 let 命令所在的代码块内有效。 { let a = 1; var b = 2; } console.log(a); // ReferenceError: a is not