API for node operations, subverting the native API for operating HTML DOM nodes_javascript skills

第一次看到敏捷开发的定义，我就被敏捷开发迷住了。通俗来说，敏捷开发可以让我们用过的代码可以再次重用，因为是再次重用，所以相对安全，再次调试也没有第一次那么费心，省时省力。不断重用代码的过程中把存在的bug不断的修复，也因为不断的去重用， 这个模板变得起越来越独立，适用的情况越来越广范，最后在安全方面达到铜墙铁壁，在开发方面达到随心所欲，在维护方面达到从容面对。

敏捷开发的确是利害，但如何练就这种深奥的武功呢？就我自身的情况靠人传授武功是不可能了，因为公司就我一个做开发的，苦思幂想之后，决定从开源的优秀框架入手，把它一行一行代码看懂，然后再为我所用。因为是一个人开发，前台和后台都得包办，哪从那一面做起呢？ 之前有过一二个月的开发经验，觉得前台的JS很费时，而且老觉得在做重复的事情，比如发ajax请求，接收结果之后操作节点（有时候遇到不兼容的情况，如select和table在IE下不支持使用innerHTML，style在IE不会自动转化为字符串，要用cssText代替，一旦这些情况遇上，真得是无比打击程序员的积极性，因为你要为此花时间去找替代方案，去调试），还有节点轮换，弹出层，表单验证等一系列烦琐工作。所以我就坚决从前台的JS做起。为了练就怎么把JS的重用性提高，我选择向Jquery取经。花了几个月看了一大半，略有所得。我其中之一的JS模块“无限深度操作节点”（文采不好，名字不妥别见怪）出来了。有了它，我在操作节点方面变得容易，代码变得精简，而且不用写额外的代码去兼容浏览器，谈笑中，功能就完成了。

首先我谈谈是什么让操作节点给我们带来烦恼：

• 编写ajax程序时，动态增删改页面元素几乎是不可避免的，使用属性innerHTML就是我们经常利用的途径，但在IE中table,thead,tfoot,tbody,tr,col,colgroup,html,title,style,frameset的innerHTML属性是只读的，也就是我们不能使用innerHTML更新这些节点。（这里没有提到select，其实select也是不会成功的，估计是IE的bug）。例子如下：（下面的$id代表document.getElementById）

  jquery

  //执行代码: $id('jkit').innerHTML = 'jquery'; //IE下并没有报任何错误，但select一个option节点都没有了。如果你对table使用innerHTML，IE会报unknown runtime error

  对于这种情况比较常用的兼容方法是外加一个外层元素，例子如下：

  jquery

  //执行代码: $id('jkit').innerHTML = 'jkit'; //这样IE也成功改变select，但这种做法有个缺点，如果你对select注册过事件，这些事件会全部丢失，你要外加代码来重新注册事件。

