编写高质量代码Web前端开发修炼之道笔记.docx
- 文档编号:25560976
- 上传时间:2023-06-09
- 格式:DOCX
- 页数:11
- 大小:2.63MB
编写高质量代码Web前端开发修炼之道笔记.docx
《编写高质量代码Web前端开发修炼之道笔记.docx》由会员分享,可在线阅读,更多相关《编写高质量代码Web前端开发修炼之道笔记.docx(11页珍藏版)》请在冰豆网上搜索。
编写高质量代码Web前端开发修炼之道笔记
第1章从网站重构说起
打造高质量的前端代码,提高代码的可维护性——精简、重用、有序。
第2章团队合作
精一行,通十行。
增加代码可读性——注释。
重用性需提高,分为公共组件与私有组件,代码模块化。
公共组件不能轻易修改,因为影响大,所以一般只提供“读”的权限。
磨刀不误砍柴工——前期的构思很重要。
构思的主要内容包括规范的制定、公共组件的设计和复杂功能的技术方案等。
一般来说,前期构思占整个项目30%~60%的时间都算是正常的。
第3章高质量的HTML
CSS只是web标准的一部分,在HTML、CSS、JS三大元素中,HTML才是最重要的,结构才是重点,样式是用来修饰结构的。
正确的做法是,先确定HTML,确定语义的标签,再来选用合适的CSS。
判断标签语义是否良好的简单方法:
去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性。
语义良好的网页去掉样式后结构依然很清晰。
“CSS裸体日”,2006.04.05第一届,从第三届开始改为4月9日。
(设立目的就是为了提醒大家用合适的HTML标签的重要性)
一个语义良好的页面,h标签应该是完整有序没有断层的,也就是说要按照h1、h2、h3、h4这样的次序排下来,不要出现类似h1、h3、h4,漏掉h2的情况。
当页面内标签无法满足设计需要时,才会适当添加div和span等五语义标签来辅助实现。
第4章高质量的CSS
组织CSS的方法:
base.css+common.css+page.css,在一般情况下任何一个网页的最终表现都是由这三者共同完成的,这三者不是并列结构,而是层叠结构。
base.css一般包括cssreset和通用原子类,比如设置一些常用的清除浮动、宽度、高度等class。
可以参考一些前端框架,例如YUI、bootstrap等等。
拆分模块技巧:
模块与模块之间尽量不要包含相同的部分,如果有相同部分,应将它们提取出来,拆分成一个独立的模块。
模块应在保证数量尽可能少的原则下,做到尽可能简单,以提高重用性。
团队开发人员多,可在classname前加前缀。
如果不确定模块的上下margin特别稳定,最好不要将它们写到模块的类里,而是使用类的组合,单独为上下margin挂用于边距的原子类(例如mt10、mb20)。
模块最好不用混用margin-top和margin-bottom,统一使用margin-top或margin-bottom。
低权重原则——避免滥用子选择器
普通标签权重1,class权重10,id权重100
为了保证样式容易被覆盖,提高可维护性,CSS选择符需保证权重尽可能低。
CSSsprite的最大好处是减少HTTP请求数,减轻服务器的压力,但它却需要付出“降低开发效率”和“增大维护难度”的代价。
对于流量并不大的网站来说,CSSsprite带来的好处并不明显,而它付出的代价却很大,其实并不划算。
所以是否使用CSSsprite主要取决于网站流量。
编码风格:
推荐一行书写,能减少文件大小。
(因为调试工具多,所以忽略易读性)
Hack:
A标签问题:
Position和float的注意点:
居中问题:
P109
用表格
布局:
传说中的网格布局——宽度用百分比,content-xx-xxxx这种形式。
z-index:
第5章高质量的Javascript
命名冲突,全局变量泛滥解决办法之一:
用匿名函数将脚本包起来,让变量的作用域控制在匿名函数之内。
例如:
“(function(){})()”这种形式很巧妙,先定义一个匿名的function,然后立即执行它。
包在这个匿名函数里的变量,作用域就不再是window,而是局限在函数内部。
用匿名函数将脚本包起来,可以有效控制全局变量,避免冲突隐患。
匿名函数之间需要通信,可以设置全局变量,为了控制全局变量的数量,可以使用一个{}对象类型的变量作为全局变量,如果匿名函数间需要多个变量来做通信桥梁,可以将这些变量都做为全局变量的属性。
推荐用大写的GLOBAL作为全局变量的变量名。
用命名空间解决全局变量被覆盖问题:
将生成命名空间的功能定义成一个函数:
添加注释:
添加注释:
给程序一个统一入口——window.onload和DOMReady
可以用初始化函数,一般命名为init()
Js正式发布前做好是压缩一下,命名举例:
head.js和head-min.js(留两份,可反压缩)
注意js中最好添加注释。
Javascript的分层概念和javascript库
分层可以让代码组织条理更清晰,减少冗余,提高代码重用率。
与css类似,从上到下依次是page层、common层、base层。
事件冒泡:
javascript对先触发子容器监听事件,后触发父容器监听事件的现象称为事件的冒泡。
用if(document.all)判断浏览器【IE支持】
构造函数、原型关系:
even对象:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 编写 质量 代码 Web 前端 开发 修炼 笔记