![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端技术
文章平均质量分 65
Gavin13140
这个作者很懒,什么都没留下…
展开
-
写 React / Vue 项目时,数据列表中的key,用数组下标还是唯一值id或不写呢?
React与Vue原理一致,以Vue为列进行介绍key不写与key使用数组下标的区别key不写与使用数组下标作用一致。都是采默认使用“就地更新”的侧脸。当 Vue 正在更新使用 v-for 渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。这个默认的模式是高效...原创 2019-10-28 10:00:58 · 1270 阅读 · 0 评论 -
immutable.js
ReactJs 性能React.js是一个UI = f(states)的框架,为了解决更新的问题,React.js使用了virtual dom,virtual dom通过diff修改dom,来实现高效的dom更新。对于react的来说,如果父组建有多个子组建。当父组建render。下面的子组建都得跟着render。可是很多子组建里面是冤枉的啊!!很多子组建的props 和 state 然而并没有改变原创 2016-08-07 20:03:14 · 1377 阅读 · 6 评论 -
vue.js学习笔记(相关概念)
介绍vue.js 是用来构建web应用接口的一个库技术上,Vue.js 重点集中在MVVM模式的ViewModel层,它连接视图和数据绑定模型通过两种方式。实际的DOM操作和输出格式被抽象的方式到指令(Directives)和过滤器(Filters)在哲学领域内,尽量让MVVM数据绑定API尽可能简单。模块化和可组合性也是重要的设计考虑。vue不是一个全面的框架,它被设计成简单的和灵活的。你可以用它原创 2016-09-05 17:35:54 · 1258 阅读 · 0 评论 -
代码规范-注释
代码规范-注释引言-《代码大全》对于投机取巧的代码注释是错误的,注释不应该帮扶难度大的代码,就像kernighan和plauger强调的:”不要注释糟糕的代码—-应重写之。”很多人支持优质的代码应该是自解释的在程序员的圈子中,有很多非常优秀的程序员都是不太愿意写注释的,他们往往会认为优质的代码应该是自解释的。在习惯性的不写注释时,他们会更用心地写好变量名,函数名,代码质量会进一步提高。很多人支持代码原创 2016-08-07 18:19:27 · 1411 阅读 · 0 评论 -
promise应用示例讲解
Q:红灯三秒亮一次,绿灯一秒亮一次,黄灯2秒亮一次;如何让三个灯不断交替重复亮灯?(用Promse实现)三个亮灯函数已经存在:functionred(){ console.log('red');}functiongreen(){ console.log('green');}functionyellow(原创 2016-05-22 13:13:15 · 1688 阅读 · 0 评论 -
前端性能优化小知识点(javascript)
避免全局查找在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些。 function search() { //当我要使用当前页面地址和主机域名 alert(window.location.href + window.location.host); }原创 2016-05-19 21:58:14 · 1703 阅读 · 0 评论 -
不容错过的 10 篇前端技术热文
本文精选了 前端大全 2016年5月的10篇热门文章。其中有职场分享、技术分享和技术资源。原文地址:http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651550902&idx=1&sn=05588deaac90b8b2ab73e19ecb2c8303&scene=0#wechat_redirect《转载 2016-06-01 23:01:50 · 727 阅读 · 1 评论 -
setTimeout 的黑魔法
setTimeout 的黑魔法setTimeout,前端工程师必定会打交道的一个函数.它看上去非常的简单,朴实.有着一个很不平凡的名字–定时器.让年少的我天真的以为自己可以操纵未来.却不知朴实之中隐含着惊天大密.我还记得我第一次用这个函数的时候,我天真的以为它就是js实现多线程的工具.当时用它实现了一个坦克大战的小游戏,玩儿不亦乐乎.可是随着在前端这条路上越走越远,对它理解原创 2016-05-07 20:30:16 · 1065 阅读 · 0 评论 -
git操作详解
本地分支解析git 通过可变指针来实现对提交数据的历史版本的控制,每当我们提交新的更新,当前分支(设为master)则指向最后一个提交更新A,而最后一个提交对象则存在一个指针指向前一次的提交更新Q。如果我们创建一个新的分支,child,它和master共同指向A,这时,如果我们向child分支提交更新B,我们会发现child指向B,而master依然指向A。无论我们在child原创 2016-04-24 18:02:02 · 1178 阅读 · 0 评论 -
理解CSS弹性盒模型flex
前面的话 CSS3引入了一种新的布局模型——flex布局。flex是flexible box的缩写,一般称之为弹性盒模型。和CSS3其他属性不一样,flexbox并不是一个属性,而是一个模块,包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局,以适应各种类型的显示设备和各种尺寸的屏幕 版本更迭 flexbox布局的语法规范经过几年发生原创 2016-04-22 09:35:11 · 537 阅读 · 0 评论 -
4类 JavaScript 内存泄漏及如何避免
本文将探索常见的客户端 JavaScript 内存泄漏,以及如何使用 Chrome 开发工具发现问题。简介内存泄漏是每个开发者最终都要面对的问题,它是许多问题的根源:反应迟缓,崩溃,高延迟,以及其他应用问题。什么是内存泄漏?本质上,内存泄漏可以定义为:应用程序不再需要占用内存的时候,由于某些原因,内存没有被操作系统或可用内存池回收。编程语言管理内存的方式各不相同。只转载 2016-05-28 14:14:36 · 2096 阅读 · 0 评论 -
前端如何做好数据容错
###前端如何做好数据保护1:if形式 if( obj && obj.a && obj.a.b && obj.a.b.c) 存在的问题,如果对象的层数过多,容易忽略并不易保护,甚至有可能出现如下图情况:某层数据为空时 后端数据结构会由obj =》 array。让人防不胜防:如下图2: try catch 形式 a)如需对obj.a.b.c.d做保护原创 2016-03-22 19:22:38 · 2769 阅读 · 1 评论 -
无线性能优化
###背景 源至首图不能是懒加载以及不再走首屏数据的思考。 一:首屏优化:###怎么获取首屏时间呢?A:加载完静态资源后通过ajax请求去后台获取数据,数据回来后渲染内容在每个点打上一个时间戳,首屏时间 = 点8–点1;B:使用后台直出,返回的html已经带上内容了 此时首屏时间 = 点4 – 点1。 如何优化A中各个节点的加载时原创 2016-03-20 19:58:53 · 909 阅读 · 0 评论 -
ReactJS性能优化(上)
shouldComponentUpdate?详情先参考InfoQ上什么时候要在React组件中写shouldComponentUpdate? React已经替我们实现了一个shouldComponentUpdate,原理其实非常简单,组件在决定重新渲染(虚拟dom比对完毕生成最终的dom后)之前会调用该函数,该函数将是否重新渲染的权限交给了开发者,该函数默认直接返回true,表示默认直原创 2016-12-07 23:10:11 · 1544 阅读 · 0 评论 -
Reactjs性能优化(下)
React 实现pure render的时候,bind(this)导致re-render?先上代码:export default class extends Component {...render() {const {name,age} =this.state;return ( //bug 所在 )}...}发现一个问题,对于Person这个原创 2016-12-08 20:53:11 · 743 阅读 · 0 评论 -
前端中的 IoC 理念及应用
前端中的 IoC 理念什么是 IoCJava Spring框架中IoC(Inversion of Control,可翻译为为「控制反转」),DI(Dependency Injection,依赖注入,简称DI)是他的核心思想,angular中DI(依赖注入)也是其核心概念之一。IoC 是面向对象编程中的一种设计原则,可以用来减低计算机代码之间的耦合度。其中最常见的实现方式叫做依赖注入,通过控制...原创 2019-02-15 11:36:12 · 479 阅读 · 0 评论 -
WebAssembly入门,未来可期
先来几个名词解释器一行行地边解释边执行编译器是把源代码整个编译成目标代码,执行时不再需要编译器,直接在支持目标代码的平台上运行。解释器的利弊解释器启动和执行的更快。你不需要等待整个编译过程完成就可以运行你的代码。从第一行开始翻译,就可以依次继续执行了。 正是因为这个原因,解释器看起来更加适合 JavaScript。对于一个 Web 开发人员来讲,...原创 2018-09-14 12:17:00 · 3221 阅读 · 0 评论 -
用Flow提升前端代码健壮性
看一段常见代码://例1function foo(x) { return x + 10}foo('Hello!')//例2function main(params){ //fn1函数获取了一个数据 var object = fn1(params) //fn2根据获数据,产生一个结果 var result = fn2(object) retur...原创 2018-04-27 10:58:26 · 6560 阅读 · 1 评论 -
Parcel打包探讨
Parcel探讨卖点:1.极速打包时间Parcel 使用 worker 进程去启用多核编译。同时有文件系统缓存,即使在重启构建后也能快速再编译。2.打包所有的资源Parcel 具备开箱即用的对 JS, CSS, HTML, 文件 及更多的支持,而且不需要插件。3.自动转换在需要时,代码使用 Babel,原创 2018-01-26 15:24:52 · 2555 阅读 · 0 评论 -
Mongoose配合Node.js操作MongoDB的基础教程
安装mongoose使用express准备一个TestMongoDB项目,命令序列如下:express TestMongoDBcd TestMongoDBnpm install执行完上面的命令后,使用下面的命令安装mongoose:npm install mongoose --save这个命令会安装mongoose并将其作为项目的依赖,而mongoose依赖的MongoDB driver以及re原创 2017-08-29 19:42:27 · 411 阅读 · 0 评论 -
VueJs与ReactJS&AngularJS的差异对比
React && VueReact 和 Vue 有许多相似之处,它们都有:使用 Virtual DOM提供了响应式(Reactive)和组件化(Composable)的视图组件。将注意力集中保持在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库。 由于有着众多的相似处,我们会用更多的时间在这一块进行比较。这里我们不只保证技术内容的准确性,同时也兼顾了平衡的考量。我们需要指出 Reac原创 2017-06-21 20:11:25 · 6018 阅读 · 0 评论 -
TypeScript语法 中级篇
泛型下面来创建第一个使用泛型的例子:identity函数。 这个函数会返回任何传入它的值。 不用泛型的话,这个函数可能是下面这样:function identity(arg: number): number { return arg;}或者,我们使用any类型来定义函数:function identity(arg: any): any { return arg;}虽然使用any类原创 2017-04-20 18:15:26 · 1236 阅读 · 0 评论 -
mobx 在ReactJS项目中的运用
mobx 能干什么使用 react 写小型应用,数据、业务逻辑和视图的模块划分不是很细是没有问题的。在这个阶段,引入任何状态管理库,都算是奢侈的。但是随着页面逻辑的复杂度提升,在中大型应用中,数据、业务逻辑和视图,如果不能很好的划分,就很有可能出现维护难、性能低下的问题。业内比较成熟的解决方案有 redux,但是 redux 使用过程中,感觉较复杂和繁琐。那么为什么不简单一点呢?mobx 的核心理念原创 2017-04-06 18:17:54 · 11575 阅读 · 0 评论 -
前端路由&react-router使用姿势
前端路由&react-router使用姿势路由?对于有过SPA开发经验的人来说,路由这个名词并不陌生,前端的路由和后端的路由在实现技术上不一样,但是原理都是一样的。在 HTML5 的 history API 出现之前,前端的路由都是通过 hash 来实现的,hash 能兼容低版本的浏览器。它的 URI 规则中需要带上 #。Web 服务并不会解析 hash,也就是说 # 后的内容 Web 服务都会自动原创 2016-07-19 21:29:57 · 19665 阅读 · 1 评论 -
ReactJs性能优化(中)
提到ReactJS性能优化,不得不提immutablejs性能优化神器~ Facebook 工程师打造,与 React 同期出现,但没有被默认放到 React 工具集里(React 提供了简化的 Helper)。它内部实现了一套完整的 Persistent Data Structure,还有很多易用的数据类型。像 Collection、List、Map、Set、Record、Seq。有非常全面原创 2016-12-07 23:12:44 · 1078 阅读 · 0 评论 -
酷炫的react.js
高效的虚拟DOM:为了跟踪模型层的变化,并且将其应用到DOM中(也就是渲染),我们需要注意两个 重要的事情:数据是什么时候改变的哪一个(些)DOM元素需要被更新对于(1)而言,React提供了一个观察者模型用于替代传统的脏检查(dirty checking), 也就是持续的检查模型的变化。这也就是解释了为什么React不需要计算哪些发生 了改变的原因,因为它会立即知道。原创 2015-09-13 21:07:22 · 1091 阅读 · 0 评论 -
angular2.0新特性总结
1:$scope将从Angular 2.0中移除,取而代之的是ES6类。2:双向数据绑定:因双向数据绑定在大型应用中带来的问题 Angular 2.0引入了无回路有向图的单向结构概念。3: 依赖注入 2.0还希望通过懒加载来引入依赖注入。4: 模块化 将肯定使用ES6的模块语法5:组件通信 :除了$broadcast 和 $emit,2.0还有一些小得变化,1)你可以原创 2015-07-31 09:09:04 · 1887 阅读 · 0 评论 -
cookie 与html5 中的localstorage 与sessionstorage的异同
Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。Web Storage拥有setItem,getItem,removeItem,clear等方法,操作简单 不像cookie需要前端开发者自己封装setCookie,getCookie。Cookie的作用原创 2015-07-30 20:10:21 · 1028 阅读 · 0 评论 -
输入url发生了什么
1.浏览器查询缓存,如果有缓存,则直接跳到第9步2.浏览器询问操作系统服务器ip3.操作系统做dns查询,返回ip地址给浏览器4.浏览器打开对服务器的tcp连接(如果是https的话则更复杂)5.浏览器通过tcp发送http请求6.浏览器接收响应并且可能关掉Tcp连接,或者是重新使用连接处理新请求7.浏览器检查响应是否为一个重定向(3xx结果状态码),或者是重新使用连接处理原创 2015-07-31 09:01:19 · 1261 阅读 · 0 评论 -
HTTP请求详解
1. HTTP请求格式 做过Socket编程的人都知道,当我们设计一个通信协议时,“消息头/消息体”的分割方式是很常用的,消息头告诉对方这个消息是干什么的,消息体告诉对方怎么干。HTTP协议传输的消息也是这样规定的,每一个HTTP包都分为HTTP头和HTTP体两部分,消息体是可选的,而消息头是必须的。每当我们打开一个网页,在上面点击右键,选择“查看源文件”,这时看到原创 2015-08-11 20:41:36 · 8733 阅读 · 0 评论 -
Bootstrap 4 更新的新功能(全)
Bootstrap 4中有太多重大的更新,本文不能面面俱到,下面是一些颇受关注的亮点:从Less迁移到Sass: 现在,Bootstrap已加入Sass的大家庭中。得益于Libsass,Bootstrap的编译速度比以前更快;改进网格系统:新增一个网格层适配移动设备,并整顿语义混合。支持选择弹性盒模型(flexbox):这是项划时代的功能——原创 2015-08-25 12:46:14 · 3386 阅读 · 0 评论 -
js apply/call/caller/callee/bind使用方法与区别分析
一、call 方法 调用一个对象的一个方法,以另一个对象替换当前对象(其实就是更改对象的内部指针,即改变对象的this指向的内容)。 Js代码 call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 thisObj 可选项。将被用作当前对象的对象。 arg1, arg2, , argN 可选项。将被传递方法参数序列。 说明原创 2015-08-24 20:11:18 · 701 阅读 · 0 评论 -
css 清楚浮动的8种方式
清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全,共8种方法。 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了。解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题。下面总结8种清除浮动的方法(测试已通过 ie原创 2015-08-24 10:36:39 · 2417 阅读 · 0 评论 -
js实现继承的多种方式
1:原型链方式,即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child,从而实现了继承 function Person(){ } Person.prototype.hello = "hello"; Person.prototype.sayHello = function(){ alert(this.hello);原创 2015-08-08 22:32:08 · 832 阅读 · 1 评论 -
chrome developer tool 调试技巧
这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的, mac 下的应该大同小异.常规的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-ex转载 2015-07-11 08:23:03 · 495 阅读 · 0 评论 -
试试 ECMAScript 6
原文地址:http://www.2ality.com/2014/08/es6-today.html 原文作者:Dr. Axel Rauschmayer ( 译者: 可以在此处了解 ES5.1 的情况 ) ECMAScript 6 (ES6)听起来依旧感觉离我们很远。毕竟,它要到2015年中旬才能成为标准。但是,它的一些特性逐渐出现在一些浏览器中,有其内置的转载 2015-06-24 18:14:41 · 778 阅读 · 0 评论 -
angularJs HTTP响应拦截器
为何要用拦截器?任何时候,如果我们想要为请求添加全局功能,例如身份认证、错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段。 angularJs通过拦截器提供了一个从全局层面进行处理的途径. 拦截器允许你:通过实现 request 方法拦截请求: 该方法会在 $http 发送请求道后台之前执行,因此你可以修改配置或做其他的转载 2015-03-08 14:25:24 · 3110 阅读 · 0 评论 -
常见兼容性问题集合
* png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.也可以引用一段脚本处理.* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。* IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。 * 浮动ie产生的双倍距离(IE6双边距问题:在IE原创 2015-07-31 09:42:33 · 573 阅读 · 0 评论 -
SEO 优化注意事项
一.站内优化1.做好HTML头标签标题(title):标题是网页优化中相当有分量,一般网页title主要包含一些关键词、网站名称等。关键词(keyword):重要性大家都知道!关键词设定要参考热度、百度指数等一些手段,当然选择这些的前提要与自己网站的主题相关。关键词不宜多,一般就是1-3个。描述(description):主要是对网站的一个介绍,虽然没有前两个标签在搜索引擎蜘蛛眼中原创 2015-08-12 09:13:49 · 690 阅读 · 0 评论 -
javascript中 addEventListener和attachEvent以及element.onclick的区别
attachEvent是ie添加事件处理程序,接收两个参数,其中事件类型名称要加"on",可以添加多个事件处理程序,按照添加顺序相反的顺序触发;addEventListener是给非ie添加事件处理程序,接收三个参数,第一个是事件名,不需要加“on”,第二个是绑定的函数,第三个参数是一个布尔值,是事件的方式,意思是是否使用useCatch方式,如果是false,就使原创 2015-08-02 09:32:13 · 1772 阅读 · 0 评论