神圣光-CSDN博客

原创 vue-router文档细读

Vue-Router在组件内，可以通过 this.router访问路由器，通过this.router访问路由器，通过this.router 访问路由器，通过 this.route 访问当前路由当对应的路由匹配成功，将自动设置 class 属性值 .router-link-active1. 动态路由匹配通过设置路由的 path 为 /user/:id 的这种形式，此时可以通过...

2018-09-02 22:33:11 1595

原创学习ES6中的对象扩展小记

对象扩展1. 属性的简洁表示法ES6 允许直接写入变量和方法，作为对象的属性和方法，需要注意的是简洁写法的属性名总是字符串const obj = { class () {}}// 这里的 class 是字符串，所以不会因为它属于关键字，而导致语法解析报错var obj = { 'class': function () {}}// 如果某个方法的值是...

2018-08-26 22:21:32 294

原创学习ES6中的Promise小记

Promise1. 含义特点： 1. 对象的状态不收外界影响，代表一个异步操作，存在三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）。只有异步操作的结果可以决定当前是哪一种状态 2. 一旦状态发生改变，就不再再变。 3. Promise 无法取消，一旦新建就会立即执行，无法中途取消。如果不设置回调函数，Promise内部抛出的错误，就无...

2018-08-26 20:25:05 435

原创学习ES6中的数组扩展小记

数组的扩展1. 扩展运算符（背后调用的是遍历器接口 Symbol.iterator）它好比是 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5该运算符主要用于函数调用时，将数组变为参数序列。如果扩展运算符后...

2018-08-21 20:08:07 400

原创学习ES6中的函数扩展小记

函数的扩展1. 函数参数的默认值注意： 1. 参数变量是默认声明的，不能用 let 和 const 再次声明 2. 使用参数默认值时，函数不能有同名参数 3. 参数默认值不是传值的，而是每次都重新计算默认值表达式的值。（参数默认值是惰性求值的）与解构赋值默认值结合使用// 只对对象进行了解构赋值，参数本身并没有默认值，不传递参数会导致报错function foo({...

2018-08-21 14:13:56 178

原创学习ES6中的数值扩展小记

数值的扩展1. 二进制和八进制表示法提供了二进制和八进制数值的新写法，分别用前缀 0b 和 0o 来进行表示，从 ES5 开始，在严格模式中，八进制不再允许使用前缀 0 表示如果要使用 0b 和 0o 前缀的字符串数值转为十进制，需要使用 Number 方法Number('0b111') // 72. Number.isFinite()，Number.isNaN()...

2018-08-19 21:01:06 159

原创学习ES6中的字符串扩展小记

字符串的扩展1. 字符的 Unicode 表示法JavaScript 可以采用 \uxxxx 形式表示一个字符（表示一个字符的码点），但是这种表示法只限于在 \u0000 - \uFFFF 之间的字符。超出这个范围的字符必须使用双字节的形式进行表示ES6 可以将码点放入大括号内，这样就可以正确的解读字符了// 使用大括号进行表示码点\u{20BB7}2. code...

2018-08-19 19:26:26 158

原创学习ES6中的解构赋值小记

变量的解构赋值1. 数组的解构赋值默认值可以是其他变量，但该变量必须已经声明2. 对象的解构赋值对象的结构赋值，依据是属性名的一致，对象的解构赋值更像是这种方式的简写：// key 值相当于匹配的模式，value 值才是变量let {foo: foo, bar: bar} = {foo: 'aaa', bar: 'bbb'} 所以对象的解构赋值的内部机制，...

2018-08-19 16:28:14 299

原创使用push你必须知道的小细节

