JavaScript学习笔记5 一些应该注意的细节

前言

今天是九月的第一天，祖国的花朵开学了，我也的加倍努力多学点东西了。

不求能多牛逼，只求自己能每天进步一点，不管是那方面的，能看到自己的成长是最幸福的事情，才不负自己这么多年吃的饭！

格式

我初学JS，网上查阅了一些资料，准备着手从JavaScript_DOM编程艺术第二版这本书入手，期间还会用喜马拉雅听听陪你读书（JavaScript WEB前端培训教程）。

我印象最深刻的是，js是一个从上到下的弱类型语言，所以格式特别重要。比如语句后面记得加分号，变量命名要统一格式、严格区分大小写、必要的地方加上备注等等。

一个好的编程习惯可以让你的代码更易读，更好的融入团队中，所以必须严格的要求自己的编写习惯。

向后兼容

不同的浏览器对js的支持程度不一样，绝对多数的浏览器都或多或少的支持js，而绝对多数的现代浏览器对DOM的支持都非常不错。但比较老的浏览器很可能不能理解DOM提供的方法和属性。
这点应该和CSS在不同浏览器中兼容性的问题类似

尽量减少DOM的访问次数

访问DOM的方式对脚本的性能影响非常大，如：

if(document.getElementsByTagName("a").length>0){
var links = document.getElementsByTagName("a");
for(var i=0; i

这段脚本首先取得页面所有的标签，然后检查它们的个数是不是大于0。然后如果大于0，它会再次取得所有标签，然后循环到不符合条件为止。

虽然这段代码可以运行，但它不是最优的选择。不管什么时候，只要是查询DOM中的某些元素，浏览器都会对整个页面的DOM树进行查询。这段脚本中用了两次getElementsByTagName的方法来查询，显然不是最优的选择。更好的办法是把第一次搜索的结果保存到一个变量里，然后在循环里重用这个结果，如：

var links = document.getElementsByTagName("a");
if(links.length>0){
    for(var i=0;i

这样，脚本功能没有变化，但DOM次数由两次变为了一次。再比如有一个函数是检查每个链接中的popup类，而另一个函数是检查每个链接中的hover类，那同样会造成DOM浪费。在多个函数都会取得一组类似元素的情况下，可以考虑重写代码，把搜索结果放置到一个全局变量里，或者把一组元素直接以参数的形式传递给函数。

另一个值得注意的地方是在写HTML的时候，尽量减少文档中标签的数量，过多不必要的元素只会增加DOM书的规模，延迟DOM查找元素的时间。
如：

我是一个红色的超链接
//上面这段代码只是想得到一个红色的链接，但却使用了三个元素，我们可以直接简化成下面这种形式

我是一个红色的超链接
//使用一个元素就达到了想要的效果

合并和放置脚本

使用脚本，最佳的方式是使用外部脚本文件，与HTML分离开，这样比较容易维护修改。现在的浏览器会对页面中的css和脚本文件进行缓存，多个页面如果使用的是相同的文件时，浏览器就会自动重用缓存的相同的文件。所以，如果一个脚本文件用在一个网站的不用页面时，请调用同一个文件名，如：

//一样的脚本在不同页面只需要调用同一个文件即可，以下的方式不可取

放置脚本的位置也是有讲究的，我以前第一次使用Bootstrap的时候就好奇，为什么js脚本要放置在前，而不是包含在中。

因为js脚本在加载的时候是不允许同时加载其他文件的（比如图像和其他脚本），所以放在头部可能会出现页面刷新后前面一段时候页面是空白的。
正确的方式是放在文档前，会使提升页面载速度，但可能会出现短暂的页面变形的错误（幻灯片、滚动条等由为明显），但这个根据网速因人而异，一般情况的网速都是不容易察觉的，但这个确实存在，因为js脚本最后才读取，而这个时候你的幻灯片里的图已经下载完毕等着js脚本去控制。

压缩脚本

这个一般出现在脚本编写调试完毕后才做的工序，它是把脚本中不必要的字节给去掉（空格、换行、注释），达到脚本文件小巧，加载速度快的目的。同样是Bootstrap的例子：

其中有两个js，一个为68KB，一个为36KB，但他们的功能都是一样的。
同理css也是可以进行压缩的。

我还见过HTML也压缩的。

不过，这个工序一般是调试和修改完毕后再做，并且需备份好源文件，保证以后修改的时候方便。

下面这是pdf书里的原话，工具现在已经不局限于这些了，百度自行搜索，有更多更好用的！