微信号:uxForever

介绍:与您分享前端技术,程序猿的工作、生活,每周一早上推送一篇前端技术文章,不定时与您分享程序猿的另类生活.from 阿里巴巴信息平台前端团队.

抛开前端自己干(三)

2016-04-25 07:37 吴琼

碎碎念

WEB这系列的最后一块:WEB行为层(JavaScript)

什么? 你说你精通Java

So what? 印度人在印度尼西亚还不照样抓瞎

我们今天就带雷锋一起参观下雷锋塔,新技能Get起来!

步入正文

假设我们有这么一个调查模块需求

1.点击每行前面的复选框可以选中该行,选中的行背景高亮显示,再次点击取消选中
2.点击提交选项按钮,会将已选项展示到已选项列表
3.已选项列表里的行有第1点中的功能

那么拿到这个需求,你会怎么做呢?

屏幕前的你:“So easy!”

优秀的程序员追求完美,而不是简单的完成功能

  • 代码行数体现了流量优势
     通过用事件代理(委派)的方式,将可选项已选项中的功能合并,缩减代码

  • join函数拼接字符串提升性能
     原来是通过新建一个临时字符串,将新字符串重新赋值  ,然后返回这个新字符串并同时销毁原始字符串。所以字符串的连接效率较低。

代码没有完美,只有更完美!完美无极限……

缓存需要被重复使用的对象

  • 着重强调缓存DOM元素
    在JS中DOM操及交互要消耗大量的时间,从大量的DOM元素中要精准定位到某一(类)元素定位,这是一个很耗时的过程

    可以通过document.getElementsByTagName( '*' ).length查看DOM数

  • 另外因为全局变量要比局部变量需要搜索的作用域长,所以在某些情况下可以通过局部变量来缓存提升搜索作用域性能(在IE下性能有明显提升)

某代码是片段否做变量缓存性能对比:

执行结果对比图:

还是差的蛮多的,特别是在真实项目中数据量一旦大起来的话

动态设置Class替换多次动态设置CSS样式

如果我们需要动态改变CSS样式,则尽可能的采用少触发几次reflow数的方式

什么情况下会触发触发reflow呢? 请戳这里查阅 ( http://jinlong.github.io/2015/09/30/what-forces-layout-reflow/ )

下边代码每次都会变更元素的几何属性,理论上会触发多次reflow


通过直接设置元素的className,只会触发一次reflow

    element.className = 'styleName';

避开后端思维写前端

  • 使用数组和对象字面量,避免使用构造函数Array(),Object()

  • 避免使用属性访问方法
     JavaScript不需要属性访问方法,因为所有的属性都是外部可见的,添加属性访问方法只是增加了一层重定向,对于访问控制没有意义

一些小点

人家CSS有《CSS禅意花园》( http://www.csszengarden.com/ ) 咱们JavaScript有《JavaScript密码花园》( http://bonsaiden.github.io/JavaScript-Garden/zh/ )

结局

最后一句话送给大家:

前端深处是细活,是针线活,需要你有着感性的思维,无畏的细心。


长按上图,关注猿猿相抱
本篇作者:吴琼

 
猿猿相抱 更多文章 Web调试代理工具Charles的使用 移动端借助Native优化前端性能 如何在 React 中做到 jQuery-free 全方位攻略 Alfred 效率神器 ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(上)
猜您喜欢 iOS微信安装包瘦身 牛逼哄哄的RPC 小话设计模式原则之(4):开闭原则OCP 关于RESTful规范API接口设计的7点实用建议 简化PHP开发的11个工具