一篇文章教你如何寫成Strview.js之源碼剖析

作者：maomin9761 2021-09-05 17:22:08

前段時間我自己開發了一款Strview.js，它是一個可以將字符串轉換為視圖的JS庫。在JS代碼中，我們引入了Strview.js，并且我們調用了它一個createView方法，最后傳入了一個對象。

[[421771]]

前言

前段時間我自己開發了一款Strview.js，它是一個可以將字符串轉換為視圖的JS庫。什么意思呢?就像下面這段代碼：

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Strview.js</title> 
</head> 
 
<body> 
    <div id="app"></div> 
    <script src="https://cdn.jsdelivr.net/npm/strview@1.9.0/dist/strview.global.js"></script> 
    <script> 
        Strview.createView({ 
            el: "#app", 
            data: { 
                msg: 'Hello World' 
            }, 
            template: `<p>{msg}</p>`, 
        }); 
    </script> 
</body> 
 
</html>

顯示如下頁面：

你會看到頁面上顯示了一個Hello World字樣，而我們看到HTML代碼中除了一個ID名是app標簽之外，其他標簽并沒有，更沒有Hello World文本。這時，繼續往下看，在JS代碼中，我們引入了Strview.js，并且我們調用了它一個createView方法，最后傳入了一個對象。我們在對象中發現了Hello World字符串，并且我們在template屬性中看到它多所對應的值是一個標簽，就是這個標簽<p>{msg}</p>，另外，里面我們會看到使用{}包裹的msg字符。與data對象中的msg屬性相對應，正好它的值為Hello World。我們現在改變下msg屬性對應的值來看下頁面是否發生改變。

果然，發生了改變，所以我們知道Strview.js就是這么將字符串轉換為視圖的。

這里，我們只是簡單介紹了Strview.js的簡單用法，如果想繼續了解其他用法的話，可以去Strview.js中文官網:

https://www.maomin.club/site/strviewjs/zh

下面的內容呢，我們將看下Strview.js源碼，看它是如何實現的。

剖析源碼

本篇分析Strview.js版本為1.9.0

首先，我們獲取到源碼，這里我們使用生產環境下的Strview.js，也就是上面實例中的這個地址：

https://cdn.jsdelivr.net/npm/strview@1.9.0/dist/strview.global.js

我們，先大體看下源碼，加上空行，源碼一共125行。不壓縮的話，僅僅4kb。

var Strview = (function (exports) { 
    'use strict'; 
 
    // global object 
    const globalObj = { 
        _nHtml: [], 
        _oHtml: [], 
        _el: null, 
        _data: null, 
        _template: null, 
        _sourceTemplate: null 
    }; 
 
    // initialization 
    function createView(v) { 
        globalObj._data = v.data; 
        globalObj._template = v.template; 
        globalObj._sourceTemplate = v.template; 
        globalObj._el = v.el; 
        v.el ? document.querySelector(v.el).insertAdjacentHTML("beforeEnd", render(globalObj._template)) : console.error("Error: Please set el property!"); 
    } 
 
    // event listeners 
    function eventListener(el, event, cb) { 
        document.querySelector(el).addEventListener(event, cb); 
    } 
 
    // processing simple values 
    function ref() { 
        return new Proxy(globalObj._data, { 
            get: (target, key) => { 
                return target[key] 
            }, 
            set: (target, key, newValue) => { 
                target[key] = newValue; 
                setTemplate(); 
                return true; 
            } 
        }) 
    } 
 
    // reactiveHandlers 
    const reactiveHandlers = { 
        get: (target, key) => { 
            if (typeof target[key] === 'object' && target[key] !== null) { 
                return new Proxy(target[key], reactiveHandlers); 
            } 
            return Reflect.get(target, key); 
        }, 
        set: (target, key, value) => { 
            Reflect.set(target, key, value); 
            setTemplate(); 
            return true 
        } 
    }; 
 
    // respond to complex objects 
    function reactive() { 
        return new Proxy(globalObj._data, reactiveHandlers) 
    } 
 
    // update the view 
    function setTemplate() { 
        const oNode = document.querySelector(globalObj._el); 
        const nNode = toHtml(render(globalObj._sourceTemplate)); 
        compile(oNode, 'o'); 
        compile(nNode, 'n'); 
        if (globalObj._oHtml.length === globalObj._nHtml.length) { 
            for (let index = 0; index < globalObj._oHtml.length; index++) { 
                const element = globalObj._oHtml[index]; 
                element.textContent !== globalObj._nHtml[index].textContent && (element.textContent = globalObj._nHtml[index].textContent); 
            } 
        } 
    } 
 
    // judge text node 
    function isTextNode(node) { 
        return node.nodeType === 3; 
    } 
 
    // compile DOM 
    function compile(node, type) { 
        const childNodesArr = node.childNodes; 
        for (let index = 0; index < Array.from(childNodesArr).length; index++) { 
            const item = Array.from(childNodesArr)[index]; 
            if (item.childNodes && item.childNodes.length) { 
                compile(item, type); 
            } else if (isTextNode(item) && item.textContent.trim().length !== 0) { 
                type === 'o' ? globalObj._oHtml.push(item) : globalObj._nHtml.push(item); 
            } 
        } 
    } 
 
    // string to DOM 
    function toHtml(domStr) { 
        const parser = new DOMParser(); 
        return parser.parseFromString(domStr, "text/html"); 
    } 
 
    // template engine 
    function render(template) { 
        const reg = /\{(.+?)\}/; 
        if (reg.test(template)) { 
            const key = reg.exec(template)[1]; 
            if (globalObj._data.hasOwnProperty(key)) { 
                template = template.replace(reg, globalObj._data[key]); 
            } else { 
                template = template.replace(reg, eval(`globalObj._data.${key}`)); 
            } 
            return render(template) 
        } 
 
        return template; 
    } 
 
    // exports 
    exports.createView = createView; 
    exports.eventListener = eventListener; 
    exports.reactive = reactive; 
    exports.ref = ref; 
 
    Object.defineProperty(exports, '__esModule', { value: true }); 
 
    return exports; 
}({}));

