商品计价的千分位分隔符转换1return total.toString().replace(/\B(?=(\d{3})+$)/g, ',')
去除字符串的空格
字符串原生trim方法，只能去除两侧空格，返回新字符串
replace正则匹配
去除所有空格：str = str.replace(/\s*/g,"")
去除两侧空格：str = str.replace(/^\s*|\s*$]/g,"")
去除左侧空格：str = str.replace(/^\s*/,"")
去除右侧空格：str = str.replace(/\s*$/,"")
中文、英文、数字但不包括下划线等符号
中文：^[\u4e00-\u9fa5]{0,}$
中文、英文、数字：^[\u4e00-\u9fa5A-Za-z0-9_]+$（包括下划线），[\u4e00-\u9fa5A-Za-z0-9]+$/[\u4e00-\u9fa5A-Za-z0-9]{ ...
在实际的业务中，经常有跨组件共享数据的需求，Vuex就是设计用来统一管理组件状态的，它定义了一系列规范来使用和操作数据，使组件的应用更高效。
引入Vuex之后统一对共享数据进行管理存放，在各个页面中可以利用commit方法提交mutation对共享数据进行修改。
123456789101112131415161718192021222324252627// store/index.jsexport default new Vuex.Store({ state: { count: 0 }, mutations: { increment: state => state.count++, decrement: state => state.count-- }})// Component.vueexport default { computed: { count() { return this.$store.state.count; ...
key属性为了方便Vue实例跟踪每个节点的身份，从而重用和重新排列现有元素，需要为每项提供一个唯一的key属性。理想的key属性值是每项都有并且唯一的id。key的工作方式类似于一个属性，所以需要用v-bind来绑定动态值。
生命周期函数表
生命周期函数
含义
beforeCreate（创建前）
组件实例刚被创建，组件属性计算之前，比如data属性等
created（创建后）
组件实例刚创建完成，属性已经绑定，此时DOM还未完成，$el属性还不存在
beforeMount（载入前）
模板编译、挂载之前
mounted（载入后）
模板编译、挂载之后
beforeUpdate（更新前）
组件更新之前
updated（更新后）
组件更新之后
beforeDestroy（销毁前）
组件销毁前调用
destroyed（销毁后）
组件销毁后调用
单向数据流在Vue中通过props传递数据是单向的，也就是父组件数据会传递给子组件，但是反过来不成立。之所以这样设计，就是尽可能将父子组件解耦，避免子组件无意间修改父组件的状态。
业务中经常遇到两种需要改变pr ...
环境配置新建项目create-react-app redux-meme-generator
安装插件npm i -S redux react-redux redux-thunk react-bootstrap
文件结构运行项目npm run start，清空src下的文件，建立index.js，引入react和react-dom。并在src下新建component、actions、reducer文件夹。
src/index.js
1234567891011121314151617181920import React from 'react';import ReactDOM from 'react-dom';import App from './component/App';import {createStore, applyMiddleware} from 'redux';import rootReducer from './reducer';impor ...
React component lifecycle 生命周期React的生命周期是component在建立和渲染的过程，以component class出发，React会做以下的过程：
依照component被挂入DOM的过程分类，过程中会依序执行component的函数如下：
Mounting：component被建立实体（即react element）后，渲染到DOM的过程：
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
Updating：当component收到新的props时，更新状态（state），再重新渲染到DOM的过程：
static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
Unmounting：当component不被使用，从DOM移除的过程
componentWillUn ...
前端插件库DataTables官网：https://www.datatables.net/
DataTables是jQuery的JavaScript函数库，目的是强化表格操作（如搜索、排序），并自动加入组件引入表格中，使用非常灵活简便。
LazyLoad官网：Lazy Load延伸：Vanilla JavaScript Lazy Load Plugin
Lazy Load帮助高度较长的网页进行延迟载入图片，尚未浏览到该部分时，不会载入视角外的图片，提高效率。
lightSlider官网：JQuery lightSliderGithub：sachinchoolur/lightslider
JQuery lightSlider是一个轻量且响应式的跑马灯/幻灯片，附有缩图导览。另外还有相本功能、垂直跑马灯，应用层面广泛。
alertify.js官网：https://fabien-d.github.io/alertify.js/Github：alertify.js
alertify.js是为了美化通知信息而生的JavaScript框架。
pickadate.js ...
本文总结CSS3中两个用来做动画的属性，一个是transition，另一个是animation。
差异比较
CSS3
差异
transition
在给定的持续时间内平滑地更改属性值（从一个值到另一个值），也就是只需要指定开始与结束的参数，参数改变时就触发动画。
常用语鼠标事件（:hover、active、:focus、:click）或键盘输入时触发
需要事件触发，无法在网页加载时自动发生。一次性，不能重复发生，除非一再触发。
只能定义开始状态和结束状态，不能定义中间状态。
animation
可以自行写动画开始、进行间、结束时各阶段的变化，适合用来做较细微的动画表现。需要明确的指定关键帧（@keyframe）的参数。
网页加载时会直接执行，可以自行控制各阶段动画的变化
animation和transition最大的不同在于transition是当参数改变时触发，而animation则是直接就执行，所有动画效果需要明确的指定关键帧的参数。
CSS3
简写顺序
transition
[property名称][duration ...
基本选择器 Basics
*选择所有元素
.class选择class，如：$('.mybox')
element选择element，如：$('p')
#id选择id，如：$('#box')
selector1,selectorN可以同时选择多个元素，如：$('div, p.box, #phone')
层级选择器 Hierarchy
parent > child选择指定元素下的指定子元素，如：$('ul.tonav > li')
ancestor descendant选择一个元素里所有的后代元素，如：$('form input')
prev + next选择所有指定元素后紧跟着的元素，如：$('label + input')
prev ~ siblings选择与指定元素之后有相同父级的同级选择器，如：$('#prev ~ div')
基本过滤器 Basic Filters
:animated选择动画进行中的所有元素。如：$('div: ...
前端优化浏览器发送HTTP请求，服务器收到请求全文后，返回HTTP响应，在浏览器接收之后结束这个过程。浏览器和服务器只有一次互动的机会，浏览器主动发起，而服务器被动地根据收到的请求内容返回结果。一个完整的请求都需要经过DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据的过程。
前端优化的途径
页面级别的优化，例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等；
代码级别的优化，例如JavaScript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等。
页面级优化1. 减少HTTP请求数减少HTTP请求数的主要途径1、从设计实现层面简化页面
保持页面简洁、减少资源的使用是最直接的。能使用CSS替代效果就尽量少使用图片。
2、合理设置HTTP缓存
恰当地缓存设置可以大大减少HTTP请求。被缓存资源的请求服务器是304响应，只有Header没有body，没有节省带宽。对于多个页面都可能使用到的代码，尽量拆分到同一个文件中。如果是嵌入页面换来的是增大了页面的体积，而且无法利用浏览器缓存。
3、资源合并和压缩
如果可以，尽可能将外部的脚本、样式进行 ...
命名禁止缩写
精简扼要地对class命名，请勿使用自定义缩写。
class name的命名必须是行为、有语意的。
禁止在非特殊情况下写!important
CSS本身有权重设计，任意地使用!important会造成权重混乱而无法维护。
不可轻易限定宽高
用户可以自行设定自己的浏览器，例如Android手机可以设定显示字体大小，写死的高度会让字体相互重叠。
RWD失效
移动设备的高度是无限的，宽度是有限的。
请不要把宽写死。
img请让它自动缩放
请不要替img的容器设定宽或高，让它根据设备自行缩放。
请使用bootstrap的img-responsive。
如果确实要用： 12width: 100%;height: auto;
如果要给img border-radius设定样式，请使用父元素控制行为，保持img只载入图片，没有样式。
优先使用grid排版
请不要花很多时间在写media query，设定一堆breakpoint，自己写组件样式，自己控制每种设备上的容器宽度。
请使用grid system，这些都是已经成熟的框架，而且有些也已经帮你处理了浏览器相容问题。
...
