- 博客(79)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 写 React / Vue 项目时,数据列表中的key,用数组下标还是唯一值id或不写呢？
React与Vue原理一致，以Vue为列进行介绍key不写与key使用数组下标的区别key不写与使用数组下标作用一致。都是采默认使用“就地更新”的侧脸。当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个默认的模式是高效...
2019-10-28 10:00:58
1260
原创 前端中的 IoC 理念及应用
前端中的 IoC 理念什么是 IoCJava Spring框架中IoC(Inversion of Control，可翻译为为「控制反转」),DI(Dependency Injection，依赖注入,简称DI）是他的核心思想，angular中DI（依赖注入）也是其核心概念之一。IoC 是面向对象编程中的一种设计原则，可以用来减低计算机代码之间的耦合度。其中最常见的实现方式叫做依赖注入，通过控制...
2019-02-15 11:36:12
455
原创 前端常用SQL语句
常用SQL语句SQL（Structure Query Language）结构化查询语言用于关系型数据库，Mysql,Oracle,sqlServer前端学会这些基本的DB操作基本够用了DDL（Data Definition Language） 数据定义语言包括：create(创建数据库对象),alter(修改数据库对象的结构)和drop(删除数据库对象)create(创建数据库对...
2018-11-21 16:14:02
1011
原创 ReactJS Render Props封装技巧
Render Props一种在 React 组件之间使用一个值为函数的prop, 在React 组件间共享代码的简单技术class MouseTracker extends React.Component { constructor(props) { super(props); this.handleMouseMove = this.handleMouseMove.bi...
2018-11-21 15:43:12
822
原创 WebAssembly入门，未来可期
先来几个名词解释器一行行地边解释边执行编译器是把源代码整个编译成目标代码，执行时不再需要编译器，直接在支持目标代码的平台上运行。解释器的利弊解释器启动和执行的更快。你不需要等待整个编译过程完成就可以运行你的代码。从第一行开始翻译，就可以依次继续执行了。 正是因为这个原因，解释器看起来更加适合 JavaScript。对于一个 Web 开发人员来讲，...
2018-09-14 12:17:00
3212
原创 用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
6538
1
原创 Parcel打包探讨
Parcel探讨卖点：1.极速打包时间Parcel 使用 worker 进程去启用多核编译。同时有文件系统缓存，即使在重启构建后也能快速再编译。2.打包所有的资源Parcel 具备开箱即用的对 JS, CSS, HTML, 文件 及更多的支持，而且不需要插件。3.自动转换在需要时，代码使用 Babel，
2018-01-26 15:24:52
2539
原创 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
404
原创 VueJs与ReactJS&AngularJS的差异对比
React && VueReact 和 Vue 有许多相似之处，它们都有：使用 Virtual DOM提供了响应式（Reactive）和组件化（Composable）的视图组件。将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库。 由于有着众多的相似处，我们会用更多的时间在这一块进行比较。这里我们不只保证技术内容的准确性，同时也兼顾了平衡的考量。我们需要指出 Reac
2017-06-21 20:11:25
6011
原创 TypeScript语法 中级篇
泛型下面来创建第一个使用泛型的例子：identity函数。 这个函数会返回任何传入它的值。 不用泛型的话，这个函数可能是下面这样：function identity(arg: number): number { return arg;}或者，我们使用any类型来定义函数：function identity(arg: any): any { return arg;}虽然使用any类
2017-04-20 18:15:26
1231
原创 TypeScript(JavaScript的超集)
TypeScript(JavaScript的超集)始于JavaScript，归于JavaScriptTypeScript从今天数以百万计的JavaScript开发者所熟悉的语法和语义开始。使用现有的JavaScript代码，包括流行的JavaScript库，并从JavaScript代码中调用TypeScript代码。TypeScript可以编译出纯净、 简洁的JavaScript代码，并且可以运行在
2017-04-13 12:32:37
1366
原创 mobx 在ReactJS项目中的运用
mobx 能干什么使用 react 写小型应用，数据、业务逻辑和视图的模块划分不是很细是没有问题的。在这个阶段，引入任何状态管理库，都算是奢侈的。但是随着页面逻辑的复杂度提升，在中大型应用中，数据、业务逻辑和视图，如果不能很好的划分，就很有可能出现维护难、性能低下的问题。业内比较成熟的解决方案有 redux，但是 redux 使用过程中，感觉较复杂和繁琐。那么为什么不简单一点呢？mobx 的核心理念
2017-04-06 18:17:54
11567
原创 HTTP,HTTPS,SPDY,HTTP2.0你该知道的一些...
HTTP,HTTPS,SPDY,HTTP2.01：HTTP的发展历程2: HTTP的基本优化带宽：如果说我们还停留在拨号上网的阶段，带宽可能会成为一个比较严重影响请求的问题，但是现在网络基础建设已经使得带宽得到极大的提升，我们不再会担心由带宽而影响网速，那么就只剩下延迟了。延迟： 浏览器阻塞（HOL blocking）：浏览器会因为一些原因阻塞请求。浏览器对于同一个域名，同时只能有 6 个连接
2017-03-29 20:10:07
750
原创 跨域资源共享 CORS（Cross-origin resource sharing）
跨域资源共享 CORS（Cross-origin resource sharing）一、简介 CORS需要浏览器和服务器同时支持。目前，IE浏览器不能低于IE10。其他所有浏览器都支持该功能 整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会
2017-03-23 09:36:23
7967
1
原创 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
738
原创 ReactJs性能优化(中)
提到ReactJS性能优化，不得不提immutablejs性能优化神器~ Facebook 工程师打造，与 React 同期出现，但没有被默认放到 React 工具集里（React 提供了简化的 Helper）。它内部实现了一套完整的 Persistent Data Structure，还有很多易用的数据类型。像 Collection、List、Map、Set、Record、Seq。有非常全面
2016-12-07 23:12:44
1074
原创 ReactJS性能优化(上)
shouldComponentUpdate？详情先参考InfoQ上什么时候要在React组件中写shouldComponentUpdate？ React已经替我们实现了一个shouldComponentUpdate，原理其实非常简单，组件在决定重新渲染（虚拟dom比对完毕生成最终的dom后）之前会调用该函数，该函数将是否重新渲染的权限交给了开发者，该函数默认直接返回true，表示默认直
2016-12-07 23:10:11
1539
原创 react webpack 按需加载初试
react webpack 按需加载初试1：为什么要按需加载【直接打包】React实现单页面运用时，当项目较小或者页面较少的情况下可以无需打包成多个文件，因为即使前端代码有10M,在通过webpack压缩打包，再通过GZIP压缩后一般也就400k,在一面正常的pc系统中400k的大小是可接受的。【按需加载】但当你的应用稍微复杂一点点，包括依赖后，打包后的文件都是挺大的。而我们加载的时候，不管那些
2016-12-02 18:55:27
6578
原创 React吸引我们的几点
React吸引我们的几点React速度很快与其它框架相比，React采取了一种特立独行的操作DOM的方式。它并不直接对DOM进行操作。它引入了一个叫做虚拟DOM的概念，安插在JavaScript逻辑和实际的DOM之间。这一概念提高了Web性能。在UI渲染过程中，React通过在虚拟DOM中的微操作来实对现实际DOM的局部更新。跨浏览器兼容虚拟DOM帮助
2016-10-06 22:11:27
547
原创 AngularJs与ReactJS优缺点&适用场景
Angular的优缺点：优点AngularJS是一套完整的框架，angular有自带的数据绑定、render渲染、angularUI库,过滤器,directive(模板),服务q(defer),http，inject(依赖注入),factory,provider……，等等一系列工具，基本上只要你在做web开发用过的东西，它都有一个。但是这些东西react自身都没有。
2016-10-06 16:04:46
16783
原创 vue.js学习笔记（相关概念）
介绍vue.js 是用来构建web应用接口的一个库技术上，Vue.js 重点集中在MVVM模式的ViewModel层，它连接视图和数据绑定模型通过两种方式。实际的DOM操作和输出格式被抽象的方式到指令（Directives）和过滤器（Filters）在哲学领域内,尽量让MVVM数据绑定API尽可能简单。模块化和可组合性也是重要的设计考虑。vue不是一个全面的框架,它被设计成简单的和灵活的。你可以用它
2016-09-05 17:35:54
1253
原创 git常用指令
Git配置git config --global user.name "robbin" git config --global user.email "[email protected]"git config --global color.ui truegit config --global alias.co checkoutgit config --global alias.ci com
2016-08-25 22:36:34
432
原创 ReactJS组件生命周期（ES5为例）
在组件的整个生命周期中，随着该组件的props或者state发生改变，其DOM表现也会有相应的变化。一个组件就是一个状态机。一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。实例化当组件在客户端被实例化，第一次被创建时，以下方法依次被调用： 1、getDefaultProps 2、getInitialState 3、componentWillMount 4、render 5
2016-08-23 23:10:30
1089
原创 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
1370
6
原创 代码规范-注释
代码规范-注释引言-《代码大全》对于投机取巧的代码注释是错误的，注释不应该帮扶难度大的代码，就像kernighan和plauger强调的:”不要注释糟糕的代码—-应重写之。”很多人支持优质的代码应该是自解释的在程序员的圈子中，有很多非常优秀的程序员都是不太愿意写注释的，他们往往会认为优质的代码应该是自解释的。在习惯性的不写注释时，他们会更用心地写好变量名，函数名，代码质量会进一步提高。很多人支持代码
2016-08-07 18:19:27
1406
原创 前端路由&react-router使用姿势
前端路由&react-router使用姿势路由？对于有过SPA开发经验的人来说，路由这个名词并不陌生，前端的路由和后端的路由在实现技术上不一样，但是原理都是一样的。在 HTML5 的 history API 出现之前，前端的路由都是通过 hash 来实现的，hash 能兼容低版本的浏览器。它的 URI 规则中需要带上 #。Web 服务并不会解析 hash，也就是说 # 后的内容 Web 服务都会自动
2016-07-19 21:29:57
19657
1
转载 不容错过的 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
719
1
转载 4类 JavaScript 内存泄漏及如何避免
本文将探索常见的客户端 JavaScript 内存泄漏，以及如何使用 Chrome 开发工具发现问题。简介内存泄漏是每个开发者最终都要面对的问题，它是许多问题的根源：反应迟缓，崩溃，高延迟，以及其他应用问题。什么是内存泄漏？本质上，内存泄漏可以定义为：应用程序不再需要占用内存的时候，由于某些原因，内存没有被操作系统或可用内存池回收。编程语言管理内存的方式各不相同。只
2016-05-28 14:14:36
2090
原创 promise应用示例讲解
Q：红灯三秒亮一次，绿灯一秒亮一次，黄灯2秒亮一次；如何让三个灯不断交替重复亮灯？（用Promse实现）三个亮灯函数已经存在：functionred(){ console.log('red');}functiongreen(){ console.log('green');}functionyellow(
2016-05-22 13:13:15
1682
原创 前端性能优化小知识点(javascript)
避免全局查找在一个函数中会用到全局对象存储为局部变量来减少全局查找，因为访问局部变量的速度要比访问全局变量的速度更快些。 function search() { //当我要使用当前页面地址和主机域名 alert(window.location.href + window.location.host); }
2016-05-19 21:58:14
1698
原创 setTimeout 的黑魔法
setTimeout 的黑魔法setTimeout,前端工程师必定会打交道的一个函数.它看上去非常的简单,朴实.有着一个很不平凡的名字–定时器.让年少的我天真的以为自己可以操纵未来.却不知朴实之中隐含着惊天大密.我还记得我第一次用这个函数的时候,我天真的以为它就是js实现多线程的工具.当时用它实现了一个坦克大战的小游戏,玩儿不亦乐乎.可是随着在前端这条路上越走越远,对它理解
2016-05-07 20:30:16
1060
原创 git操作详解
本地分支解析git 通过可变指针来实现对提交数据的历史版本的控制，每当我们提交新的更新，当前分支(设为master)则指向最后一个提交更新A，而最后一个提交对象则存在一个指针指向前一次的提交更新Q。如果我们创建一个新的分支，child，它和master共同指向A，这时，如果我们向child分支提交更新B，我们会发现child指向B，而master依然指向A。无论我们在child
2016-04-24 18:02:02
1174
原创 理解CSS弹性盒模型flex
前面的话 CSS3引入了一种新的布局模型——flex布局。flex是flexible box的缩写，一般称之为弹性盒模型。和CSS3其他属性不一样，flexbox并不是一个属性，而是一个模块，包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕 版本更迭 flexbox布局的语法规范经过几年发生
2016-04-22 09:35:11
533
原创 前端如何做好数据容错
###前端如何做好数据保护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
2755
1
原创 无线性能优化
###背景 源至首图不能是懒加载以及不再走首屏数据的思考。 一：首屏优化：###怎么获取首屏时间呢？A：加载完静态资源后通过ajax请求去后台获取数据，数据回来后渲染内容在每个点打上一个时间戳，首屏时间 = 点8–点1；B：使用后台直出，返回的html已经带上内容了 此时首屏时间 = 点4 – 点1。 如何优化A中各个节点的加载时
2016-03-20 19:58:53
902
原创 如何在本地环境配置github
提交已有文件夹在github上新建仓库。配置账号信息 git config --global user.name fayewong1991 git config --global [email protected]创建本地ssh：这是一种传输代码的方法，速度快又安全。SSH 是目前较可靠，专为远程登录会话和其他网络服务提供安全性的协议。ssh-keygen -
2016-02-04 17:07:40
551
原创 酷炫的react.js
高效的虚拟DOM:为了跟踪模型层的变化，并且将其应用到DOM中（也就是渲染），我们需要注意两个 重要的事情：数据是什么时候改变的哪一个（些）DOM元素需要被更新对于（1）而言，React提供了一个观察者模型用于替代传统的脏检查（dirty checking）， 也就是持续的检查模型的变化。这也就是解释了为什么React不需要计算哪些发生 了改变的原因，因为它会立即知道。
2015-09-13 21:07:22
1081
转载 NodeJS优缺点及适用场景讨论
NodeJS优缺点及适用场景讨论 前端开发 程序猿 2013年12月12日http://www.xprogrammer.com/159.html概述：NodeJS宣称其目标是“旨在提供一种简单的构建可伸缩网络程序的方法”，那么它的出现是为了解决什么问题呢，它有什么优缺点以及它适用于什么场景呢？本文就个人使用经验对这些问题进行探讨。一. NodeJS的特点
2015-08-27 20:15:44
407
原创 Bootstrap 4 更新的新功能（全）
Bootstrap 4中有太多重大的更新，本文不能面面俱到，下面是一些颇受关注的亮点：从Less迁移到Sass： 现在，Bootstrap已加入Sass的大家庭中。得益于Libsass，Bootstrap的编译速度比以前更快；改进网格系统：新增一个网格层适配移动设备，并整顿语义混合。支持选择弹性盒模型（flexbox）：这是项划时代的功能——
2015-08-25 12:46:14
3381
原创 js apply/call/caller/callee/bind使用方法与区别分析
一、call 方法 调用一个对象的一个方法，以另一个对象替换当前对象(其实就是更改对象的内部指针，即改变对象的this指向的内容)。 Js代码 call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 thisObj 可选项。将被用作当前对象的对象。 arg1, arg2, , argN 可选项。将被传递方法参数序列。 说明
2015-08-24 20:11:18
698
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人