magix中的2種事件綁定方式

Scorpion 發布于2019-08-22 10:35 / 2899人閱讀

摘要：可操作與采用與文件分離的寫法，當我們在閱讀時，希望能直觀的看出節點綁定了哪些事件或這個函數是為哪種事件服務的。這種方案優于通過選擇器查找到節點動態綁定事件。

可操作html與js

magix采用html與js文件分離的寫法，當我們在閱讀時，希望能直觀的看出節點綁定了哪些事件或這個函數是為哪種事件服務的。
如下html

我們在閱讀上述html片斷時，可直觀的看到內容為save的button綁定了click事件，且調用的是save方法

再如下js

render: function() {
    //render codes
},
"save": function(e) {
    console.log("save clicked");
}

我們在閱讀時可以知道save這個函數是為click事件服務的，這樣在分離閱讀它們時，能夠快速知道它們是做什么用的，不需要來回切換js和html才能夠知道事件的綁定。

這種方案優于通過選擇器查找到節點動態綁定事件。

全局與插件

前述方案僅適用于能通過html標簽綁定，但有些全局對象如window和document并沒有對應的html標簽，所以這種要如何綁定？

再如我們開發一個插件，比如列表前面帶checkbox，最頂部有一個全選的按鈕，通過點擊全選按鈕可以快速選中這些checkobx，html結構可能如下


    <%for(var i=0;i<100;i++){%>
    
    <%}%>

我們希望開發一個js插件，用于這個全選功能，如示例中的table增加一個mx-view屬性值為coms/select/all

當我們在實現這樣的插件時，用于html結構是別的開發者提供的，做為插件提供方是無法操作html標簽結構的，所以這時候我們如何綁定事件？

這2種情況就直接使用類庫的事件綁定機制即可，以jQuery為例

init: function() {
    $(window).on("scroll", function() {
        //scroll codes
    });
}

這也是 https://github.com/thx/magix/... 這個不再支持的原因。

總結就是：可操作html的，用magix提供的方案，否則就用類庫的方案綁定

歡迎試用magix，區塊化管理利器 https://github.com/thx/magix/...
magix https://github.com/thx/magix
歡迎star與fork

云服務器 GPU云服務器幾種方式 ddos三種攻擊方式序列化兩種方式 js繼承的幾種方式

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

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

magix中的2種事件綁定方式

摘要：可操作與采用與文件分離的寫法，當我們在閱讀時，希望能直觀的看出節點綁定了哪些事件或這個函數是為哪種事件服務的。這種方案優于通過選擇器查找到節點動態綁定事件。可操作html與js magix采用html與js文件分離的寫法，當我們在閱讀時，希望能直觀的看出節點綁定了哪些事件或這個函數是為哪種事件服務的。如下html save 我們在閱讀上述html片斷時，可直觀的...

張金寶 2019-08-29 11:04 評論0 收藏0
magix中的2種事件綁定方式

摘要：可操作與采用與文件分離的寫法，當我們在閱讀時，希望能直觀的看出節點綁定了哪些事件或這個函數是為哪種事件服務的。這種方案優于通過選擇器查找到節點動態綁定事件。可操作html與js magix采用html與js文件分離的寫法，當我們在閱讀時，希望能直觀的看出節點綁定了哪些事件或這個函數是為哪種事件服務的。如下html save 我們在閱讀上述html片斷時，可直觀的...

zxhaaa 2019-08-01 15:34 評論0 收藏0
magix，阿里媽媽前端頁面區塊化利器

摘要：前端工程師就是在重復使用組裝這些區塊標簽形成最終的需求頁面。這是最原子的區塊，我們要達到想要的頁面效果，就得不停的重復嵌套這些區塊。這些區塊通常是由多個標簽組合而成的。這些區塊應該很容易被復用。轉載請注明出處: https://github.com/thx/magix/... 什么是區塊其實html標簽就是區塊，比如 div span a等標簽。前端工程師就是在重復使用、組裝這些區...

wmui 2019-08-22 11:01 評論0 收藏0
識別滾動條上的mousedown mouseup事件

摘要：當用戶鼠標在滾動條上按下的時候，我們可以假設他她正在瀏覽網頁內容，那么這個時候好的用戶體驗就不能讓滾動條再自動滾動了。為了實現這個功能，可能大家首先會想到的就是和事件了。轉載請注明出處：https://github.com/xinglie/xi... 網頁內容區域自動滾動，滾動條會隨著內容的增加自動往下滾動。當用戶鼠標在滾動條上按下的時候，我們可以假設他（她）正在瀏覽網頁內容，那么...

xiaokai 2019-08-22 10:34 評論0 收藏0
Magix.Cache介紹

摘要：我們簡單測試下彳刂接下來我們要考慮一但緩存資源數超出了我們規定的時，我們要清理掉不常用的資源。是一個區塊管理框架，項目地址在這里區塊介紹在這里區塊介紹轉載請注明出處：https://github.com/thx/magix/... 在前端開發過程中，我們經常會在內存中緩存一些數據，其實javascript的緩存比較簡單，只需要聲明一個變量或把一些數據掛到某個對象上即可，比如我們要實現...

CatalpaFlat 2019-08-29 11:05 評論0 收藏0