用于节点操作的API，颠覆原生操作HTML DOM节点的(2)

接下来要谈的是，怎么编写代码让我们的事件变得简单。先不要理会技术层面的事件，假如现在有这么一个JS类，里面有若干方法，这些方法足以让我们完成上面以及比上面更加复杂的事件。这个假设存在的类，因为只有方法名，没有具体实现，我们把它称为接口。那些下面要讲的是定义接口，当我们觉得接口中的方法能满足需求，我们再去实现它。（这是比较好的开发流程，先规划后行动） 实例化一个对象

开发项目中，因为不止无限层次节点操作这个插件，还有很多，囊括了b2c和b2b常用的插件，比如轮换，分页，表单验证，表单元素取设值，批量上传图片，事件的重新包装，事件的批量处理，搜索的自动补全，购物车的ajax操作，以及公共方法的类。所以整个js会有很多类，每个类对应一个js变量，这样一来就有很多公共的js变量，如果开发的时候不小心在别的地方声明了一个同名的变量，那么这个类被消失。为了避免这种情况，我把所有类封装到一个名为$jkit类中，这样公共的变量就只有一个了。插件的类变成了局部，我怎么样访问呢？我另外定义一个$CL的类，里面定义了一些方法，这些方法用于访问$jkit的类，这样一来，就算有再多插件，都只会有两个公共变量$CL和$jkit。$CL负责调用$jkit。比如$CL中的newObj就用于实例化插件对象的方法。newObj有两个参数，第一个指定要实例化哪个插件，第二个参数用于实例化这个插件时的初始化参数，以数组的形式传参。 <table id="jkit">
    <tbody>
        <tr>
            <th class="align">Option</th>
            <th>
                <a href="javascript:void(0);">Status</a>
            </th>
            <th>
                <a href="javascript:void(0);">Attribute</a>
            </th>
        </tr>
        <tr>
            <td></td>
            <td>
                <select size="3" name="status">
                    <option value="all">所有</option>
                    <option value="0">下架</option>
                </select>
            </td>
            <td>
                <ul>
                    <li id="lior">L</li>
                    <li>XL</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>   /* 下面代码实例化了一个无限层次节点操作插件的对象，相当于重新构造了一棵新的对象树，新的对象树带有新的成员方法。就下面的例子，新对象树引用为table，table也是新树的根。它的后代对象由第二个参数childs决定 。新树的根引用是操作其后代对象的入口。重点讲解一下第二个参数。childs是一个数组结构，数组的第一个元素为tr，表示为dom根节点root的孩子节点tr重新构造新对象。如果原dom根节点root的中没有tr，将不会构造对象；如果tr内嵌有tr，不会为内嵌的tr构造节点，也就是说只会为孩子节点构造对象，孩子以下不会理会。第二个元素是td th，为什么有两个呢？因为tr下的孩子节点可以是th也可以是td，如果想同时为th td构造新的对象，就要同时写进去，用空格分开，检签的顺序不限制。第三个元素为select ul，为什么这两个可以写在一起？因为他们位于同一层次的，相对于根节点，它们都在第三层。只要同一层次的都可以写在一起。后面的以此类推，数量不限，就是无限层次了。新对象树的层次结构和原dom树的层次结构是一一对应的。 */
root = document.getElementById('category'),

childs = ['tr', 'td th', 'select ul', 'li option'],

table = $CL.newObj('maNode', [root, childs]);      
新树的成员方法，阅读下面的API时，请心里紧记两点，其一，根对象以及后代对象的所有方法都是针对原DOM对象的，比如对新对象调用del，其实质是删除了对应的原DOM对象；其二，每次调用对象的增删改时，都会重新构造相应的分枝

