ES6
文章平均质量分 71
kittyjie
这个作者很懒,什么都没留下…
展开
-
ES6学习——生成器(Generators):生成器+迭代器
我们知道生成器也是迭代器,所以操作迭代器的方法都可以用来操作生成器,下面逐一过下:function* genFunc() { yield 'a'; yield 'b';}1)next方法直接调用let genObj = genFunc();genObj.next()//{ value: 'a' , done: false }genObj.next()//{ v原创 2016-01-30 10:35:41 · 704 阅读 · 0 评论 -
ES6学习——元数据(meta)编程:反射(Reflect)应用示例
其实这篇文中的例子,写在Proxy那篇里也行,这里单独拿出来,主要体现一下Reflect的作用。前面提到过JS中也都是单继承,这里我们用Proxy+Reflect还来自己实现一下对象多重继承:var obj1 = { name: "obj-1", foo() { console.log( "obj1.foo:", this.name ); }},obj2 = { name: "原创 2016-02-03 10:46:31 · 3966 阅读 · 0 评论 -
ES6学习——新加API:Array
这篇文章我们逐一看看数组中新添加的API。1)Array.of ( ...items )静态方法,把items转成数组,可以代替Array构造函数。var a = Array( 3 );a.length; // 3a[0]; // undefinedvar b = Array.of( 3 );b.length; // 1b[0]; // 3var c = Array.o原创 2016-02-03 14:09:54 · 1272 阅读 · 0 评论 -
ES6学习——新加API:Math
直接列一下新的API,这些API估计用到的人会比较少都,用到的时候再去查吧。cosh(..)acosh(..)sinh(..)asinh(..)tanh(..)atanh(..)hypot(..)cbrt(..)clz32(..)expm1(..)log2(..)log10(..)log1p(..)原创 2016-02-03 14:49:18 · 658 阅读 · 0 评论 -
ES6学习——新加API:Number
新加静态属性:Number.EPSILONNumber.MAX_SAFE_INTEGER(2^53 - 1)Number.MIN_SAFE_INTEGER -(2^53 - 1)方法:1)Number.isNaN这个方法和全局的isNaN有个区别就是不会强转传入的参数:var a = NaN, b = "NaN", c = 42;isNaN(原创 2016-02-04 09:28:02 · 1041 阅读 · 0 评论 -
ES6学习——新加API:String
Unicode部分:String.fromCodePoint( 0x1d49e ); // "原创 2016-02-04 09:35:40 · 1549 阅读 · 0 评论 -
ES6学习——正则表达式新特性
简单说一下正则表达式中新加入的特性:1)flags属性:/abc/ig.flags//gi2)/u unicode标记,Chrome 48都还不支持这个标记/\uD83D/.test('\uD83D\uDC2A')//true/\uD83D/u.test('\uD83D\uDC2A')//false/\uD83D/u.test('\uD83D \uD83D\uDC2A')//原创 2016-02-05 09:36:22 · 2173 阅读 · 0 评论 -
ES6学习——环境搭建
ES6规范2015年发布,现在浏览器对它的支持正在不断的加强,具体查看浏览器对ES6支持的程度,请参考https://kangax.github.io/compat-table/es6/,如果想查看浏览器对所有JS,CSS,HTML5新特性的支持,请参考http://caniuse.com/想要学习ES6,有几种方法:1. 在浏览器上尝试,这需要浏览器对ES6的支持,目前看支持程度原创 2015-12-16 08:31:46 · 9205 阅读 · 0 评论 -
ES6学习——新加API:Object
这篇看看Object对象新添加的一些API。1)Object.is ( value1, value2 )使用===判断两个value是否相等,两个例外,NaN等于NaN,-0不等于+0。var x = NaN, y = 0, z = -0;x === x; // falsey === z; // trueObject.is( x, x ); // trueObject.is原创 2016-02-03 14:11:13 · 876 阅读 · 0 评论 -
ES6学习——元数据(meta)编程:反射(Reflect)API介绍
Reflect作用主要是配合着Proxy来用的,Proxy的handler里面可以拦截的方法,在Reflect中都对应着有相应的方法,其实就是起到转发给目标对象作用。Reflect和Math对象一样,里面都是静态方法,规范的26.1中有详细的描述。let proto = new Proxy({}, { get(target, propertyKey, receiver) { consol原创 2016-02-03 09:43:26 · 2887 阅读 · 0 评论 -
ES6学习——元数据(meta)编程:代理(Proxies)API介绍
代理的概念大家应该很清楚了,设计模式中也有这个模式。ES6中关于代理的描述在26.2中,有兴趣的可以去看看。代理的API十分少,基本只有两个,一个是创建普通的代理,一个是创建可以收回的代理。下面先看怎么创建普通的代理:let target = {};let handler = { get(target, propKey, receiver) { console.log(`GET $原创 2016-02-02 15:29:32 · 732 阅读 · 0 评论 -
ES6学习——集合(Collections):Set 应用示例
这篇文章看一些Set的使用例子。1)遍历Set的几种方法let set = new Set(['red', 'green', 'blue']);for (let x of set) { console.log(x);}[...set];[...set.values()];[...set.keys()];[...set.entries()];2)利用原创 2016-01-15 08:25:06 · 512 阅读 · 0 评论 -
ES6学习——类语法:其它
这篇文章会零零散散过一些使用类语法中的问题。1)类不能当做函数调用class Point{}Point();//Uncaught TypeError: Class constructors cannot be invoked without 'new'2)类没有hoisting过程new Foo(); // ReferenceErrorclass Foo {}3)类表达式原创 2016-01-13 14:13:36 · 779 阅读 · 0 评论 -
ES6学习——类语法:Symbol.species在实例创建中的应用
在Symbol的章节我们大概介绍了一下species,这篇文章详细看一下规范中是如何调用的,以及我们在自定义类的时候可以怎么使用这个symbol。我们拿Array.prototype.map举例:规范22.1.3.15 Array.prototype.map ( callbackfn [ , thisArg ] ):1. Let O be ToObject(this value).原创 2016-01-13 09:11:13 · 2522 阅读 · 0 评论 -
ES6学习——生成器(Generators):生成器+Promises
Promise是个异步执行的过程,我们要想把多个Promise顺序执行,只能不断的利用then方法继续去执行下面的Promise,例如:step1().then(step2,step2Failed).then(function(msg) { return Promise.all( [ step3a( msg ), step3b( msg ),原创 2016-01-31 11:05:00 · 1081 阅读 · 0 评论 -
ES6学习——集合(Collections):Map API
ES6终于加入了高级的数据结构集合,包括Map,WeakMap,Set,WeakSet等,并且都是iterable的,可以用spread操作符和for...of语法遍历。这些数据结构在其他语言中早就有了,使用起来也非常方便,这篇文章从Map讲起。规范的23.1章节定义了Map以及相关的API,有兴趣的自己去看。有人会说JS中的Object实质上不就是个Map吗?没错,但Object有个问题就是原创 2016-01-14 08:44:08 · 849 阅读 · 0 评论 -
ES6学习——生成器(Generators):生成器应用示例
这篇文章看几个生成器的例子,便于更好的理解生成器如何使用。1)遍历对象属性,这个在迭代器的时候给出过,这次用生成器重写一下function* objectEntries(obj) { let propKeys = Object.getOwnPropertyNames(obj); for (let propKey of propKeys) { yield [propKey, obj[原创 2016-02-01 10:12:42 · 617 阅读 · 0 评论 -
ES6学习——生成器(Generators):生成器高级应用
这篇文章看一下用生成器来处理字符串流,流式数据有个好处就是不必等到所有数据都接收到,就可以进行处理。从数据处理的方向上看,可以有pull和push两种模式,传统的http就是pull的模式,而最新的WebSocket就是push的模式。生成器既可以用pull的方式也可选择push的方式进行数据处理,看你是利用yield发数据还是接数据。下面这个例子就是处理字符串中的数字,然后简单的相加,最后得原创 2016-02-01 15:20:38 · 708 阅读 · 0 评论 -
ES6学习——集合(Collections):WeakMap
WeakMap的概念在Java中一样存在,和Map的主要区别在于垃圾收集的处理不同。这个数据结构在规范的23.3章节中进行了描述。WeakMap只有key是可GC的,并不是value,这里的概念可能和Java里的不同。这里主要说一下和Map区别:1)WeakMap的key必须是object,如果不是就会抛出异常var wm = new WeakMap()wm.set(1原创 2016-01-14 16:01:18 · 1125 阅读 · 0 评论 -
ES6学习——集合(Collections):Set API
Set就是常见的集合,集合能够保证元素的唯一性,关于唯一性的确定,Set和Map都是用的SameValueZero内部函数,关于这点请参考Map章节。ES6规范的23.2章节描述了Set,有兴趣的自己去看。下面看API介绍:1)Set构造函数,可以不传任何参数,如果要传参数,参数必须是iterable的let set = new Set(['red', 'green', 'bl原创 2016-01-15 07:26:11 · 561 阅读 · 0 评论 -
ES6学习——元数据(meta)编程:代理(Proxies)应用示例
这篇文章我们看一些例子,看看怎么使用代理。1)有意思的rest访问方式let service = createWebService('http://example.com/data');service.employees.then(json => { let employees = JSON.parse(json); console.log(employees);});f原创 2016-02-02 16:45:22 · 840 阅读 · 0 评论 -
ES6学习——集合(Collections):Map 应用示例
先看一下如何遍历Map的entries,keys,values:let map = new Map([ [false, 'no'], [true, 'yes'],]);for (let key of map.keys()) { trace(key);}for (let value of map.values()) { trace(value);原创 2016-01-14 10:27:24 · 640 阅读 · 0 评论 -
Vue2在实际项目中的应用——命名规范概览
vue的官方网站现在有了一个风格指南(https://cn.vuejs.org/v2/style-guide/),当时写这个项目的时候,这个指南还不是很完整,所以项目并没有完全遵循这个指南。指南终究是指南,也没必要完全遵循,只要项目组内大家根据使用习惯达成一致就行。目录命名:一般以小写+中划线命名,比较易读文件命名:项目中采取了和目录命名基本一致的规则,但是会加一个表示不同组件的后缀。比如...原创 2019-05-08 15:05:09 · 2374 阅读 · 0 评论 -
Vue2在实际项目中的应用——前端工具,js框架以及库介绍
前端的工具就是webpack2,做了以下几点优化1)加入了StyleLintPlugin,对scss进行格式进行检查2)使用HappyPack,ParallelUglifyPlugin进行build的速度优化3)使用ContextReplacementPlugin优化moment库的多语言支持4)通过定义externals把一些库用CDN方式引入,减小文件尺寸,优化加载速度e...原创 2019-05-09 13:50:05 · 480 阅读 · 0 评论 -
Vue2在实际项目中的应用——模块划分以及路由配置
整体项目模块的划分以业务逻辑为主,不按照vue组件类型进行划分。按照组件类型划分会很难维护,降低查找文件的速度。下面以系统管理举例:系统管理在UI上是一个一级菜单,下面会有三个二级菜单,包括审计,消息管理和发布者管理。所以直接映射到源代码结构就是system-mgmt目录下有三个二级目录。其中消息管理下面直接是相应的组件以及服务,而发布者管理下面又进行了一次划分,因为这个功能有三个ta...原创 2019-05-09 14:21:48 · 1255 阅读 · 0 评论 -
Vue2在实际项目中的应用——表格组件功能介绍
TableList组件是以ElementUI Table表格组件为主,并封装了一系列其它组件,提供了以下主要功能筛选功能 搜索功能 分页功能 加载过程以及错误信息提示功能 行展开功能 单选行功能 switch开关组件功能 progress进度组件功能 分行显示日期时间组件功能 动态组件渲染功能 自定义列组件功能表格组件可以分为三个部分:头部(筛选,搜索)、数据部分、底...原创 2019-05-14 14:20:44 · 2032 阅读 · 0 评论 -
Vue2在实际项目中的应用——程序入口启动
由于一个项目中要build出来几个访问端口,所以会有几个对应的main-xxx.js。main中主要干的几件事:1)加载各种库,包括element-ui和通用的library2)判断是开发环境还是生产环境,进行不同的初始化过程1)如果是开发环境,直接初始化app组件,假定用户信息在localstorage中已经存在了2)如果是生产环境,先检查是否已经登录,然后请求api加载用户...原创 2019-05-10 14:07:25 · 1738 阅读 · 0 评论 -
Vue2在实际项目中的应用——公共组件介绍
这个公共的库在项目中是通过dependencies引入进来的:"dependencies": { 。。。 "frontend-library": "git+https://git.com/Frontend/library.git", 。。。 },在开发的时候可以换成file协议,这样方便调试。在ci中,依赖的库不是每次都用npm install/updat...原创 2019-05-10 14:31:55 · 938 阅读 · 0 评论 -
Vue2在实际项目中的应用——服务层介绍
所谓的服务层就是对http请求的封装,最好不要直接在业务逻辑的代码里掺杂像下面类似的直接ajax调用:$.ajax({ url: 'https://url.com/user', type: 'get', dataType:'json', contentType: "application/json;charset=UTF-8", cros...原创 2019-05-13 14:08:09 · 638 阅读 · 0 评论 -
Vue2在实际项目中的应用——打包发布
由于这个项目需要build出来三个端,所以需要对build.js文件做一些修改,以满足需求。在执行命令的时候会用如下方式调用:npm run build:operationnpm run build:label这样会直接build某一端的代码。如果直接运行npm run build会同时构建几个端的代码。在执行npm run build:operation这个命令的时候,其实在...原创 2019-05-13 14:33:39 · 569 阅读 · 0 评论 -
Vue2在实际项目中的应用——项目目录结构概览
项目采用的是Vue2+Webpack2,分成了几个项目:一个通用的library项目,里面是一些公用的组件;一个是平台项目,会build出来三个端,每个端不同角色的用户会登陆各自的平台。下面先看一下library项目结构:其中:components目录是通用的组件封装,比如表格之类的directives目录是一些指令,比如最大化对话框等filters目录是过滤器,比如时间格...原创 2019-05-08 14:12:51 · 991 阅读 · 0 评论 -
ES2018: RegExp named capture groups
ES2018: RegExp named capture groups[2017-05-15] dev, javascript, esnext, es2018, regexpThe proposal “RegExp Named Capture Groups” by Gorkem Yakin, Daniel Ehrenberg is at stage 4. This blog post explai...转载 2018-07-04 11:27:30 · 424 阅读 · 0 评论 -
Vue2在实际项目中的应用
1,项目目录结构概览2,命名规范概览3,前端工具,js框架以及库介绍4,模块划分以及路由配置5,程序入口启动6,公共组件介绍7,服务层介绍8,打包发布9,表格组件功能介绍...原创 2019-05-08 14:13:44 · 440 阅读 · 0 评论 -
ES6学习——新的语法:Symbol private类属性
ES6本身并没有提供class属性的私有(private)还是公有(public)的特性,以前要实现类属性的私有化,一般可以通过下面这种方法进行模拟:function Person(name) { var _name = name this.setName = function(name) { _name = name; } this.getName = functio原创 2017-05-02 10:00:48 · 3905 阅读 · 0 评论 -
ES6学习——集合(Collections):WeakMap 应用示例
这里看一下如何利用weakset实现class属性的私有化:var Person = (function() { var private = new WeakMap(); function Person(name) { var privateProperties = { name: name }; pri原创 2017-05-02 10:10:49 · 1194 阅读 · 0 评论 -
ES6学习系列目录
ES6学习系列目录原创 2015-12-14 08:46:16 · 2059 阅读 · 0 评论 -
ES6学习——Promises:应用示例
这篇文章看几个应用Promise的例子。1)封装普通的ajax成Promise模式,jQuery等的ajax调用已经内置了对promise模式的支持function httpGet(url) { return new Promise(function (resolve, reject) { let request = new XMLHttpRequest(); re原创 2016-01-19 15:01:32 · 2805 阅读 · 0 评论 -
ES6学习——新的语法:let
let的主要用途就是声明块级作用域的变量,看一下规范是怎么说的,请仔细看红字部分,后边TDZ章节会详细讲这点:13.3 let and const declarations define variables that are scoped to the running execution context’s LexicalEnvironment. The variables are creat原创 2015-12-18 08:56:26 · 3703 阅读 · 0 评论 -
ES6学习——新的语法:const
ES6终于加入了声明常量的语法,这种语法在其他语言中几乎都有,看一下用法: const c1 = 1; const c2 = {}; const c3 = [];Object.getOwnPropertyDescriptor(window,"c1")//Object {value: 1, writable: false, enumerable: true, configurable原创 2015-12-21 08:15:32 · 4499 阅读 · 0 评论 -
ES6学习——ES7
ES7是ES6的下一个版本,官方应该叫ES2017,其实ES6官方也叫ES2016,以后都会以年来命名规范的名称。ES6还没有完全得到浏览器的支持,为什么要了解ES7呢?技术总在不断的发展,多知道一些新技术可以拓展你的见识与思路,在设计程序的时候可以更加灵活。关于ES7的内容,可以参考这里:https://github.com/tc39/ecma262#current-proposals,新的原创 2016-02-08 10:14:12 · 2959 阅读 · 0 评论