• 在指定的节点前后新增节点，这就涉及于节点定位，节点创建以及给节点属性设置。使用innerHTML通常只用于覆盖DOM元素的所有节点，如果只想改变元素的某个子节点，或者只想在某个子节点前后增加节点，仍然使用innerHTML就适得其反，实现起来很吃力了，而且使用了innerHTML之后，对子节点注册过的事件肯定全部丢失掉。不使用innerHTML，那只好使用原生的DOM方法了，但这种代替方案也不好使，看下面例子：

  jquery     jkit     mars

  //现在我想在jkit之前多加一个option，用原生的DOM方法实现: var newNode = document.createElement('option'),//新建一个节点 selector = document.getElementById('jkit3'), /* 也可以用selector.options，但getElementsByTagName更通用。 那用childNodes怎么?最好也不要，对于空白节点，IE和FF的处理方式不一样， 就这例子，在FF中，select的firstChild是空白文本节点， 因为select和第一个option之间有换行以及空白字符， FF会为其创建节点，而IE会忽略 */ options = document.getElementsByTagName('option'); newNode.setAttribute('value','new'); //newNode.setAttribute('text','NewNode');text不支持这样设置 //newNode.text = 'NewNode';ie不支持这种方式 newNode.innerHTML = 'NewNode'; selector.insertBefore(newNode,options[1]);//在kit之前插入

  After executing the above code, select has one more option:
  
  jquery
  
                                                                                                                                                                               
  It takes 6 lines of code to add a node. Now we just add a node. So what should we do for batch operations? Moreover, the native DOM methods are not very easy to use. The names are long and the order of parameters is difficult to remember. You have to read the documentation when using them (unless your developer operates nodes every day and uses these methods every day). Some people say that it’s not too troublesome. I can write these 6 lines of code into a method, and then complete batch operations by passing parameters. To some extent, it can reduce the workload, but from a long-term perspective, this is not very realistic. There are three reasons: First, the attributes of each newly added node are different, and the added position is different. You have to determine the position of the new node outside the method and determine what attributes should be added to this node inside the method, and what attributes should be added to the next node. Which attribute to add, writing the code in the method can only make you a little easier; secondly, as you can see from the above code, when adding a node, you have to exclude many incompatible implementation methods, which are used in setting In terms of attributes, each element has different attributes, and there are differences in compatibility schemes. When you write such a method for different elements, you must remember the compatibility schemes of each element, but who can say that you can remember them all? Compatible solutions, and if programmers want to make a difference in technology, they rely on the improvement of thinking logic rather than memory. There is no need to work hard in this area; thirdly, after one project has implemented the function, the next project will come back. Similar functions, but different in details. According to the above approach, you can imagine that the reusability of your code is very low, because to change certain details, you have to re-understand the logic you have written and re-write the details for you. Refactoring the code differently, this way, the efficiency is too low, and there is no agile development at all.
  
  Seeing this, readers will probably ask, if this is not done, can development really copy and paste? It can be said with certainty that it is impossible. No matter how comprehensive the code is, it is impossible to implement different and inclusive logics. But it can be made highly reusable. The key is to find the commonalities of different logics and make them independent. The reason why I say that the operation node method above has low reusability is because the operation node is mixed with specific logic. That is to say, the code of the specific logic is too closely related to the code of the operation node, and they will meet again when the next logic is reached. When operating nodes, if you want to reuse the last code, you must review the logic you wrote last time, and then separate the code for operating nodes before putting it to use. The infinite level node operations introduced below are very logically independent and have nothing to do with logic.
  上面的以select为例子，option是select的孩子节点，我们操作的是两层的树型结构，如果再深入一些，操作元素的子孙节点呢？如何定位元素后代节点呢？下面还是以原生的dom方法来实现：

  
      
          
          
      
  

  //现在我想在第一个li之前多加一个option，用原生的DOM方法实现:
  newNode = document.createElement('li'),
  table = document.getElementById('jkit4'),
  //取li的父节点:
  uls = table.getElementsByTagName('ul'),
  /* getElementsByTagName虽然通用，但如果li标签里面嵌套了li，li父节点的兄弟节点也有li的话，那么getElementsByTagName都会取到这些节点，如果你的html结构真有哪么复杂，取出来结果后你也很难定位到你想找的li节点。遇到这情况，你只以通过childNodes一层层往下找，但之前提过childNodes在IE和FF中行为是不致的，所以你还要做兼容处理。*/
  lis = table.getElementsByTagName('li');
  newNode.innerHTML = 'NewNode';
  //在指定位置插入
  uls[0].insertBefore(newNode,lis[0]);
  

  万变不离其中，跟上面的实现差不多，遇到复杂的html结构，可能就是定位比较麻烦，有人说定位不难，我可以在想要找的li上给定一个id属性，这样再怎么复杂也可以一步定位，但我想问如果要批量操作呢？ 如果table有很多行，每一行第都涉及到这样的操作，那是不是每个li给定一人id ？ 是可以，通过循环指也不怎么难，但我是反对这样的做法。如果有好的代替方案，我更赞成的是保持干净的HTML，在我开发的项目中，用于定位无素属性我是尽可能少给，因为我有足够灵活的方案寻节点。说到干净的HTML，这里说点题外话。怎么保持HTML的干净呢？在我开发中，HTML是不会混杂任何 逻辑性的javascript代码（只有接收后台数据的一些变量，而且这些变量统一放在HTML的最后面，变量太多的话，以组的形式组织），给元素注册事件也不会把onclick,onblur等事件代码嵌进html中，查看源码你不会在HTML中看到任何onclick,onblur等事件代码。回到这篇文章的主题吧！下面就这三点谈谈怎么让我们的工作变得简单！

  The next thing we want to talk about is how to write code to make our events simple. Ignore the technical events for now. If there is such a JS class now, there are several methods in it. These methods are enough for us to complete the above and more complex events than the above. This hypothetically existing class only has a method name and no specific implementation, so we call it an interface. What we are going to talk about next is defining the interface. When we feel that the methods in the interface can meet the needs, we will implement it. (This is a better development process, plan first and then act)

  • Instantiate an object
    
    In the development project, there are more than just infinite-level node operation plug-ins, including plug-ins commonly used in b2c and b2b, such as rotation, paging, form validation, and form element retrieval. Setting values, uploading images in batches, repackaging events, batch processing of events, auto-completion of searches, ajax operations on shopping carts, and classes with public methods. Therefore, there will be many classes in the entire js, and each class corresponds to a js variable. In this way, there will be many public js variables. If a variable with the same name is accidentally declared elsewhere during development, then this class will be disappeared. In order to avoid this situation, I encapsulated all classes into a class named $jkit, so that there is only one public variable. The plug-in class has become local, how do I access it? I define another $CL class, which defines some methods. These methods are used to access the $jkit class. In this way, no matter how many plug-ins there are, there will only be two public variables, $CL and $jkit. $CL is responsible for calling $jkit. For example, newObj in $CL is used to instantiate the method of the plug-in object. newObj has two parameters. The first one specifies which plug-in is to be instantiated. The second parameter is used to initialize the plug-in when instantiating it. The parameters are passed in the form of an array.
            
                Option
                
                
            
            
                
                
                
            
            
                
                
                
            
        
    

    Status	Attribute
    	所有                     下架	L                      XL

    /* 下面代码实例化了一个无限层次节点操作插件的对象，相当于重新构造了一棵新的对象树，新的对象树带有新的成员方法。就下面的例子，新对象树引用为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]);  
  • Member methods of the new tree, When reading the following API, please keep two points in mind. First, all methods of the root object and descendant objects are for the original DOM object, such as calling del on the new object. , its essence is to delete the corresponding original DOM object; secondly, every time the addition, deletion or modification of the object is called, the corresponding branch will be reconstructed
    
    

    Root object unique method

    function map(index1,index2,,,indexN){}
    This method is used to find descendant nodes. table.map(1,1,0) will find the second row of The first object of the two cells is the object corresponding to select. When map has only one parameter, and the parameter is a DOM native object, then this method returns the corresponding new object.

    function index(DOMElement){}
    This method returns the index corresponding to the native DOMElement object, table.index(document.getElementById('lior')), then returns [1,2 ,0,0], the result is in array form

    Methods unique to descendant objects

    function add(index, html){}
    This method is used to add sibling nodes. Index is the displacement relative to the position of the object that calls this method. HTML is what is to be inserted. Node, html can be any html string that conforms to W3c standards
    table.map(2).add(-1,'< /td>'), add a new line before the third line (multiple lines can be inserted at the same time)
    table.map(2).add(-2, ''), add a new line before the previous line of the third line
    table.map(0).add(2,'table.map(1).add(0,''), an index of 0 means adding a new row before the current row and deleting the current row
    table.map(1).add('< tr>'), omitting the first parameter, this is a special usage, Regardless of which object is used, a new row will be added to the last row
    table.map(1,1).add(1,'New cell '), add a new cell after the second cell in the second row, and so on for further nodes, just use the map method to determine the node
    

    function del(index){}
    This method is used to delete sibling nodes, index is the displacement relative to the position of the object that calls this method
    table.map(1) .del(), omitting index means deleting itself. Deleting the second row here is equivalent to table.map(1).del(0)
    table.map(0).del(2). Deleting here is relative to the current call. The second line after the object, here is to delete the third line
    table.map(2).del(-2), here is to delete the second line in front of the current calling object, here is to delete the first line
    table .map(0,1).del([0,-1,1]), if index is an array, then the sibling node of the specified index is deleted. At this time, it does not matter which object is called. A negative index means starting from the last Counting, -1 means the last one, here delete the first, second and last th
    table.map(0,1).del(0,-1), if there are two parameters, it means delete Specify the sibling nodes of the interval. At this time, it does not matter which object is called. A negative index means counting from the end, -1 means the last one. Here, delete the first to last elements. The larger parameter can be used as the first parameter. There is no limit to the order of size
    

    function getParent(){}
    Get the native DOM object node corresponding to the parent object of the calling object, table.map(0,1).getParent().tagName is tr

    function getHigher(){}
    Get the parent object of the calling object, table.map(0,1).getHigher.getNode().tagName is tr

    Methods owned by root objects and descendant objects

    function getNode(){}
    Get the native DOM object node corresponding to the calling object, table.getNode().tagName is table, table.map(0,1).getNode() for th

    function sizeOf(){}
    Get the number of sub-objects of the calling object. table.sizeOf() is 3, which means there are three rows

    function pos(){}
    Get the position of the calling object in all its sibling nodes, table.map(1).pos() is 1

    function html(html){}
    Get the innerHTML of the native DOM object corresponding to the calling object. If there are parameters passed, assign a value to its innerHTML attribute (please do not assign a value to the read-only object innerHTML )

    function attr(html){}
    Get the innerHTML of the native DOM object corresponding to the calling object. If there are parameters passed, assign values ​​to their corresponding attributes (not yet implemented)

    function before(index,html){}
    Add a node in front of the specified sub-object of the calling object, index is the relative displacement
    table.before(1,' '), add a line
    table.map(1 ,2,0).before(-1,'

    New li node

    '), add a new li before the last li (the index is a negative number means counting from the end, -1 means the last)
    table.before(''), omitting the first parameter means adding a new node in front of the first sub-object.

    function append(index,html){}
    Add a node behind the specified sub-object of the calling object, index is the relative displacement
    table.append(1,' '), add a line after the second line
    table.map(1 ,2,0).append(-1,'

    New li node

    '), add a new li after the last li (the index is a negative number means counting from the end, -1 means the last)
    table.append(''), omitting the first parameter means adding a new node after the first sub-object.

    function replace(index,html){}
    Replace the native DOM node corresponding to the specified sub-object of the calling object with the node generated by html. Index is the relative displacement
    table.replace( 2,'New line'), add a new line and use It replaces the second line
    table.replace(-1,'New line'), add a new line and replace the last line with it (a negative index means counting from the end, -1 means the last one)

    function clean(index){}
    This method is used to delete sibling nodes. Index is the displacement relative to the position of the object that calls this method.
    table.clean(), Omitting index means deleting the first sub-object. Deleting the first row here is equivalent to table.map(1).del(0)
    table.clean(2). Here it means deleting the third row
    table.clean (-2), here means deleting the last row
    table.map(0).clean([0,-1,1]), if index is an array, then the sub-object of the specified index is deleted, and the index is a negative number means counting from the end, -1 means the last one, here delete the first, second and last th
    table.map(0).clean(0,-1), if there are two parameters, it means Delete the sub-objects in the specified range. A negative index means counting from the end, -1 means the last one. Here, delete the first to last elements. The larger parameter can be used as the first parameter. There is no limit on the size order
    

    If the root node of the new tree is table, and its child nodes are tbody/thead/tfoot, since we will not operate these nodes more often, but directly operate tr, so I made a slightly allowed through the processing of these nodes. Of course, if you want to operate the tbody, you can pass the parameters like this ['tbody thead tfoot', 'tr', 'td']; if you only want to get one of them, you can ['tbody', 'tr', 'td ']; if you directly take tr, you can ['tr','td']. In this case, new objects will be generated for all tr ​​in tbody/thead/tfoot

  Conclusion: Thinking back, with such a plug-in, node operation is a piece of cake. The three major troubles of node operation mentioned before will be solved. Moreover, this plug-in has nothing to do with any logic and does not require secondary processing. It can be used as soon as you pick it up. It can also be expanded when it cannot meet the needs. Imagine that one day the development process will be like a jigsaw puzzle. After the developed plug-ins are combined, a project will come out. How wonderful it would be. The result may not be as good as expected, but it can be expected. Going in this direction, it is inevitable that events will become simpler and simpler. Because the article is too long, the source code part will be explained in detail next time I publish an article.

  Statement：

  The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
  Previous article：Implementation code for dynamically loading the content of other pages using JQuery's load function_jqueryNext article：Implementation code for dynamically loading the content of other pages using JQuery's load function_jquery

  Related articles

  See more

  • An in-depth analysis of the Bootstrap list group component
  • Detailed explanation of JavaScript function currying
  • Complete example of JS password generation and strength detection (with demo source code download)
  • Angularjs integrates WeChat UI (weui)
  • How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills
  

  Public welfare online PHP training，Help PHP learners grow quickly！

  About usDisclaimerSitemap

  © php.cn All rights reserved