Source Code - JavaScript - 学习优雅的编码

2018-05-26 admin

宁静致远。


说明

  • 知识在不断迭代,除了学习资料,那就是学习他人,来丰富自己。
  • 以下全是别人的源码,会标明出处,非常感谢原作者,非常感谢开源。

优雅

mitt

源码:由于源码仅约200b,所以贴出所有源码参考。

  // @flow
  // An event handler can take an optional event argument
  // and should not return a value
  type EventHandler = (event?: any) => void;
  type WildCardEventHandler = (type: string, event?: any) => void

  // An array of all currently registered event handlers for a type
  type EventHandlerList = Array<EventHandler>;
  type WildCardEventHandlerList = Array<WildCardEventHandler>;
  // A map of event types and their corresponding event handlers.
  type EventHandlerMap = {
    '*'?: WildCardEventHandlerList,
    [type: string]: EventHandlerList,
  };

  /** Mitt: Tiny (~200b) functional event emitter / pubsub.
   *  @name mitt
   *  @returns {Mitt}
   */
  export default function mitt(all: EventHandlerMap) {
      all = all || Object.create(null);

      return {
          /**
           * Register an event handler for the given type.
           *
           * @param  {String} type    Type of event to listen for, or `"*"` for all events
           * @param  {Function} handler Function to call in response to given event
           * @memberOf mitt
           */
          on(type: string, handler: EventHandler) {
              (all[type] || (all[type] = [])).push(handler);
          },

          /**
           * Remove an event handler for the given type.
           *
           * @param  {String} type    Type of event to unregister `handler` from, or `"*"`
           * @param  {Function} handler Handler function to remove
           * @memberOf mitt
           */
          off(type: string, handler: EventHandler) {
              if (all[type]) {
                  all[type].splice(all[type].indexOf(handler) >>> 0, 1);
              }
          },

          /**
           * Invoke all handlers for the given type.
           * If present, `"*"` handlers are invoked after type-matched handlers.
           *
           * @param {String} type  The event type to invoke
           * @param {Any} [evt]  Any value (object is recommended and powerful), passed to each handler
           * @memberOf mitt
           */
          emit(type: string, evt: any) {
              (all[type] || []).slice().map((handler) => { handler(evt); });
              (all['*'] || []).slice().map((handler) => { handler(type, evt); });
          }
      };
  }

代码优雅之

  // source code
  all = all || Object.create(null);
  • 短路运算符:MDN
  • Object.create(null):生成的对象是一个原型为空的对象。节约内存且避免冲突,因为没有原型,且普通对象原型上的属性和方法也相应没有了。
  // source code
  (all[type] || (all[type] = [])).push(handler);
  // my code - bad
  if (all[type]) {
    all[type].push(handler)
  } else {
    all[type] = [handler]
  }
  • 简洁的队列赋值:短路逻辑判断 + 初始化 + 更新数组,简直不要太优雅。
  // source code
  all[type].splice(all[type].indexOf(handler) >>> 0, 1);
  • 按位操作符:1 >>> 0 = 1, -1 >>> 0 = 4294967295, 详情MDN
  • 补充:按位操作符’~’,可以结合.indexOf()使用,因为对任一数值 x 进行按位非操作的结果为 -(x + 1),即:~-1 = 0
  // source code
  (all[type] || []).slice().map((handler) => { handler(evt); });
  (all['*'] || []).slice().map((handler) => { handler(type, evt); });
  • Array.slice():slice不传参数的时候,相当于浅复制一个数组,详情MDN

好记性不如烂笔头。

原文链接:https://segmentfault.com/a/1190000015043262

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-33060.html

文章标题:Source Code - JavaScript - 学习优雅的编码

相关文章
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 &lt;span id=“mt9” class=“sent...
2015-11-12
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
7个让JavaScript变得更好的注意事项
随着浏览器性能提高,伴随着新的HTML5的编程接口的稳步采用,网页上的JavaScript的音量在逐渐增加。然而,一个写得不好的程序编码却拥有着打破整个网站,让用户为之沮丧和驱赶潜在客户的潜力。 开发人员必须使用所有供他们任意使用的工具和技...
2015-11-12
JavaScript短路原理精简代码
js中||和&amp;&amp;的特性帮我们精简了代码的同时,也带来了代码可读性的降低,虽然高效,但请灵活使用。 在js逻辑运算中,0、&quot;&quot;、null、false、undefined、NaN都会判为false,其他都为t...
2015-11-12
回到顶部