[ Web前端工程师编程能力飞升之路 ]

本文将web前端研发编程能力划分了八个等级,每个等级都列举出了对应的特征及破级提升之方法,希望每位在看本文的同学先准确定位自己的等级(不要以你目前能力的最高点,而是以你当前能力的中档与之等级作对比,以免多走弯路),参考突破之法破之。

移动端淡入淡出卡顿问题--触发GPU加速

分类:前端开发时间:2016-04-06阅读:(1325)标签:css3, 移动开发
今天跟一技术leader聊到移动端淡入淡出效果卡顿问题,这个以前还真没遇到,可能是开发的手机性能太好了。既然说到有这个问题,那肯定就是有了,解决办法也是有的。技术leader提到了GPU加速。那就顺藤摸瓜,查一查。CSS里的动画效果默认都不会开启GPU加速,然而使用浏览器缓慢的软件渲染引擎来执行。而开启硬件加速则能使网站的动画表现更为流畅。GPU加速这个名字听上去很神奇,但是触发方式却比想象...

面向对象12种继承方法

分类:前端开发时间:2016-03-30阅读:(910)标签:javascript
1,原型链法(仿传统)Child.prototype = new Parent(); 基于构造器的工作模式;使用原型链模式;注解:默认继承机制。我们可以将方法与苏醒几种可重用的部分迁移到原型链中,而将不可重用的那部分设置为对象的自身属性。2,仅从原型继承法Child.prototype = Parent.prototype; 基于构造器工作的模式;原型拷贝模式(不存在原型链,所有的对象共享一...

代码重构技巧

分类:前端开发时间:2016-03-29阅读:(853)标签:重构
代码重构是为了改善现有的代码设计,让代码更好。作为读书笔记,这里摘录《javascript设计模式与开发实践》中的代码重构部分。提炼函数避免出现超大函数。独立出来的函数有助于代码复用。独立出来的函数更容易被覆写。独立出来的函数如果拥有一个良好的命名,它本身就起到了注释的作用。(代码即注释,高逼格的代码)合并重复的条件片段如果一个函数体内有一些条件分支语句,而这些条件分支语句内部散布了一些重复...

js正则面试题:字符串全局匹配模式下的返回值问题

分类:前端开发时间:2016-03-25阅读:(1071)标签:javascript, 正则表达式
技术群里看到一个关于js正则的面试题。大致如下:var reg = /abc/g; var str = 'abcd'; alert(reg.test(str)); alert(reg.test(str)); 以之前的见识,我觉得两次弹出都是true,为什么这么出题?难道不一样,为什么呢?测试了一下,一次true,一次false,而且继续往下alert的话,都是true,false交替的。百撕...

设计模式的本质

分类:前端开发时间:2016-03-24阅读:(766)标签:架构
设计模式的本质:解耦合。那什么是解耦合?耦合定义来源于电路学。当一个模块直接修改或者损坏,会导致另一个模块也损坏或者不起作用,则称二者存在耦合。耦合度定义如果两个模块之间耦合度为零:一个模块损坏不会影响另一个模块。高内聚 低耦合高内聚低耦合,是软件工程中的概念,是判断设计好坏的标准,主要是面向对象的设计,主要是看类的内聚性是否高,耦合度是否低。内聚就是一个模块内各个元素彼此结合的紧密程度,高...

setTimeout,setInterval第三个参数

分类:前端开发时间:2016-03-19阅读:(958)标签:javascript
setTimeout和setInterval是什么就不说了,今天在看ES6的promise的时候,看到代码中setTimeout传递了三个参数。难道这第三个参数是前面函数的参数?eg:function timeout(ms) { return new Promise((resolve, reject) => { setTimeout(resolve, ms, 'done')...

window.requestAnimationFrame更好的动画操作

分类:前端开发时间:2016-03-19阅读:(695)标签:javascript
window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求。这个方法接受一个函数为参,该函数会在重绘前调用。注意: 如果想得到连贯的逐帧动画,函数中必须重新调用 requestAnimationFrame()。如果你想做逐帧动画的时候,你应该用这个方法。这就要求你的动画函数执行会先于浏览器重绘动作。通常来...

css3实现无宽高子元素水平垂直居中

分类:前端开发时间:2016-03-10阅读:(1313)标签:css3
css3中flex伸缩布局给移动端带来了很大的便利(因为移动端浏览器基本上都兼容最新的html5/css3),通常我们会遇到想把一个盒子内的元素居中,不管是垂直还是水平(当然以往垂直居中很折腾人)。如何实现呢?那就使用前面说的flex伸缩布局了。看代码更直观。<style type="text/css"> .box{ width:700px; ...

npm常用命令

分类:笔记碎片时间:2016-03-07阅读:(994)标签:npm
npm config [ls|list|set|get] [name] [value] npm init [--yes|-y] npm search [name] npm info [name] npm install [--global|-g] [name] npm uninstall [--global|-g] [name] npm list [--global|-g] npm outd...

Javascript中call()和apply()的区别

分类:前端开发时间:2016-03-05阅读:(766)标签:javascript
在Javascript中,函数会在各种不同上下文中被使用,函数中的this一般会被自动设置,但是你可以改变this的值来改变函数运行时的上下文。因为 JavaScript 的函数存在“定义时上下文”和“运行时上下文”以及“上下文是可以改变的”这样的概念。有3种函数方法允许你改变this的值。函数是对象,所以函数也有方法。1,call()方法;2,apply()方法;3,bind()方法;bi...

友情链接

首页