2018年03月_GXing007

原创 Nuxt.js

Nuxt.js一个基于Vue.js的服务端渲染应用框架Nuxt.js是什么？Nuxt.js是一个基于vue.js的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js主要关注的是应用的UI渲染。我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的初始化结构代码，或者在已有Node.js项目中使用Nuxt.jsNuxt.js预设了利用Vue.js开发...

2018-03-30 15:46:22 805

原创 proxy实例apply()，has()，construct()

applay()方法拦截函数的调用，call和apply操作。apply()方法可以接受三个参数，分别是目标对象，目标的上下文对象(this)和目标对象的参数数组。var handler = { apply (target, ctx, args) { return Reflect.apply(...arguments); }};下面是一个例子。var target = funct...

2018-03-29 11:24:33 1154

转载 flex布局教程

一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{ dis...

2018-03-27 16:50:23 170

原创 Proxy实例set()

set()方法用来拦截某个属性的赋值操作，可以接受4个参数，依次为目标对象，属性名，属性值，Proxy对象本身,最后一个参数可选。假定Person对象有一个age属性，该属性应该是一个不大于 200 的整数，那么可以使用Proxy保证age的属性值符合要求。let validator = { set: function(obj, prop, value) { if (prop === ...

2018-03-27 16:36:52 1151

原创 Proxy实例的方法

1.get()get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象，属性名，和proxy实例本身(即this关键字指向的那个对象)，其中最后一个关键字可选。var person = { name: "张三"};var proxy = new Proxy(person, { get: function(target, property) { if (prope...

2018-03-27 16:22:29 1774

Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改，所以属于一种“元编程”，“meta programing”,即对编程语言进行编程。Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问,都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy这个词的原意是代理，用在这里表示由它来"代理"某些操作，可以译为"代理器"。var obj = ...

2018-03-26 13:49:54 442

原创 JS题库6-10

1.什么是Web Worker？ A.运行在后台的JavaScript程序，会影响页面性能。 B.运行在后台的JavaScript程序，不会影响页面性能。 C.都不正确 D.运行在后台的css程序，不会影响页面性能正确答案：B 解析：web worker在后台运行的进程，比如一个计算，它会在后台进行计算，再给页面赋值，所以不影响页面性能。2.语句var...

2018-03-20 17:09:35 628

原创 vue环境搭建 vue不是内部或外部命令解决方法：

vue不是内部或外部命令解决方法：1.npm config get prefix查看npm的全局路径是什么2.将这个路径配置在环境变量里NPMC:\Users\xxx\AppData\Roaming\npmpath%NPM%

2018-03-20 10:37:33 13645 1

原创 prop

#单向数据流Prop是单向绑定的：当父组件的属性变化时将传导给子组件，但是反过来不会，这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。在两种情况下我们很容易忍不住想去修改prop中的数据：1.Prop作为初值传入后，子...

2018-03-19 15:27:59 346

原创组件组合

构造Vue实例时传入的各种选项大多数都可以在组件里使用。只有一个例外:data必须是函数。实际上如果你这么做：Vue.component('my-component', { template: '<span>{{ message }}</span>', data: { message: 'hello' }})那么vue会停止运行，并在控制台发出警告，告...

2018-03-19 14:52:51 673

原创 vue组件

什么是组件？组件(Component)是vue.js最强大的功能。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，vue.js编译器为他添加特殊功能。在有些情况下，组件也可表现为用is特性扩展了原生的HTML元素。所有的vue组件同时也是vue的实例，所以可以接受一些相同的选项对象(除了一些根级特有的选项)并提供相同的生命周期钩子。使用组件#全局注册我们已经知道...

2018-03-19 11:19:10 208

原创 WeakMap

WeakMap结构与Map结构类似，也是用于生成键值对的集合。// WeakMap 可以使用 set 方法添加成员const wm1 = new WeakMap();const key = {foo: 1};wm1.set(key, 2);wm1.get(key) // 2// WeakMap 也可以接受一个数组，// 作为构造函数的参数const k1 = [1, 2, 3];...

2018-03-19 09:58:21 640

原创 Map实例的属性和操作方法

Map 结构的实例有以下属性和操作方法。（1）size 属性size属性返回 Map 结构的成员总数。const map = new Map();map.set('foo', true);map.set('bar', false);map.size // 2（2）set(key, value)set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键...

2018-03-16 15:44:54 2899

原创 Map含义和基本用法

含义和基本用法：JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。const data = {};const element = document.getElementById('myDiv');data[element] = 'metadata';data['[object HTMLDivEl...

2018-03-16 15:28:53 3517

原创 WeakSet

含义：WeakSet结构与Set类似，也是不重复值得集合。但是，它与set有两个区别。首先，WeakSet的成员只能是对象而不是其他的值。const ws = new WeakSet();ws.add(1)// TypeError: Invalid value used in weak setws.add(Symbol())// TypeError: invalid value used ...

2018-03-16 15:09:32 353

原创 Set实例的属性和方法

Set结构的实例有以下属性Set.prototype.constructor:构造函数，默认就是Set函数Set.prototype.size:返回set实例的成员总数。Set实例的方法分为两大类操作方法和遍历方法。下面先介绍4个操作方法(用于操作数据)：add(value):添加某个值，返回set结构本身delete(value):删除某个值，返回一个布尔值，表示是否删除成功。has(value...

2018-03-16 14:46:48 2748

原创 Set数据结构的基本用法

1.Set基本用法Es6提供了新的数据结构set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成set的数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) { console.log(i);}// 2 3 5 4上面...

2018-03-16 11:35:07 1738

原创内置的Symbol值

除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方法。对象的Symbol.hasInstance属性，指向一个内部方法。当其他对象使用instanceof运算符，判断是否为该对象的实例时，会调用这个方法。比如，foo instanceof Foo在语言内部，实际调用的是Foo[Symbol.hasInstance](foo)。clas...

2018-03-15 16:22:42 1099

原创实例：模块的Singleton模式

Singleton模式指的是调用一个类，任何时候返回的都是同一个实例。对于Node来说，模块文件可以看成是一个类，怎么保证每次执行这个模块文件，返回的都是同一个实例呢？很容易想到，可以把实例放到顶层对象global。// mod.jsfunction A() { this.foo = 'hello';}if (!global._foo) { global._foo = new A(...

2018-03-15 15:54:35 407

原创 Symbol.for(),Symbol.keyFor()

有时我们希望重新使用同一个Symbol值，Symbol.for的方法可以做到这一点，它接受一个字符串作为参数，然后搜索有没有以该参数作为名称的Symbol值。let s1 = Symbol.for('foo');let s2 = Symbol.for('foo');s1 === s2 // 上面代码中s1和s2都是Symbol值，但是他们都是同样参数的Symbol.for方法生成的，所以实际上...

2018-03-15 15:44:17 1227

原创 vue.js控制列表的每一项

eg：<div v-for="(i,index) in resultful_list" class="my_similar_collect_div" > <div v-bind:class="{add_class:i.isActive}" style="height: 200px; font-size: 14px; width: 100%; color: rgb...

2018-03-15 15:20:47 950

原创属性名的遍历

Symbol作为属性名，不会出现在for……in，for……of循环中，也不会被Object.keys(),Object.getOwnPropertyNames(),JSON.stringify()返回，但是它也不是私有属性，有一个Object.getOwnPropertySymbols方法，可以获取指定对象的所有Symbol属性名。Object.getOwnPropertySymbols方法返回...

2018-03-15 15:01:07 306

原创 Symbol实例消除魔术字符串

魔术字符串是指：在代码中多次出现，与代码形成强耦合的某一具体字符串或者数值。风格良好的代码应该尽量消除魔术字符串，改由含义清晰的变量代替。function getArea(shape, options) { let area = 0; switch (shape) { case 'Triangle': // 魔术字符串 area = .5 * options.widt...

2018-03-15 14:35:19 1136 1

原创作为属性名的Symbol

由于每一个Symbol值都是不相等的，这意味着Symbol值可以作为标识符，用于对象的属性名，就会保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用，能防止某一个键被不小心改写或者覆盖。let mySymbol = Symbol();// 第一种写法let a = {};a[mySymbol] = 'Hello!';// 第二种写法let a = { [mySym...

2018-03-14 10:31:43 1545

原创 Symbol

1.概述ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。ES6又引入了一种原始数据类型Symbol，表示独一无二的值。他是JavaScrip...

2018-03-13 17:13:57 232

原创对象的扩展运算符

《数组的扩展》一章中，已经介绍过扩展运算符(……)const [a, ...b] = [1, 2, 3];a // 1b // [2, 3]ES2018 将这个运算符引入了对象。解构赋值：对象的解构赋值用于从一个对象取值，相当于将目标对象自身的所有可遍历的(enumberable)，但是尚未读取的属性，分配到指定的对象上面。let { x, y, ...z } = { ...

2018-03-13 16:23:45 623

原创 Object.keys(),Object.values(),Object.entries()

Object.keys()ES5引入了Object.keys()方法，返回一个数组，成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。var obj = { foo: 'bar', baz: 42 };Object.keys(obj)// ["foo", "baz"]ES2017 引入了跟Object.keys配套的Object.values和Object.ent...

2018-03-13 13:25:27 235

原创 super关键字

我们知道this关键字总是指向函数所在的当前对象，ES6又新增了一个类似的关键字super,指向当前的对象的原型对象。const proto = { foo: 'hello'};const obj = { foo: 'world', find() { return super.foo; }};Object.setPrototypeOf(obj, proto);...

2018-03-13 11:08:03 257

原创 Object.getPrototypeOf()

该方法与Object.setPrototypeOf方法配套，用于读取一个对象的原型对象。Object.getPrototypeOf(obj);下面是一个例子。function Rectangle() { // ...}const rec = new Rectangle();Object.getPrototypeOf(rec) === Rectangle.prototype// tr...

2018-03-13 10:54:46 849

原创 Object.setPrototypeOf()

Object.setPrototypeOf()Object.setPrototypeOf方法的作用与_proto_相同，用来设置一个对象的prototype对象，返回参数对象本身。它是ES6正式推荐的设置原型对象的方法。// 格式Object.setPrototypeOf(object, prototype)// 用法const o = Object.setPrototypeOf({}, ...

2018-03-13 10:39:13 1946

原创 _proto_属性

_proto_属性(前后各两个下划线)，用来读取或设置当前对象的prototype对象。目前所有浏览器(包括IE11)都部署了这个属性。// es6 的写法const obj = { method: function() { ... }};obj.__proto__ = someOtherObj;// es5 的写法var obj = Object.create(someOther...

2018-03-13 10:27:02 1202 1

原创 Object.getOwnPropertyDescriptors

前面说过，Object.getOwnPropertyDescriptor方法会返回某个对象属性的描述对象（descriptor）。ES2017 引入了Object.getOwnPropertyDescriptors方法，返回指定对象所有自身属性（非继承属性）的描述对象。const obj = { foo: 123, get bar() { return 'abc' }};Object...

2018-03-13 10:18:16 943

原创属性的遍历

ES6一共有5种方法可以遍历对象的属性：（1）for ……infor……in循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)。（2）Object.keys(obj)Object.keys返回一个数组，包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性)的键名。(3)Object.getOwnpropertyNames(obj)Object. getOwnpropertyN...

2018-03-13 09:59:50 278

原创属性的可枚举性和遍历

属性的可枚举性和遍历可枚举性对象的每一个属性都有一个描述对象(Descriptor)，用来控制该属性的行为。Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。let obj = { foo: 123 };Object.getOwnPropertyDescriptor(obj, 'foo')// {// value: 123,// wr...

2018-03-12 17:02:09 705

原创 Object.assign()

基本用法Object.assign方法用于对象的合并，将源对象(source)的所有可枚举属性,复制到目标对象(target)。const target = { a: 1 };const source1 = { b: 2 };const source2 = { c: 3 };Object.assign(target, source1, source2);target // {a:1, ...

2018-03-12 16:34:11 982

原创数组的扩展---数组的空位

数组的空位指，数组的某一位置没有任何值。比如，Array构造函数返回的数组都是空位Array(3)//[,,]上面的数组中Array返回的是一个具有三个空位的数组注意，空位不是undefined，一个位置的值等于undefined，依然是有值的。空位是没有任何值，in运算符可以说明这一点。0 in [undefined, undefined, undefined] // true0 in [, ...

2018-03-09 16:51:39 404

原创数组的实例---数组的entries(),keys(),和values() ,includes()

ES6 提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象（详见《Iterator》一章），可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。for (let index of ['a', 'b'].keys()) { console.lo...

2018-03-09 16:32:13 1407

原创数组的扩展---数组实例的fill()

fill方法使用给定值填充一个数组['a', 'b', 'c'].fill(7)// [7, 7, 7]new Array(3).fill(7)// [7, 7, 7]上面代码表明，fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。['a', 'b', 'c'].fill(7, 1, 2)/...

2018-03-09 16:14:29 615

原创数组实例的find()和findIndex()

数组实例的find方法，用于找出第一符合条件的数组成员。它的参数是一个回调函数,所有的数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员，如果没有符合条件的成员，返回undefined。[1, 4, -5, 10].find((n) => n < 0)// -5上面代码找出数组中第一个小于 0 的成员。[1, 5, 10, 15].find(functi...

2018-03-09 16:05:55 2429

原创数组的扩展---数组实例的copyWithin()

数组实例的copyWithin()方法，在当前数组的内部，将指定位置的成员复制到其他位置(会覆盖原有成员)，然后返回当前数组。也就是说，使用这个方法，会修改当前数组。语法： Array.prototype.copyWithin(target,start=0,end=this.length)它接受三个参数，target必需：从该位置开始替换数据。如果为负值，表示倒数。 ...

2018-03-09 15:50:49 306

空空如也

空空如也