木槿花开

原创 HTTP缓存知识

前端缓存分为两大类：HTTP缓存和浏览器缓存本文重点讲解下HTTP缓存的一些知识点。一、 http请求缓存过程浏览器第一次请求资源时，服务器返回资源，并在respone header头中回传资源的缓存参数，浏览器将其进行缓存；第二次请求时，浏览器判断这些请求参数，命中强缓存就直接200，否则就把请求参数加到request header头中传给服务器，看是否命中协商缓存，命中则返回304...

原创 重温promise与async/await

1. promise异步编程promise对象代表一个异步操作，有三种状态：pending（进行中），fulfilled(resolved)（已成功），rejected（已失败）。特点：对象的状态不受外界影响一旦状态改变，就不会再变，任何时候都可以得到这个结果注: promise状态改变只有两种可能：pending —> fulfilled, pending —> ...

原创 TypeScript实用技巧

1. is关键字is关键字可用来判断并限定值的类型，比如：function user0(name: any): name is string { return name === 'lili'}function user1(name: any): boolean { return name === 'lili'}function getUserName(name: string...

原创 TypeScript基础知识

1. 基础类型定义//布尔值let isDone: boolean = false;//数字let decLiteral: number = 6;let hexLiteral: number = 0xf00d;let binaryLiteral: number = 0b1010;let octalLiteral: number = 0o744;//字符串let name: s...

原创 Virtual Dom原理浅析

一、virtual dom介绍virtual dom定义：是一个由标签名tag、属性props和子元素对象children等构成的js对象。var vdom= { tag: 'ol', // 标签名 props: { // 属性用对象存储键值对 id: 'ol-list' }, children: [ // 子节点 {tag: 'li', props: {c...

转载 JS装饰器(Decorator)

Decorator 是 ES7 的一个新语法，目前仍处于第2阶段提案中，正如其“装饰器”的叫法所表达的，他通过添加@方法名可以对一些对象进行装饰包装然后返回一个被包装过的对象，可以装饰的对象包括：类，属性，方法等。在使用它之前需要引入babel模块 transform-decorators-legacy 编译成 ES5 或 ES6。1. 类的装饰当装饰的对象是类时，我们操作的就是这个类本...

原创 CSS揭秘-视觉效果

1. 单侧投影由box-shadow的第四个长度参数即扩张半径，可根据你指定的值去扩大或 (当指定负值时)缩小投影的尺寸。可知单侧投影实现如下：box-shadow: 0 5px 4px -4px black;邻边投影box-shadow: 3px 3px 6px -3px black;双侧投影box-shadow: 5px 0 5px -5px black, ...

原创 CSS揭秘-形状

形状1. 自适应的椭圆border-radius可以单独指定水平和垂直半径，用一个斜杠(/)分隔这两个值即可。border-radius: 水平半径 / 垂直半径；border-radius: 50% / 50%;即可实现一个自适应的椭圆；半椭圆border-radius: 50% / 100% 100% 0 0;其中垂直半径分别为：左上角100% 右上角100% 左下角0...

原创 CSS揭秘-背景与边框

CSS编码技巧尽量减少代码重复当某些值相互依赖时，应该把他们的相互关系用代码表达出来，如行高是字号的1.5倍：font-size: 20px;line-height: 1.5;相信你的眼睛，而不是数字响应式网页设计（百分比长度、flex布局、媒体查询）合理使用简写背景与边框1. 半透明边框border: 10px solid hsla(0,0%,100%,.5); ...

原创 PostCSS使用教程

转载 Redux学习总结三

参考自阮一峰React教程react-redux的用法一、UI组件react-redux将所有组件分成两大类：UI组件(presentational component)和容器组件(container component)。 UI组件有以下几个特征： 1. 只负责UI的呈现，不带有任何业务逻辑 2. 没有状态（即不使用this.state这个变量） 3. 所有数据都由参数（...

转载 Redux学习总结二

参考阮一峰Redux教程 上一篇介绍了Redux的基本做法：用户发出Action,Reducer函数算出新的State,View重新渲染。 为实现Reducer的异步操作，就需要使用新的工具：中间件(middleware).一、中间件只有发送Action的这个步骤即store.dispatch()方法，可以添加功能。//添加日志功能let next = store.dispa...

转载 Redux学习总结一

参考阮一峰博客：redux教程一、react设计思想web应用是一个状态机，视图与状态是一一对应的。所有状态都保存在一个对象里面。 二、redux基本概念1. StoreStore是保存数据的地方，可以将其看成一个容器，整个应用只能有一个Store.2. StateState是Store对象的某个时点的数据集合，当前时刻的State可以通过store.ge...

原创 JavaScript设计模式

一、单体模式概念：单体模式是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象，如果他可以被实例化，那么他只能被实例化一次。优点：1. 可以来划分命名空间，从而清除全局变量所带来的危险。2. 利用分支技术来来封装浏览器之间的差异。3. 可以把代码组织的更为一体，便于阅读和维护。实例：var singleton = function( fn ){ var

转载 ES6模块加载机制详解

1. 浏览器加载传统方法在HTML网页中，浏览器通过script type="application/javascript"> // module codescript>script type="application/javascript" src="path/to/myModule.js">script>默认情况下，浏览器同步加载JavaScript脚本，即渲染

转载 JSX语法

一、基础1、JSX是什么JSX是一种像下面这样的语法：const element = h1>Hello, world!h1>;它是一种JavaScript语法扩展，在React中可以方便地用来描述UI。本质上，JSX为我们提供了创建React元素方法（React.createElement(component, props, ...children)）的语法糖（syntacti

转载 React路由

路由库React-Router是唯一可选的路由库，它通过管理 URL，实现组件的切换和状态的变化一、基本用法React Router 安装命令如下。$ npm install -S react-router使用时，路由器Router就是React的一个组件。import { Router } from 'react-router';render(, document.get

转载 React入门教程

一、React安装1.使用React需引入三个库：react.min.js - React 的核心库react-dom.min.js - 提供与 DOM 相关的功能babel.min.js/browser.min.js - Babel 可以将 ES6 代码转为 ES5 代码，它内嵌了对 JSX 的支持。2.使用 create-react-app 快速构建 React 开发环境

转载 HTML状态码大全

HTML状态码被分为五大类：100-199 用于指定客户端应相应的某些动作。 200-299 用于表示请求成功。 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。 400-499 用于指出客户端的错误。 （自己电脑这边的问题） 自己电脑这边的问题） 500-599 用于支持服务器错误。 （对方的问题） 对方的问题）一些常见的状态码为：

原创 JS补充学习

1.for...infor循环的一个变体是for ... in循环，它可以把一个对象的所有属性依次循环出来：var o = {name: 'Jack',age: 20,city: 'Beijing'};for (var key in o) {alert(key); // 'name', 'age', 'city'}要过滤掉对象继承的属性，用hasOwnProperty()来实

原创 express框架应用

一. 概述Express是基于Node.js的Web开发框架。实例：//根目录下新建启动文件index.jsvar express = require('express');var app = express();//浏览器请求文件定位到public子目录app.use(express.static(__dirname + '/public'));//app.get方法

原创 Node.js Express框架

Express 框架核心特性：可以设置中间件来响应 HTTP 请求。定义了路由表用于执行不同的 HTTP 请求动作。可以通过向模板传递参数来动态渲染 HTML 页面。一. 安装Express$ cnpm install express --save以下几个重要的模块是需要与 express 框架一起安装的：body-parser - node.js 中间件，

原创 Node.js Web模块

一. 创建Web服务器一个最基本的 HTTP 服务器架构(使用8081端口)，示例如下：1. 创建 server.js 文件：var http = require('http');var fs = require('fs');var url = require('url');// 创建服务器http.createServer( function (request, re

原创 Node.js 文件系统

Node.js 文件系统（fs 模块）模块中的方法均有异步和同步版本，例如读取文件内容的函数有异步的 fs.readFile() 和同步的 fs.readFileSync()。异步的方法函数最后一个参数为回调函数，回调函数的第一个参数包含了错误信息(error)。例如：var fs = require("fs");// 异步读取fs.readFile('input.txt',

原创 Node.js 常用工具

util 是一个Node.js 核心模块，提供常用函数的集合。1. util.inheritsutil.inherits(constructor, superConstructor)是一个实现对象间原型继承的函数。示例如下：var util = require('util'); function Base() { this.name = 'base'; this.ba

转载 angularJS中$applay()及$digest()理解

AngularJS的双向数据绑定特性大大简化了我们的代码编写方式。数据绑定意味着当View中有任何数据发生了变化，那么这个变化也会自动地反馈到scope的数据上，也即意味着scope模型会自动地更新。类似地，当scope模型发生变化时，view中的数据也会更新到最新的值。那么AngularJS是如何做到这一点的呢？当你写下表达式如{{ aModel }}时，AngularJS在幕后会为你...

转载 angularJS自定义指令详解

AngularJS指令在HTML代码中可以有四种表现形式：1、作为一个新的HTML元素来使用。<hello></hello>或者<hello/>2、作为一个元素的属性来使用<div hello></div>3、作为一个元素的类来使用<div class="hello"></div>...

转载 css垂直居中和水平居中

在网页布局中，垂直居中对齐总是一个绕不过的话题，而且这两种对齐方式由于浏览器渲染方式的不同，也存在很多不同的场景，本文试图将这些场景一一列举并给出解决方案，也是对这个知识点的一点回顾和总结。1.水平居中水平居中这个问题首先要搞清楚存在两个条件才能够称之为水平居中，即父元素必须是块级盒子容器，父元素宽度必须已经被设定好，在这两个前提下我们来看水平居中问题。场景1：子元素是块级元素

原创 变量的解构赋值

一、数组的解构赋值（1）ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。如let [a, b, c] = [1, 2, 3];如果解构不成功，变量的值就等于undefined，如let [bar, foo] = [1]; //foo值为undefined（2）不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。例如：let [x, y]

原创 requre.js 用法

使用require.js的目的：（1）实现js文件的异步加载，避免网页失去响应；（2）管理模块之间的依赖性，便于代码的编写和维护。一、require.js的加载1.加载require.js（两种方法）：（1）将放在网页底部加载（2）<script src="js/require.js"defer async="true" >实现异步加载2.加载自己代码（main.j

转载 scroll滚动性能优化

在绑定 scroll 、resize 这类事件时，当它发生时，它被触发的频次非常高，间隔很近。如果事件中涉及到大量的位置计算、DOM 操作、元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成，就会造成浏览器掉帧。加之用户鼠标滚动往往是连续的，就会持续触发 scroll 事件导致掉帧扩大、浏览器 CPU 使用率增加、用户体验受到影响。一、页面渲染用户 scroll 和 res

原创 Node.js 全局对象

在浏览器 JavaScript 中，通常 window 是全局对象， 而 Node.js 中的全局对象是 global，所有全局变量（除了 global 本身以外）都是 global 对象的属性。一、__filename__filename 表示当前正在执行的脚本的文件名，输出为文件所在位置的绝对路径。创建文件 main.js：// 输出全局变量 __filename 的值con

原创 Node.js Stream

Stream 是一个抽象接口，有四种流类型：Readable - 可读操作。Writable - 可写操作。Duplex - 可读可写操作.Transform - 操作被写入数据，然后读出结果。常用的事件有：data - 当有数据可读时触发。end - 没有更多的数据可读时触发。error - 在接收和写入过程中发生错误时触发。finish - 所有数据已被写入到底层系统时

原创 Node.js Buffer

Node.js定义了一个 Buffer 类，该类用来创建一个专门存放二进制数据的缓存区。一、创建 Buffer 类（1）创建长度为 10 字节的 Buffer 实例：var buf = new Buffer(10);（2）通过给定的数组创建 Buffer 实例：var buf = new Buffer([10, 20, 30, 40, 50]);（3）通过一个字符串来创建

原创 Node.js 事件循环

Node.js应用由以下几部分组成：1.引入 required 模块：可以使用 require 指令来载入 Node.js 模块。2.创建服务器：服务器可以监听客户端的请求，类似于 Apache 、Nginx 等 HTTP 服务器。3.接收请求与响应请求：客户端可以使用浏览器或终端发送 HTTP 请求，服务器接收请求后返回响应数据。Node.js 是单进程单线程应用程序，但是通

转载 JS实现常见算法

排序算法1、冒泡排序function bubbleSort(arr){ var i = j = 0; for(i=1; i<arr.length; i++){ for(j=0; j<=arr.length-i; j++){ var temp = 0; // ">" 从小到大排序 // " if(arr[j] > arr[j

原创 let和const命令

参考阮一峰的ES6入门：http://es6.ruanyifeng.com/#docs/let一、let命令let命令用来声明变量，用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。{ let a=10; var b=1;}a;// ReferenceError: a is not defined.b;//1for循环的计数器就很合适使用let命令：

原创 图片轮播原生实现

图片轮播原生实现：自动轮播播放前后按钮控制翻页先晒效果图如下：一、图片轮播HTML代码

原创 原生实现响应式模态框

下面采用HTML+CSS+JavaScript实现模态框，并采用Flex布局和多媒体查询实现响应式。一、模态框HTML代码 模态框实现 模态框展示 模态框标题 × HTML+CSS+JS原生实现响应式模态框演示！ 取消 确定 首先定义模态框的overlayer，然后定义模态框的内容包括head

转载 Mocha测试框架

转载自：阮一峰网络日志Mocha是现在最流行的JavaScript测试框架之一，在浏览器和Node环境都可以使用。所谓"测试框架"，就是运行测试的工具。通过它，可以为JavaScript应用添加测试，从而保证代码的质量。另外，除了Mocha以外，类似的测试框架还有Jasmine、Karma、Tape等，也很值得学习。一、安装第一步首先安装示例库Mocha-demos。...