2018年11月_qdmoment

原创页面加载进度条实现——readyState和onreadystatechange

document.readyState 属性返回当前文档的状态（载入中……）。共有四种取值：1，uninitialized - 还未开始载入 uninitialized 英 [ʌnɪ'nɪʃlaɪzd] 未初始化2，loading - 载入中3，interactive - 已加载，文档与用户可以开始交互 interactive 英 [ˌɪntərˈæktɪv] adj....

2018-11-16 12:10:19 1437

原创移动端rem适配代码

rem字体设置是根据font-size相对设置：<script type="text/javascript"> function rems(){ // 获取屏幕宽度(此处是一个兼容的写法) var htmlWidth=document.documentElement.clientWidth||document.body.clientWid...

2018-11-15 14:20:51 318 1

原创 redux中间件种类和各自的作用

redux-thunk 中间件改造store.dispatch,解决异步操作异步操作的第一种解决方案就是，写出一个返回函数的 Action Creator，然后使用redux-thunk中间件改造store.dispatchredux-promise 中间件使得store.dispatch方法可以接受 Promise 对象作为参数redux-logger中间件日志中间件...

2018-11-15 12:22:05 1481 1

原创用es6中map简化复杂条件判断

复杂逻辑判断时需要写很多if/else，代码可读性较差，可以用es6新增的Map来简化代码列举六种实例，逐步简化/** * 按钮点击事件 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消 */const onButtonClick = (status) => { if (stat...

2018-11-14 18:03:02 5107 2

原创 redux的combineReducers简单实现

combineReducers简单封装const combineReducers = reducers => { return (state = {}, action) => { return Object.keys(reducers).reduce( (nextState, key) => { nextState[key] = re...

2018-11-14 12:03:09 649

原创 applyMiddleware原理和middleware中间件原理及应用场景

首先看下redux执行流程：redux设计思想：（1）Reducer：纯函数，只承担计算 State 的功能，不合适承担其他功能，也承担不了，因为理论上，纯函数不能进行读写操作。（2）View：与 State 一一对应，可以看作 State 的视觉层，也不合适承担其他功能。（3）Action：存放数据的对象，即消息的载体，只能被别人操作，自己不能进行任何操作。想来想去...

2018-11-13 13:43:24 3241

原创 redux原理——ruduce函数和compose函数

reduce()合并函数核心：每次的返回值是一个函数，再用该函数去执行下一个数组元素（数组元素先执行传入参数返回）讲redux之前首先要理解一个函数-----reduce()语法array.reduce(function(total, currentValue, currentIndex, arr), initialValue)参数说明：一、function(total,curr...

2018-11-12 18:53:58 731

原创 HTML5中history对象解析及前端路由实现封装流程

HTML5 history新增了两个API:history.pushState和history.replaceState两个Api都接收三个参数：语法：window.history.pushState(state Object, title, URL);window.history.replaceState(state Object, title, URL); ...

2018-11-09 18:25:58 515

原创 Element.scrollIntoView()

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内语法：element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean型参数 element.scrollIntoView(scrollI...

2018-11-08 10:00:53 831

原创 HTML5全屏，页面可见性，访问摄像头和麦克风，检测电池，预加载网页功能

1，全屏// 找到适合浏览器的全屏方法 function launchFullScreen(element) { if(element.requestFullScreen) { element.requestFullScreen(); } else if(element.mozRequestFullScreen) { element.mozRequ...

2018-11-07 16:31:28 1180

原创 js更新dom后页面及时渲染问题（js线程阻塞和解决办法）

参考：https://blog.csdn.net/qq_39542027/article/details/78893873两个概念：1，js是同步加载的 2，浏览器执行js程序，高于页面渲染于是就出现了js更新dom，页面不能及时渲染的问题代码例子：document.body.html('为什么不先渲染我');//程序$.ajax({...

2018-11-02 16:28:12 11492 1

前端361