拆出 Zepto.js 中的建立 DOM 元素的方法


因為和朋友討論這方面的東西.
所以花了點時間看了看 Zepto.js 這輕量級 Library
之後再取出了裡面關聯東西來玩一下
記錄一下

1
2
// 測試,應該可在 Console 裡查看
Zepto("<div><p title='test'>this is a test</p></div>")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
var Zepto = (function() {
var zepto = {},
emptyArray = [],
slice = emptyArray.slice,
tagExpanderRE = /< (?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,
table = document.createElement('table'),
tableRow = document.createElement('tr'),
containers = {
'tr': document.createElement('tbody'),
'tbody': table, 'thead': table, 'tfoot': table,
'td': tableRow, 'th': tableRow,
'*': document.createElement('div')
},
fragmentRE = /^\s*< (\w+|!)[^>]*>/;

zepto.Z = function(dom, selector) {
dom = dom || []
dom.__proto__ = arguments.callee.prototype
dom.selector = selector || ''
return dom
}

zepto.init = function(selector, context) {
if (fragmentRE.test(selector)) {
var dom = zepto.fragment(selector.trim(), RegExp.$1);

selector = null;
}
return zepto.Z(dom, selector);
}

function $(selector, context) {
return zepto.init(selector, context);
}

zepto.fragment = function(html, name) {
if (name === undefined) {
name = fragmentRE.test(html) && RegExp.$1
}

if (!(name in containers)) {
name = '*'
}

var container = containers[name]

container.innerHTML = '' + html

dom = each(slice.call(container.childNodes), function(){
container.removeChild(this)
})

return dom
}

function isObject(value) {
return value instanceof Object
}

function isPlainObject(value) {
return isObject(value) && value != window && value.__proto__ == Object.prototype
}

function each(elements, callback) {
var i, key
if (likeArray(elements)) {
for (i = 0; i < elements.length; i++) {
if (callback.call(elements[i], i, elements[i]) === false) {
return elements
}
}
} else {
for (key in elements) {
if (callback.call(elements[key], key, elements[key]) === false) {
return elements
}
}
}

return elements
}

function likeArray(obj) {
return typeof obj.length == 'number'
}

$.zepto = zepto;

return $;
})();

window.Zepto = Zepto
'$' in window || (window.$ = Zepto)