撰写高品质编码 Web前端开发开发设计修炼之道

日期:2021-01-20 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

(P4)
Web规范由1系列规范组成而成,其关键理念是将网页页面的构造、款式和个人行为分离出来起来,因此它能够分成3绝大多数:构造规范、款式规范和个人行为规范。
款式规范 —— XML规范、XHTML规范、HTML规范;
款式规范 —— CSS规范;
个人行为规范 —— DOM规范和 ECMAscript 规范;

(P23)CSS合理布局也便是俗称的 Div + CSS 合理布局,或是 (X)HTML + CSS 合理布局。其关键观念便是用 CSS 来操纵网页页面中元素的款式,包含部位、尺寸、色调等;

(P26)
CSS合理布局只是Web规范的1一部分。在HTML、CSS、Javascript 这3大元素中,HTML才是最关键的,构造才是关键,款式是用来装饰构造的;

先明确 HTML ,明确词义的规范,再来采用适合的 CSS;

(P27) 访问器会依据标识的词义给定1个默认设置的款式;

(P29) Web Developer —— 网页页面调节软件

(P43) 在词义不显著,既能够用 <P> 还可以用 <div> 的地区,尽可能用 <P> ,由于 <P> 默认设置状况下有左右间距,去款式后的可读性更好,对适配独特终端设备有益;

(P46)
假如漏写 DTD 申明, Firefox 依然会依照规范款式来分析网页页面,但在 IE 中(包含 IE6、IE7、IE8)就会开启奇异方式;

1种机构 CSS 的方式 —— base.css + common.css + page.css

(P58) 控制模块与控制模块之间尽可能不必包括同样的一部分,假如有同样一部分,应将它们提取下来,拆成1个单独的控制模块;

(P60) 控制模块应在确保数量尽量少的标准下,保证尽量简易,以提升重用性;

(P71) HTML 规范的 class 特性和 id 特性不一样,id 只能挂1个,而 class 能够挂好几个,用空格隔开;

(P81) 假如不确定性控制模块的左右 margin 非常平稳,最好是不必将它写到控制模块的类里,而是应用类的组成,独立为左右 margin 挂用于边框的分子类;

(P81) 权重的标准是这样的 —— HTML标识的权重是1,class 的权重是10,id 权重是100;

(P82) 假如 CSS 挑选符权重同样,那末款式会遵照就近标准,哪一个挑选符最终界定,就选用哪一个挑选符的款式 —— “就近标准”指的是挑选符界定的前后次序,而并不是 class 名的前后次序;

(P84) 以便确保款式非常容易被遮盖,提升可维护保养性,CSS挑选符需确保权重尽量低;

(P85) 少应用子挑选器,就必须多加上 class ;

(P87) CSS Sprite “照片旋转技术性” —— 将多张照片合拼为1张,随后运用 background-position 特性来展现必须的一部分;

(P88) 是不是应用 CSS Sprite 关键取决于网站总流量;

(P89) 1般状况下,提议尽可能应用 class ,少用 id ;

(P93)
CSS hack ——
1. IE标准注解法 <!-- [if IE]> ...... <![endif]>
2. 挑选符前缀法 *html *+html
3. 款式特性前缀法 "_" "*"

(P94) <a> 标识的4种情况排列难题 —— Love Hate 标准 —— L(link)ov(Visible)e, H(Hover)a(Active)te;

(P95)
块级元素: div、p、form、ul、ol、li

行内元素: span、strong、em

块级元素会占有1行,默认设置状况下,其宽度全自动铺满其父元素宽度;

行内元素不容易占有1行,邻近的行内元素会排序在同1行里,直至1行排不下,才会换行,其宽度随元素的內容而转变;

(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 这1层;

设定 position : relative 或 position : absolute 会让元素“浮”起来;

position : relative —— 会保存自身在 z-index : 0 层的占位;

position : absolute —— 会彻底摆脱文本文档流,已不在 z-index : 0 层维持占位符,其 left、top、right、bottom 值是相对自身近期的1个设定了 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 中随意1个,都会让元素以 display : inline-block 的方法显示信息 —— 能够设定长宽、默认设置宽度其实不占满父元素,即使显式地设定 display : inline 或 display : block 也依然失效;

值得留意的是, position : relative 却不容易隐式更改 display 的种类;

(P104)
行内元素水平垂直居中 —— text-align : center
块级元素水平垂直居中 (明确宽度) —— margin-left : auto 和 margin-right : auto

(P111)
CSS中有1个用于垂直垂直居中的特性 vertical-align ,但仅有当父元素为 <td> 或 <th> 时,这个 vertial-align 特性才会起效;

<td> 标识默认设置状况下就隐式地设定了 vertical-align 的值为 middle ;

(P114) 留意: main 的內容比起 sidebar 更关键,不管 sidebar 和 main 在款式上谁左谁右,在HTML标识上要确保 main 的标识在 sidebar 以前被载入;

(P136) 用密名涵数将脚本制作包起来,能够合理地操纵全局性自变量,防止矛盾隐患;

(P147)
加上必要的注解,能够大大提升编码的可维护保养性,针对精英团队协作来讲,更是10分必须的;

让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)
由于1个网页页面内,同样的 id 只能出現1次,因此它不合适来获得1组有“类似作用”的 DOM 连接点;

用标识名来得到 DOM 连接点,让程序流程和 HTML 构造藕合太紧;

(P196) 同1网页页面里 id 只能出現1次,因此假如你的程序流程必须被多处复用,就1定不可以应用 id 做为 Javascript 得到 DOM 连接点的挂钩;

(P198) 组件必须特定1个根连接点,以维持每一个组件之间的单独性;

(P205) 假如1个涵数内某个要素很不平稳,大家能够将它从涵数內部分离出来出来,以主要参数的方式传入,从而将不平稳要素和涵数解耦;

(P223)
朝向目标英文全称叫做 Object Oriented ,简称 OO 。OO 实际上包含 OOA (Object Oriented Analysis,朝向目标剖析)、OOD (Object Oriented Design,朝向目标剖析) 和 OOP (Object Oriented Programming,朝向目标的程序流程设计方案)。朝向目标的英语的语法只对应 OOP ,只是 OO 的1一部分;

OOA 和 OOD 是朝向目标程序编写的观念,和实际語言不相干,而 OOP 是朝向目标程序编写专用工具,和采用語言有关;

OOA 和 OOD 与实际规定語言不相干,1般状况下能够随便跨語言重用;

(P224) 从大局上决策程序流程质量的,并不是 OOP ,而是 OOA 和 OOD;

(P225) 涵数在 Javascript 中既能够作为一般涵数应用,还可以用作类来应用,在当做类的情况下,它自身又肩负着结构涵数的义务;

(P228) 用 this xxx 界定的特性是公有制的, 而用 var xxx 界定的特性是独享的;

(P230) 原形中的个人行为1定是公有制的,并且没法浏览独享特性;

(P231) 放在结构涵数里的独享个人行为,完成真实的似有;

(P253) 不管在类的结构涵数中還是在原形中,this 都指向案例化的目标;

(P239) 做为涵数的 function ,其 this 指向的是 window 目标,而做为类结构涵数的 function ,其 this 指向的是案例化目标;

(P259) 针对基本特性,统1应用 node.xxx 的方法载入,针对自定特性,统1应用 node.getAttribute("xxx")载入;