【开发思想·转载】理想的前端开发模式探究

本文出处

http://blog.163.com/wr_asdf/blog/static/4293045120115105291592/

开发要点

1.文件目录结构很重要（此处可能需要贴图）
2. 依据功能切分模块，让website 模块化。
JS 模块化
Css 模块化
Html 模块化
3.合理的架构模型，通信和加载机制。
4.合理的测试模型（Jspec），尽量使用自动化测试，减少手工测试步骤。

这种模式的好处

1. 有利于story的拆分
2. 有利于多组并行开发
3. 有利于迭代开发
4. 有更好的容错、解耦合处理
5. 方便代码的管理和维护
6. 利于添加测试 （此点有待考量）

// TODO 此处可能需要细化

Js ---> js类库 (建议使用Jquery , 其插件很多，用起来很方便)
---> js组件库 （可以考虑JqueryUI + plugin + Require.js）
---> js 框架 (backbone.js 前端mvc 框架 + sandbox 框架)
Css --> reset.css
---> base.css
---> 960.css
---> page.css
---> 合理的命名规范 + namespace 管理
Html --> 一致的编码风格
IDE --> Intellij 10 相当好用
JS + Css + html -- compress 工具 ---> 发布上线使用，可以集成到CI环境中去

前端代码的性能和质量

1 Html 的 performance
2. Css 的 performance
3. Images 的 performance
4. Jquery 的 performance 可能需要总结
5. Js 的 performance （原生js 的performance）
6. Page 的performance (page performance 的13条原则)
7. Code Refactoring
8. Code Review

html 设计理念

分离内容和样式
分离结构和样式
分离结构和内容

css三级结构

1. 全站级css ： reset.css +960.css+ core.css
   2.产品级css : 产品统一的风格
   3.Page级css : 页面专属定制样式

JS架构分层

前端代码的安全性

常用攻击模式：

1. XSS ( Cross Site Script) ， 跨站脚本攻击
2. CSRF (Cross Site Request Forgery) ， 跨站点伪造请求
3. Cookie劫持

解决方案：

1. html上转义一些特殊的字符 （ < > & ）
2. Js 代码进行字符过滤
3. 后端增加黑白名单策略
4. 通过referer token 或者 验证码来检测用户提交
5. 用户相关的填删改差 都用post操作
6. 避免全站通用cookie （严格设置cookie的作用域）

=From taobao========

1. 避免使用外部引用Js
   2.慎用eval、setTimeout、setInterval
2. 禁止发送页面信息到第三方站点
3. 如果Json返回的信息含有用户私密信息，需要token
   5.避免使用添加js标签来达到跨域访问的目的，应当使用flash实现跨域访问。
   6.js 代码需要经过jslint的测试。

Html5 + css3

1. 采用渐进支持的模式 （个人提倡，如果没有特殊需求，抛弃IE6）
2. 多采用一些html5新技术

个人成长和培训(当然和公司相关)：

1. 有自己的技术积累体系
2. 喜欢分享，帮助别人的同时，也提高自己。一定要有自己的blog，记录一些东西，让自己的知识沉淀下来。
3. 和不同领域技能的人pair，这样可以发现自己熟知领域外的东西。（最近对CI很感兴趣）
4. 多参加Session，workshop（公司有能人自发组织，学习的氛围很好）
5. 多多学习英语