《编写高质量代码--Web前端开发修炼之道》读书笔记
- 代码量大,结构混乱;
- 标签语义不明确,对搜索引擎不友好。
- 尽可能少地使用无语义标签div和span。
- 在语义不明显,既可以用p也可以用div的地方,尽量用p,因为p默认情况下有上下间距,去样式后的可读性更好,对兼容特殊终端有利。
- 不是用纯样式标签,例如b、font和u等,改用css设置。语义上需要强调的文本可以包含在strong或em标签里。
- 不推荐 * { margin:0; padding: 0 },推荐显示罗列出来。也不建议写成:{margin:0; padding:0; color:#000; font-size:12px;},因为这样会破坏css的继承性。
- .fl { float: left; display: inline } 其中display: inline是为了解决IE6的双外边距Bug。
- .zoom { zoom: 1 } 是IE的专有属性,为了触发IE的hasLayout。当zoom无效时,可以设置“position: relative”来触发hasLayout。
- 模块与模块之间尽量不要包含相同的部分,如果有相同的部分,应将它们提取出来,拆分成一个独立的模块。
- 模块应在保证数量尽可能少的原则下,做到尽可能简单,以提高重用性。
- 块级元素可以设置width、height属性,行内元素设置width、height属性无效。
- 块级元素可以设置margin和padding属性。行内元素设置margin和padding的水平方向,即-left和-right有效,垂直方向的-top和-bottom无效。
- 通过修改display属性来切换块级元素和行内元素。
- 它只能对行内元素实现 display: inline-block;不可以是块级元素。
- *vertical-align是针对IE对hack,这也是不友好的,能不用hack就尽量不要使用hack。
- 水平居中
(1) 文本、图片等行内元素的水平居中:给父元素设置 text-align: center
(2) 确定宽度的块级元素的水平居中:给元素设置 margin-left: auto 和 margin-right: auto
(3) 不确定宽度的块级元素的水平居中:
I. 使用table包裹,并给table设置margin: 0 auto; 优点:做法巧妙。缺点:增加了无语义标签,加深了标签的嵌套层数
II. 使用display: inline/inline-block; 优点:简单明了,结构清晰。缺点:使用inline后变成了行内元素,缺少了某些特性,如:width, hieght…
III. 使用position: relative,给父元素设置float、position:relative和left:50%,子元素设置position:relative和left:-50%。 优点:结构清晰。缺点:position:relative会带来一些副作用。 - 垂直居中
(1) 父元素高度不确定的文本、图片、块级元素的垂直居中:给父容器设置相同的上下内边距实现。
(2) 父元素高度确定的单行文本的垂直居中:line-height: 父元素高度。
(3) 父元素高度确定的多行文本、图片、块级元素垂直居中:
I. 使用table包裹,缺点:添加了无语义标签,增加了嵌套层数。
II. 对支持 display: table-cell 的IE8 和 firefox 用 display: table-cell 和 vertical-align: middle 来实现居中,对不支持的IE6-7,使用特定格式的hack:给父子两层元素分别设置{ *position: absolute; *top: 50% }和{ *position: relative; *top: -50% }来实现居中。缺点:使用来hack不利于维护,设置position: relative; position: absolute; 带来一些副作用。
- 使用匿名函数将脚本包起来,可以有效控制全局变量,避免冲突隐患。
- 让JS不产生冲突,需要避免全局变量的泛滥,合理利用命名空间以及为代码添加必要的注视。
- DOMReady比window.onload更适合来调用初始化函数。
- 在页面的最后,即</body>标签之前再调用init函数,此时页面内的DOM节点不一定都“加载完成”了,但一定都“生成”了,从而模拟DOMReady的效果。
- 将CSS放在页头,在载入html元素之前,先载入它们的样式,这样可以避免html出现无样式状态;将javascript放在页尾,先将网页呈现给用户,再来加载页面内的脚本,避免javascript阻塞网页的呈现,减少页面空白的时间。
- base层和common层都是属于框架级的,page层是属于应用级的,它可以调用base层的接口和common层的组件。
- 如果一个函数内某个因素很不稳定,我们可以将它从函数内部分离出来,以参数的形式传入,从而将不稳定因素和函数解耦。
- 跨浏览器兼容
- 组件易用
- 组件可重用
- 组件可扩展
- 代码组织有序,高内聚低耦合。
- 数据和处理函数没有直接的关联,在执行操作的时候,我们不但要选择相应的处理函数,还要自己准备处理函数需要的数据,也就是说,在执行操作时,我们需要同时关注处理函数和数据。
- 数据和处理函数都暴露在同一个作用域内,没有私有和公有的概念,整个程序中所有的数据和处理函数都可以互相访问。到了开发后期和维护阶段,容易牵一发而动全身,从而加大了修改难度。
- 面向过程的思维方式是典型的计算机思维方式––输入数据给处理器,处理器内部执行运算,处理器返回结果。
- 在程序中我们管“物件”叫做“对象”,对象由两部分组成:“属性”和“行为”,对应客观世界中物件的“状态”和“动作”。
- 属性本质其实是个变量,也就是面向过程中的数据,而行为的本质其实是函数,也就是面向过程中的处理函数。不同的是,面向过程中,数据和处理函数并没有关联起来,共同属于某个物件。而面向对象将数据和处理函数定义到了一个对象的内部,作为这个对象的属性和行为存在。
- 作为函数存在,直接使用“()”进行调用,例如“function test() {}; test();”,test被用做函数,直接被“()”符号调用。其this指向window对象。
- 作为类的构造函数存在,使用new调用,例如“function test() {}; new test();”,test作为类的构造函数,通过new进行test类的实例化。其this指向的是实例对象。
- 如果是数值型、布尔型、字符型等基本数据类型,在进行赋值时会将数据复制一份,将复制的数据进行赋值,也就是通常所说的传值。
- 如果时数组、hash对象等复杂数据类型,在进行赋值时会直接用内存地址赋值,而不是将数据复制一份,也就是通常所说的传址。
- 通过DOM节点对象的getAttribute方法。
- 通过DOM节点对象的属性(兼容性更好)。
《编写高质量代码--Web前端开发修炼之道》读书笔记的更多相关文章
- csapp读书笔记-并发编程
这是基础,理解不能有偏差 如果线程/进程的逻辑控制流在时间上重叠,那么就是并发的.我们可以将并发看成是一种os内核用来运行多个应用程序的实例,但是并发不仅在内核,在应用程序中的角色也很重要. 在应用级 ...
- CSAPP 读书笔记 - 2.31练习题
根据等式(2-14) 假如w = 4 数值范围在-8 ~ 7之间 2^w = 16 x = 5, y = 4的情况下面 x + y = 9 >=2 ^(w-1) 属于第一种情况 sum = x ...
- CSAPP读书笔记--第八章 异常控制流
第八章 异常控制流 2017-11-14 概述 控制转移序列叫做控制流.目前为止,我们学过两种改变控制流的方式: 1)跳转和分支: 2)调用和返回. 但是上面的方法只能控制程序本身,发生以下系统状态的 ...
- CSAPP 并发编程读书笔记
CSAPP 并发编程笔记 并发和并行 并发:Concurrency,只要时间上重叠就算并发,可以是单处理器交替处理 并行:Parallel,属于并发的一种特殊情况(真子集),多核/多 CPU 同时处理 ...
- 读书笔记汇总 - SQL必知必会(第4版)
本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...
- 读书笔记--SQL必知必会18--视图
读书笔记--SQL必知必会18--视图 18.1 视图 视图是虚拟的表,只包含使用时动态检索数据的查询. 也就是说作为视图,它不包含任何列和数据,包含的是一个查询. 18.1.1 为什么使用视图 重用 ...
- 《C#本质论》读书笔记(18)多线程处理
.NET Framework 4.0 看(本质论第3版) .NET Framework 4.5 看(本质论第4版) .NET 4.0为多线程引入了两组新API:TPL(Task Parallel Li ...
- C#温故知新:《C#图解教程》读书笔记系列
一.此书到底何方神圣? 本书是广受赞誉C#图解教程的最新版本.作者在本书中创造了一种全新的可视化叙述方式,以图文并茂的形式.朴实简洁的文字,并辅之以大量表格和代码示例,全面.直观地阐述了C#语言的各种 ...
- C#刨根究底:《你必须知道的.NET》读书笔记系列
一.此书到底何方神圣? <你必须知道的.NET>来自于微软MVP—王涛(网名:AnyTao,博客园大牛之一,其博客地址为:http://anytao.cnblogs.com/)的最新技术心 ...
- Web高级征程:《大型网站技术架构》读书笔记系列
一.此书到底何方神圣? <大型网站技术架构:核心原理与案例分析>通过梳理大型网站技术发展历程,剖析大型网站技术架构模式,深入讲述大型互联网架构设计的核心原理,并通过一组典型网站技术架构设计 ...
随机推荐
- vsphere 出现“在主机的当前连接状况下不允许执行该操作”
问题: 登录vsphere client启动虚拟机出现“在主机的当前连接状况下不允许执行该操作” 解决方法: 1.选择主机->右键->断开 2.选择主机->右键->连接 3.在 ...
- 动态规划 HDU 1176
免费馅饼 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- Java---对象与类的封装
一.类和对象: package cn.hncu.Myclasslearn; /** * * @author hncu_chx * * Mylove amin */ /**类是一种数据类型,声明一个类就 ...
- CodeForces 591B
题目链接: http://codeforces.com/problemset/problem/591/B 题意: 给你一串字符串,字符串里的字符全是a-z的小写字母,下面的m行,是字符串的交换方式, ...
- Chrome DevTools学习笔记
---恢复内容开始--- chrome和firefox的开发者工具大同小异,都非常强大.今天在博客园上看了这篇文章(http://www.cnblogs.com/Wayou/p/chrome-cons ...
- poj2393
题目大意: 奶酪工厂 奶牛买了一个奶酪工厂制作全世界有名的Yucky酸奶,在接下来的N周(1<=N<=10000),牛奶的价格和工作将会受到波动例如他将花费C_i (1 <= C_i ...
- [置顶] android 图片库的封装
大家在做安卓应用的时候 经常要从网络中获取图片 都是通过URL去获取 可是如果本地有图片数据 从本地获取数据不更加快一些 自己在工作中遇到这个问题 所以采用了一个URL和本地图片的一个映射关系 ...
- nginx 请求负载 转发规则设置
(1)轮询(默认) weight=5; #本机上的Squid开启3128端口,不是必须要squid server 192.168.8.2x:80 weight=1 ...
- Spring Boot 启动原理分析
https://yq.aliyun.com/articles/6056 转 在spring boot里,很吸引人的一个特性是可以直接把应用打包成为一个jar/war,然后这个jar/war是可以直接启 ...
- 《JS原型》
@(JavaScript原型) JavaScript中最晦涩难懂的恐怕就是原型了.故以此笔记本来记录原型的学习过程,日后忘了可来温习. 一切皆为对象 null--Object&Function ...