相信大家平时开发的过程中，经常需要对数组进行操作，说到对数组的操作，push还是出场率很高的。今天本人在使用push的过程中，因为对这个方法的理解不够深，导致开发过程中出现了小小的困扰。这里先给大家举个例子：var obj = {name: 'han'};var arr = [];arr.push(obj)arr.push(obj)arr.push(obj)arr.push(ob...

2018-06-28 22:56:33 11585

原创使用vue的transition完成滑动过渡

使用vue来做一些小巧的动画效果是非常方便的，今天本人想使用vue的transition来完成一个滑动过渡效果，这里和大家分享一下。直接上源代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue滑动效果</title>

2018-06-23 22:07:43 13622

原创文本框里如何带上图标和文字提示

相信我们平时开发的过程中，会遇到这种需求：这里是一个输入框，里面有提示文字的同时，还有一个小图标。这里我的做法是使用一个父元素包裹住文本框，利用父级元素的背景图片来完成小图标的实现。提示文字部分则使用文本框的placeholder来解决。参考代码如下：HTML部分：<div class="search-input"> <input type="text...

2018-06-21 22:29:43 6387

原创 CSS3中的box-sizing

懂得如何运用box-sizing之前，必须需要了解一下常规盒模型和怪异盒模型（IE盒模型）。我们都知道盒模型从里到外主要包括：content，padding，border，margin。如下图：两种盒模型的宽度标准盒模型的width = content 怪异盒模型的width = content + padding*2 + border*2 也就是说，一...

2018-06-21 20:45:28 356

原创图标字体的优缺点和使用

图标字体的优势和劣势优势轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，不需要下载一个个图像。这样可以减少HTTP的请求数量，而且和HTML5的离线存储配合，可以对性能做出优化。灵活性：不调字体可以像页面中的文字一样，通过font-size属性来对其进行大小的设置，而且还可以添加各种文字效果，如color、hover、filter、text-shad...

2018-04-03 10:51:06 6141

原创设备像素比dpr

物理像素、设备独立像素、CSS像素物理像素：指的是终端设备上显示的最小单位，我们可以把这些像素看做是显示器上一个个的点。设备独立像素：指的是计算机坐标系统中的一个个点，它是独立于设备的用于逻辑上衡量像素的单位。常用dips来表示。CSS像素：它是一个相对值，不是绝对值，是一个抽象的单位，是一种规范。最终显示是取决于物理设备的。它的显示方式由设备像素比来决定，如1px的CSS像素，在设备...

2018-04-03 10:17:11 1264

原创详解vue-router 中的导航钩子

vue-router 的导航钩子，主要用来作用是拦截导航，让他完成跳转或取消。有三种方式可以植入路由导航过程中：全局的单个路由独享的组件级的1. 全局导航钩子：全局导航钩子主要有两种钩子：前置守卫、后置钩子，注册一个全局前置守卫：const router = new VueRouter({ ... });router.beforeEach((to, from, n...

2018-02-26 21:56:23 40431 4

原创 vue-router中定义动态路由、嵌套路由，并动态获取参数

路由的定义，主要有以下几步：如果是模块化机制，需要调用 Vue.use(VueRouter)定义路由组件，如：const Foo = { template: '<div>foo</div>'};定义路由（数组）：const routes = [ { path: '/foo', component: Foo }...

2018-02-26 20:25:00 32261

原创让我们来聊聊 jade 模板引擎

jade 模板引擎jade 是高性能的node JavaScript模板引擎，它主要针对node的服务端它是侵入式的模板引擎，和普通的 HTML 和 CSS 是无法共存的，强依赖的模板引擎既然学习了 node，那怎么可以不知道 jade 的用法呢？？让我们来一起学习以下他的基本语法吧！！！jade安装：cnpm install jade使用：引入 const jade

2018-02-02 21:55:07 632

原创项目中使用webpack基本的配置

什么是 webpackwebpack 可以看做是模块打包机：它做的事情是，分析你的项目结构，找到 JavaScript 模块以及其他的一些浏览器不能直接运行的扩展语言（Scss，TypeScript 等），并将其转换和打包为合适的格式供浏览器使用使用 webpack 前的准备npm init ：创建一个 package.json 文件。它是标准的 npm 说明文件，包括当前项目的

2018-01-17 11:15:55 2359

原创简单有趣的原型语法

前些天偶然看到了一个有趣的原型语法，这种方法稍微简化了咱们给原型对象添加方法和属性的书写过程，而且非常清新，给人一种一目了然的感觉，在这里欣喜地和大家分享一下先来看看我们传统的添加原型对象的属性、方法的方式：function Person() {}Person.prototype.name = 'Han';Person.prototype.age = 21;Person.prototype.j

2018-01-01 21:51:07 509

原创浅析 String 类型的 slice()、substr()、substring()方法

来聊聊 String 类型提供的三个方便而又非常相似的截取方法

2017-12-29 22:15:33 3772

Web设计是一个不断变化的领域，因此掌握最新的发展趋势及技术动向对设计师来说非常重要，无论是学习新技术，还是寻找免费资源与工具，设计博客都是很不错的去处。本文向Web前端开发工程师推荐15个非常不错的技术博客。1. Smashing Magazine Smashing Magazine创建于2006年，是最好的设计博客之一，有很多Web设计和开发方面的高质量文章，内容涉及HTML5、CSS、Java

2017-12-28 20:55:18 632

原创 Array.prototype.concat() 和 Object.assign() 对比

Array.prototype.concat() 和 Object.assign() 对比ES6 中提供了一些对象的方法扩展，其中的 Object.assgin() 让我印象深刻，因为他的使用方式和效果，让我想起了数组的拼接方法：Array.prototype.concant()。他们有着一些相似的写法和功能，当然也有着一些区别，让我们来一起探讨吧！先来看看下面两段代码let arr1 = ['a'

2017-12-28 20:31:31 3843 1

原创 for in 和 for of 的对比

for in 和 for of 的对比fon in 和 for of 最大的区别就是：一个是对键名 key 的遍历，一个是对键值 value 的遍历使用 for in 也能遍历数组，但会存在一些问题：index 索引为字符串型数字，不能直接进行几何运算和遍历顺序对象的行为一样，使用 for in 会遍历数组所有可枚举的属性，所以原型对象上的方法和属性也会被遍历遍历的顺序可能不是按照实际数组的内

2017-12-27 20:19:46 557

原创 var、let、const 的一些区别

var 相对于后面两个，没有块级作用域var 会发生变量提前，后两者没有var 允许同一个变量的多次声明（并不建议这么做），后两者则不允许var 和 let 可以声明后不进行初始化，但是 const 声明的同时必须要进行初始化，否则会报错const 储存对象的时候，储存的是这个对象的指针地址，并不是这个对象本身，真正不能改变的是这个指针。所以对这个对象进行属性的操作并不会报错，但是修改它的指

2017-12-26 16:33:08 254

转载你不知道的javascript之 Object.create 和 new 区别

博客原文地址：http://blog.csdn.net/blueblueskyhua/article/details/73135938前几天有碰到原型的问题。之前以为自己对原型还是有所了解，但是细细研究，发现自己对原型的理解还是太年轻了。Object.create 和new创建对象的方式，我以我碰到的两种创建方式，Object.create 和new来说明var Base = function ()

2017-12-17 17:03:47 248

转载深入理解JavaScript运行机制

深入理解JavaScript运行机制前言本文是写作在给团队新人培训之际，所以其实本文的受众是对JavaScript的运行机制不了解或了解起来有困难的小伙伴。也就是说，其实真正的原理和本文阐述的并不完全符合，就如中学课本和大学课本一样，大学老师会告诉你高中的一些东西是在某些理想情况下得到的结论，本文同理。本文的目的是希望大家阅读之后能对JavaScript的运行机制有一个比较直观比较快的认识，但更

2017-12-16 23:01:20 208

转载如何减少浏览器的 Repaint 和 Reflow

一、什么是repaint/reflow?页面在加载的过程中，需要对文档结构进行解析，同时需要结合各种各样的样式来计算这个页面长什么样子，最后再经过浏览器的渲染页面就出现了。这整个过程细说起来还是比较复杂，其中充满了repaint和reflow。对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个

2017-12-16 20:56:26 239

转载 http协议的主要特点

`HTTP协议的主要特点可概括如下：1.支持客户/服务器模式。2.简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。3.灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。4.无连接：

2017-12-15 20:19:53 11330

Mr. Han