首先，我們會看到最外層定義了一個Strview變量，暴露在外面，并將一個立即執行函數(IIFE)賦予這個變量。

我們先來看下這個立即執行函數。

var Strview = (function (exports) { 
// ... 
 
}({}));

函數中需要傳一個形參exports，并且又立即傳入一個空對象。

然后，我們來看下函數內的內容。

我們會看到函數中有很多變量與函數方法，那么我們就按功能來分析。

首先，我們看到了一個全局對象，全局對象中分別定義了幾個屬性。這樣做是為了減少全局變量污染，JS可以隨意定義保存所有應用資源的全局變量，但全局變量可以削弱程序靈活性，增大了模塊之間的耦合性。最小化使用全局變量的一個方法是在你的應用中只創建唯一一個全局變量。

// global object 
const globalObj = { 
    _nHtml: [], // 存放新DOM數組 
    _oHtml: [], // 存放舊DOM數組 
    _el: null, // 掛載DOM節點 
    _data: null, // 存放數據 
    _template: null, // 模板字符串 
    _sourceTemplate: null // 源模板字符串 
};

然后，我們接著看初始化階段，這個階段是將模板字符串轉換成視圖。

// initialization 
function createView(v) { 
    globalObj._data = v.data; 
    globalObj._template = v.template; 
    globalObj._sourceTemplate = v.template; 
    globalObj._el = v.el; 
    v.el ? document.querySelector(v.el).insertAdjacentHTML("beforeEnd", render(globalObj._template)) : console.error("Error: Please set el property!"); 
}

我們看到這個createView方法傳入了一個參數，也就是我們之前傳入的那個對象：

Strview.createView({ 
        el: "#app", 
        data: { 
            msg: 'Hello World' 
        }, 
        template: `<p>{msg}</p>`, 
    });

我們看到傳入的對象中的屬性分別賦給全局對象globalObj。在最后一行中通過判斷v.el是否是真值，如果是就執行這行代碼：

document.querySelector(v.el).insertAdjacentHTML("beforeEnd", render(globalObj._template))

這行代碼執行了insertAdjacentHTML()方法，這個方法在MDN上是這樣解釋它的。

insertAdjacentHTML() 方法將指定的文本解析為 Element 元素，并將結果節點插入到DOM樹中的指定位置。它不會重新解析它正在使用的元素，因此它不會破壞元素內的現有元素。這避免了額外的序列化步驟，使其比直接使用innerHTML操作更快。

insertAdjacentHTML()方法傳入的第二個參數是是要被解析為HTML或XML元素，并插入到DOM樹中的DOMString，render(globalObj._template)這個方法就是返回的DOMString。

如果是假，就執行console.error("Error: Please set el property!")，在瀏覽器上輸出錯誤。

既然這個用到了render(globalObj._template)這個方法，那么我們下面來看下。

// template engine 
function render(template) { 
    const reg = /\{(.+?)\}/; 
    if (reg.test(template)) { 
        const key = reg.exec(template)[1]; 
        if (globalObj._data.hasOwnProperty(key)) { 
            template = template.replace(reg, globalObj._data[key]); 
        } else { 
            template = template.replace(reg, eval(`globalObj._data.${key}`)); 
        } 
        return render(template) 
    } 
 
    return template; 
}

