DOM UI Advanced Intermediate Dev Javascript

kLib: 快速、小巧、易用

Anshu Krishna

4.96/5 (7投票s)

2013 年 5 月 22 日

CPOL

7分钟阅读

28913

446

kLib: 一个小巧的库，可以非常轻松地进行 DOM 操作。

kLib: 是什么和为什么

{
编辑：已添加新版本 (v1.1.0)
主要亮点

所有与覆盖层相关的函数都已从主库中分离出来。现在主库中只有 DOM 操作函数。覆盖层函数已添加到名为 kLib-Overlay 的新子库中。
新增了用于添加兄弟元素、文本节点和元素树的新函数。
进行了主要的内部代码重构，从而减小了文件大小。
提高了许多函数的效率。

链接到 kLib-CSS 文章
链接到 kAlert()、kConfirm()、kPrompt() 演示。
}

任何有幸参与过 Web 应用程序客户端开发的人都不得不处理动态创建/修改 HTML 元素。通常，人们会像下面这样在 JavaScript 中创建新的元素树：

(function(){
    document.getElementById("mydiv").innerHTML = 
      '<h2 id="myHeader"> My Header </h2> ' + 
      '<div class="blueBorder"> <p> ' + 
      '<span>Hello World</span> </p> </div>';
    document.getElementById("myHeader").
             firstChild.nextSibling.firstChild.firstChild.onclick=function(){
        alert("Span Clicked");
    }
})();

尽管 JavaScript 提供了创建元素的原生函数，但我发现人们不愿使用它们。（或许是因为这会增加代码量。）我个人总是使用 JavaScript 的函数来创建元素，主要是因为它会返回一个元素节点的引用，该引用可以直接用于进一步的操作（例如添加事件处理程序）。此方法还允许我在不修改任何相关代码的情况下更改元素在元素树中的位置。

(function(){
    var div = document.getElementById("mydiv");
    var div2 = document.createElement("div");
    var h2 = document.createElement("h2");
    h2.setAttribute("id", "myHeader");
    h2.innerHTML = "My Header"
    // or h2.appendChild(document.createTextNode("My Header"));

    var p = document.createElement("p");
    var span  = document.createElement("span");
    span.innerHTML = "Hello World";
    p.appendChild(span);
    div2.appendChild(p);
    div2.className = "blueBorder";
    div.appendChild(h2);
    div.appendChild(div2);
    span.onclick = function(){
        alert("Span Clicked");
    }
})();

第二个代码实现了相同的结果，但代码稍微长一些。但它让我直接访问 span 元素以添加事件处理程序。如果存在大量此类操作（通常情况是这样），那么第二种方法更有意义，因为我们不需要解析 DOM 树来查找目标元素。

我想要获得两全其美的好处，即代码量小并且易于访问和直接控制。
为此，我开始编写 kLib。第一个 alpha 版本使我能够实现以下结果：

(function(){
    var div = document.getElementById("mydiv");
    div.addChElem("h2").setAttr(
           {id:"myHeader"}).innerHTML="My Header";
    var span= div.addChElem("div").addClass(
      "blueBorder").addChElem("p").addChElem("span");
    span.innerHTML="Hello World";
    span.onclick = function(){
        alert("Span Clicked");
    }
})();

这稍微减少了代码量。经过进一步开发，kLib 的当前版本提供了：

(function(){
    var tree = document.getElementById("mydiv").addChElemTree(
      ["hRef=h2#myHeader", "div.blueBorder", 
      ["p", ["sRef=span"]]]);
    tree.nodes.hRef.innerHTML = "My Header";
    tree.nodes.sRef.innerHTML = "Hello World";
    tree.nodes.sRef.onclick = function(){
        alert("Span Clicked");
    }
})();

此方法允许我在一行代码中创建整个元素树（无论大小）。kLib 包含许多此类函数，让您的生活更轻松。

