JavaScript DOM编程艺术-学习笔记（第五章第六章）

Posted 2020-08-23

第五章：

1.题外话：首先大声疾呼，"js无罪"，有罪的是滥用js的那些人。js的father 布兰登-艾克，当初为了应付工作，10天就赶出了这个js，事后还说人家js是c语言和self语言”约“的产物，（百度百科说的，这些）。。。。。一个可怜的孩子-js。然后命运弄“人”，js此时已世人皆知。可能是因为js的毁誉参半，它老爸才不想承认它吧。如果js会说话，它可能会给它布兰登-艾克说，“你当初怎么不把*******在墙上”。这让我想起了，一个老故事：老木匠干了一辈子，退休前，领导说，你再最后建一座房子，老木匠心里只想着辞职，房子建的着急，也不好。房子完工以后，老板把房子钥匙给了老木匠，说是送给他的。。人呐，还是认真工作，认真生活的好。事情永远总是猜不到的。

2.题外话：大家都在赶潮流，而不问实际需求，我们公司的客户就是这样的滴：“这个人家的网站有，我们也要有。”

3.1)平稳退化：①含义：让禁用了js的用户，以让可以访问网站。（网上大部分人说，没有人会去特意关闭js。还有还有-‘“关闭js的那些刁民，是不配享受这高大上的技术的呢”）

                        ②这么做，虽然让禁用了js的用户体验不如没有禁用之前的好，但总比不能访问的好。

　　　　　　　③平稳退化的：有利于seo，因为搜索机器人大都不认识js。

                         ④说实话，除了书中例举的这个href的实例，我还没有想到其它的平稳退化的例子。。。。。。。。。。

  3.2）渐进增强：①含义：分离内容（html），样式（css），行为(js)

                          ②打个"碧玉"：一颗糖，报上糖纸（样式）很漂亮，去掉糖纸依然，可以食用（内容）

 3.3）向后兼容：①含义：铺好退路，做好预防----如果网页中，没有了正在使用的元素或者无法获取需要使用的元素怎么办。

　　　　　　　②常用技术-对象检测技术（现在常用方法。使用时记得去掉括号，否则测试的将是结果。效果相当于对浏览器的一个警示牌：如果没有这个方法，请你离开）

                                          -浏览器嗅探技术（随着浏览器的五花八门，这种技术多少显的有气无力）

4.小知识点：①获取当前链接的href属性-this.href

                      ②return false；常常用于阻止a标签的默认跳转行为和表单的默认提交行为（submit）。含义是告诉浏览器：”按照该链接没有点击的情况采取行动“

                         1 <a href="https://www.baidu.com" onclick="windowOpen(this.href);return false;">点我哦</a> 

　　　　　　　这里同时采用了一下书中提及的平稳退化的技术-即使用户关闭了js，js链接以前可以跳转。

                       ③return  后面的代码不会执行（一般为了阅读性也写作return false），但是只对当前函数有效：

                        

 1         (function(){
 2             if(1==2){
 3                 console.log("1");
 4                 return false;
 5             }
 6             for (var i = 0; i < 1; i++) {
 7                 console.log("2");
 8                 return false;
 9             }
10             console.log("3");
11         })();
12         console.log("4");

 

　　　　　　　　最后会打印出2和4

 

5.题外话：网站不过是文档和数据的结合，图片不过是像素点的组成。万物归于简单，由简单又幻化出复杂。

6.题外话：前端收集用户数据---数据存入数据库----生成模型----用于决策等

                 决策----生成模型-----数据库生成数据---前端展示数据

7.题外话：这本书还是挺适合刚刚工作的人的。可以说是一种查漏补缺把

8.性能优化：①尽量少去访问dom：

                       工作的时候，会偷懒，写如下的代码：

                        1 if(document.getElementById("imgShow")){ 2 alert() 3 } 

　　　　　　   但是这样写：a，每次判断，都会搜索整个dom树。效率低下，不如搜索一次，存在变量中的方法效率高。

                  ②减少dom标签。

                         前几天，网站轮播需要修改，我想的是增加一个div+js去实现效果。而项目经理的意思是通过css去实现

　　　　　　　 过多的dom标签会增加dom树的规模，增加搜索成本。

                   ③合并和放置脚本：

                             一直都知道js应该放在末尾，当时具体在哪里不是很清楚。----应该放在文档末尾，</body>标签以前

                    ④压缩脚本：

                            除了书中提及的三个工具，还可以使用grunt。

第六章：

  1.此章，主要是把上一张的思想，结合到实例中。

  2.结构化程序设计：

    工作中，会写出如下代码：

   

1                 if (222) {
2                   if(111){
3                     if(3333){
4 
5                     }
6                   }
7                 }  

 

这些写，会对后期的修改带来很多不便。并且阅读不方便。

这样的思路是：如果正确就这行。可以修改一下思路为，如果错误就停止。则代码变成了：

                if (222) {return false;}
                if (111) {return false;} 
                if (333) {return false;} 

也可以用if else-if结构去代替结构化的写法：

                if (222) {}
                else if (111) {}
                else if (333) {} 

3.小知识点：①for循环中经常用到i，变量命名为i是一种传统做法：i的含义是”increment“（递增）

                      ②可以使用三元运算去代替if-else，使得代码简短，不过逻辑关系表达不明显。用哪个，看你心情喽

                     ③onclick事件对于键盘的访问的支持已经不错了（ps：在所有浏览器里，用tab键移动到某个链接以后，然后按下回车都会出发onclick事件），所以无需特意去绑定一次键盘事件。

                     ④如何让ul里面的li横向排列，并且居中呢？ul设置为text-align：center；li设置-display-inline即可。网上好多使用postion：relative的方法。好麻烦的说。

4.题外话：人生就好像在网上查东西，查着查着就跑偏了，你得经常问一下自己：”我在干嘛“。

5.题外话：有一种小时候记录流水账的感觉。不过能说出，看书的想法也是一种不错的感觉。

6.题外话：网上的太多东西都是抄袭，抄书（一字不差），抄百度百科，抄抄抄，换个背景就说自己是自己写的。。。。