今天小编跟大家讲解下有关编写高质量代码 Web前端开发修炼之道 书摘精要 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关编写高质量代码 Web前端开发修炼之道 书摘精要 的相关资料,希望小伙伴们看了有所帮助。
(P4) Web标准由一系列标准组合而成 其核心理念是将网页的结构、样式和行为分离开来 所以它可以分为三大部分:结构标准、样式标准和行为标准。 样式标准 —— XML标准、XHTML标准、HTML标准; 样式标准 —— CSS标准; 行为标准 —— DOM标准和 ECMAscript 标准; (P23)CSS布局也就是俗称的 Div + CSS 布局 或者是 (X)HTML + CSS 布局。其核心思想就是用 CSS 来控制网页中元素的样式 包括位置、大小、颜色等; (P26) CSS布局只是Web标准的一部分。在HTML、CSS、Javascript 这三大元素中 HTML才是最重要的 结构才是重点 样式是用来修饰结构的; 先确定 HTML 确定语义的标准 再来选用合适的 CSS; (P27) 浏览器会根据标签的语义给定一个默认的样式; (P29) Web Developer —— 网页调试插件 (P43) 在语义不明显 既可以用 <P> 也可以用 <div> 的地方 尽量用 <P> 因为 <P> 默认情况下有上下间隔 去样式后的可读性更好 对兼容特殊终端有利; (P46) 如果漏写 DTD 声明 Firefox 仍然会按照标准样式来解析网页 但在 IE 中(包括 IE6、IE7、IE8)就会触发怪异模式; 一种组织 CSS 的方法 —— base.css + common.css + page.css (P58) 模块与模块之间尽量不要包含相同的部分 如果有相同部分 应将它们提取出来 拆成一个独立的模块; (P60) 模块应在保证数量尽可能少的原则下 做到尽可能简单 以提高重用性; (P71) HTML 标准的 class 属性和 id 属性不同 id 只能挂一个 而 class 可以挂多个 用空格分隔; (P81) 如果不确定模块的上下 margin 特别稳定 最好不要将它写到模块的类里 而是使用类的组合 单独为上下 margin 挂用于边框的原子类; (P81) 权重的规则是这样的 —— HTML标签的权重是1 class 的权重是10 id 权重是100; (P82) 如果 CSS 选择符权重相同 那么样式会遵循就近原则 哪个选择符最后定义 就采用哪个选择符的样式 —— “就近原则”指的是选择符定义的先后顺序 而不是 class 名的先后顺序; (P84) 为了保证样式容易被覆盖 提高可维护性 CSS选择符需保证权重尽可能低; (P85) 少使用子选择器 就需要多添加 class ; (P87) CSS Sprite “图片翻转技术” —— 将多张图片合并为一张 然后利用 background-position 属性来展示需要的部分; (P88) 是否使用 CSS Sprite 主要取决于网站流量; (P89) 一般情况下 建议尽量使用 class 少用 id ; (P93) CSS hack —— 1. IE条件注释法 <!-- [if IE]> ...... <![endif]> 2. 选择符前缀法 *html *+html 3. 样式属性前缀法 "_" "*" (P94) <a> 标签的四种状态排序问题 —— Love Hate 原则 —— L(link)ov(Visible)e H(Hover)a(Active)te; (P95) 块级元素: div、p、form、ul、ol、li 行内元素: span、strong、em 块级元素会独占一行 默认情况下 其宽度自动填满其父元素宽度; 行内元素不会独占一行 相邻的行内元素会排列在同一行里 直到一行排不下 才会换行 其宽度随元素的内容而变化; (P95) 块级元素可以设置 width、height 属性; 行内元素设置 width、height 属性无效; (P96) 块级元素可以设置 margin 和 padding 属性。行内元素只有水平方向的 margin 和 padding 产生边距效果; (P97) 块级元素和行内元素的 CSS 相关属性是 display 其中块级元素对应于 display : block 行内元素对应于 display : inline。 可以通过修改 display 属性来切换块级元素和行内元素; (P103) position : relate 和 position : absolute 都可以改变元素在文档中的位置。设置 position : relative 和 position : absolute 都可以让元素激活 left、top、right、bottom 和 z-index 属性(默认情况下 这些属性未激活 设置了也无效); 默认情况下 所有元素都是在 z-index : 0 这一层; 设置 position : relative 或 position : absolute 会让元素“浮”起来; position : relative —— 会保留自己在 z-index : 0 层的占位; position : absolute —— 会完全脱离文档流 不再在 z-index : 0 层保持占位符 其 left、top、right、bottom 值是相对于自己最近的一个设置了 position : relative 或 position : absolute 的祖先元素的 如果祖先元素全部没有设置 position : realtive 或 position : absolute 那么就相对于 body 元素; (P104) float 元素属性不会让元素“上浮”到另一个 z-index 层 它仍然让元素在 z-index : 0 层排列 float 不能通过 left、top、right、bottom 属性精确地控制元素的坐标 它只能通过 float : left 和 float : right 来控制元素在同层里“左浮”和“右浮”。flaot 会改变正常的文档流排列 影响到周围元素; 只要设置了 position : absolute 、float : left 或 float : right 中任意一个 都会让元素以 display : inline-block 的方式显示 —— 可以设置长宽、默认宽度并不占满父元素 就算显式地设置 display : inline 或者 display : block 也仍然无效; 值得注意的是 position : relative 却不会隐式改变 display 的类型; (P104) 行内元素水平居中 —— text-align : center 块级元素水平居中 (确定宽度) —— margin-left : auto 和 margin-right : auto (P111) CSS中有一个用于竖直居中的属性 vertical-align 但只有当父元素为 <td> 或 <th> 时 这个 vertial-align 属性才会生效; <td> 标签默认情况下就隐式地设置了 vertical-align 的值为 middle ; (P114) 注意: main 的内容比起 sidebar 更重要 无论 sidebar 和 main 在样式上谁左谁右 在HTML标签上要保证 main 的标签在 sidebar 之前被加载; (P136) 用匿名函数将脚本包起来 可以有效地控制全局变量 避免冲突隐患; (P147) 添加必要的注释 可以大大提高代码的可维护性 对于团队合作来说 更是十分有必要的; 让JS不产生冲突 需要避免全局变量的泛滥 合理使用命名空间以及为代码添加必要的注释; (P153) window 对象会在网页内元素全部加载完毕以后出发 onload 事件; (P153) DOMReady 只判断页面内所有的 DOM 节点 是否已经全部生成 至于子节点的内容是否加载完成 它并不关心。 DOMReady 触发的速度比 window.onload 更快; (P159) CSS 放在页头 Javascript 放在页尾; (P174) attachEvent 是 IE 支持的方法 而 addEventListener 是 Firefox 支持的方法 attachEvent 和 addEventListener 方法支持监听处理函数的叠加 而不是覆盖; (P185) 很多开源的 Javascript 库可以为我们提供强大的 base 层和 common 层 最常见的 Javascript 库有 jQuery 和 YUI 等; (P186) jQuery 本身分成两大部分: jQuery 核心文件 和 jQuery UI 文件。 jQuery UI 文件依赖 jQuery 核心文件; jQuery 核心文件提供了 base 层功能 还提供了部分 common 层功能 jQuery UI 文件提供了 common 层功能; (P194) 因为一个页面内 相同的 id 只能出现一次 所以它不适合来获取一组有“相似功能”的 DOM 节点; 用标签名来获得 DOM 节点 让程序和 HTML 结构耦合太紧; (P196) 同一页面里 id 只能出现一次 所以如果你的程序需要被多处复用 就一定不能使用 id 作为 Javascript 获得 DOM 节点的挂钩; (P198) 组件需要指定一个根节点 以保持每个组件之间的独立性; (P205) 如果一个函数内某个因素很不稳定 我们可以将它从函数内部分离出来 以参数的形式传入 从而将不稳定因素和函数解耦; (P223) 面向对象英文全称叫做 Object Oriented 简称 OO 。OO 其实包括 OOA (Object Oriented Analysis 面向对象分析)、OOD (Object Oriented Design 面向对象分析) 和 OOP (Object Oriented Programming 面向对象的程序设计)。面向对象的语法只对应 OOP 只是 OO 的一部分; OOA 和 OOD 是面向对象编程的思想 和具体语言无关 而 OOP 是面向对象编程工具 和选用语言相关; OOA 和 OOD 与具体要求语言无关 一般情况下可以轻易跨语言重用; (P224) 从大局上决定程序品质的 不是 OOP 而是 OOA 和 OOD; (P225) 函数在 Javascript 中既可以当做普通函数使用 也可以用作类来使用 在充当类的时候 它本身又担负着构造函数的责任; (P228) 用 this xxx 定义的属性是公有的 而用 var xxx 定义的属性是私有的; (P230) 原型中的行为一定是公有的 而且无法访问私有属性; (P231) 放在构造函数里的私有行为 实现真正的似有; (P253) 无论在类的构造函数中还是在原型中 this 都指向实例化的对象; (P239) 作为函数的 function ,其 this 指向的是 window 对象 而作为类构造函数的 function 其 this 指向的是实例化对象; (P259) 对于常规属性 统一使用 node.xxx 的方式读取 对于自定义属性 统一使用 node.getAttribute("xxx")读取;来源:爱蒂网