首先，這個render(template)方法傳入了一個參數，第一個參數是模板字符串。

然后，我們進入這個方法中看一下，首先，我們定義了正則/\{(.+?)\}/，用于匹配模板字符串中的{}中的內容。如果匹配為真，就進入這個邏輯：

const key = reg.exec(template)[1]; 
if (globalObj._data.hasOwnProperty(key)) { 
    template = template.replace(reg, globalObj._data[key]); 
} else { 
    template = template.replace(reg, eval(`globalObj._data.${key}`)); 
} 
return render(template)

我們在第一行代碼中看到了這行代碼const key = reg.exec(template)[1]，這里使用的是reg.exec()方法，MDN這樣解釋它：

exec() 方法在一個指定字符串中執行一個搜索匹配。返回一個結果數組或 null。在設置了 global 或 sticky 標志位的情況下(如 /foo/g or /foo/y)，JavaScript RegExp 對象是有狀態的。他們會將上次成功匹配后的位置記錄在 lastIndex 屬性中。使用此特性，exec() 可用來對單個字符串中的多次匹配結果進行逐條的遍歷(包括捕獲到的匹配)，而相比之下， String.prototype.match() 只會返回匹配到的結果。

所以，通過這個方法我們取到了模板字符串中的{}中的內容，它一般是我們存取數據_data中的屬性。首先，我們判斷globalObj._data對象中是否有這個key，如果有我們就使用字符串替換方法replace來把對應的占位符key替換成所對應的值。下面接著進行遞歸，直到reg.test(template)返回為false。最終，render()方法返回處理后的template。

看完render()方法，我們來看下事件處理階段，也就是eventListener()方法。

// event listeners 
function eventListener(el, event, cb) { 
    document.querySelector(el).addEventListener(event, cb); 
}

這個方法很簡單，第一個參數傳入DOM選擇器，第二個參數傳入一個事件名，第三個參數傳入一個回調函數。

最后，我們來看下Strview.js的數據響應系統。

// processing simple values 
function ref() { 
    return new Proxy(globalObj._data, { 
        get: (target, key) => { 
            return target[key] 
        }, 
        set: (target, key, newValue) => { 
            target[key] = newValue; 
            setTemplate(); 
            return true; 
        } 
    }) 
} 
 
// reactiveHandlers 
const reactiveHandlers = { 
    get: (target, key) => { 
        if (typeof target[key] === 'object' && target[key] !== null) { 
            return new Proxy(target[key], reactiveHandlers); 
        } 
        return Reflect.get(target, key); 
    }, 
    set: (target, key, value) => { 
        Reflect.set(target, key, value); 
        setTemplate(); 
        return true 
    } 
}; 
 
// respond to complex objects 
function reactive() { 
    return new Proxy(globalObj._data, reactiveHandlers) 
}

上面這些代碼主要是reactive()、ref()這兩個方法的實現。reactive()方法是針對復雜數據的處理，比如嵌套對象以及數組。ref()方法主要是針對簡單數據的處理，像是原始值與單一非嵌套對象。

它們兩個都是基于Proxy代理來實現數據的攔截與響應，MDN中這樣定義它。

Proxy 對象用于創建一個對象的代理，從而實現基本操作的攔截和自定義(如屬性查找、賦值、枚舉、函數調用等)。

它們兩個Proxy對象第一個參數都是我們在初始化定義的globalObj._data，第二個參數是一個通常以函數作為屬性的對象。這里都定義了get()方法、set()方法，get()是屬性讀取操作的捕捉器，set()是屬性設置操作的捕捉器。

reactive()、ref()這兩個方法實現不一樣的地方是reactive()方法加上了對嵌套對象判斷來實現遞歸。

我們在set()方法中看到它們都調用了setTemplate()方法，下面，我們來看下這個方法。

// update the view 
function setTemplate() { 
    const oNode = document.querySelector(globalObj._el); 
    const nNode = toHtml(render(globalObj._sourceTemplate)); 
    compile(oNode, 'o'); 
    compile(nNode, 'n'); 
    if (globalObj._oHtml.length === globalObj._nHtml.length) { 
        for (let index = 0; index < globalObj._oHtml.length; index++) { 
            const element = globalObj._oHtml[index]; 
            element.textContent !== globalObj._nHtml[index].textContent && (element.textContent = globalObj._nHtml[index].textContent); 
        } 
    } 
}

