從乙個簡單的元件化封裝寫優化DOM操作

2022-02-21 18:01:42 字數 1221 閱讀 7286

/*

*缺點* 1. 還需要我們自己手工維護dom狀態,以資料的思想去思考

*2. 資料改變後,還需要我們自己手動改變dom

*3.*

*/class likebutton

}createdomfromstring(domstr)

//如果原來有,現在沒有,新增這個屬性

//如果原來有,現在有,覆蓋這個屬性

setstate(newstate)

//render返回值決定了此元件長什麼樣子

//dom字串永遠只有乙個頂級元素

//因為我們dom字串是又state決定的,所以只需要在修改了state之後從新reader一下

//事件處理函式需要繫結this為元件的例項

handleclick(event))

}render()

` );

this.ele.addeventlistener('click',this.handleclick.bind(this

));

return

this

.ele;

}}

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>title

title

>

head

>

<

body

>

<

div

class

>

div>

body

>

<

script

src="likebutton.js"

>

script

>

<

script

>

let likebutton

=new

likebutton();

=document.queryselector(""

);script

>

html

>

Vue 封裝乙個自己寫的元件或方法

1.首先寫好裡面的模板及傳遞過來的引數 2.定義乙個index.js並引入剛建立的元件並export defaut vue 3.在main.js裡面引入 然後vue.use 引入的名稱 vue封裝乙個js引用 vue封裝的js裡面可以是個物件 也可以是方法 export 和 export defau...

寫乙個簡單的迷宮

二話不說 上迷宮 include include define number 13 int fx 4 int fy 4 void prin char arr number 列印 bool work char arr number int x,int y 判斷是否可以走 bool mymap char...

自己封裝的乙個JS分享元件

因為工作的需求之前也封裝過乙個js分享外掛程式,整合了我們公司常用的幾個分享平台。但是總感覺之前的結構上很不理想,樣式,行為揉成一起,心裡想的做的完美,實際上總是很多的偏差,所以這次我對其進行了改版。這次的核心就是 js只負責事件 結構,也就是把功能實現出來,具體的外觀樣式,則使用者自己進行定義。以...