![]()
var parseDom = function (html){
var docfrag = document.createDocumentFragment();
var div = document.createElement('div');
div.innerHTML = html;
while(div.firstChild){
docfrag.appendChild(div.firstChild);
}
return {
element: docfrag,
appendTo: function(dom){
dom.appendChild(this.element);
}
};
};
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <script>
7 // 构造函数
8 var YY = function ( selector ) {
9 return new YY.fn.init( selector );//返回init方法的一个实例对象，一个构造函数的原型属性上的函数init的原型链和YY原型链是不同的
10 };
11 //原型继承分别为
12 //YY->YY.prototype->object.prototype->null
13 //init->init.prototype->object.prototype->null
14 // 核心原型
15 YY.fn = YY.prototype = {
16 constructor: YY,
17 selector: null,
18 init: function ( selector ) {
19 // 字符串: 选择器, html
20 if ( typeof selector == 'string' ) {
21 if ( selector.charAt( 0 ) === '<' ) {
22 this.elements = parseHTML( selector );
23 } else {
24 this.elements = select( selector );
25 }
26 }
27 this.selector = selector;//可以判断出，只要有这个属性的对象，就是YY对象
28 }
29 };
30 YY.fn.init.prototype = YY.prototype;
31
32 // 可扩展
33 YY.extend = YY.fn.extend = function ( obj ) {
34 // 将 obj 的成员加到 this 上
35 var k;
36 for ( k in obj ) {
37 this[ k ] = obj[ k ];
38 }
39 };
40
41 //选择器方法，暂时只考虑基本选择器
42 var select = function ( selector ) {
43 var first = selector.charAt( 0 ), arr = [];
44 if ( first === '#' ) {
45 arr.push.call( arr, document.getElementById( selector.slice( 1 ) ) )
46 } else if ( first === '.' ) {
47 arr.push.apply( arr, document.getElementsByClassName( selector.slice( 1 ) ) )
48 } else {
49 arr.push.apply( arr, document.getElementsByTagName( selector ) );
50 }
51 return arr;
52 };
53
54 var parseHTML = function ( html ) {
55 var div = document.createElement( 'div' ),
56 arr = [], i;
57 div.innerHTML = html;
58 for ( i = 0; i < div.childNodes.length; i++ ) {
59 arr.push( div.childNodes[ i ] );
60 }
61 return arr;
62 };
63
64 // 基本的工具方法
65 YY.extend({
66 each: function ( arr, fn ) {
67 var i, l = arr.length,
68 isArray = YY.isLikeArray( arr );//先判断是否为数组
69 if ( isArray ) {
70 // 数组
71 for ( i = 0; i < l; i++ ) {
72 if ( fn.call( arr[ i ], i, arr[ i ] ) === false ) {
73 break;
74 }
75 }
76 } else {
77 // 对象
78 for ( i in arr ) {
79 if ( fn.call( arr[ i ], i, arr[ i ] ) === false ) {
80 break;
81 }
82 }
83 }
84 return arr;
85 }
86 });
87
88 // 判断类型的方法
89 YY.extend({
90 isFunction: function ( obj ) {
91 return typeof obj === 'function';//判断是否为function
92 },
93 isString: function ( obj ) {
94 return typeof obj === 'string';//判断是否为字符串
95 },
96 isLikeArray: function ( obj ) {
97 return obj && obj.length && obj.length >= 0;//判断是否为数组
98 },
99 isYY: function ( obj ) {
100 return !!obj.selector;//判断是否为YY，给其原型属性加个属性，默认为空
101 },
102 isDOM: function ( obj ) {
103 return !!obj.nodeType;
104 }
105 });
106
107
108 // 基本的 DOM 操作，此处假设selector是DOM对象
109 YY.fn.extend({
110 appendTo: function ( selector ) {
111 // 将 this.elements 加入到 selector 中
112 YY.each( this.elements, function () {
113 selector.appendChild( this );
114 } );
115 }
116 });
117
118
119 </script>
120
121 <script type="text/javascript">
122 onload = function () {
123 YY( '<div>1</div><div>2</div><div>3</div><div>4</div>' )
124 .appendTo( document.body );
125 }
126 </script>
127 </head>
128 <body>
129 </body>
130 </html>
//YY( selector )返回结果为对象,YY( selector ).elements是一个数组
YY.fn.extend({
appendTo: function ( selector ) {
YY.each( this.elements, function () {
YY( selector ).elements[ 0 ].appendChild( this );
} );
}
});
YY.fn.extend({
appendTo: function ( selector ) {
var _this = this;
var objs = YY( selector ).elements;
YY.each( objs, function ( i1, v1 ) {
var that = this;
YY.each( _this.elements, function ( i2, v2 ) {
// this 当前元素, 要加到 that 上
that.appendChild( i1 == objs.length - 1?
this :
this.cloneNode( true ) );
// 判断如果是最后一个就无须克隆
});
});
}
});