首先，我們取到初始化時掛載的DOM節點，接著我們使用toHtml()方法將render(globalObj._sourceTemplate)方法作為第一個參數傳入。

我們先來看下toHtml()方法，這里的第一個參數domStr，也就是render(globalObj._sourceTemplate)。

// string to DOM 
function toHtml(domStr) { 
    const parser = new DOMParser(); 
    return parser.parseFromString(domStr, "text/html"); 
}

toHtml()方法第一行我們實例化了一個DOMParser對象。一旦建立了一個解析對象以后，你就可以使用它的parseFromString方法來解析一個html字符串。

然后，我們回到setTemplate()方法中，變量nNode被賦值了toHtml(render(globalObj._sourceTemplate))，這里是被處理成一個DOM對象。

接著，執行compile()方法。

compile(oNode, 'o'); 
compile(nNode, 'n');

我們來看下這個compile()方法。

// compile DOM 
function compile(node, type) { 
    const childNodesArr = node.childNodes; 
    for (let index = 0; index < Array.from(childNodesArr).length; index++) { 
        const item = Array.from(childNodesArr)[index]; 
        if (item.childNodes && item.childNodes.length) { 
            compile(item, type); 
        } else if (isTextNode(item) && item.textContent.trim().length !== 0) { 
            type === 'o' ? globalObj._oHtml.push(item) : globalObj._nHtml.push(item); 
        } 
    } 
}

這個方法是將遍歷DOM元素并把每一項存儲到我們初始化定義的數組里面，分別是globalObj._oHtml和globalObj._nHtml，這個方法中用到了isTextNode()方法。

// judge text node 
function isTextNode(node) { 
    return node.nodeType === 3; 
}

這個方法第一個參數是一個Node節點，如果它的nodeType屬性等于3就說明這個節點是文本節點。

最后，我們又回到setTemplate()方法中，接著執行以下代碼：

if (globalObj._oHtml.length === globalObj._nHtml.length) { 
    for (let index = 0; index < globalObj._oHtml.length; index++) { 
        const element = globalObj._oHtml[index]; 
        element.textContent !== globalObj._nHtml[index].textContent && (element.textContent = globalObj._nHtml[index].textContent); 
    } 
}

判斷兩個數組的長度是否一樣，如果一樣就遍歷globalObj._oHtml，最后判斷globalObj._nHtml[index].textContent是否等于globalObj._oHtml[index].textContent，如果不相等，直接將globalObj._nHtml[index].textContent賦于globalObj._OHtml[index].textContent，完成更新。

最后，將這幾個定義的方法賦于傳入的exports對象并返回這個對象。

// exports 
exports.createView = createView; 
exports.eventListener = eventListener; 
exports.reactive = reactive; 
exports.ref = ref; 
 
Object.defineProperty(exports, '__esModule', { value: true }); 
 
return exports;

這里，有一行代碼Object.defineProperty(exports, '__esModule', { value: true })，這行代碼其實也可以這么寫exports.__esModule = true。表面上看就是把一個導出對象標識為一個 ES 模塊。

隨著 JS 不斷發展和 Node.js 的出現，JS 慢慢有了模塊化方案。在 ES6 之前，最有名的就是 CommonJS / AMD，AMD 就不提了現在基本不用。CommonJS 被 Node.js 采用至今，與 ES 模塊共存。由于 Node.js 早期模塊化方案選擇了 CommonJS，導致現在 NPM 上仍然存在大量的 CommonJS 模塊，JS 圈子一時半會兒是丟不掉 CommonJS 了。

Webpack 實現了一套 CommonJS 模塊化方案，支持打包 CommonJS 模塊，同時也支持打包 ES 模塊。但是兩種模塊格式混用的時候問題就來了，ES 模塊和 CommonJS 模塊并不完全兼容，CommonJS 的 module.exports 在 ES 模塊中沒有對應的表達方式，和默認導出 export default 是不一樣的。

而__esModule則是用來兼容 ES 模塊導入 CommonJS 模塊默認導出方案。

結語

至此，Strview.js的源碼分析完畢。謝謝閱讀~

開發版本

推薦使用StrviewCLI搭建StrviewApp項目腳手架。

https://github.com/maomincoding/strview-app

生產版本

直接引入CDN鏈接，目前版本為1.9.0。

https://cdn.jsdelivr.net/npm/strview@1.9.0/dist/strview.global.js

責任編輯：姜華來源：前端歷劫之路

Strview.js 工具 js

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

一篇文章教你如何寫成Strview.js之源碼剖析

[[421771]]

前言

剖析源碼

結語

開發版本

生產版本