![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端开发
Colin_me
我为何要退却,未曾努力,还奢望得到什么?
展开
-
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 · 250 阅读 · 0 评论 -
JS的防抖与节流
在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。 函数防抖 函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之...原创 2018-12-15 17:49:58 · 116 阅读 · 0 评论 -
关于return function(){}常见的问题
1.我们知道当函数赋值时,会首先进行右边的程序,下方代码恰好是一个匿名函数自运行,在自运行函数中return 一个方法,外部用一个变量gg接收这个方法,这样我们可以直接调用这个方法var a = (function(){ return function(){ console.log(123); }})()a();2.当自运行函数中嵌套自运行函数时,那么return出来的...原创 2018-12-15 17:44:31 · 8711 阅读 · 0 评论 -
Redux基础
ActionAction 是把数据从应用(译者注:这里之所以不叫 view 是因为这些数据有可能是服务器响应,用户输入或其它非 view 的数据 )传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。Action 本质上是 JavaScript 普通对象。我们约定,action 内必须使用一...原创 2018-12-12 17:01:08 · 103 阅读 · 0 评论 -
Fixed定位下的水平居中
在写气泡弹出提示组件时用到了这个样式:适用于提示弹出框之类的position: fixed;left: 0;right: 0;margin: auto;原创 2018-12-08 15:58:37 · 3191 阅读 · 0 评论 -
React 性能优化
总结一下react性能优化相关知识:避免重复渲染:当一个组件的props或者state改变时,React通过比较新返回的元素和之前渲染的元素来决定是否有必要更新实际的DOM。当他们不相等时,React会更新DOM。在一些情况下,你的组件可以通过重写这个生命周期函数shouldComponentUpdate来提升速度, 它是在重新渲染过程开始前触发的。 这个函数默认返回true,可使Re...原创 2018-12-07 23:18:32 · 116 阅读 · 0 评论 -
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 · 1023 阅读 · 0 评论 -
React 事件处理
React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:React事件绑定属性的命名采用驼峰式写法,而不是小写。 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)你必须谨慎对待 JSX 回调函数中的 this,类的方法默认是不会绑定this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, ...原创 2018-12-04 12:27:58 · 169 阅读 · 0 评论 -
CSS:文字溢出点点点效果
单行文字溢出点点点效果:只需要3行代码:.ell{ text-voerflow: ellipsis; white-space: nowrap; overflow: hidden;}对-webkit-私有前缀支持良好的浏览器还可以实现多行文字打点效果,但是无须依赖overflow:hidden。比方说,最多显示2行内容,再多就打点的核心CSS代码如下:....原创 2018-11-25 18:48:54 · 2411 阅读 · 1 评论 -
div高度自适应填充剩余部分
在开发过程中遇到这样一种情况:上面一个div固定高度,下面一个div高度自适应填充剩余部分。原本是通过JS计算得到下面div的高度,倒是考虑到代码优化的问题,还是想采用css来达到想要的效果。底部div的css代码如上图,具体效果如下:...原创 2018-11-23 20:15:33 · 451 阅读 · 0 评论 -
create-react-app中添加less支持
使用 create-react-app 脚手架创建项目后,默认是不支持 less 的。所以我们需要手动添加。第一步 暴露webpack配置文件使用 create-react-app 创建的项目,默认情况下是看不到 webpack 相关的配置文件,我们需要给它暴露出来,使用下面命令即可:npm run eject运行之后,我们发现多了一个config文件夹这样就可以修改 web...原创 2018-12-10 14:11:56 · 412 阅读 · 0 评论 -
table组件的固定列和表头
最近写了个table组件,主要实现了固定列和表头具体参考了这篇文章:https://segmentfault.com/a/1190000012568782对table的优化讲得挺详细,后续我再自己总结一下。...原创 2018-12-10 15:39:34 · 569 阅读 · 0 评论 -
React中setState真的是异步的吗
在学习react的过程中几乎所有学习材料都会反复强调一点setState是异步的,来看一下react官网对于setState的说明。将setState()认为是一次请求而不是一次立即执行更新组件的命令。为了更为可观的性能,React可能会推迟它,稍后会一次性更新这些组件。React不会保证在setState之后,能够立刻拿到改变的结果。一个很经典的例子如下// state.cou...转载 2019-06-09 23:27:34 · 812 阅读 · 0 评论 -
其实我们可以少写点if else和switch
前言作为搬砖在第一线的底层工人,业务场景从来是没有做不到只有想不到的复杂。不过他强任他强,if-else全搞定,搬就完了。但是随着业务迭代或者项目交接,自己在看自己或者别人的if代码的时候,心情就不再表述了,各自深有体会。所以我们一起看看if还能怎么写最基本if-else假设有这么个场景,不同情况下打印不同值。 因为涉及到的条件太多,就不提三目运算之类优化了。if (a == ...转载 2019-01-13 21:23:15 · 207 阅读 · 0 评论 -
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 · 777 阅读 · 0 评论 -
combineReducers 进阶之不同 reducers 之间共享数据
如果 sliceReducerA 为了处理特殊的 action 正好需要来自 sliceReducerB 的部分 state 数据,或者 sliceReducerB 正好需要全部的 state 作为参数,单单就 combineReducers 是无法解决这种问题的。可以这样来解决:把所需数据当额外参数的形式传递给自定义函数,例如:function combinedReducer(state,...原创 2018-12-18 23:56:27 · 1179 阅读 · 0 评论 -
Redux三大原则
三大原则单一数据源整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。这让同构应用开发变得非常容易。来自服务端的 state 可以在无需编写更多代码的情况下被序列化并注入到客户端中。由于是单一的 state tree ,调试也变得非常容易。在开发中,你可以把应用的 state 保存在本地,从而加快开发速度...原创 2018-12-11 23:08:13 · 1484 阅读 · 0 评论 -
es6 Object的一些方法
Object.is()比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。不同之处只有两个:一是+0不等于-0,二是NaN等于自身。Object.assign()Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。注意...原创 2018-12-17 00:23:32 · 310 阅读 · 0 评论 -
Redux之可记忆的Selector
如果 state tree 非常大,或者计算量非常大,每次更新都重新计算可能会带来性能问题。Reselect 能帮你省去这些没必要的重新计算。我们需要一个可记忆的 selector 来替代这个 getVisibleTodos,只在 state.todos or state.visibilityFilter 变化时重新计算 todos,而在其它部分(非相关)变化时不做计算。Reselect ...原创 2018-12-16 18:35:56 · 2049 阅读 · 0 评论 -
table组件的固定列和表头 优化
对于需要固定表头和表列的table,往往数据量都比较大。我们可以对现有的实现方式做更进一步的优化尝试。使用tranfrom来代替设置scrollLeft考虑浏览器重排和重绘,一般来说,scrollLeft会引起一次重排,而transfrom仅仅是一次重绘,同时我们可以使用transform3D使用GPU来加速浏览器的渲染。那么,是不是可以考虑在scroll事件中,使用transform来代...原创 2018-12-10 17:01:51 · 707 阅读 · 0 评论 -
table组件的固定列和表头 布局
固定列&表头对于表格信息来说,往往有些信息是重要的,需要一目了然的看清楚,而不是通过滚动才能看到用户需要的信息。将关键的表格列进行固定,而次要信息放置在可滚动查看的容器中,可以突出表格信息的重要性,同时,对于方便用户更好的在当前窗口进行交互,而不需要更多的操作。对于以上两种交互的优化,Ant Design - A UI Design Language给出了很好的示例。对于固...原创 2018-12-10 16:55:43 · 2103 阅读 · 0 评论 -
闭包
闭包是函数和声明该函数的词法环境的组合。词法作用域考虑如下情况:function init() { var name = "Mozilla"; // name 是一个被 init 创建的局部变量 function displayName() { // displayName() 是内部函数,一个闭包 alert(name); // 使用了父函数中声明的变量 ...原创 2018-03-06 22:19:33 · 1824 阅读 · 1 评论 -
children和childNodes 的区别
1,childNodes 属性,标准的,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本。可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属性节点,3是文本节点。有些人错误的使用()去取该集合元素,下表列出各浏览器对childNodes(i)的支持情况: IE6/7/8/Safari/Chrome/Op转载 2017-08-26 13:24:30 · 411 阅读 · 0 评论 -
Tab选项卡点击 滑动效果js实现
html部分代码: 公告 规则 论坛 安全 公益 张勇:玩快乐足球 张勇:玩快乐足球 张勇:玩快乐足球 张勇:玩快乐足球 [通知]张勇:要玩快乐足球 [通知]张勇:要玩快乐足球 [通知]张勇:要玩快乐足球 [通知原创 2017-04-20 16:05:21 · 6982 阅读 · 0 评论 -
Canvas颜色渐变效果
canvas渐变对象•canvas提供了两个对象来创建渐变,渐变可以填充在矩形、文本、线条等。•createLinearGradient(x,y,x1,y1):创建线性渐变•createRadialGradient(x,y,r,x1,y1,r1):创建径向/圆渐变渐变方法•addColorStop(floatx,”color”)方法:指定颜色停止。必须使用两种或以上原创 2017-05-02 18:31:35 · 2245 阅读 · 0 评论 -
Canvas基础
canvas对象•如何使用canvas画图–①获取元素对应的DOM对象,这是一个canvas对象–②调用canvas对象的getContext()方法,参数为”2d”,该方法返回一个CanvasRenderingContext2D对象(画布二维渲染环境),该对象即可绘制图形。③调用CanvasRenderingContext2D对象的方法绘图简单图形方法原创 2017-05-02 01:00:56 · 269 阅读 · 0 评论 -
BOM初步接触
BOM定义•全称:browser object model(浏览器对象模型)•BOM提供了独立于内容而与浏览器窗口进行交互的接口•由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window•window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的BOM方法属性说明法属性说明BOMwindow对象常用方法说明•alert()、confir原创 2017-04-15 12:00:45 · 224 阅读 · 0 评论 -
JavaScript之onscroll事件
onscroll事件•是页面滚动条滚动事件,当页面滚动条滚动时候,自动触发•如果页面没有滚动条或者没有发生滚动操作,则不会执行onscroll事件•从属于window对象,事件应绑定到window对象上scrollTop和scrollLeft•当页面内容区域超出了浏览器展示范围,页面会出现滚动条•scrollTop指的是向上滚动头部高度•scrollLeft指的是向原创 2017-04-15 11:56:13 · 6700 阅读 · 0 评论 -
javascript之onresize事件
onresize事件•onresize 事件会在窗口或框架被调整大小时发生•window对象支持onresize事件,同时常规标签也都支持(div、textarea、table等)•获取窗口的宽高值兼容写法如下•宽度:document.body.clientWidth ||document.documentElement.clientWidth•高度:document.bo原创 2017-04-19 00:02:52 · 1983 阅读 · 0 评论 -
Javascript——DOM初步接触
DOM定义•全称:document object model(文档对象模型)•是W3C组织推荐的处理可扩展标志语言的标准编程接口•document:指的是可扩展的标记语言:HTML、XML•object:DOM实际上是以基于对象方式对当前文档进行操作的•model:在网页上,组织页面(或文档)的对象被组织在一个树形结构中,这个就是文档模型DOM-对象转换方式原创 2017-04-13 17:21:15 · 265 阅读 · 0 评论 -
Javascript——DOM模型解析
DOM中model部分 •文档结构理解为一个倒树模型•文档中每一个内容都是树中的一个节点(内容包括:元素、内容、属性、注释)DOM中节点遍历 •父节点(单数):parentNode•子节点(复数):childNodes、firstChild、lastChild•兄弟节点:nextSibling(下一个节点)、previousSibling(上一个节点)文档原创 2017-04-13 17:17:45 · 413 阅读 · 0 评论 -
清除浮动+字体+行高
盒子模型明白盒子的区域划分:margin区域、padding区域、border区域、content内容边框、margin、padding注意:marin和padding适用区别:如果是父级元素和子级元素设置边距:用padding 如果是兄弟元素则用margin塌陷现象:margintop和marginbottom宽度值,取得是较大值 Ma原创 2017-03-24 15:23:25 · 647 阅读 · 0 评论 -
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 · 1264 阅读 · 0 评论 -
HTML5之文档结构标签
1.文档结构标签1.1为什么引入文档结构标签?让标签更具语义化,结构更加清晰。搜索引擎具有更好的支持1.2文档结构标签header:头部。网页结构的头部,文章的头部内容,可包含标题等。nav:导航。头部,底部以及侧边栏。section:对网页的内容进行分块。里面可以包含:①article:表示这一个分块包含了多篇文章。②section:包含子分块。article:表原创 2017-04-21 00:33:52 · 1622 阅读 · 0 评论 -
响应式布局总结
第一:正确理解响应式布局响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本。打个比方来说:现在社会有很多响应产品,例如折叠沙发,折叠床等等,当我们需要把沙发放到一个角落的时候,此刻沙发就好比div吧,而角落里的某个地方就好比父元素,由于父元素空间的改变,我们不得不调整div,让它能够依然放在角落里。在项目中你会遇到不同的终端,由于终端分辨率不同,所以你要想让用户体原创 2017-08-15 21:59:30 · 456 阅读 · 0 评论 -
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 · 351 阅读 · 0 评论 -
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 · 492 阅读 · 0 评论 -
JQuery属性样式
入口函数定义三种格式•第一种:$(function(){});•第二种:$(document).ready(function(){});•第三种:jQuery(function(){});jquery入口函数和js入口函数区别•js入口函数只能有一个,多个会互相覆盖•jquery入口函数只要加载完文档结构就执行jquery常用的核心元素•JQuery(HTM原创 2017-06-07 21:28:49 · 286 阅读 · 0 评论 -
JavaScript基础小结
1、作用域分析1. 全局作用域 注意:循环结构和判断结构等都不会独立一块作用域 如何判断所属作用域范围:就看这个结构是在全局所定义还是在函数中定义2. 函数作用域3. catch作用域:注意体现catch块独立作用域2、函数嵌套使用注意点分析1. 说明:function用法(用于函数声明调用、用于构原创 2017-06-07 20:54:04 · 222 阅读 · 0 评论 -
CSS3之响应式布局
CSS3多媒体查询@media not|only mediatype and (expressions) { CSS 代码...;}如果指定的多媒体类型匹配设备类型则查询结果返回true,文档会在匹配的设备上显示指定样式效果。在不同媒体上加载不同的CSS样式文件:CSS3多媒体查询--not 与only •not:not是用来排原创 2017-05-08 11:20:22 · 383 阅读 · 0 评论