除了 DOM 操作函数外，kLib 还提供了一组函数来在任何可见的 HTML 元素（包括 body）上创建覆盖层 [例如，覆盖的 Facebook 照片查看器]。覆盖层的创建非常灵活，可用于创建几乎任何类型的覆盖层。
除了通用的覆盖层函数外，kLib 还包括 alert、confirm 和 prompt 函数的覆盖层（非阻塞）替代版本。

这是一项正在进行的工作。我打算在我有空闲时间的时候继续开发它。
以下是 kLib 提供的函数列表。我已在 Chrome（Win 和 Android）、Firefox（Win 和 Android）、Opera Mobile（Android）和 IE10 中对其进行了测试。
如果您发现任何错误或有任何改进代码的建议，请随时通过电子邮件与我联系。
您觉得它有用吗？请在评论中告诉我。

kLib 函数/属性的简要描述

版本：1.0.4

[编辑：代码中存在一些拼写错误。我已经纠正了所有我能找到的错误。我附上了一份包含相同更正的新文档文件。]

添加到 String.prototype 的方法
1. trim()
  返回一个新字符串，其中字符串开头和结尾的空格已被移除。
  示例
```
var msg = "  Hello  ";
var trimmedMsg = msg.trim();//This makes trimmedMsg="Hello"
```
2. ltrim()
  返回一个新字符串，其中字符串开头的空格已被移除。
  示例
```
var msg = "  Hello  ";
var trimmedMsg = msg.ltrim();//This makes trimmedMsg="Hello   "
```
3. rtrim()
  返回一个新字符串，其中字符串结尾的空格已被移除。
  示例
```
var msg = "  Hello  ";
var trimmedMsg = msg.rtrim();//This makes trimmedMsg="   Hello"
```
添加到 HTMLElement.prototype 的方法
1. empty()
  移除所有子元素。
  返回：调用元素节点的引用。
  示例
```
node.empty();
```
2. removeSelf() 别名 rmSelf()
  移除元素
  示例
```
node.removeSelf();
```
3. hasClass(string className)
  确定元素是否具有某个类。
  返回：True/False。
  示例
```
if(node.hasClass("class1"))
alert("class1 is present");
```
4. removeClass(string className [,string className]) 别名 rmClass(string className [,string className])
  移除一个或多个 CSS 类。
  返回：调用元素节点的引用。
  示例
```
node.removeClass("class1", "class2");
```
5. addClass(string className [,string className])
  添加一个或多个 CSS 类。
  返回：调用元素节点的引用。
  示例
```
node.addClass("class1", "class2");
```
6. toggleClass(string className [,string className])
  切换一个或多个 CSS 类（即，如果类存在，则将其移除；如果类不存在，则将其添加）。
  返回：调用元素节点的引用。
  示例
```
node.toggleClass("class1", "class2");
```
7. addEventHandler(string eventType, function handler)
  附加一个事件监听器。
  返回：调用元素节点的引用。
  示例
```
node.addEventHandler("click", 
  function(){alert("Clicked");}).addEventHandler(
  "mouseout", function(){alert("Mouse Out");});
```
8. removeEventHandler(string eventType, function handler)
  分离一个事件监听器。
  返回：调用元素节点的引用。
  示例
```
node.removeEventHandler("click", 
  clickHandler).removeEventHandler("mouseout", mouseoutHandler);
```
9. setAttributes(obj attributes) 别名 setAttr(obj attributes)
  设置元素的零个或多个属性。
  返回：调用元素节点的引用。
  示例
```
node.setAttributes({
	type: "button",
	value: "Hello"
});
```
10. setStyles(obj stylesObj)
  设置元素的零个或多个内联 CSS 样式。
  返回：调用元素节点的引用。
  示例
```
node.setStyles({
	color: "blue",
	background: "#F55",
	"-webkit-transform": "rotate(180deg)",
	border: "1px solid black"
});
```
11. appendChildElement(string tagName) 别名 addChElem(string tagName)
  追加指定类型的子元素。
  返回：子元素的引用。
  tagName 参数的格式与 newElement() 所指定的一样。//newElement() 定义在全局方法部分
  示例
