[已读]编写高质量代码--Web前端开发修炼之道

最近老大给我们买来一些技术方面的书籍,其实很少搬着一本书好好的完整的看完过,每每看电子档的,也是打游击式的看看这章,瞅瞅那章,在那5本书中挑了一本比较单薄的<编写高质量代码web前端开发修炼之道>,看完觉得不错,它从一个整体架构上来说明如何编写高质量代码,而细处也着重说明一些比较重要的技术点,给人一种从高处俯瞰web开发.很完整的感觉,在这感谢老大,谢谢他让我们不停的进步着.下面是我看书过程中的笔记. 第一章:从网站重构说起 没什么好说的,从一个糟糕的老网页实例说明需要将web的结构,样式和行

第五章:高质量的Javascript 这章的内容我看的最久,这是跟我js基础没打好有着莫大的关系,但是还是耐着性子看完了, 不懂的东西都是百度上搜索,理解后再继续.下面是记录下来的笔记. 1)如何避免JS冲突 A:匿名函数 在多人合作一个网站时,每个人都会写自己的JS代码,定义变量的时候有可能会引起命名冲突,如何避免这种冲突隐患呢? 一种最简单有效的办法是“匿名函数”将脚本包起来,让变量的作用域控制在匿名函数之内. 匿名函数:(function (){})() 前面的括号内是函数体,后面的()表

第四章:高质量的css 1)怪异模式和标准模式 在标准模式中,浏览器根据规范表现页面:而怪异模式通常模拟老式浏览器的行为以防止老站点无法工作. 他们两者之间的差异比较典型的表现在IE对盒模型的解析:在标准模式中,网页元素的宽度=padding+border+width;而在怪异模式中,width本身就包括了padding和border. 在怪异模式中:设定width,然后margin:0 auto;是无法居中的.标准模式中可以正常工作. 于是我们尽量避免怪异模式,而选用标准模式,这样就出现了DT

正文 欲精一行,必先通十行. 在前端开发这个领域,一专多能更是非常必要的. table布局缺点: 代码量大,结构混乱: 标签语义不明确,对搜索引擎不友好. css布局:div+css,或者(x)html+css. 代码量少.结构精简.语义清新. 代码量少,浏览器端下载时间就会更短: 语义清晰就会对搜索引擎更友好. 先确定html,确定语义的标签,再来选用合适的CSS. 浏览器会根据标签的语义给定一个默认定样式. 判断网页标签语义是否良好的一个简单方法就是:去掉样式,看网页结构是否组织良好有序,是

第一章 1.Web标准由一系列标准组合而成,核心理念是将网页的结构,样式和行为分离,所以分为三大部分:结构标准,样式标准和行为标准.结构标准包括XML标准,XHTML标准,HTML标准:样式标准指CSS标准:行为标准主要包括DOM标准和ECMAScript标准. 第二章 1.注释增加代码的可读性:提高重用性--公共组件和私有组件的维护:冗余or精简:前期的构思:制定规范:团队合作 第三章 1.语义化标签 2.table布局的缺点:代码量大,结构混乱:标签语义不明确,对搜索引擎不友好. 3.CSS

(一) 避免js冲突   eg: 代码1:   <script type="text/javascript">                      var a = 123,                            b = 'sunshiine'; </script>    <script type="text/javascript">                     var a = 345,      

(一)标准模式和怪异模式的一些不同 (1)IE对盒模型的解析    在标准模式下,页面的宽度为:width+border+padding    在怪异模式下,width就包括了padding 和border (2)在怪异模式下,如下的样式不能正常表现    width:200px;margin-left:auto;margin-right:auto;在一些高级浏览器中,如果没有声明DTD类型,页面将会以标准模式进行解析,而在IE(IE6,IE7,IE8)中则会触发怪异模式 (二)关于*{marg

最近在看一本书,觉得讲得特别精辟,把一些重要的地方记录下来   使用语义化的标签   (1)好处:能够很好地自我解释,方便搜索引擎理解网页的机构,抓取重要内容,去样式后也会根据浏览器的默认样式很好地组织网页内容,具有很好的可读性,从而实现对特殊终端的兼容   (2)常见模块:   demo 1: 常见的标签   <h1>title</h1>   <a href="#">更多</a>   <p>段落</p>    

1.怪异模式和DTD 标准模式:浏览器根据规范表现页面 怪异模式:模拟老浏览器行为防止老站点无法工作(为了兼容老式浏览器的代码),如果漏写DTD(Document Type Definition文档定义类型)声明,firefox会按照标准模式来解析网页,但在IE中就会触发怪异模式. 两种模式的差异比较大,比较典型的是IE对盒模型的解析:在标准模式中,网页元素的宽度是由padding.border.width三者的宽度相加决定的,而在怪异模式中,width本身就包括了padding和border的