重构国投瑞银网站主页 编码约定，注意事项与开发准备

国投瑞银网站已经上线了，基于项目进度，不同公司不同团队合作的关系，第一次的重构做的不是彻底，但是整体性能已经比当初提升10倍以上。

为了自己的知识水平不断的提高，所以我决定在这里进行 最合理的重构。

这个内容主要是自己对知识的一个稳固而知新的一个过程，新手可以跟着我这个菜鸟学习，其他相关人员如果有空，本人热切期盼能够得到你的指导。

约定篇：约定代码书写规范，命名规范。

概念：

何为网站重构，我的理解就是对符合标准的网页在页面整体上重新规划，给用户最佳体验，给搜索引擎最殷勤的讨好方式，给服务器最小压力，给后期维护提供最大方便，同时要跟后台程序开发人员能够无缝的衔接。此次重构完全依据我对重构概念的理解

样式表约定：

1、全部小写，不适用驼峰命名规则。尽量在保证语义清晰明了的前提下简写以减小文件大小

2、定义的对象名称严格避免使用js中的关键字和保留字。防止浏览器低端有的时候会出现错误，或者代码执行错误。

题外话，我曾使用 enum命名，js中又对这个对象进行相关操作，结果就是不执行，排错，调试都是给出缺少标识符的错误。我是一头雾水，查看js相关书籍之后才知道我使用了js中的保留字。

3、具体名称约定受限于篇幅，请参考最终实现。

Javascript代码约定

1、使用驼峰命名规则；

2、定义变量要使用 var关键字来区分全局和局部变量；

3、严格要求初始化变量，以便使用typeof来检测变量是否已经存在；

4、如果变量存储的是对象 请初始化为null值，并使用下划线开头；

其他的暂时未想到。

准备篇：

素材：使用现有的国投瑞银网站主页的所有素材。版权请作为自己学习研究之用。

分析：以现有网站为例。

结构：上中下，左中右。

重点注意：在无css裸奔的情况下要使中间内容首先呈现，无等高的硬性要求。

js库： jquery及相关插件，jquery使用1.4.4版本使用google的来源

标准：html5 兼容ipad iphone Android等设备。

参考资料：淘宝2011版

要求：

1、尽可能把所有dom操作放到页面渲染完成之后执行。

2、适当使用缓存并，依据一定的规则清楚缓存。（待定：如有可能允许用户自行刷新清楚缓存）

3、网站换肤功能要在后台完成。ajax判断换肤所需要的素材是否加载完成，然后执行相关操作，并在换肤模块给出提示。

4、html代码标签语义化。

 

写后感（经历介绍）：

我对html代码感兴趣之前一直从事网站制作和一些小型的b/s系统开发，所有形式采用表格的方式。整天ctrl+c，Ctrl+v的不亦乐乎。后来受到一个朋友的指导，接触了网站重构这本书，但是认识比较肤浅，只停留在DIV+CSS的基础之上，启蒙老师是迅雷网站（她从单纯的网站下载改到门户的那一次），整个网站从之前的小家碧玉改成了大家闺秀。我通过学习他们的第一版代码提升了自己页面排版的知识，后来又经过几次改版，每次改版我都会把他们的页面研究一下，主要还是用来提升我的DIV+CSS的排版，腾讯也不知道哪一天网站也从之前的整版table变成了标准我也学习他们的源码，163门户，这些都是学习基础知识的好地方。期间也接触了yui（看的比较费力！）
我到深圳工作之后，跟微软的首次合作，我又一次接触了重构这个概念。后来我在工作中也一直在自己的代码书写和页面架构上要求自己，做了那么多的页面，有的自认为还可以，但是往往在最终出来的成果上不太满意究其主因，后期脱节。注：我的公司一般跟开发公司合作，页面交付之后基本上就完成使命了。

这一次鉴于多种问题，也没有给出一个完美的重构代码，所以我决定自己在这里完成这个最终版的重构。我会把从页面结构到最终完成，和最后的程序接口写下来，最为自己知识的一个总结。

基础知识学习建议：学习迅雷、腾讯、163、sina的首页源代码。看到好的页面也要习惯性的学会偷师，多学，多练。

转载于:https://www.cnblogs.com/zhuyidong/archive/2011/01/21/1941327.html