Web前端的知识之旅哟—— JavaScript终章

感觉js部分应该没什么要介绍的了，所以打算这一篇介绍一些零碎的东西。

• DOCTYPE三种标准模式的写法

1.<!DOCTYPE html>

2.<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

3.<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

当还是XHTML的时候一般用第三种，但是现在我们一般直接用第一种写法就可以了，第一种是HTML5规范的标准写法。

• label标签

label标签的作用主要是用来绑定的，它里面有一个for属性。

通过for属性，里面写上要绑定的标签的id，就可以把这个label标签绑定到相对应的标签上了。


1.   
2.  <label for=“demo”>username:</label>
3.  <input type=“text” id=“demo” />

现在我们点击username这个label标签，也可以触发input的聚焦事件，就好像这两个是一个东西一样，可以提高用户体验。

另外，我们如果在js代码中要表示label标签的for属性的话，要写htmlFor，而不能直接写for。

• 属性映射

这里的映射是指标签的行间属性（特性）和DOM对象的属性之间的映射关系。



1.   
2.  <div class=“demo” id=“only” data-log=“123” abc=“a”></div>

class和id属性是系统自带的，后两个属性是我们自己写的属性。

而我们获取出来的DOM对象div，可以通过div.className和div.id的方式来改写行间的属性值，但是却没法通过div.data-log或者div.abc来改写行间属性。

这是因为系统默认的属性之间是有一种映射关系的，我们可以直接修改DOM的属性来修改行间属性，但是对于我们自己设置的属性，就只能通过setAttribute和getAttribute来设置和获取了。

js引擎特殊赋予的映射关系有：class、id、style、value等属性。

• img图片预加载

其实图片预加载是一种思想，而不是一种代码方式。



1.   
2.  var count = 0,
3.      img;
4.  var timer = setInterval(function () {
5.      count++;
6.      if(count == 5) {
7.          img = document.createElement(‘img’);
8.          img.src=‘xxx’;
9.          document.body.appendChild(img);
10.          clearInterval(timer);
11.      }
12.  }, 1000);

如果我们加入的图片很大的话，展示出来的效果将是一点一点的往下加载，导致很久图片整体才会显现出来。因此，我们为了让图片显示出来的时候就是整体，只需要让图片的src提前下载，等到需要展示的时候直接加入进来就可以。



1.   
2.  var count = 0,
3.      img = document.createElement(‘img’);
4.  img.src=‘xxx’;
5.  var timer = setInterval(function () {
6.      count++;
7.      if(count == 5) {
8.          document.body.appendChild(img);
9.          clearInterval(timer);
10.      }
11.  }, 1000);

但是凡事优化就会有利有弊，这种方式的弊端就在于前期会很占用网速。

• 模拟提取类名



1.   
2.      Document.prototype.getClassName = function (className) {
3.          // 获取出来所有的元素
4.          var allEle = document.getElementsByTagName(‘*’),    
5.              retArr = [];
6.          // 遍历每一个元素
7.          for (var i = 0, len = allEle.length; i < len; i++) {
8.              // 把这个元素的所有类名都提取出来
9.              var classNameArr = [];
10.              if (allEle[i].className) {
11.                  classNameArr = allEle[i].className.split(‘ ‘);
12.                  // 去除掉类名数组中的空字符串
13.                  classNameArr = classNameArr.filter(function (value, key) {
14.                      return classNameArr[key];
15.                  });
16.              }
17.              
18.              for (var j = 0, classlen = classNameArr.length; j < classlen; j++) {
19.                  
20.                  if(classNameArr[j] == className) {
21.                      retArr.push(allEle[i]);
22.                      break;
23.                  }
24.              }
25.              
26.          }
27.          return retArr;
28.      }

getElementsByTagName(‘*’)的意思是把文档中所有的标签都选择出来的意思。

这样我们就可以模拟jQuery的类名提取方式了。

•文档碎片documentFragment

这个文档碎片就是我们前面提到过nodeType区分节点时候的属性值11的那个文档碎片节点。

文档碎片可以当做容器来进行效率的优化。

当我们动态生成很多元素然后加入到文档的时候，因为每一次添加页面都会重新重绘重排一次，效率非常低。

这个时候我们就可以把这些元素全部放到文档碎片里面，然后最后直接把整个文档碎片放进文档就可以了，这样页面只需要重绘重排一次即可。



1.   
2.  var fragment = document.createDocumentFragment();
3.  var div = document.createElement(‘div’);
4.  var span = document.createElement(‘span’);
5.  var p = document.createElement(‘p’);
6.  fragment.appendChild(div);
7.  fragment.appendChild(span);
8.  fragment.appendChild(p);
9.  document.body.appendChild(fragment);

但是论时间添加事件的话，文档碎片的添加速度可能会比直接添加的速度要慢，这只是理论上可以节省添加时间，但是在其他方面确实存在优化效果。