Tocas 的新功能 「Binder」

螢幕快照 2015-08-20 下午2.18.01

其實這個功能是看到這一篇「Backbone 的 View」有感而發的,

在 Backbone.js 裡面這裡的範例是這樣:

events:
{
    "click #add-friend":  "showPrompt",
    "click .delete"    :  "delete_li"
}

我想說:「喔?還不錯。」

然後就打算自己也在 Tocas 加了一個類似的功能,不過寫法不同,

因為看起來 Backbone.js 是透過「空白」來區隔「事件」跟「元素」的,

但是我想說有時候可能會加很多「事件」,有時候可能會有很多「元素」,或者很多「回傳」。


 

Tocas 做法

所以我後來研發出來的寫法是這樣:

$.binder = function(Binds)
{
    for(var i in Binds)
    {
        /** Split the event and the target first */
        var Splits  = i.split('|'),
        /** The first array is events */
            Events  = Splits[0],
        /** Split the targets */
            Targets = Splits[1].split('&')
        
        /** Each target */ 
        for(var t in Targets)
            if(Binds[i].isArray)
                /** Bind each callback if it's a callback array */
                for(var f in Binds[i])
                    $(Targets[t]).on(Events, Binds[i][f])
            else
                $(Targets[t]).on(Events, Binds[i])
    }
}

用法

$.binder
({  
    'click     | img & a' : meow.addNew,
    'mouseover | img'     : meow.removeNew
})

翻譯成中文可以像這樣

$.binder
({  
    '事件 事件 事件 | 元素 & 元素' : 回傳,
    '事件          | 元素'       : [回傳, 回傳]
})

所以你可以有多個事件,或是多個元素,甚至多個回傳(用陣列包起來)。


 

比照圖

螢幕快照 2015-08-20 下午2.18.01

看起來至少比下面的一般 $.on 還要好多了 ..

螢幕快照 2015-08-20 下午2.10.21

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s