框架搭建
- 需要建立相对应的文件夹存放文件，比如html、css、images、less、lib、js等文件夹。
- 在文件夹根目录存放index.html，便于访问。
- 下载需要用的框架或者库文件，并存放在lib目录中。
- 安装gulp等需要用到的工具，建立起本地服务器，以运行测试php代码。
了解项目
- 查看网页细则，构思自己能力范围内能够实现的功能。
- 分析要做功能的逻辑原理。
- 分析网页布局结构，提前规划代码思路。
- 分析提取网页结构中可以复用的部分，减少代码量。
上手项目
CSS
CSS内容使用Less编写，通过插件对Less文件进行编译，转化为HTML文档中可以引用的CSS文件。使用Less编写样式文件时，可以使用类似HTML文档的嵌套结构，变量的使用，以及一些类似与JS的函数编写方式，提高编码效率JS
使用requirejs模块化工具对编写的JS文件进行模块化操作，减少在HTML文档中对JS文件的请求次数，并且模块化JS文件之后，在编写JS代码时思路也更加清晰，只需要引用需要的模块，在阅读代码的时候可以大致了解该JS的功能内容。复用头部和尾部
做到头部和尾部以及中间内容部分的分离，内容上没有依赖关系。先编写出网页中最复杂的头部和尾部，方便简单的头尾做简化。这样比从简单的复杂的更容易。主体内容
根据原网页内容结合自己需要实现的功能，进行代码编写。对于需要去往服务器拿数据的部分可以使用淘宝提供的实现数据模拟的接口（rap2），语法规则与Mockjs一致。可以生成多种需要的数据格式和内容。
网页中重复的部分可以使用 arttemplate 模板引擎进行网页的渲染，减少代码量。使用该模板引擎可以用更少的代码量，完成更多内容的加载，特别是网页显示内容有规律可循的时候。
轮播图和放大镜效果可以使用jquery插件来完成，只需要在编写网页时预留好位置，防止添加后造成布局错乱。
遇到的问题及解决
- 事件委派失败
祖先元素通过选择器找到的元素必须是唯一的，才能进行事件委派。 - 复用头部尾部路径问题
在requirejs中引用网页头部和尾部时路径填写绝对路径，避免在不同页面中引用时因为文件位置差异而引用失败。特别是主页和其他页面共用的页面。 - 数据问题
项目过程中遇到了淘宝Rap2后台崩溃的问题。我们可以使用Mockjs生成随机数据。在本地实现可以有效避免网络不好或者rap2后台崩溃的情况下拿不到数据。
