Web前端
文章平均质量分 77
艾特老干部
《React进阶之路》作者。
全栈路上的半栈工程师;爱国、爱家的程序员。
微信公众号:老干部的大前端(ID:Broad_FE)
展开
-
记HTML5 <a> 标签的一个小坑
今天写了段简单的代码,点击<a>标签时却抛出了这个错误:Uncaught TypeError: download is not a function。原创 2017-10-12 09:58:20 · 1461 阅读 · 1 评论 -
如何优雅地在React中处理事件响应
本文讨论React中,三种绑定事件回调的方式。第一种有额外的性能损失;第二种需要手动绑定this,代码量增多;第三种用到了ES7的特性,目前并非默认支持,需要Babel插件的支持,但是写法最为简洁,也不需要手动绑定this。推荐使用第二种和第三种方式。原创 2017-06-19 21:18:56 · 7115 阅读 · 3 评论 -
移动前端开发之viewport的深入理解
原文地址:http://www.cnblogs.com/2050/p/3877280.html在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。转载 2017-06-20 20:18:09 · 352 阅读 · 0 评论 -
用好React,你必须要知道的事情
容器性组件(container component)和展示性组件(presentational component)Props、State和组件的普通属性setState 异步性componentWillReceivePropsshouldComponentUpdaterender如何发送网络请求原创 2017-06-18 17:04:45 · 4350 阅读 · 2 评论 -
网站性能优化实践总结
本文提到的网站性能指网站的响应速度,这也符合绝大部分人对于网站性能的理解:访问快速的网站性能好,反之,访问速度越慢,则网站性能越差。本文总结的优化方法是宏观的工程层面的方法,并不包含微观的语言语法层面的方法,例如,JS、CSS的语法优化,这一部分同样影响网站的性能,但语言语法层面的优化更多的是取决于开发人员的编程水平。原创 2017-06-17 15:39:17 · 632 阅读 · 0 评论 -
移动端高清、多屏适配方案
原文地址:http://www.html-js.com/article/3041背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿。对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点:首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的转载 2015-07-16 13:43:58 · 639 阅读 · 0 评论 -
编写更好的jQuery代码的建议
讨论jQuery和javascript性能的文章并不罕见。然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码。好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验。首先,在脑子里牢牢记住jQuery就是javascript。这意味着我们应该采取相同的编码惯例,风格指南和最佳实践。首先,如果你是一个javascript新转载 2013-12-10 14:01:02 · 366 阅读 · 0 评论 -
如何只用CSS做到完全居中
原文链接: codepen.io 翻译: 伯乐在线 - 埃姆杰译文链接: http://blog.jobbole.com/46574/我们都知道 margin:0 auto; 的样式能让元素水平居中,而 margin: auto; 却不能做到垂直居中……直到现在。但是,请注意!想让元素绝对居中,只需要声明元素高度,并且附加以下样式,就可以做到:1转载 2013-10-15 17:48:38 · 510 阅读 · 0 评论 -
毫秒必争,前端网页性能最佳实践
原文出处: 微软互联网开发支持你愿意为打开一个网页等待多长时间?我一秒也不愿意等。但是事实上大多数网站在响应速度方面都让人失望。现在越来越多的人开始建立自己的网站,博客,你的网页响应速度如何呢?在这篇文章中我们来介绍一下提高网页性能的最佳实践,以及相应的问题解决方案,让站长或者即将要成为站长的朋友了解如何去测试和提高网站响应速度,对自己的网站更有信心。最佳实践最佳实践我们引用的来自转载 2013-09-28 20:19:23 · 397 阅读 · 0 评论 -
如何判断Javascript对象是否存在
原文出处: 阮一峰(@ruanyf)Javascript语言的设计不够严谨,很多地方一不小心就会出错。举例来说,请考虑以下情况。现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明。用自然语言描述的算法如下:123if(myObj不存在){ 声明myObj;转载 2013-09-22 14:03:05 · 512 阅读 · 0 评论 -
Backbone.js的技巧和模式
原文地址:http://coding.smashingmagazine.com/2013/08/09/backbone-js-tips-patterns/ 英文标题:Backbone.js Tips And Patterns Backbone.js is a popular open-sourceJavaScript “MV*” framework that转载 2013-08-22 17:09:07 · 822 阅读 · 0 评论 -
网站数据统计分析相关入门
网站数据统计分析可以帮助监控网站、系统运营状态,优化网站结构和体验,以及提升网站推广效果。不管是网站开发人员、产品人员、还是网站运营人员,都应该掌握网站数据统计分析的基本方法和常用工具。恰巧最近在为公司整理这部分内容,因此将自己的部分总结分享出来,仅供大家入门参考。原创 2017-07-22 08:41:57 · 800 阅读 · 0 评论 -
React 中被忽略的函数组件(Functional Components)
React中有两种组件:函数组件(Functional Components) 和类组件(Class Components)。据我观察,大部分同学都习惯于用类组件,而很少会主动写函数组件,包括我自己也是这样。但实际上,在使用场景和功能实现上,这两类组件是有很大区别的。原创 2017-07-16 08:23:02 · 12639 阅读 · 0 评论 -
深入理解React 高阶组件
1. 基本概念高阶组件是React 中一个很重要且较复杂的概念,高阶组件在很多第三方库(如Redux)中都被经常使用,即使你开发的是普通的业务项目,用好高阶组件也能显著提高你的代码质量。高阶组件的定义是类比于高阶函数的定义。高阶函数接收函数作为参数,并且返回值也是一个函数。类似的,高阶组件接收React组件作为参数,并且返回一个新的React组件。高阶组件本质上也是一个函数,并不是一个组件,这一点一原创 2017-07-15 09:47:54 · 2536 阅读 · 1 评论 -
细说Web API中的Blob
在一般的Web开发中,很少会用到Blob,但Blob可以满足一些场景下的特殊需求。Blob,Binary Large Object的缩写,代表二进制类型的大对象。Blob的概念在一些数据库中有使用到,例如,MYSQL中的BLOB类型就表示二进制数据的容器。在Web中,Blob类型的对象表示不可变的类似文件对象的原始数据,通俗点说,就是Blob对象是二进制数据,但它是类似文件对象的二进制数据原创 2017-10-15 21:35:01 · 1006 阅读 · 0 评论 -
由React Router引起的组件重复渲染谈Route的使用姿势
React Router 4 Route最佳实践 组件重复渲染问题原创 2017-11-20 11:50:14 · 11174 阅读 · 0 评论 -
Redux中间件对闭包的一个巧妙使用
最近在看Redux的源码,发现Redux在使用中间件applyMiddleware.js的源码中,有一个对闭包非常巧妙的使用,解决了“鸡生蛋,蛋生鸡”的问题,特分享给大家。原创 2017-09-11 22:06:49 · 451 阅读 · 0 评论 -
Redux进阶系列3:如何设计action、reducer、selector
Redux进阶系列文章:1. React+Redux项目结构最佳实践 2. 如何合理地设计State在前面两篇文章中,我们介绍了Redux项目结构的组织方式和如何设计State。本篇,我们将以前面两篇文章为基础,继续介绍如何设计action、reducer、selector。原创 2017-09-07 20:16:19 · 902 阅读 · 0 评论 -
Redux进阶系列2: 如何合理地设计State
Redux是一个非常流行的状态管理解决方案,Redux应用执行过程中的任何一个时刻,都是一个状态的反映。可以说,State 驱动了Redux逻辑的运转。设计一个好的State并非易事,本文先从设计State时最容易犯的两个错误开始介绍,然后引出如何合理地设计State。原创 2017-08-26 20:53:48 · 1504 阅读 · 1 评论 -
白话原型和原型链
关于原型和原型链的介绍,网上数不胜数,但能讲清楚这两个概念的很少,大多数都是介绍各种对象、属性之间如何指来指去,最后的结果就是箭头满天飞,大脑一团糟。本文将从这两个概念的命名入手,用通俗易懂的语言,帮助你理解这两个东西到底是何方神圣。原创 2017-08-24 09:36:56 · 875 阅读 · 1 评论 -
Redux进阶系列1: React+Redux项目结构最佳实践
React + Redux 是React生态中使用最频繁的技术栈,但关于如何组织React+Redux的项目结构,一直都有多种声音。本文将讨论其中最常用的3种项目结构,并给出个人的最佳实践。原创 2017-08-21 19:20:31 · 1011 阅读 · 0 评论 -
聊聊 React Router v4 的设计思想
React Router v4 最大的变更,不是API的变更,而是从静态路由到动态路由的变化。原创 2017-08-06 16:25:22 · 2245 阅读 · 0 评论 -
八段代码彻底掌握Promise
八段代码彻底掌握Promise原创 2017-07-25 19:05:08 · 997 阅读 · 0 评论 -
深入理解React 组件状态(State)
React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据。如何定义State定义一个合适的State,是正确创建组件的第一步。State必须能代表一个组件UI呈现的完整状态集,即组件的任何UI改变,都可以从State的变化中反映出来;同时,State还必须是代表一个组件UI呈现的最小状态集原创 2017-06-27 17:30:49 · 1890 阅读 · 0 评论 -
JavaScript正则表达式
原文地址:http://www.cainiao8.com/web/js_note/js_regular_expression.html什么是正则表达式?这个问题可以参见:“正则表达式30分钟入门教程”,很多编程语言都支持正则表达式,本文仅仅讨论JavaScript中的正则表达式。创建一个正则表达式第一种方法:var reg = /pattern/;转载 2013-08-22 17:17:07 · 483 阅读 · 0 评论