```
var div = node.appendChildElement("div").addClass("myclass");
div.removeClass("myclass");
```
12. prependElement(string tagName) 别名 prependElem(string tagName)
  在当前元素的父元素中，将指定类型的子元素添加到当前元素的前面。
  返回：子元素的引用。
  tagName 参数的格式与 newElement() 所指定的一样。//newElement() 定义在全局方法部分
  示例
```
var div = node.prependElement("div");
```
13. appendChildTextNode(string content [, bool multiline]) 别名 addChTxtNd(string content [, bool multiline])
  追加一个文本节点，并向其中添加指定内容。
  返回：子文本节点的引用。（当 multiline 为 true 时，它返回一个包含所有文本节点引用的数组）
  示例
```
var textnode = node.appendChildTextNode("Hello World");
var txtnodes = node.appendChildTextNode("Hello\nWorld", true);
```
14. prependTextNode(string content [, bool multiline]) 别名 prependTxtNd(string content [, bool multiline])
  在当前元素的父元素中，将指定内容的子文本节点添加到当前元素的前面。
  返回：子文本节点的引用。（当 multiline 为 true 时，它返回一个包含所有文本节点引用的数组）
  示例
```
var textnode = node.prependTextNode("Hello World");
var txtnodes = node.prependTextNode("Hello\nWorld", true);
```
15. appendChildElementTree(obj treeObj [, bool makeDumpString)] 别名 addChElemTree(obj treeObj [, bool makeDumpString)]
  它通过一个特制的数组接收元素节点树数据，然后将树追加到调用节点。
  返回：一个包含所有节点的树（数组形式）（格式与传入时相同）。
  当为 makeDumpString 传入 true 时，返回的数组有一个名为 dumpStr 的特殊属性，可用于轻松识别树中任何特定节点的数组索引。
  标签名称的格式与 newElement() 所指定的一样。//newElement() 定义在全局方法部分。
  用户还可以提供属性名来为树中的任何元素索引创建别名。
  这将允许用户直接访问任何元素（如果他们愿意）。
  如果提供了名称，则引用属性将在树的 nodes 属性中生成。
  示例
```
var t = document.body.addChElemTree(["table#maintable", 
  ["tr", ["td", "td"]], 
  ["tr.blue", ["td", "namedTD=td"]]], true);
console.log(t.dumpStr);
t[1][1][0].innerHTML="Hello";
t[1][1][1].innerHTML="World";
t[2][1][0].innerHTML="Anshu";
t[2][1][1].innerHTML="Krishna";
//Since a name was provided for the index [2][1][1] therefore
// t[2][1][1] is same as t.nodes.namedTD. So this line can also be written as
t.nodes.namedTD.innerHTML="Krishna";
```
16. overlay([obj node])
  添加一个类名为“klib-overlay-main-div”的子 div。然后设置此 div 以作为覆盖层作用于自身（即此元素）。添加一个类名为“klib-overlay-container-div”的容器 div。然后将指定的节点作为子节点添加到容器 div 中。
  还将容器置于覆盖层的中心。
  返回：调用元素节点的引用。
  示例
```
var o1 = node1.overlay(); //Blank Overlay

var div = document.createElement("div");
div.appendChildTextNode("Hello World");
var o2 = node2.overlay(div); //Overlay with content node.
```
全局方法
1. newElement(string tagName) 别名 newElem(string tagName)
  返回指定标签类型的新 HTMLElement 对象。
  tagName 参数的格式可以添加元素的 id 或 CSS 类。
  例如
  对于 {div, id="maindiv"}，tagName = "div#maindiv"
  对于 {div, class="bluediv"}，tagName = "div.bluediv"
  对于 {div, id="maindiv", class="bluediv"}，tagName = "div#maindiv .bluediv"
  
  示例
