【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装

// DOM框架（选择器框架） (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 向现有的元素集合中添加元素节点（修改this的内容） * @param dom * @return {add} */ add: function (dom) { // 1. 项伪数组中添加元素 this[this.length] = dom; // 2. 数组的长度也需要改变了 this.length++; return this; }, /** * 向现有的元素节点中添加dom节点(对使用选择器获取的一系列元素都添加孩子节点child) * @param child，这里创建的实际上是一个JQuery对象 */ append: function (child) { // 这里获取的实际上就是只有一个的 var doms = typeof child === 'string' ? $(child) : $(child[0]), arr = Array.prototype.slice.call(doms); //console.log(typeof doms[0], typeof arr[0]); // 2. 调用自己的方法将一个伪数组转换为数组，并开始遍历 /*for (var i = 0; i < this.length; i++){ for (var j = 0; j < doms.length; j++){ // 注意这里的操作， 由于在每次添加一个新的元素之后， this的长度就会增加，因此这里在修改之前先把this.length修改一下 this[i].appendChild(doms[j]); } }*/ /*this.each(function (element) { arr.forEach(function (childNode) { element.appendChild(childNode); }); });*/ // 这里的处理目的是，如果穿过来的DOM节点只是有一个的话需要创建和this长度相同的DOM元素 if (arr.length !== this.length) { arr = []; // 相当于是把本身复制几份 Array.prototype.slice.call(this).each(function () { arr.push(doms[0]); }); } // 开始向父亲节点添加元素 Array.prototype.slice.call(this).forEach(function (element, index) { element.appendChild(arr[index]); }); // 开始向我获取的this节点里面添加数据 /*for (var i = 0; i < this.length; i++){ for (var j = 0; j < arr.length; j++){ if (this[i].childNodes){ continue; } // 注意这里的操作， 由于在每次添加一个新的元素之后， this的长度就会增加，因此这里在修改之前先把this.length修改一下 this[i].appendChild(arr[j]); } }*/ }, /** * 把选择器中的节点添加到父容器中 * @param parent */ appendTo: function (parent) { // 1. 获取所有的父容器 var doms = $(parent), self = this; // 2. 向父容器中添加孩子节点 Array.prototype.slice.call(this).forEach(function (element, index) { doms[index].appendChild(self[index]); }); return this; }, /** * 获取指定下表下面的DOM节点 * @param num * @return {null} */ get: function (num) { return this[num] ? this[num] : null; }, /** * 获取一个类似于JQuery的对象实例 * @param num * @return {jQuery|HTMLElement} */ eq: function (num) { // 1. 获取一个JQuery对象，首先先获取这个DOM元素节点 var dom = this.get(num); // 2. 把这个DOM节点转换为一个JQuery对象 return $(dom); }, /** * 获取第一个JQuery对象 * @return {*|jQuery|HTMLElement} */ first: function () { return this.eq(0); }, /** * 获取最后一个JQuery对象 * @return {*|jQuery|HTMLElement} */ last: function () { return this.eq(this.length - 1); }, /** * 获取一个DOM节点的所有子节点 * @return {array} */ children: function () { // 获取一个元素的所有的孩子节点 // 1. 定义一个伪数组， 用于存储所有的孩子节点, 然后获取默认的第一个元素的所有孩子节点 var children = this[0].children, len = children.length, that = {}, i = 0; // 初始化定义的这个伪数组 that.length = len; for (; i < len; i++) { that[i] = children[i]; } return that; }, /** * 从当前DOM元素节点向下寻找一层元素节点 * @param str * @return {} */ find: function (str) { var res = [], self = this, doms; this.each(function () { switch (str.charAt(0)) { case '.': // 类选择器 doms = $.$class(str.substring(1), self[i]); pushArray(doms); break; default: // 标点选择器 doms = $.$tag(str, self[i]); pushArray(doms); break; } }); function pushArray(doms) { if (doms.length) { self.toArray(doms, function () { res.push(this); }); } } // 【注意：】为了能够返回一个JQuery对象，这里需要再次进行处理 var that = this; that.length = this.length; this.each(function (index) { // 这里需要再次构造一个伪数组对象，从而实现链式访问的功能 that[index] = res[index]; }); // 这里在修改that的时候实际上会间接地把this这个变量修改了 return that; }, /** * 获取一个元素的父类节点 * @return {parent} */ parent: function () { // 获取父节点，并且返回一个JQuery对象 var parent = this[0].parentNode; this[0] = parent; this.length = 1; // 由于每一个元素只会有一个父类节点，因此长度为1 return this; }, /** * 获取一个元素在同一个级别的元素里面的下表编号 * @return {number} */ index: function () { // 获取元素本身在同一个级别下面的元素下表编号 var srcNode = this[0], children = srcNode.parentNode.children, self = this, defaultRes = -1; self.toArray(children, function (index) { // 这里的this指向的就是每一个元素， index指向的就是元素的下表编号 if (children[index] === srcNode) { defaultRes = index; } }); // 返回查询到的结果下标 return defaultRes; } }); // 不需要参与链式访问的 xframe.extend(xframe, { /** * 创建一个DOM元素节点 * @param type * @param value * @param html * @return {*} */ create: function (type, value, html) { var dom = document.createElement(type); return xframe().add(dom).attr(value).html(html); }, /** * 直接的孩子节点 * @param dom * @param tag * @return {jQuery|HTMLElement} */ directChildren: function (dom, tag) { var res = [], tag = tag; if (typeof dom === 'string') { dom = $(dom); } // 如果是一个元素集合的处理方法 if (dom.length) { Array.prototype.slice.call(dom).each(function () { getDOM(this.children); }); } else { // 如果只是一个元素的处理方法 getDOM(dom.children); } /** * 主要用于把满足已知条件的DOM元素集合统一放入到一个新的res数组里面去 * @param doms */ function getDOM(doms) { Array.prototype.slice.call(doms).each(function () { if (this.tagName.toLowerCase() === tag.toLowerCase()) { res.push(this); } }); } // 如果获得了这个直接子节点，就直接返回这个对象 return $(res); }, }); })(xframe);