注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

莫大艺术家

漂浮在艺术世界的一枚傻逼。。

 
 
 

日志

 
 

javascript 技术要点汇总  

2012-05-06 22:22:31|  分类: 不谈互联网 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
1.Dom机制
浏览器读取html页面后,会把节点放到内存生成一个Dom树对象。所有对Dom的操作,都是利用对Dom对象方法的调用来实现更新修改删除添加等操作。
1).对于Dom的修改,要记得最小化页面重绘。比如要添加多个节点,记得用fragment,更新大片html,用text來操作一次重绘,避免用循环对Dom进行修改等。。因为每次Dom变化,都会引起很多属性的变化,包括wdith ,height ,offsetWHTL..cliendWHTL,scrollWHTL。
2) .合理的利用冒泡机制,理解事件委托方法,大量事件的时候,优先选择委托方式,让代码脱离文档,同时对于Dom的属性操作也脱离文档流。
3) .要懂得html以及Css,很多效果并非必须用js不可,有些逻辑限制了html的布局方式,掌握了这点,就可先入为主,和builder沟通制作方法。
4)理解盒模型。
2.要懂得各个浏览器的分辨
浏览器分化严重,userAgent已经无法聪明的辨知浏览器版本,并且我们需求的不是浏览器版本,而是对于某个特定功能是否支持,所以,用特殊函数进行测试。
1)用addEventListener监测事件。來针对支持标准的内核进行事件处理
2)  在支持querySelector的浏览器下用最新的选择接口。
3)有时候用css的fixed比计算定位更准确,不需要考虑resize
4) 有时候,用-webkit-transform : translate來移动比计算位置来的更快,更有时候,还有硬件加速
5) 或许有了css3你不用再考虑某些图片了。。那么针对不同浏览器版本來写专门的style吧。。付出大于收获。
3.算法优化,设计优化。
要常有一颗优化的心,虽然js耗费的是客户端资源,但是保证一个流畅的用户体验相当重要。
1).对于非必须的启动资源,要惰性加载,对于选择器,要优先缓存调用,避免用一次调用一次(用JQ的人很不注意这个问题,用一个节点的时候,直接就用选择器了)。比如var mainFrame = $("iframe#proxy");避免多次选择。如用var child = document.getElementById("main").childNodes,  for(var i=0;..._)來对于dom循环操作替换单个查找.
2) .牢记程序设计原则性问题:避免重复自己,单一职责。js因为非oop语言,所以在写的过程中,很容易把事件绑定,dom操作,数据处理的代码混淆一成一坨,其实很多时候,这些部分是可以进行拆分的。相像一下mvc模式,思考一下能不能让自己的代码数据处理脱离事件以及文档流,把ajax想象成查询数据库和缓存服务器,把操作dom当作模版呈现,把事件响应和处理想象成控制显示模版?多思考,会有收获的。
3) .js很灵活,可以把一个匿名函数当作参数传进另外一个函数,基于这点,可以做很多优秀的操作,比如把某个具体处理文档的样式的函数作为主函数的属性,那么后续接手的人员可以自定义一个处理函数作为属性给主函数,这样不影响原有函数功能,又扩展了次主函数。(和prototype原型链结合更强大)
4 .理解原型链
js的原型链设计为js的精髓所在,原型链共享内存,并且在初始化对象后,才能调用原型链,那么就很好的处理了内存控制以及属性继承的问题。
1) .理解继承机制。对于原型链继承每一个流行的框架处理都很有特色,但是首先要明白原型链的原理和继承原理(其实就是共享了原型链或对于原型链复制
2).对于原型链的读写要格外清楚,原型链限制了读的过程,但是写入。。随时可以。。
5 .与后台交互
与后台交互,ajax,jsonp,ajax跨子域拉取数据,跨域拉取js文件,用form/iframe实现跨子域等较为常用。
1)子域交互优先选择代理文件进行操作,就是访问iframe的windowContent获取子域内页面的xmlhttprequest进行子域内ajax.相对应的就是用form提交子域,target到页面一个iframe,设置好receiver的argument name來拿到数据。不过推荐第一种。
2)如果跨全域,用文件吧。。直接创建一个script标签把src掉进来
3)有一种特殊的。。可以通过new 一个image进行操作,把src指向一个url..做过统计的朋友应该有印像。
6.部署优化
要对整体界面进行优化。。第一点已经说过了,惰性加载,放到算法里面了。。那么减少js文件http链接数,减少字节(压缩),最小化加载页面初次执行脚本,gzip,部署cdn静态节点,都很必要。

7.对于从后端转前端的人员,首先要把良好的设计思路带进js设计中,抽象能力和功能拆分能力很重要,掌握了js的基础语法和惯用方法,可以很快适应开发。对于制作转前端的人员,因为本身就是制作出身,在页面操作,标签布局中操控力更强,同时也要加强后端流行的程序设计模式,就可很迅速上手js.

7.拥抱变化,推进html5普及。

剩余许多,改日赘述。如有同行,欢迎收听。http://t.qq.com/igaves 莫大艺术家原创,转载请告诉我。
  评论这张
 
阅读(199)| 评论(3)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017