12月18, 2013

javascript在box内的一些实用方法

原文http://coding.smashingmagazine.com/2013/10/06/inside-the-box-with-vanilla-javascript/

在过去的四五年一直在定期写博客和研究其他项目,我已经遇到可能数以千计的JavaScript的文章。对于我来说,似乎这些文章大部分可以概况为两类:

  1. jQuery;
  2. 侧重于像IIFEs(立即调用模型),closures(闭包),design patterns(设计模式)。

是的,我偶然发现一些其他的文章可能不属于这两类或者其他更特殊的类。但不知何故,感觉大部分那些真正被推进社区的文章可以归入以上两类中的一类。

我觉得这些文章都很棒,我希望我们能看到的更多。但有时最简单的**JavaScript**特性的答案就在眼前 ,只是我们还没有对他们进行更多的探索。我说的是原生JavaScript,但在将来的使用中或多或少会有些跨浏览器的兼容问题。

所以,在这篇文章中,我不会谈论jQuery,而且也不会关注代码结构,概念或模式。相反地,我将会介绍一些纯JavaScript的特性,这些特性可能你之前没有考虑过,但在今天你会用到。

insertAdjacentHTML()

多年前,微软提出了称为insertAdjacentHTML()的方法,将一个HTML或XML文本的指定字符串插入到DOM的特点位置。这个特性在IE4以后都是可用的。让我们来看看它是如何工作的。

假设你有下面的HTML:

<div id="box1">
    <p>Some example text</p>
</div>
<div id="box2">
    <p>Some example text</p>
</div>

并假设你想在 #box1和#box2之间插入另一个HTML片断。你用insertAdjacentHTML()可以很容易实现:

var box2 = document.getElementById("box2");
box2.insertAdjacentHTML('beforebegin', '<div><p>This gets inserted.</p></div>');

得到如下DOM:

<div id="box1">
    <p>Some example text</p>
</div>
<div><p>This gets inserted.</p></div>
<div id="box2">
    <p>Some example text</p>
</div>

看一个简单的demo

insertAdjacentHTML()接受两个参数。第一个定义了你想放HTML的位置,相对于目标元素来说(在这个例子中,是#box2元素)。可以是以下4个字符串类型的值之一:

  • beforebegin HTML页面将被立即置于元素之前,作为同胞元素。
  • afterbegin HTML将被放置在元素内,第一个子元素之前。
  • beforeend HTML将被放置在元素内,最后一个子元素之后。
  • afterend HTML将被立即放置在元素之后,作为同胞元素。

同样,这些都是字符串值,不是关键字 ,所以他们必须放在单引号或双引号内。

第二个参数是你要插入的,也放在引号内(否则这将是一个已定义的字符串型的变量)。请注意,它应该是一个字符串,而不是一个DOM元素或元素集合,因此,它可能仅仅是文本,不是实际的标签。

如在 Mozilla Hacks介绍的一样 ,insertAdjacentHTML()一些更常用的优点,像innerHTML()它不会破坏现有的DOM元素,并且运行得更好。

如果你想知道为什么这个迄今尚未得到很多的关注,尽管能够很好的支持所有正在使用的IE版本,其原因大概是,正如Mozilla Hacks中提到的, Firefox直到第8版才支持这个方法。由于所有其他主要浏览器都支持这一点,并且Firefox自版本5以后用户已经可以自动更新,使用是相当安全的。

欲了解更多有关这个方法:

getBoundingClientRect()

利用另一个鲜为人知的getBoundingClientRect()方法,你可以获得坐标值,甚至页面上的任何元素的尺寸。

下面是它如何使用的例子:

var box = document.getElementById('box'),
    x, y, w;

x = box.getBoundingClientRect().left;
y = box.getBoundingClientRect().top;

if (box.getBoundingClientRect().width) {
  w = box.getBoundingClientRect().width; // for modern browsers
} else {
  w = box.offsetWidth; // for oldIE
}

console.log(x, y, w);

查看演示

这里,我们目标是带ID的box元素,我们通过getBoundingClientRect()方法获取#box元素的三个属性。这个方法里总结了6个顾名思义的属性:

  • top 元素的上边缘离视窗的最顶部有多少像素
  • left 元素的左边缘离视窗的最左边有多少像素
  • right 元素的右边缘离视窗的最左边有多少像素
  • bottom 元素的下边缘离视窗的最顶部有多少像素
  • width 元素的宽度
  • height 元素的高度

这些属性都是只读的。注意,这些坐标属性(top,left,right,和bottom)都与视窗的左上角有关。

上例中的if/else怎么样?IE6到8不支持宽高属性;所以,如果你想全部浏览器都支持那些属性,那你不得不使用offsetWidthoffsetHeight

insertAdjacentHTML()一样,尽管有不能支持widthheight的缺陷,但是这个方法自古以来就支持IE,而且它也支持其他相关的,所以使用还是很安全的。

我承认:利用基于偏移的值(例如offsetWidth)来获得一个元素的坐标值实际上比利用getBoundingClientRect()方法快得多。但是注意,基于偏移的值总是转成最近似的整数,然而,getBoundingClientRect()方法的属性会返回一个小数。

更多信息详见:

table API

如果你曾用JavaScript匆忙地操作DOM元素,那么你可能会用像createElement, removeChild, parentNode这些方法和相关的属性。不过你也可以用这种方法控制HTML。

但是你可能不了解,关于JavaScript创建并控制HTML 表格有一个非常具体的API,而且对浏览器的支持非常好。让我们来快速的看一下这个API的一些可用的方法和属性。

如下所示所有方法都可以在任何HTML 表格元素上使用。

  • insertRow()
  • deleteRow()
  • insertCell()
  • deleteCell()
  • createCaption()
  • deleteCaption()
  • createTHead()
  • deleteTHead()

属性如下所示:

  • caption
  • tHead
  • tFoot
  • rows
  • rows.cells

有了这些方法和属性,我们能够创建整个的表格了,包括行,单元格,标题,单元格内容。举例如下:

var table = document.createElement('table'),
    tbody = document.createElement('tbody'),
    i, rowcount;

table.appendChild(tbody);

for (i = 0; i <= 9; i++) {
  rowcount = i + 1;
  tbody.insertRow(i);
  tbody.rows[i].insertCell(0);
  tbody.rows[i].insertCell(1);
  tbody.rows[i].insertCell(2);
  tbody.rows[i].cells[0].appendChild(document.createTextNode('Row ' + rowcount + ', Cell 1'));
  tbody.rows[i].cells[1].appendChild(document.createTextNode('Row 1, Cell 2'));
  tbody.rows[i].cells[2].appendChild(document.createTextNode('Row 1, Cell 3'));
}

table.createCaption();
table.caption.appendChild(document.createTextNode('A DOM-Generated Table'));

document.body.appendChild(table);

查看演示

上面的脚本利用HTMLTableElement API的方法和属性,结合了一些常用的核心DOM方法。同样的代码如果不使用表格API的话可能更加复杂而且很不易阅读和维护。

更多信息:

结束

本文主要讨论了特殊的原生Javascript方法和属性是为了提醒我们对于原生JS的使用。我们能够很容易使用一个语言中我们熟悉的方法,不会为了解决问题更简便或更易于维护而深入研究语言本身的语法。

所以,偶尔看看box内部的东西。意思是,研究vanilla框架提供的所有javascript,而且不要太依赖插件和库,不然会使你的代码膨胀。

本文链接:https://75team.com/post/javascript在box内的一些实用方法.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。