RUCwang的博客

原创 再议async/await执行顺序（附图示）

// 异步函数async function asyncFn() { // do something let foo = await fn(); // continue...}asyncFn();

原创 async / await 的执行时间

目录一、async 是做什么的，什么时候工作？二、await 是做什么的？三、async/await 对函数执行顺序的影响。四、 写在最后JavaScript 异步编程的终极方案 async / await。一、async 是做什么的，什么时候工作？1. async 让函数返回一个 promise 对象。会把函数的返回值通过 promise.resolve() 封装成一...

原创 TypeScript 生成文件到指定目录

TypeScript 生成文件到指定目录文件结构如下tsc --outFile ./js/index.js index.ts // 文件可以加路径这时会把根目录下的index.ts编译为./js/目录下的index.js.tsc --outFile ./js/sample.js Test.ts Validation.ts LettersOnlyValidator.ts ZipCodeV...

原创 理解node stream（流）的机制

本图是依据《node.js高级编程》和node的官方api文档，自己总结出来的，如果有错误的地方烦请指正。

转载 发布订阅模式

发布订阅模式很多的前端框架都适用了发布订阅的模式来实现局部的刷新，下面的一个例子简单说明了什么是发布订阅模式。设想有这样一个猎人联盟，猎人们可以通过它来发布一些狩猎信息，也可以在这里订阅别人发布的信息。每当有猎人发布信息的时候，联盟就把信息转发给所有订阅了的猎人们，猎人们则依次开展行动。/** * 猎人联盟 * 猎人的订阅信息（行动）存在topics里面 * 发布的时候会执行对应top...

原创 XMLHttpRequest

XMLHttpRequest一个Http请求包括请求头、相应头 、request、 response等，对于很多初学者来说，由于上来接触的就是JQuery等封装好的请求方式，对于反复提到的dataType、responseType、setRequestHeader等等，往往一知半解，会使用，但是不确定是否正确。今天就让我们慢慢揭开他们神秘的面纱。先看一个常规的请求头Accept: image...

原创 File、FileReader、FormData

File、FileReader、FormData近期因业务需要，重新学习了一下下html的上传文件，把一些在文件方面常见的概念理理清楚，方便日后回顾。FileFile，顾名思义就是文件，千万要和FileReader进行区分。File继承自Blob，是二进制的大对象，File有一个很重要的方法就是File.slice()，可以实现对大文件的分段截取。在html中，File可以来自于的FileL...

原创 React生命周期需要关心的问题

&& 或是 ？ ： 条件渲染的方式{ show ? <PrimaryButton></PrimaryButton> : <DefaultButton></DefaultButton>}{show && this.renderDetail()}上面的两种条件渲染的方式，Jsx式的组件或是函数式的组件，没...

原创 git 操作笔记

git 操作笔记一、git pull完全体：git pull <远程主机名> <远程分支名>:<本地分支名> || git pull origin next:master 默认拉到当前分支git pull <远程主机名> <远程分支名> || git pull origin next只有一个远程追踪分支时git pul...

原创 Reflux组件中触发Action后数据流向

原创 react-redux使用入门

react-redux使用入门什么是redux?redux是项目的状态管理库，对于大的项目尤其有用，和react本身并不相关，可以和任何框架融合。对于一个项目而言，主要的数据可能是这样的：state = { todos: [{ text: 'Eat food', completed: true }, { text: 'Exercise', comple...

原创 深拷贝

仅仅是为了自己记忆，也是比较常用的深拷贝方法，对于大部分的业务已经能够胜任。/** * 深拷贝函数，用于拷贝数组和对象，如果对象或数组的某一项依旧是对象或数组，那么需要递归调用函数 * @param {array,object} target 拷贝的目标 * @return {array,object} 返回复制的对象 */function deepCopy(target) { ...

原创 Number转换与Boolean转换（特殊值表）

原创 js基本数据类型与typeof返回值（图示）

原创 弄清楚 export 与 export default

弄清楚 export 与 export defaultES6的模块导出 export 与 export default，模块引入 import … from …一、export 可以导出变量声明表达式以及对象的字面量表达式。// 导出变量声明表达式export let name = 'wang';// 导出字面量形式的对象let age = 24;let school = 'ru...

原创 深入理解CSS清除浮动与clear属性

深入理解CSS清除浮动与clear属性相信作为一名前端工作人员，一定遇到过或是被问过清除浮动这一问题，一般我们会说：元素添加float属性后，其父元素不会被撑开，解决这个问题的过程就称为清除浮动。没有问题，假如再深入问一点，为什么添加float属性之后会出现这样的情况，有几种清除浮动的方法。浮动的案例：父元素没有被撑开<div class="container"> <di...

原创 git merge 笔记

git merge 笔记一、在 commit init时生成两个分支，dev和hot二、在完成hot分支上的任务后，将其合并到master上，这种情况下，会直接移动HEAD指针进行合并。换言之：当你试图合并两个分支时，如果顺着一个分支走下去能够到达另一个分支，那么 Git 在合并两者的时候，只会简单的将指针向前推进（指针右移），因为这种情况下的合并操作没有需要解决的分歧——这就叫做 “快进（...

原创 Vue中的驼峰式写法和短连接符写法

Vue中的驼峰式写法和短连接符写法字符串模板：template:``单文件组件（.vue）：<template></template>html是不区分大小写的，统一转化为小写，本文主要讨论使用vue-cli构建的项目，即使用单文件组件的情况下。组件名按照约定，组建名命名应该是PascalCase的，在单文件组件中使用组件时，以下方式都可以：<HelloWo...

原创 vue组件应用v-model

vue组件应用v-model一、input上的v-model原理vue中的v-model最常用的就是在input节点上，像下面这样：<input type="text" v-model="message">v-model实际上是一种数据和方法绑定的语法糖<input type="text" :value="message" @input="message = $ev

原创 ES6函数参数解构

ES6函数参数解构常规的JavaScript若要给函数传递的参数是一个对象，需要像下面这样来实现：function sayName(person) { if(Object.prototype.toString.call(person) == '[object Object]') { console.log( `${person.firstName} ${person.lastNam...

原创 Vue 组件传递对象采用 keep-alive 与 localStorage 对比.md

Vue 组件传递对象采用 keep-alive 与 localStorage 对比两个 vue 组件，A 与 B，A通过路由的方式跳转到B，需要向B传递数据，我们这里传递的数据是由对象组成的数组，也就是引用类型变量。本篇文章的 A 是始终缓存的，也就是始终keepAlive === true。A页面时一个简单的商品列表及购物车页面：A中点击提交按钮会跳转到B，B是展示订单的页面：我们主...

原创 在vue项目中图片路径的使用.md

在vue项目中图片路径的使用应用vue-cli 构建的项目，图片一般保存在 src/assets 目录或者是 static 目录中，src 目录下的文件是webpack 打包时需要引用的，static 目录是不经过打包直接引用的。在 src/assets 目录下的图片引用：在组件的 template 中根据正常路径来引用即可<img src="../assets/mg-pizza.j...

原创 常用的vue轮播组件

common vue-slidera vue slider component without jQuery.**events included: ** auto animation，hover on buttons, click the button.main theory: change the pisition of images container when the currentI...

原创 semantic-ui dimmer

semantic-ui dimmer(遮罩)网上对于semantic-ui 的说明本身就少，dimmer的文档更是少之又少，以下只是个人摸索出的一些关于dimmer的认识，若有不当之处，还请见解，代码冗余，可以直接看结论。dimmer 基本用法以下面的例子说明基本用法<div class="ui container"> <div class="ui...

原创 Super方法

Super方法用来调用和访问父类的方法super 关键词可以单独出现在子类的构造函数中，调用父类的构造函数为子类属性赋值（注意super关键词必须出现在this关键词之前）。class Father{ constructor(x, y){ this.x = x; this.y = y; this.name = 'Father' ...

原创 data对象属性是否可以动态响应

Vue中采用==字面量形式==添加或者删除 data 对象的属性，是无法被动态响应的，但是可以利用Vue.set(Object, key, value) 的形式添加属性，这样的属性是可以动态响应的。var vm = new Vue({ data: { a:1 }})// vm.a 是响应式的vm.b = 2;// vm.b 是非响应式的。...

原创 JS组合继承相比原型链继承的优势

目录 原型继承：原型链继承的问题：组合继承：原型继承：// '父'构造函数function Father() { this.name = 'foo'; this.family = ['Jack','Tom','James'];}Father.prototype.sayName = function () { console.log(this.na...

原创 JS块级作用域在循环中差别的体现

在ES6出现之前，JavaScript一直是只有函数作用域，没有块级作用域的。ES6出现之后，增加了块级作用域。本文将以一个经典的循环与闭包结合的示例出发，尝试去解释块级作用域的差别。先看下面的例子：function createFunctionArray() { var m = 'this is outer function', arr = []; fo...

原创 CSS3D-从构建一个立方体开始

css3D3D变化是css3的新属性，可以用来实现一些酷炫的效果。本文以如何搭建一个立方体为例谈谈关于3D的个人见解。 页面坐标是三维的，X轴从页面左边向右，Y轴从页面上方向下，Z轴从页面里面向外，和我们以前数学立体几何中的坐标系很相似，只是Y轴的方向相反，坐标原点默认时图形中心。需要注意两点：1.旋转角度为正时遵循我自己称之为的“左手定则”，即左手拇指指向坐标轴正方向，旋转方向就...

原创 angular2 引入jquery 和 semantic-ui

最近在跟着《Angular权威教程》学习Angular2，书上用的是semantic-ui来自动给元素添加样式，依样画葫芦呗，安装一下semantic-ui.然后由于semantic-ui的js部分是用jQuery写的，所以必须要安装jQuery。1.在项目根目录安装jQuery 和 semantic-ui。终端输入 npm install jquery --save这里需要加上--s

原创 详解&lt；meta name=“viewport“ content=“width=device-width“&gt；标签

详解<meta name="viewport" content="width=device-width">标签我们拿到一个设计稿，以iPhone7为基准的，好的，我们按照习惯在html插入标签<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=...