```
var div = newElement("div");
document.body.appendChild(div);

var div = newElement("div#maindiv");
var div = newElement("div.bluediv");
var div = newElement("div#maindiv .bluediv");
var div = newElement("div.bluediv bolddiv");
var div = newElement("div#maindiv .bluediv bolddiv");
```
2. newTextNode(string content) 别名 newTxtNd(string content)
  返回一个具有指定内容的新文本节点。
  示例
```
var txt = newTextNode("Hello World");
document.body.appendChild(txt);
```
3. kAlert(string message)
  使用覆盖层显示警报消息。
  返回：警报元素的引用。
  示例
```
var kA = kAlert("Hello\nWorld");
```
4. kConfirm(string message)
  使用覆盖层显示确认消息。
  返回：确认元素的引用。
  示例
```
var kC = kConfirm("Confirmation required.\nDo you want to proceed?");
```
5. kPrompt(string message, [string/number placeHolder, string/number defaultValue])
  使用覆盖层显示输入提示。
  返回：提示元素的引用。
  示例
```
var kP = 
  kPrompt("Enter a number.\n(Range: 0 to 100).","Enter number here");
```

覆盖层属性

resize()

在需要时调整覆盖层大小的函数。
示例

var o = node.overlay();
/*
* Some code which resizes node
*/
o.resize();

content

覆盖层中内容 div 的引用。
示例

var o = node.overlay(someContent);
o.content.addClass("mystyleclass");

replaceContent(obj node)

替换覆盖层内容的函数。
示例

var o = node.overlay(someContent);
o.replaceContent(someNewContent);

appendContent(obj node)
向覆盖层追加更多内容的函数。
示例
```
var o = node.overlay(someContent);
o.appendContent(someMoreContent);
```
clearContent()
清除覆盖层所有内容的函数。
示例
```
var o = node.overlay(someContent);
o.clearContent();
```

destroy()

移除覆盖层的函数。
示例

var o = node.overlay(someContent);
o.destroy();

kAlert 属性

destroy()

移除 kAlert 的函数。
示例

var ka = kAlert("Hello World");
ka.destroy();

ok

确定按钮的引用。
示例

var ka = kAlert("Hello World");
ka.ok.onclick = ka.destroy;
//Note: This onclick is set by default too.
//You do not need to set this everytime you use kAlert.

kConfirm 属性

destroy()

移除 kConfirm 的函数。
示例

var kc = kConfirm("Do you want to proceed?");
kc.destroy();

ok

确定按钮的引用。
示例

var kc = kConfirm("Do you want to proceed?");
kc.ok.onclick = function(){
	kc.destroy();
	handleTransaction();
}

cancel

取消按钮的引用。
示例

var kc = kConfirm("Do you want to proceed?");
kc.cancel.onclick = function(){
	kc.destroy();
}

kPrompt 属性

destroy()

移除 kPrompt 的函数。
示例

var kp = kPrompt("Enter the count","Enter a positive integer");
kp.destroy();

ok

确定按钮的引用。
示例

var kp = kPrompt("Enter a number.");
kp.ok.onclick = function(){
	var data=kp.input.value;
	kp.destroy();
	useData(data);
}

cancel

取消按钮的引用。
示例

var kp = kPrompt("Enter a number.");
kp.cancel.onclick = function(){
	kp.destroy();
}

input

输入文本框的引用。
示例

var kp = kPrompt("Enter a number.");
kp.ok.onclick = function(){
	var data=kp.input.value;
	kp.destroy();
	useData(data);
}

库由：Anshu Krishna 编写
联系方式：anshu.krishna5@gmail.com

kLib: 快速、小巧、易用

kLib: 是什么和为什么

kLib 函数/属性的简要描述

版本：1.0.4

添加到 String.prototype 的方法

添加到 HTMLElement.prototype 的方法

全局方法

覆盖层属性

kAlert 属性

kConfirm 属性

kPrompt 属性