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

初接觸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