仿照vue實現簡易的MVVM框架（二）

2022-09-12 08:15:11 字數 1629 閱讀 6919

實現文字插值與s-for迴圈模版。

對於文字插值的實現，我採用正則去匹配還原這個dom節點，以插值}形式為分界，將這個dom節點的文字分割成多個字串，儲存在this.muscha中，再者，將普通文字字串以陣列形式儲存在string屬性中，將插值存放在text屬性值。當然，拼接的時候要明白先從string還是先從text開始拼接，我採用的方法是設定標誌值，tag屬性為0時，從text開始，為1時從string開始，儲存完成後，解析拼接時只會出現這麼幾種情況：字串文字在前插值（1個或者多個）在後、只出現插值（1個或者多個）、前面後面插值中間為字串，前面後面為字串中間為插值。這些都可以分別處理，this.muscha函式如下：

this.muscha = function(value) ;


var reg = /\\}/g;


if (!reg.test(value)) 


var match;


var lastindex = reg.lastindex = 0;


var index;


while(match = reg.exec(value)) 


temp.text.push(match[1]);


lastindex = index + match[0].length; } 


if (lastindex < value.length) 


return temp;


}
拼接字串的方式如下：

this.strsplit = function(item) 


break;


case 1:


str = data[item.muscha.text[0]] + item.muscha.string[0];


break;


default:


for (var i = 0; i < len; i++) 


str += data[item.muscha.text[i]];


} } else 


str += item.muscha.string[j];


} }return str; 


}
進一步，實現迴圈模版。帶有非根元素(**中的最外層節點)的父元素的迴圈節點處理起來相對容易，只需要將父元素先清理乾淨（parentnode.innerhtml = ''），迴圈資料後插入相應的dom節點即可。只是花了不少的時間在父元素為根節點的迴圈模版上，如果採用相同的方法，頁面結構必然會被破壞，當我們重寫這個節點後對節點的引用也就失效了，於是上一種的情況採用父節點來輔助，於是在這就聯想到，我是否可以借助兄弟元素來實現呢？當然，各種各樣的問題也在這裡出現，加深了對dom節點操作的知識（唉，太渣！），倒騰了不久，終於寫出了**！（但是就是醜~）。**如下：

case 's-for':


var items = data[item.list];


var fragment = document.createdocumentfragment();


if (content) 


}} if (item.parentnode) else else 


}} }


break;


};
好了，暫時就實現這麼點，插值的供能是很強大的，這裡實現的功能也只是一部分~

仿照vue實現簡易的MVVM框架（一）

主要的方法有 compile 深度遍歷前端介面的節點，將其複製進乙個addquene佇列中 pasers 遍歷所有的節點，並將節點包裝成乙個含有本節點 自定義屬性及屬性值的物件。要想實現雙向繫結，重要的一步是，為自定義s model的節點繫結事件 input框的雙向繫結，監聽oninput事件 ob...

Vue 實現mvvm框架

observe obj 訂閱 key 資料 if this.binding key let binding this.binding key 重寫getter,setter object.defineproperty obj,key,set newval proxydata data,vm set ...

仿照String類，實現簡易版MyString類

還可以和vector一起用 別忘了寫在自己的命名空間，防止衝突 ifndef litestring h included define litestring h included include include namespace mystl else return dest size t strl...