- 博客(89)
- 问答 (2)
- 收藏
- 关注
RSS订阅转载 ES7前端异步玩法：async/await理解
在最新的ES7（ES2017）中提出的前端异步特性：async、await。什么是async、await？async顾名思义是“异步”的意思，async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思，就是用于等待异步完成。并且await只能在async函数中使用通常async、await都是跟随Promise一起使用的。为什么这么说呢？因为async返回的都是一个P...
2019-06-15 22:01:08
246
转载 React中setState真的是异步的吗
在学习react的过程中几乎所有学习材料都会反复强调一点setState是异步的,来看一下react官网对于setState的说明。将setState()认为是一次请求而不是一次立即执行更新组件的命令。为了更为可观的性能，React可能会推迟它，稍后会一次性更新这些组件。React不会保证在setState之后，能够立刻拿到改变的结果。一个很经典的例子如下// state.cou...
2019-06-09 23:27:34
806
转载 其实我们可以少写点if else和switch
前言作为搬砖在第一线的底层工人，业务场景从来是没有做不到只有想不到的复杂。不过他强任他强，if-else全搞定，搬就完了。但是随着业务迭代或者项目交接，自己在看自己或者别人的if代码的时候，心情就不再表述了，各自深有体会。所以我们一起看看if还能怎么写最基本if-else假设有这么个场景,不同情况下打印不同值。 因为涉及到的条件太多，就不提三目运算之类优化了。if (a == ...
2019-01-13 21:23:15
203
原创 div里包含img底部多出3px的解决办法
如果将一个img放在div里面，你会发现在img下面无端端的就多出3px的空白出来。padding、margin、border都设为0，无效！那么怎么解决这个问题呢？如果将一个img放在div里面，你会发现在img下面无端端的就多出3px的空白出来。padding、margin、border都设为0，无效！那么怎么解决这个问题呢？这个Bug真是十分有意思，不过有N多种解决办法！1、设置...
2019-01-10 15:34:18
764
转载 高效的 MobX
前言由于最近开启一个新的个人小项目，准备还是使用 React 及其生态来实现整个技术架构，之前一直使用的是 React + React-Router + Redux 组合，虽然说使用 Redux 来管理整个应用的数据流有着优点，但是 Redux 的写法繁琐也确实让人诟病，当然这里并不是说 Redux 不好。基于项目本身并不大，决定寻找一个新的解决方案，而 MobX 在之前就有所耳闻（只是一直...
2019-01-09 22:59:34
816
原创 React组件之间通讯
父子之间通讯父子之间通讯又分为父->子，子->父。因为react单向数据流向的缘故，父->子通信的话直接通过props。父组件数据变动，直接传递给子组件。子->父组件之间就要通过回调函数来通信了，父组件传递一个回调函数给子组件，子组件通过调用此函数的方式通知父组件通信。跨级组件通信react为了实现祖先组件和后辈组件之间的通信问题，引入了contextA...
2019-01-02 21:24:23
234
原创 ES6 对数组的扩展
一、Array.of()函数函数作用：将一组值，转换成数组var arr=Array.of(1,2,3,4)console.log(arr) // [1,2,3,4]二、Array.from()函数1.可以将类似数组的对象或者可遍历的对象转换成真正的数组。比如：getElementsByTagName等let ele = document.getElementsByT...
2018-12-26 20:28:03
109
原创 combineReducers 进阶之不同 reducers 之间共享数据
如果 sliceReducerA 为了处理特殊的 action 正好需要来自 sliceReducerB 的部分 state 数据，或者 sliceReducerB 正好需要全部的 state 作为参数，单单就 combineReducers 是无法解决这种问题的。可以这样来解决：把所需数据当额外参数的形式传递给自定义函数，例如：function combinedReducer(state,...
2018-12-18 23:56:27
1167
原创 es6 Object的一些方法
Object.is()比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。不同之处只有两个：一是+0不等于-0，二是NaN等于自身。Object.assign()Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。注意...
2018-12-17 00:23:32
304
原创 Redux之可记忆的Selector
如果 state tree 非常大，或者计算量非常大，每次更新都重新计算可能会带来性能问题。Reselect 能帮你省去这些没必要的重新计算。我们需要一个可记忆的 selector 来替代这个 getVisibleTodos，只在 state.todos or state.visibilityFilter 变化时重新计算 todos，而在其它部分（非相关）变化时不做计算。Reselect ...
2018-12-16 18:35:56
2028
原创 JS的防抖与节流
在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。 函数防抖 函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之...
2018-12-15 17:49:58
108
原创 关于return function(){}常见的问题
1.我们知道当函数赋值时，会首先进行右边的程序，下方代码恰好是一个匿名函数自运行，在自运行函数中return 一个方法，外部用一个变量gg接收这个方法，这样我们可以直接调用这个方法var a = (function(){ return function(){ console.log(123); }})()a();2.当自运行函数中嵌套自运行函数时，那么return出来的...
2018-12-15 17:44:31
8676
原创 Redux基础
ActionAction 是把数据从应用（译者注：这里之所以不叫 view 是因为这些数据有可能是服务器响应，用户输入或其它非 view 的数据 ）传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。Action 本质上是 JavaScript 普通对象。我们约定，action 内必须使用一...
2018-12-12 17:01:08
97
原创 Redux三大原则
三大原则单一数据源整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。这让同构应用开发变得非常容易。来自服务端的 state 可以在无需编写更多代码的情况下被序列化并注入到客户端中。由于是单一的 state tree ，调试也变得非常容易。在开发中，你可以把应用的 state 保存在本地，从而加快开发速度...
2018-12-11 23:08:13
1464
原创 table组件的固定列和表头 优化
对于需要固定表头和表列的table，往往数据量都比较大。我们可以对现有的实现方式做更进一步的优化尝试。使用tranfrom来代替设置scrollLeft考虑浏览器重排和重绘，一般来说，scrollLeft会引起一次重排，而transfrom仅仅是一次重绘，同时我们可以使用transform3D使用GPU来加速浏览器的渲染。那么，是不是可以考虑在scroll事件中，使用transform来代...
2018-12-10 17:01:51
693
原创 table组件的固定列和表头 布局
固定列&表头对于表格信息来说，往往有些信息是重要的，需要一目了然的看清楚，而不是通过滚动才能看到用户需要的信息。将关键的表格列进行固定，而次要信息放置在可滚动查看的容器中，可以突出表格信息的重要性，同时，对于方便用户更好的在当前窗口进行交互，而不需要更多的操作。对于以上两种交互的优化，Ant Design - A UI Design Language给出了很好的示例。对于固...
2018-12-10 16:55:43
2032
原创 table组件的固定列和表头
最近写了个table组件，主要实现了固定列和表头具体参考了这篇文章：https://segmentfault.com/a/1190000012568782对table的优化讲得挺详细，后续我再自己总结一下。...
2018-12-10 15:39:34
558
原创 create-react-app中添加less支持
使用 create-react-app 脚手架创建项目后，默认是不支持 less 的。所以我们需要手动添加。第一步 暴露webpack配置文件使用 create-react-app 创建的项目，默认情况下是看不到 webpack 相关的配置文件，我们需要给它暴露出来，使用下面命令即可：npm run eject运行之后，我们发现多了一个config文件夹这样就可以修改 web...
2018-12-10 14:11:56
400
原创 Fixed定位下的水平居中
在写气泡弹出提示组件时用到了这个样式：适用于提示弹出框之类的position: fixed;left: 0;right: 0;margin: auto;
2018-12-08 15:58:37
3182
原创 React 性能优化
总结一下react性能优化相关知识：避免重复渲染：当一个组件的props或者state改变时，React通过比较新返回的元素和之前渲染的元素来决定是否有必要更新实际的DOM。当他们不相等时，React会更新DOM。在一些情况下，你的组件可以通过重写这个生命周期函数shouldComponentUpdate来提升速度， 它是在重新渲染过程开始前触发的。 这个函数默认返回true，可使Re...
2018-12-07 23:18:32
111
原创 ReactDOM
如果你用一个<script>标签导入React, 所有的顶阶的API都能在ReactDOM的全局范围内被调用。 如果你用的是 npm搭配ES6标准，你可以用import ReactDOM from 'react-dom'。如果是npm和ES5，你可以用var ReactDOM = require('react-dom')。render()ReactDOM.render( e...
2018-12-04 16:01:26
1017
原创 React 事件处理
React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:React事件绑定属性的命名采用驼峰式写法，而不是小写。 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)你必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, ...
2018-12-04 12:27:58
166
原创 CSS:文字溢出点点点效果
单行文字溢出点点点效果：只需要3行代码：.ell{ text-voerflow: ellipsis; white-space: nowrap; overflow: hidden;}对-webkit-私有前缀支持良好的浏览器还可以实现多行文字打点效果，但是无须依赖overflow:hidden。比方说，最多显示2行内容，再多就打点的核心CSS代码如下:....
2018-11-25 18:48:54
2399
1
原创 div高度自适应填充剩余部分
在开发过程中遇到这样一种情况：上面一个div固定高度，下面一个div高度自适应填充剩余部分。原本是通过JS计算得到下面div的高度，倒是考虑到代码优化的问题，还是想采用css来达到想要的效果。底部div的css代码如上图，具体效果如下：...
2018-11-23 20:15:33
440
原创 闭包
闭包是函数和声明该函数的词法环境的组合。词法作用域考虑如下情况：function init() { var name = "Mozilla"; // name 是一个被 init 创建的局部变量 function displayName() { // displayName() 是内部函数,一个闭包 alert(name); // 使用了父函数中声明的变量 ...
2018-03-06 22:19:33
1807
1
转载 VueJs探索之watch用法详解
Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。具体的用法可以直接看下面的示例，简单直接。 var vm = new Vue( { el: '#app', data: {
2017-10-11 23:06:23
242
原创 Python标准数据类型
Python 定义了一些标准类型，用于存储各种类型的数据。Python有五个标准的数据类型：Numbers（数字）:数字数据类型用于存储数值。他们是不可改变的数据类型，这意味着改变数字数据类型会分配一个新的对象。Python支持四种不同的数字类型：int（有符号整型）long（长整型[也可以代表八进制和十六进制]）fl
2017-08-26 13:36:14
402
转载 children和childNodes 的区别
1，childNodes 属性，标准的，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。有些人错误的使用()去取该集合元素，下表列出各浏览器对childNodes(i)的支持情况： IE6/7/8/Safari/Chrome/Op
2017-08-26 13:24:30
397
原创 Vue2.0配置vue-router
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue';import App from './App';import VueRo
2017-08-22 17:07:12
338
原创 响应式布局总结
第一：正确理解响应式布局响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本。打个比方来说：现在社会有很多响应产品，例如折叠沙发，折叠床等等，当我们需要把沙发放到一个角落的时候，此刻沙发就好比div吧，而角落里的某个地方就好比父元素，由于父元素空间的改变，我们不得不调整div,让它能够依然放在角落里。在项目中你会遇到不同的终端，由于终端分辨率不同，所以你要想让用户体
2017-08-15 21:59:30
451
原创 jQuery中ajax的4种常用请求方式
1.$.ajax()返回其创建的 XMLHttpRequest 对象。$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。实例：保存数据到服务器，成功时显示信息。 $.ajax({ type:
2017-08-15 18:25:20
225
原创 jQuery 事件委托
概念：什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。 举个列子：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员
2017-08-15 17:57:37
295
原创 JQuery动画效果
JQuery基本动画效果•show([speed,[easing],[fn]])：显示选择的元素•hide([speed,[easing],[fn]])：隐藏选择的元素•toggle([speed,[easing],[fn]])：切换选择的元素•参数：speed：可以选择给定的三种预定值："slow","normal",or "fast" 表示动
2017-06-07 22:26:15
452
原创 JQuery属性样式
入口函数定义三种格式•第一种：$(function(){});•第二种：$(document).ready(function(){});•第三种：jQuery(function(){});jquery入口函数和js入口函数区别•js入口函数只能有一个，多个会互相覆盖•jquery入口函数只要加载完文档结构就执行jquery常用的核心元素•JQuery（HTM
2017-06-07 21:28:49
279
原创 JavaScript基础小结
1、作用域分析1. 全局作用域 注意：循环结构和判断结构等都不会独立一块作用域 如何判断所属作用域范围：就看这个结构是在全局所定义还是在函数中定义2. 函数作用域3. catch作用域：注意体现catch块独立作用域2、函数嵌套使用注意点分析1. 说明：function用法（用于函数声明调用、用于构
2017-06-07 20:54:04
217
原创 CSS3之响应式布局
CSS3多媒体查询@media not|only mediatype and (expressions) { CSS 代码...;}如果指定的多媒体类型匹配设备类型则查询结果返回true，文档会在匹配的设备上显示指定样式效果。在不同媒体上加载不同的CSS样式文件：CSS3多媒体查询--not 与only •not:not是用来排
2017-05-08 11:20:22
375
原创 CSS3变换与动画
CSS3 2D 转换方法CSS3 3D 转换需要设置其3D模式，表示所有子元素在3D环境设置景深，调节显示时的模糊度及大小等一、transform-style: preserve-3d声明是必须的，该声明应用在3D变换的兄弟元素们的父元素上，也就是舞台元素或者容器元素。二、3D视角---透视perspective属性，一般作用在舞台元素
2017-05-07 19:43:32
282
原创 CSS3基础简介
CSS3简介•CSS3完全向下兼容。•增加了许多新的模块。–选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、响应式布局•W3C中CSS3规范仍在开发。但现代浏览器已经开始支持。•部分新属性需要添加浏览器前缀。CSS3边框属性•box-shadow–实现边框阴影；属性值包括：•模糊度 X轴偏移 Y轴偏移 阴影颜色•bord
2017-05-06 01:37:58
463
原创 Canvas之绘制图片与裁剪图片
绘制图片•绘制方法–drawImage(Imageimg,float x,floaty) •将图片按照原图大小绘制到坐标处–drawImage(Imageimg,float x,float y,float w,floath) •将图片按照w、h大小绘制到坐标处–drawImage(Imageimg,float sx,float sy,float sw,float s
2017-05-02 22:01:03
1243
原创 Canvas颜色渐变效果
canvas渐变对象•canvas提供了两个对象来创建渐变，渐变可以填充在矩形、文本、线条等。•createLinearGradient(x,y,x1,y1)：创建线性渐变•createRadialGradient(x,y,r,x1,y1,r1)：创建径向/圆渐变渐变方法•addColorStop(floatx,”color”)方法:指定颜色停止。必须使用两种或以上
2017-05-02 18:31:35
2232
空空如也
数据库出问题了，不会弄了，求大神帮帮忙，下午就要交作业了
2016-01-12
TA创建的收藏夹 TA关注的收藏夹
TA关注的人