JavaScript 自定义事件而不用 MVC 者,都是耍流氓

自定义事件这事儿,得用 MVC。

宝宝和我说,凡是写事件不用 MVC 者,都是耍流氓。我对此深以为然。

其实宝宝只说过后半句。

事件这玩意儿,从实现上来说,需要实现委托注册管理和事件触发回调这两块;从定义上来说,需要由事件服务定义委托管理和事件触发,由事件监听者定义委托注册和事件回调;从角色划分来说,需要分为服务者、触发者、监听者。这套排列组合,你已经乱了是吧。所以说,事件长得是这德性的:

// 服务者
public delegate void EventHandler(object sender, EventArgs e);
public event EventHandler SomeEventHandler;
protected virtual void OnSomeEvent(EventArgs e) {
  if(SomeEventHandler) {
    SomeEventHandler(this, e);
  }
}

// 触发者
OnSomeEvent(EventArgs.Instance);

// 监听者
SomeEventHandler += (s, e) => {};

好,这就是定义式,交给 C# 来下定义。话说,这个 EventArgs 类用得很传神啊,省得变长参了~用这么重的语言下的定义反而是最简洁的。

所以宝宝说得对,就得用 MVC。

因此,先定义事件服务,才是根本:

app.service('Events', function () {
    var eventlist = {};
    this.on = function (event, callback) {
      if (!eventlist[event]) {
        eventlist[event] = [];
      }
      eventlist[event].push(callback);
      return this;
    };
    this.un = function (event) {
      for (var i = 0, l = eventlist[event].length; i < l; i++) {
        eventlist[event][i] = null;
      }
      delete eventlist[event];
      return this;
    };
    this.trigger = function (event) {
      if (eventlist[event]) {
        var args = Array.prototype.slice.call(arguments).slice(1);
        for (var i = 0, l = eventlist[event].length; i < l; i++) {
          eventlist[event][i].apply(null, args);
        }
      }
      return this;
    };
  })

委托管理完了,完成事件触发:

Events.trigger('Event1', 'Para1', 'Para2').trigger('Event2', 'Para1');

然后就是委托注册和事件回调:

Events.on('Event1', function (e, f) {
  // 操作 e f
}).on('Event2', function (e) {
    // 操作 e
  });

这就写完了。没法儿再简洁了。

---------------------------------------

紫鹃依旧香甜。

港版 iphone6 下个月就差不多了。

6P 的问题太多了,连自己的系统应用都坑。如果这款产品没有后续的话……总归,6P 是不能要的。

时间: 2024-07-31 01:17:45

JavaScript 自定义事件而不用 MVC 者,都是耍流氓的相关文章

JavaScript 自定义事件

Javascript事件模型系列(四)我所理解的javascript自定义事件 漫谈js自定义事件.DOM/伪DOM自定义事件

JavaScript自定义事件 - createEvent()、initEvent()和dispachEvent()

参考资料: MDN - Document.createEvent():https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createEvent MDN - Event.initEvent():https://developer.mozilla.org/zh-CN/docs/Web/API/Event/initEvent MDN - 创建和触发events:https://developer.mozilla.org/zh-CN/do

JavaScript自定义事件,动态添加属性

根据事件的不同,可用的自定义方法也不同. document.createEvent('Event'); 实现主要有4个步骤: 1.创建事件. 2.初始化事件(三个参数:事件名,是否起泡,是否取消默认触发) 3.监听事件 4.触发事件 var Evt = document.createEvent('Event');//创建一个事件 Evt.initEvent('inputChangeEvt', true, true);//初始化事件,给定事件名字 window.addEventListener('

Javascript 自定义事件 (custom event)

Javascript 中经常会用到自定义事件.如何创建一个简单的自定义事件呢?在创建自定义的事件之前,我们应该考虑一下和事件有关的东西.例如 click 事件,首先我们要能注册一个click事件(在一个button上绑定click事件),然后要能够触发这个事件,最后事件不需要的时候要能够移除事件. 我们可以借助JQuery 的方法来实现自定义事件,请看下面的例子: <div id="myDiv">myDiv</div> <script type="

高级功能:很有用的javascript自定义事件

之前写了篇文章<原生javascript实现类似jquery on方法的行为监听>比较浅显,能够简单的使用场景. 这里的自定义事件指的是区别javascript默认的与DOM交互的事件,比如click,mouseover,change等,有时候我们需要监听某一行为是否发生,很显然默认的行为不够用,比如一个场景.我们写好了tab切换,点击后请求加载隐藏标签的内容. tab切换是非常常用的一个功能,通常会写成组件,如果每次把请求写在组件里肯定对组件拓展和耦合性有影响.这时候我们可以在组件里自定义一

JavaScript自定义事件监听

一.事件的属性和方法 1 //事件Event 2 //属性:` 3 `bubbles`:布尔值,是否会冒泡 4 `cancelable`:布尔值,是否可以取消默认动作 5 `target`:目标对象 6 `currentTarget`:当前对象 7 `timeStamp`:时间戳(相对于某个时刻) 8 `type`:事件类型,即注册该事件的名字 9 `eventPhase`:返回事件传播的当前阶段 10 11 12 //方法 13 1.event.stopPropagation(); 阻止冒泡

Javascript自定义事件

触发用户自定义事件,已成为各前端框架的基本技术.(较新版本的浏览器才支持) 页面 <div id="outer"> <div id="inner">Leonardo Da Vinci</div> </div> <button onclick="tiggerMyEvent();">触发事件</button> 脚本 document.querySelector("#ou

JavaScript自定义事件和触发(createEvent, dispatchEvent)

$(dom).addEvent("ft", function() { alert("走起"); }); // 创建 var evt = document.createEvent("HTMLEvents"); // 初始化 evt.initEvent("ft", false, false); // 触发, 即弹出文字 dom.dispatchEvent(evt); //type:HTMLEvents MouseEvents(也可

javascript事件之:谈谈自定义事件(转)

http://www.cnblogs.com/pfzeng/p/4162951.html 对于JavaScript自定义事件,印象最深刻的是用jQuery在做图片懒加载的时候.给需要懒加载的图片定义一个appear事件.当页面图片开始出现时候,触发这个自定义的appear事件(注意,这里只触发一次). 由此,现在我们通过JavaScript谈一谈自定义事件. 所谓事件,说的明白点,就是在一个合适的时候触发调用某个函数.平常说的事件是那些比较常用的,绑定在元素身上的某个方法,当用户触发某个行为时,