以vue依賴統(tǒng)計為核心的框架(函數(shù))，mve

Carl 發(fā)布于2019-08-23 10:56 / 2085人閱讀

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

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

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

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

//簡單示例
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創(chuàng)建的原因。如果attr節(jié)點，或style節(jié)點下的value不是字符串或數(shù)字，而是函數(shù)，就能動態(tài)更新這些屬性，這就是我理想中的mvvm方式。如今有vue依賴更新這種技術的存在，我覺得找到了可能。

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

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

開源地址

github
gitee

附：S-Lisp
gitee
github

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

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

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

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

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

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

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

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

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

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

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

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

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

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