JavaScript的DOM编程艺术读后总结(2021年第一本书)

简介: JavaScript的DOM编程艺术读后总结(2021年第一本书)

准备一个月读一本书并写下读书感悟,以便后续预习

第一章 JavaScript的简史


主要讲了当年W3C标准未出现之前,各个浏览器都需要前端人员去写多套代码,并且需要去判断是哪个浏览器,因为每个浏览器定义的标准不一样,这就加大的前端毫无意义的工作量,后来W3C标准制作之后,加上WPaS小组的大力推动,很多浏览器商都采用了W3C规定的浏览器规范,浏览器大战IE的获胜在于很多电脑都装windows系统,而windows系统预装的就是ie浏览器,不过现在很多手机都采用了webkit内核的浏览器(内核===浏览器引擎);

第二章 JavaScript的语法


主要用于复习下前端JavaScript的语法,有语句 变量和数组以及操作符,函数和对象.(es5的就不写了)

第三章 DOM


D代表是document(文档),也就是文档,O代表obiect(对象),对象有用户自定义对象和宿主对象(浏览器提供的对象,如window对象,也就是bom对象)以及内置对象(JavaScript里面的对象),M代表模型.节点

dom中有很多节点,元素节点:标签的名字就是元素节点, 文本节点:文本节点都基本都包含在元素节点里面,文字就是文本节点,  属性节点:属性节点都包含在元素节点中,一个属性就是属性节点获取元素

document.getElementById(id名) //文档中每一个元素都是对象 document.getElementsByTagName(id名) //是一个数组 document.getElementsByTagClass(类名)

获取属性或添加属性

获取属性只能通过元素节点进行获取,不能通过dom对象进行获取
aa.getAttribute('title');
添加属性
aa.setAttrlbute('hti',13)

第四章  javascript图片库


这是一个小案例,不推敲了,太老的小项目了

第五章 最佳实践


主要讲了性能优化以及浏览器是否支持语法的判断条件性能优化

冗余:相同目的的代码过多,应把代码进行优化减少相同目的代码的出现,减少冗余,冗余代码主要分两部分:多余执行的冗余和代码数量的冗余.

耦合度过高:各个模块依赖程度过高,缺少任何一个模块代码都运行不起来,应进行解耦,让代码对各个模块依赖程度减小,缺少某一模块也行能正常运行,只不过缺少了部分功能而已.

  1. 分离代码,将js css代码进行分离,因为浏览器会对多个站点中使用缓存过的相同脚本.
  2. js中减少dom的获取和标记,因为每一次dom的获取浏览器都会去搜索dom树,从中查找匹配的元素,所以尽量把搜索的次数减少. *判断浏览器是否支持新语法
//当前浏览器要是不支持该语法将执行false,不执行下面代码
if(!document.getElementsByTagName||!document.getElementById){
return false;
}
  1. 对相同的代码进行复用,减少代码冗余,一段程序能够执行既定的任务,但是经过优化,能够同样达到目的,执行效率增强,且代码数量减少了,说明删除的代码就是程序的冗余代码。冗余代码主要分两部分:多余执行的冗余和代码数量的冗余.
  2. 把多个脚本文件进行合并,减少页面发送请求的数量,这也是性能优化首先考虑的.
  3. 我们平时喜欢把脚本文件放在head中,但是这种放置方法有一个问题,位于head标签中的脚本文件过多会导致浏览器无法并行加载其他文件,因为根据http规范来说,浏览器每次会从同一个域名中同时下载俩个文件,下载其间,浏览器不会下载其他任何文件,即使来自不同域名的也不会进行下载,所有其他资源要等脚本文件加载完毕后才会下载其他.所以要把脚本文件放到文档最后body之前,这样就可以让页面变的更快.
  4. 压缩代码,压缩代码可以提高加快速度,去掉代码中的注释和空格,这样可以很好的减小文件大小.

第六章 案例研究


也没啥可写的这个案例研究,我就把自己认为有意义的写一下吧

  1. 变量名不能采用JavaScript的保留字或方法,尽量采用和当前事情有意义的名字.
  2. 函数设置只能设置一个出口和入口,也可以集中设置出口和入口,出口一般函数最开始.
