{"id":242,"date":"2014-06-01T17:52:16","date_gmt":"2014-06-01T17:52:16","guid":{"rendered":"http:\/\/localhost\/__sites\/3d_blog\/?p=242"},"modified":"2022-05-24T19:47:12","modified_gmt":"2022-05-24T19:47:12","slug":"bindable-none-dom-objects","status":"publish","type":"post","link":"https:\/\/blog.silverterra.net\/?p=242","title":{"rendered":"bindable none DOM objects"},"content":{"rendered":"

Goal: to build an effective handshake mechanism between objects<\/p><\/blockquote>\n

In jQuery we have the very useful bind\/trigger logic. I want to use some similar on my objects.<\/p>\n

What I will do<\/strong><\/p>\n

I will extend the Object class with 3 methods, like _bind, _unbind, _trigger<\/p>\n

_bind<\/em>: to attach a function to my object
\n_unbind<\/em>: to detach a function from my object
\n_trigger<\/em>: call all attached functions<\/p>\n

First of all I need an Array to store the attached functions. This is the first extend of Object class:<\/p>\n

\r\n  Object.defineProperty(Object.prototype, "__bound", { writable: true });\r\n  Object.defineProperty(Object.prototype, "bound", {\r\n    get: function() {\r\n      this.__bound = this.__bound || [];\r\n      return this.__bound;\r\n    }\r\n  });  \r\n<\/pre>\n
_bind<\/strong> method<\/p>\n
I want to use with this form obj._bind('event.namespace', function(){alert('triggered')});<\/code><\/p>\n
\r\n  TypeExtend(Object, '_bind', function(evt, func) { \r\n    var evts = evt.split('.'),\r\n        obj = {namespace: (evts[1] && evts[1]), event: evts[0], f:func}\r\n    this.bound.push(obj);\r\n    return this;\r\n  });\r\n<\/pre>\n
_unbind<\/strong> method<\/p>\n
unbind all attached functions obj._unbind();<\/code>
\nunbind by namespace obj._unbind('.namespace');<\/code>
\nunbind by event name obj._unbind('event');<\/code><\/p>\n
\r\n  TypeExtend(Object, '_unbind', function(evt) { \r\n    if(!this.__bound){return false;}\r\n    if(!evt){\r\n      this.__bound = [];\r\n      delete this.__bound;\r\n    }\r\n    else{\r\n      var evts = evt.split('.');\r\n      for(var i in this.__bound){\r\n        if((evts[1] && this.__bound[i].namespace == evts[1])\r\n            || this.__bound[i].event == evts[0]){\r\n          delete this.__bound[i];\r\n        }\r\n      }\r\n    }\r\n    this.__bound.shrink(); \/\/ drop all undefined  items    \r\n    return this;\r\n  });\r\n<\/pre>\n
_trigger<\/strong> method<\/p>\n
using obj._trigger('event');<\/code><\/p>\n
\r\n  TypeExtend(Object, '_trigger', function(evt) { \r\n    if(!this.__bound){return false;}\r\n    for(var i in this.__bound){\r\n      if(this.__bound[i].event == evt){\r\n        var a = arguments;\r\n this.__bound[i].f && (this.__bound[i].f)(a[1],a[2],a[3],a[4],a[5],a[6],a[7],a[8],a[8],a[10]);\r\n      }\r\n    }\r\n    return this;\r\n  });\r\n<\/pre>\n
use like this<\/p>\n
\r\nvar f = {}; \/\/ new Object();\r\nf._bind('evt1.nspc', function(){console.log('first one');}); \/\/ a\r\nf._bind('evt2.nspc', function(){console.log('second one');}); \/\/ b\r\nf._bind('evt1.nspc2', function(){console.log('third one');}); \/\/ c\r\nf._trigger('evt1');\r\nf._trigger('evt2');\r\nf._unbind('.nspc'); \/\/ delete a and b\r\nf._trigger('evt1');\r\nf._trigger('evt2'); \/\/ b is deleted (do nothing)\r\n\/*\r\nfirst one\r\nthird one\r\nsecond one\r\nthird one\r\n*\/ \r\n<\/pre>\n
Bindable none DOM objects? Done. ✔<\/p>\n","protected":false},"excerpt":{"rendered":"
Goal: to build an effective handshake mechanism between objects In jQuery we have the very useful bind\/trigger logic. I want to use some similar on my objects. What I will do I will extend the Object class with 3 methods, like _bind, _unbind, _trigger _bind: to attach a function to my object _unbind: to detach […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-242","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=242"}],"version-history":[{"count":9,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/242\/revisions"}],"predecessor-version":[{"id":1163,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/242\/revisions\/1163"}],"wp:attachment":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=242"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=242"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}