擴展原生appendChild方法

kk_miles 發布于2019-08-21 11:28 / 1308人閱讀

摘要：源代碼把類數組對象轉換為數組。節點對象返回被替代的節點對象節點對象被替代成可以運行的如果是節點對象，則替代為可運行的節點對象遞歸字符串轉成文檔片段節點對象。返回文檔片段節點對象用于擴展方法。

Node.prototype.appendChildPlus()

寫于：2017-1-2 | 更新于：2017-1-3

概述

appendChild方法的缺點有兩個：

不能傳多個參數

參數只能是節點對象

這里給Node.prototype添加一個方法，名稱為：appendChildPlus，可以認為是appendChild的加強版，特點如下：

參數可以是html字符串和節點對象

可以傳多個參數

script標簽字符串和新建的script節點對象插入文檔以后可以正常運行

所有參數是一起插入指定節點的，而不是一個一個插入。

源代碼

// appendChildPlus.js
/**
 * Created by jszhou on 2017/1/2.
 * updated by jszhou on 2017/1/3.
 */
(function () {
    /**
     * 把類數組對象轉換為數組。
     */
    var toArray = Array.from || function (arg) {
            return Array.prototype.slice.call(arg);
        };

    /**
     * 判斷參數是否為節點對象。
     * @param {?} arg
     * @return {boolean}
     */
    function isNode(arg) {
        return arg instanceof Node;
    }

    /**
     * 判斷參數是否為script節點對象。
     * @param {?} arg
     * @return {boolean}
     */
    function isScript(arg) {
        return isNode(arg) && arg.nodeName.toLowerCase() === "script";
    }

    /**
     * 復制script節點對象，復制以后script標簽的內容可以運行。
     * @param {object} script script節點對象
     * @return {object} 返回新的script節點對象
     */
    function copyScript(script) {
        var newScript = document.createElement("script");

        // 復制屬性
        toArray(script.attributes).forEach(function (item) {
            newScript.setAttribute(item.nodeName, item.nodeValue);
        });

        newScript.innerHTML = script.innerHTML;

        return newScript;
    }

    /**
     * 替代script節點對象，替代以后script標簽的內容可以運行。
     * @param {object} node 節點對象
     * @return {object} 返回script被替代的節點對象（script節點對象被替代成可以運行的）
     */
    function replaceAllScript(node) {
        Array.prototype.forEach.call(node.childNodes, function (item) {
            // 如果是script節點對象，則替代為可運行的script節點對象
            if(isScript(item)) {
                item.parentNode.replaceChild(copyScript(item), item);
                return;
            }
            // 遞歸
            if(item.childNodes.length > 0){
                replaceAllScript(item);
            }
        });

        return node;
    }

    /**
     * 字符串轉成文檔片段節點對象。
     * @param {String} str 字符串，可以包含script標簽，轉換完插入文檔以后可以運行。
     * @return {Object} 返回文檔片段節點對象
     */
    function strToNode(str) {
        var docFrag = document.createDocumentFragment(),
            div = document.createElement("div");

        div.innerHTML = str;

        toArray(replaceAllScript(div).childNodes).forEach(function (item) {
            docFrag.appendChild(item);
        });

        return docFrag;
    }

    /**
     * 用于擴展appendChild方法。可以傳入html字符串和節點對象，可以傳多個參數。
     * 如果html字符串中有script標簽，插入以后可以正常運行。
     * 注意，所有參數是一起插入指定節點的，而不是一個一個插入。
     */
    Node.prototype.appendChildPlus = function () {
        var docFrag = document.createDocumentFragment();

        toArray(arguments).forEach(function (arg) {
            docFrag.appendChild(isNode(arg) ? arg : strToNode(String(arg)));
        });

        this.appendChild(docFrag);
    };
})();

示例代碼

// extend.js
var wrap = document.querySelector(".js-wrap"),
    deepScript = "",
    newScriptNode = document.createElement("script"),
    outerScript = "";

newScriptNode.textContent = "wrap.append("newScriptNode");";

wrap.appendChildPlus(deepScript, newScriptNode, outerScript, "nihao");

// outerScript.js
wrap.append("outerScript");









    
    
    
    nihao
    deepScript
    newScriptNode
    outerScript

本擴展的markdown和demo源文件在github上，點擊這里查看

GPU云服務器云服務器擴展方法 appendChild 原生廣告原生混編

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86757.html

jQuery 源碼系列（十五）DOM 操作

摘要：歡迎來我的專欄查看系列文章。所以內部一個統一的做法，就是采用的方式，先對要進行操作的內部函數執行操作，然后回調執行任務。剩下的事情，就交給回調函數去處理。所以，的作用遠比想象的要少。歡迎來我的專欄查看系列文章。可能你會覺得這個名字很奇怪這個名字很奇怪，為什么叫做 domManip，即所謂的 dom 微操作。 showImg(https://segmentfault.com/img/...

PascalXie 2019-08-21 11:32 評論0 收藏0
自定義元素探秘及構建可復用組件最佳實踐

摘要：若自定義元素標簽名稱不可用則摒棄。總之，自定義元素讓開發者的代碼更易理解和維護，并分割為小型，可復用及可封裝的模塊。被稱為自定義元素接口，雖然現在仍然可用，但是已經被棄用并被認為是糟糕的實現。原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協議共享，BY Troland。這是 JavaScript 工作原理第十九章。概述在前述文章中，我們介紹了 Shadow ...

CoorChice 2019-08-23 15:34 評論0 收藏0
Zepto 源碼分析 3 - qsa 實現與工具函數設計

摘要：承接第一篇末尾內容，本部分開始進入主模塊，分析其設計思路與實現技巧下文代碼均進行過重格式化，但代碼版本同第一部分內容且入口函數不變的選擇器先從第一個與原型鏈構造不直接相關的工具函數說起，觀察的設計思路。承接第一篇末尾內容，本部分開始進入 zepto 主模塊，分析其設計思路與實現技巧（下文代碼均進行過重格式化，但代碼 Commit 版本同第一部分內容且入口函數不變）： Zepto 的選...

ctriptech 2019-08-26 13:23 評論0 收藏0
瀏覽器中的JavaScript：文檔對象模型與 DOM 操作

摘要：作為運行在瀏覽器中的腳本語言，它對于網頁操作非常有用。在技術圈中，我們將這些指令稱為操作。結論文檔對象模型是瀏覽器創建并保留在內存中的網頁的虛擬副本。資源如果你想了解更多關于文檔對象模型的內容，那么還有另一篇好文章。翻譯：瘋狂的技術宅原文：https://www.valentinog.com/bl... showImg(https://segmentfault.com/img/bV...

Ilikewhite 2019-08-23 17:14 評論0 收藏0