2018年06月_chiuwingyan

原创 Hot-Module-Replacement详细配置说明

前言在react工程中要实现热加载，就是只更新局部的修改，我们可以使用react-hot-loader。安装依赖npm install --save-dev react-hot-loader修改.babelrc配置文件 { plugins: ["react-hot-loader/babel"] }开启webpack-dev-server的HMR因为react-hot-loa...

2018-06-30 14:40:30 6411

原创 webpack加入 babel-plugin-transform-runtime 和 babel-polyfill

先来说说babel-plugin-transform-runtime在转换 ES2015 语法为 ECMAScript 5 的语法时，babel 会需要一些辅助函数，例如 _extend。babel 默认会将这些辅助函数内联到每一个 js 文件里，这样文件多的时候，项目就会很大。所以 babel 提供了 transform-runtime 来将这些辅助函数“搬”到一个单独的模块 babel-run...

2018-06-22 18:00:19 14111

原创 bundle-loader实现按需加载

前言如果我们不进行按需加载，把所有js加载到一个文件里面，会造成首屏加载慢的问题，毕竟把当前页面不需要的js也加载进来，因此我们要进行按需加载操作。在react-router4之前，按需加载使用的是require.ensure的方法，异步加载组件。在react-router4，官方推荐使用webpack的bundle-loader进行按需加载。bundle-loader原理npm i --sav...

2018-06-14 19:08:45 5524

原创 webpack的css loader

前言webpack里面，其实只能识别js，如果要对css进行处理，我们要安装一些loader。css-loader当然，如果你想用sass、less之类的，安装对应的scss-loader即可，我这里使用的是css-loader。如果想要把css文件作为<style>的内容插入到模板文件当中，首先要安装css-loader，可以让js加载css，通过import即可把css引入进来。如...

2018-06-14 14:32:10 772

原创 redux的使用

前言想要在react里面使用状态管理，redux就是最好的选择。更加详细的介绍：http://cn.redux.js.org/docs/basics/Reducers.htmlActionAction 本质上是 JavaScript 普通对象。我们约定，action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下，type 会被定义成字符串常量。当应用规模越来越大时，建...

2018-06-13 19:00:24 1968

原创 webpack代码分离ensure（同步加载及异步）

前言首先，webpack里的引入是使用require，导出是使用module.exports，也就是common.js规范。例如：const path = require('path');module.exports = { /*入口*/ entry: [ 'react-hot-loader/patch', path.join(__dirna...

2018-06-12 17:35:53 1704

原创浏览器判断规则

var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsUc = sUserAgent.m...

2018-06-12 11:29:52 185

原创输入框里面的值通过正则匹配改变导致的光标问题(坑！！)

前言需求是这样的，输入加油卡号，每隔输入4位自动加上一个横杠，如图：这个光标问题是个坑，，加班到10点还没解决好。。。解决方法首先，这里我使用的方法是监听输入，使用正则匹配。 <p className="addcard_tip">卡号：</p> <input type="tel" id="cardNum" value={this.state.cardid} clas...

2018-06-11 18:24:02 1024 2

原创 JS 小数自动取两位，不足自动补全

function changeTwoDecimal_f(x) { var f_x = parseFloat(x); if (isNaN(f_x)) { alert('function:changeTwoDecimal->parameter error'); ...

2018-06-05 15:52:06 2310

原创 async/await

前言之前，可以利用promise来解决地狱回调的问题，但是，如果回调的嵌套层数过多的话，会造成then链过长，这也不是我们想要的。于是，es6中出现Generator函数，然而，async/await是对Generator函数的再进一步优化。async/await是什么顾名思义，async表示的是异步。而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明...

2018-06-03 18:13:06 211

原创 Generator异步化同步

前言Generator这个异步化同步的说法我真的理解了很久，结合js的事件队列来联想，我一直想不懂。。JS的运行规则首先，我们先简单回顾一下JS的运行规则：JS是单线程的，只有一个主线程函数内的代码从上到下顺序执行，遇到被调用的函数先进入被调用函数执行，待完成后继续执行遇到异步事件，浏览器另开一个线程，主线程继续执行，待结果返回后，执行回调函数。那么，Generator函数是如何进行异步化为同步操...

2018-06-02 19:07:51 1125

chiuwingyan的博客