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

本文出处

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

开发要点

1.文件目录结构很重要（此处可能须要贴图）

1. 依据功能切分模块，让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

1. Css 的 performance
2. Images 的 performance
3. Jquery 的 performance 可能须要总结
4. Js 的 performance （原生js 的performance）
5. Page 的performance (page performance 的13条原则)
6. Code Refactoring
7. 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. 多多学习英语