function sum(a){
一个出口
if(!a)return;
第二个出口
if(a!=1)return;
//这俩个在一块集中所以可以算作是一个出口
出口一般都写在函数开头
}
//入口
sum(1)
入口
sum(2)
  1. 最好是放到文档结尾且body结尾之前,这样最好也可以采用window.onload,因为脚本文件一旦放到head里面执行,则会js脚本加载完成了,但是此时的DOM是不完整的,有的元素则无法获取到,无法把事件绑定上去.
//onload事件,网页加载完毕后立即执行该事件
window.onload=function(){
放执行函数
}
  1. 平稳退化:指的是如果不支持新的属性也可以退化到原始的页面,比如不支持js可以退化到支持html的使用,耦合度低.(结构和行为分离程度越大越好)

第七章 动态创建标记


没啥重要的,就讲了下创建元素,插入元素,以及一些插入元素的方法,下面直接讲重点ajax.

2005年ajax横空出世,用于概括异步加载的技术,以前web应用需要大量的刷新页面,用户点击请求,请求发送给服务端,服务端在
根据用户的操作在返回新页面.即使用户看到的只是一小部分的操作也要刷新和重新加载整个页面.使用ajax可以做到只更新页面
中的一小部分,其他内容不需要重新加载.
ajax的优势就是对页面的请求以异步的方式发送到服务器,而服务器不会用整个页面来响应请求,他会在后台处理请求,同时用户
还能继续浏览页面并与页面交互,脚本也可以按需加载和创建页面内容,不会打断用户的浏览体验.ie跟其他浏览器创建的xmlhttp
对象不同,以后出一下关于ajax书的阅读笔记.
ajax是异步的有的时候服务器可能反应快有的时候慢,如果是往本地硬盘发送ajax请求的话这请求个响应基本是同时的,如果是手
机浏览器,响应则需要很长时间
其中提到了hijax技术,不是极端的完全采用 ajax 数据与表现分离的做法,而是稍微对传统页面增强一下,javascript 仅仅作为
局部刷新的桥梁,所有逻辑仍然放在服务器上,相对于传统做法,Hijax 将页面进一步划分为分离的模块.当浏览器支持ajax时,只需
要将相应参数传递给要更新的模块页面,得到该模块产生的html,由javascript的innerHTML局部刷新该模块所在区域,当浏览器
不支持ajax时,则相应参数传递给整个页面刷新,相应模块读取参数更新.

第八章 充实文档的内容


html5的标准模式和怪异模式的区别?
html5的标准模式是W3C制定了统一的浏览器标准后,不同浏览器对页面的渲染有了统一的标准,即Strict mode(标准模式或
严格模式);
html5的怪异模式是在W3C制定统一的浏览器标之前,不同的浏览器在页面的渲染上没有同一的规范,产生了差异,即Quirks mod
e(怪异模式或兼容模式);

第九章 无可写内容(内容过于老旧)


第十章 无可写内容(内容过于老旧)


第十一章 HTML5


讲述了html5新语义化标签,讲解了音频标签,canvas但是不够详细建议查看别的书籍或教程.

第十二章 项目


过于老旧不写了.


相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
3月前
|
存储 JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果+1
JavaScript编程实现tab选项卡切换的效果+1
|
1月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
1月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
1月前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包:解锁编程潜能,释放你的创造力
【10月更文挑战第25天】本文深入探讨了JavaScript中的闭包,包括其基本概念、创建方法和实践应用。闭包允许函数访问其定义时的作用域链,常用于数据封装、函数柯里化和模块化编程。文章还提供了闭包的最佳实践,帮助读者更好地理解和使用这一强大特性。
19 2
|
2月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
72 4
|
2月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
44 0
|
2月前
|
JavaScript 前端开发 UED
【前端基础篇】JavaScript之DOM介绍2
【前端基础篇】JavaScript之DOM介绍
23 0
|
2月前
|
JavaScript 前端开发 搜索推荐
【前端基础篇】JavaScript之DOM介绍1
【前端基础篇】JavaScript之DOM介绍
37 0
|
3月前
|
JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果
JavaScript编程实现tab选项卡切换的效果