根对象独有方法 function map(index1,index2,,,indexN){}
该方法用于寻找后代节点，table.map(1,1,0)会找到第二行的第二个单元格的第一个对象，也就是select对应的对象。当map只有一个参数，并且该参数为DOM原生对象，那么该方法返回对应的新对象。 function index(DOMElement){}
该方法返回原生DOMElement对象对应的素引，table.index(document.getElementById('lior'))，则返回[1,2,0,0]，结果是数组形式 后代对象独有的方法 function add(index, html){}
该方法用于增加兄弟节点，index是相对于调用该方法的对象所处位置的位移，html就是要插要的节点，html可以是符合W3c标淮的任意html字任串
table.map(2).add(-1,'<tr><td></td><td></td><td></td></tr>')，在第三行前面新增一行（可以同时插入多行）
table.map(2).add(-2,'<tr><td></td><td></td><td></td></tr>')，在第三行前一行前面新增一行
table.map(0).add(2,'<tr><td></td><td></td><td></td></tr>')，在第一行后一行前面新增一行
table.map(1).add(0,'<tr><td></td><td></td><td></td></tr>')，index为0表示在当前行前面新增一行，并把当前行删除
table.map(1).add('<tr><td></td><td></td><td></td></tr>')，省略第一个参数，这是比较特别的用法，不用理会由哪个对象用，会在最后一行新增一行
table.map(1,1).add(1,'<td class="one">新增单元格</td>')，在第二行的第二个单元格之后新增一个单元格，再深入的节点如些类推，只需由map方法来确定节点就可以了
function del(index){}
该方法用于删除兄弟节点，index是相对于调用该方法的对象所处位置的位移
table.map(1).del(),index省略表示删除自身，这里删除第二行等同于table.map(1).del(0)
table.map(0).del(2),这里删除相对于当前调用对象后面第二行，这里就是删除第三行
table.map(2).del(-2),这里删除相对于当前调用对象前面第二行，这里就是删除第一行
table.map(0,1).del([0,-1,1]),如果index是一个数组，那么就是删除指定索引的兄弟节点，这时不用理会由哪个对象调用，索引为负数表示从最后计起，-1表示最后一个，这里删除第一个，第二个以及最后一个th
table.map(0,1).del(0,-1)，如果有两个参数，表示删除指定区间的兄弟节点，这时不用理会由哪个对象调用，索引为负数表示从最后计起，-1表示最后一个，这里删除第一个至后一个元素，参数大的可以作为第一个参数，大小顺序没有限制
function getParent(){}
获取调用对象父对象对应的原生DOM对象节点，table.map(0,1).getParent().tagName为tr function getHigher(){}
获取调用对象的父对象，table.map(0,1).getHigher.getNode().tagName为tr 根对象以及后代对象都拥有的方法 function getNode(){}
获取调用对象对应的原生DOM对象节点，table.getNode().tagName为table，table.map(0,1).getNode()为th function sizeOf(){}
获取调用对象子对象的个数，table.sizeOf()为3，表示有三行 function pos(){}
获取调用对象在其所有兄弟节点的所处的位置，table.map(1).pos()为1 function html(html){}
获取调用对象对应原生dom对象的innerHTML，如果有传参，为其innerHTML属性赋值（请不要对innerHTML为只读的对象赋值） function attr(html){}
获取调用对象对应原生dom对象的innerHTML，如果有传参，为其对应的属性赋值（还未实现） function before(index,html){}
往调用对象的指定子对象前面添加节点，index是相对位移
table.before(1,'<tr><td></td><td></td><td></td></tr>')，第二行前面添加一个行
table.map(1,2,0).before(-1,'<li style="color:red;">新增li节点</li>')，在最后一个li前面新增一个li（索引为负数表示从最后计起，-1表示最后一个）
table.before('<tr><td></td><td></td><td></td></tr>')，省略第一个参数表示在第一个子对象前面新增节点 function append(index,html){}
往调用对象的指定子对象后面添加节点，index是相对位移
table.append(1,'<tr><td></td><td></td><td></td></tr>')，第二行后面添加一个行
table.map(1,2,0).append(-1,'<li style="color:red;">新增li节点</li>')，在最后一个li后面新增一个li（索引为负数表示从最后计起，-1表示最后一个）
table.append('<tr><td></td><td></td><td></td></tr>')，省略第一个参数表示在第一个子对象后面新增节点 function replace(index,html){}
用html生成的节点替代调用对象的指定子对象对应的原生DOM节点，index是相对位移
table.replace(2,'<tr><td>新增行</td><td></td><td></td></tr>')，新增一行，并用其替换掉第二行
table.replace(-1,'<tr><td>新增行</td><td></td><td></td></tr>')，新增一行，并用其替换掉最后一行（索引为负数表示从最后计起，-1表示最后一个） function clean(index){}
该方法用于删除兄弟节点，index是相对于调用该方法的对象所处位置的位移
table.clean(),index省略表示删除第一个子对象，这里删除第一行等同于table.map(1).del(0)
table.clean(2),这里表示删除第三行
table.clean(-2),这里表示删除最后一行
table.map(0).clean([0,-1,1]),如果index是一个数组，那么就是删除指定索引的子对象，索引为负数表示从最后计起，-1表示最后一个，这里删除第一个，第二个以及最后一个th
table.map(0).clean(0,-1)，如果有两个参数，表示删除指定区间的子对象，索引为负数表示从最后计起，-1表示最后一个，这里删除第一个至后一个元素，参数大的可以作为第一个参数，大小顺序没有限制
如果新树的根节点是table，而其子节点是tbody/thead/tfoot，由于我们更多时候不会操作这些节点，而是直接操作tr，所以我做了一个允许略过这些节点的处理。当然你如果想操作tbody也是可以的，你大可以这样传参['tbody thead tfoot','tr','td']；只想取其中一个的话可以['tbody','tr','td']；直接取tr的话，可以['tr','td']，这种情况会对tbody/thead/tfoot中的所有tr生成新对象