(三)开始编程
编程前的准备工作大致按照确定前端框架,统一编程风格,制定命名规范三步走。那么开始编程,实现静态页面时则大多按照各自的编程习惯就好了,笔者也没有更好的方式,大抵还是一边写代码,一边打开浏览器看效果,而要完全做到与设计稿没有1px的分别,只能耐心的反复修改代码,而笔者认为其中有效的方法是尽可能使用简单的结构,能够少一层结构是一层,这不仅仅是减少了代码量,而且对于编写样式也会变得更方便。
但是,作为自学者,因为经验的匮乏,很多时候就必须得考虑的更多,比如如何减少样式表的代码量,如何使用更简单的结构来实现设计稿等等。有了考虑,也就有了很多尝试,好在笔者公司的boss是很宽容亲切的,在工期上没有设置得让人为难,对于设计也要求不高(笔者的设计只做了网站首页,其余都是边写代码边参考其他网站的)。所以,我也有了不少尝试错误的机会。这篇本来没什么好写,想想提出编程时遇到的那些错误也许能帮到其他自学者吧!
1 . 查看效果首选谷歌浏览器
自从1年前笔者在自己这台小步疾走了四年的笔记本上换上win8系统后,简洁轻快的IE10便成为笔者的默认浏览器(在笔者的电脑上,IE10始终打开网页速度最快,占用内存最小的。这点不得不为IE的退休感到惋惜,因为其实除了不能装插件,兼容性不够好,IE9以后其他方面已经基本上赶上chrome,firefox等浏览器)。但是,调试代码,笔者仍旧建议使用谷歌浏览器。谷歌浏览器的开发者工具里能够对各元素的Box model给出详细的参数,对于经验尚浅的学习者而言,在开发中能够查看到每一个元素的Box model详细参数,可以极大的避免反复调试时却连元素的content的数值都不知道。
谷歌开发者工具
2 . 提取公共样式表
笔者最初是将每一个网页的css放在一张样式表里,但是由于后期网页导航条,footer部分修改,虽然这些是每一个网页都有的模块,但是笔者硬是修改每一张样式表。所以,在开始之处,就应该就一些全局的样式(比如颜色,字体,字号等等)和这些通用组件的css集中在一张样式表,这样,一旦设计有改动,只要修改一处即可。(因为笔者修改此篇时已经开始优化网站,接触到静态资源管理,为了减少TCP请求,又不得不把公共的样式表和其他样式表合并起来。想想也是醉了,笔者推荐其他读者在开始编程就使用前端集成解决方案FIS,这是百度出的,很牛。笔者也在探索学习中,笔记什么的也会写出来。)
结语:可能就这些了,编程有各自的方式,方法。前端技术本来也是由浅入深的,不同于其他程序语言,前端技术看似繁琐,其实入门容易,但要做得更好,就是一步一重天。所以,在编程中,每个人都会有自己的体会,和经验的积累。既然开始编程了,那就别停下来。