以vue依賴統計為核心的框架(函數)，mve

Carl 發布于2019-08-23 10:56 / 2073人閱讀

摘要：試用過幾回，不滿的地方，是一個框架，必須最好按它的方式來編碼，與混編，使用文件。經過一翻網絡搜索，勉強明白了依賴更新的實現方式，便嘗試著自己去實現一個框架。如今有依賴更新這種技術的存在，我覺得找到了可能。

初接觸vue，驚為天人，它的更新方式極為取巧，但也是人們保持路人的原因：似乎沒有一個嚴格的數學證明保證按它的方式能精確更新到DOM。不過腦子里推演的似乎不會發生失敗，而且每次界面都能按預期更新的效果十分動人——這似乎是目前mvvm中最快最準確的更新方式。

試用過幾回，不滿的地方，vue是一個框架，必須、最好按它的方式來編碼，xml與jscss混編，使用.vue文件。雖然后來放開可以使用template字符串。以及它內聚成字典的寫法，xml語法都是我不習慣的地方，我只想用純粹的js語言來編程。經過一翻網絡搜索，勉強明白了依賴更新的實現方式，便嘗試著自己去實現一個框架。

沒接觸vue之前，我制作了一個叫jsdom的小模塊，使用其中一個叫parseElement的函數，接受一個嵌套的字典/數組作參數。因為js的字典/數組聲明跟json一樣樹狀嵌套，而且更加靈活(key不必雙引號，value可以是函數)，而html/xml也是樹狀的，便可以模擬html/xml，不用像模板引擎或jquery一樣拼湊xml字符串，內部遞歸調用DOM元素的創建修改方法，也就很好地避免了注入攻擊。而且傳統的各種界面編程使用各種xml，訪問屬性調用方法又在源碼文件，這種分離很不方便，因此在這種嵌套的Object/Array中內置函數，至少減少了代碼，明確了調用。字典中如果有id，將字典解析生成的元素節點放置進me.k這個字典里，用來修改DOM元素，也可以實現局部模塊化（jsdom源碼也在附的開源代碼中，可進入查看）。而且在js這種完整的語言下，也可以對局部片段像模板引擎一樣輕松重復。性能，我是沒考慮的，但至少安全是保證了的，因為已經快到超過人的感知，而且相信用純粹一種語言，肯定比幾種語言混編性能高。

//簡單示例
jsdom.parseElement({
    type:"div",
    attr:{
        a:1,
        b:2
    },
    style:{
        color:"red",
        "background-color":"green"
    },
    children:[
        {
            type:"div",
            id:"a"
        },
        {
            type:"button",
            text:"點擊",
            action:{
                click:function(e){
                    console.log(e);
                }
            }
        }
    ]
},me);

但jsdom.parseElement使用要回寫DOM，使用DOM的API修改元素屬性，這很麻煩，這也是各家mvvm創建的原因。如果attr節點，或style節點下的value不是字符串或數字，而是函數，就能動態更新這些屬性，這就是我理想中的mvvm方式。如今有vue依賴更新這種技術的存在，我覺得找到了可能。

實現mve的過程中，我發現組件的watch需要在銷毀時回收，于是不得不改變mve的調用方式，和jsdom.parseElement不同。具體可以參見開源代碼中的示例。

后來越來越覺得js很煩人（即使已經比各面向對象語言方便多了；我一直使用其函數式的部分lambda的部分而不使用其原型式的部分），逗號很多很容易寫錯，函數聲明很煩，字符串必須包含在引號中難免前后空格，字典沒有默認順序。。。。為了優化js的寫法，我去研究lisp，然后有了我的另一個開源項目S-Lisp這套語法方案，越深入思考越發現這套方案的威力強大，甚至C++版實現的S-Lisp可以通過引用計數精確回收內存，因此順帶推薦。同時mve下有一個js實現的S-Lisp，及這個S-Lisp實現的mve，然而只是部分實現，children的repeat還未實現。歡迎大家關注，希望能夠幫助到大家，同時也希望大家如果有什么好的改進，不要吝惜分享出來，共同進步。

開源地址

github
gitee

附：S-Lisp
gitee
github

GPU云服務器云服務器以深圳為機房的云vps 以深圳為機房的云主機以用戶為中心構造函數依賴注入

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

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

ESLint 在中大型團隊的應用實踐

摘要：自動化接入和升級方案通過命令行工具提供一鍵接入升級能力，同時集成到團隊腳手架中，大大降低了工程接入和維護的成本。原始代碼經過解析器的解析，在管道中逐一經過所有規則的檢查，最終檢測出所有不符合規范的代碼，并輸出為報告。引言代碼規范是軟件開發領域經久不衰的話題，幾乎所有工程師在開發過程中都會遇到，并或多或少會思考過這一問題。隨著前端應用的大型化和復雜化，越來越多的前端工程師和團隊開始重...

alogy 2019-08-26 10:34 評論0 收藏0
前端每周清單第 34 期：Vue 現狀盤點與 3.0 展望，React 代碼遷移與優化，圖片優化詳論

摘要：工程實踐立足實踐，提示實際水平內聯函數與性能很多關于性能優化的文章都會談及內聯函數，其也是常見的被詬病為拖慢性能表現的元兇之一不過本文卻是打破砂鍋問到底，論證了內聯函數并不一定就會拖慢性能，過度的性能優化反而會有損于應用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...

CoderStudy 2019-08-21 16:56 評論0 收藏0
從0開始構建一個屬于你自己的PHP框架

摘要：如何構建一個自己的框架為什么我們要去構建一個自己的框架可能絕大多數的人都會說市面上已經那么多的框架了，還造什么輪子。 showImg(https://segmentfault.com/img/bVNg9F?w=500&h=500); 如何構建一個自己的PHP框架為什么我們要去構建一個自己的PHP框架？可能絕大多數的人都會說市面上已經那么多的框架了，還造什么輪子？。我的觀點造輪子不是目...

vpants 2019-06-27 16:26 評論0 收藏0
前端每周清單第 48 期：Slack Webpack 構建優化，CSS 命名規范與用戶追蹤，Vue.

摘要：發布是由團隊開源的，操作接口庫，已成為事實上的瀏覽器操作標準。本周正式發布，為我們帶來了，，支持自定義頭部與腳部，支持增強，兼容原生協議等特性變化。新特性介紹日前發布了大版本更新，引入了一系列的新特性與提升，本文即是對這些變化進行深入解讀。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清單專注前端...

sean 2019-08-22 13:57 評論0 收藏0
2017年前端框架、類庫、工具大比拼

摘要：相比于開發人員的數量，目前框架類庫和工具的數量似乎更多一些。本文將會討論目前最為流行的客戶端框架類庫和工具以及它們之間的基本差異。典型的類庫包括字符串處理日期元素事件動畫網絡請求等功能。所以不需要明確的區分類庫框架和工具。相比于JavaScript開發人員的數量，目前JavaScript框架、類庫和工具的數量似乎更多一些。截至2017年5月，GitHub上的快速搜索顯示，有超過110...

Alliot 2019-08-20 17:22 評論0 收藏0