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但是不够详细建议查看别的书籍或教程.

第十二章 项目


过于老旧不写了.


相关文章
|
4天前
|
JavaScript 前端开发 数据处理
掌握JavaScript中的二进制运算,提升你的编程技能!
掌握JavaScript中的二进制运算,提升你的编程技能!
|
4天前
|
存储 前端开发 JavaScript
深入了解JavaScript:声明式与命令式编程
深入了解JavaScript:声明式与命令式编程
|
4天前
|
消息中间件 存储 设计模式
JavaScript发布订阅模式:实现事件驱动编程!
JavaScript发布订阅模式:实现事件驱动编程!
|
4天前
|
JavaScript 前端开发 Java
JS编程中有哪些常见的编程“套路”或习惯
【5月更文挑战第8天】JS编程中有哪些常见的编程“套路”或习惯
|
5天前
|
Web App开发 JavaScript 前端开发
通过一个实际的例子,介绍 Node.js 的事件驱动编程模式
通过一个实际的例子,介绍 Node.js 的事件驱动编程模式
15 2
通过一个实际的例子,介绍 Node.js 的事件驱动编程模式
|
6天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
11 2
|
6天前
|
JavaScript 前端开发 测试技术
在JS编程中常见的编程“套路”或习惯汇总
在当前技术圈快速迭代发展的时代,JavaScript是一种广泛应用于Web开发和移动应用开发的脚本语言,其重要性愈发凸显,尤其是随着技术的不断发展和应用场景的不断扩展,JS编程已经成为了许多开发者必备的技能之一。但是仅仅掌握JS语法和基本知识并不足够,为了写出高质量、可靠性和可维护性的代码,开发者需要掌握一些常见的编程"套路"或习惯,这些套路和习惯能够帮助开发者更好地组织和管理代码,提高开发效率,并减少潜在的错误和问题。在JS编程开发中,有一些常见的编程“套路”或习惯,可以帮助开发者编写高效、可维护且易于理解的代码。让我们来看看其中一些常见的编程“套路”或习惯。那么本文就来分享探讨在JS编程中
28 6
在JS编程中常见的编程“套路”或习惯汇总
|
6天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
14 0
|
6天前
|
JavaScript 前端开发 容器
js操作dom元素
js操作dom元素
17 0
|
2天前
|
存储 JavaScript 前端开发
从零开始学习Vue.js
Vue.js 是一种流行的前端框架,它使用简单,灵活且易于上手。如果你是一个前端开发者,并想要学习 Vue.js,本文将为您提供一个从零开始的指南。我们将探讨 Vue.js 的基础知识和常用功能,以及如何构建一个简单的 Vue.js 应用程序。