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

zhoutk 发布于2019-08-22 17:33 / 1912人阅读

摘要：以下全是别人的源码，会标明出处，非常感谢原作者，非常感谢开源。优雅源码，微型库解读之的源码零散短路运算符详情生成的对象是一个原型为空的对象。简洁的队列赋值短路逻辑判断初始化更新数组，简直不要太优雅。

宁静致远。

说明

知识在不断迭代，除了学习资料，那就是学习他人，来丰富自己。

以下全是别人的源码，会标明出处，非常感谢原作者，非常感谢开源。

优雅

mitt：源码，微型库解读之200byte的EventEmitter - Mitt

axios: 源码

零散：12 useful hacks

mitt

  // 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

axios

  // source code
  别着急

零散

  // source code
  !!(0)             // false
  !!(null)          // false
  !!("")            // false
  !!(undefined)     // false
  !!(NaN)           // false
  
  !!(2)             // true

!!: 强制转换成 boolean 类型，相当于 !(!val)。如果 val = 0/null/""/undefined/NaN 时，!!(val) = false，如果 val 是其他值，!!(val) = true

!: 取反运算，返回的也是一个 boolean 类型。如果 val = 0/null/""/undefined/NaN 时，!(val) = false，如果 val 是其他值，!(val) = true

  // source code
  +"123456"        // 123456, Number
  +new Date()      // 1527684413484, 相当于 new Date().getTime()

+: +val 将字符串数字转为数字。如果 val 是非字符串数字，则 +val = NaN

好记性不如烂笔头。

GPU云服务器云服务器 webrtc source code javascript的学习学习javascript的 javascript编码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95287.html

使用神器Lombok优雅编码

摘要：提高编码效率使代码更简洁消除冗长代码避免修改字段名字时忘记修改方法名提高下逼格以上就是的优点，当然，的优点远远不止以上几点，使用，你可以更加优雅高效的编辑代码。实战完成了上述准备之后，就可以愉快的使用进行编码了。接下来是使用简化后的代码。 Lombok介绍近来偶遇一款撸码神器，介绍给大家~相信许多小伙伴都深有体会，POJO类中的千篇一律的getter/setter，construct...

_ang 2019-08-16 15:43 评论0 收藏0
UI5 Source code map机制的细节介绍

摘要：但是当时因为时间限制，没有去深入学习的更多细节。每一位的对应含义第一位，表示这个位置在转换后的压缩文件的第几列。第三位，表示这个位置属于原始文件的第几行。第五位，数组中的索引，表示这个位置属于源文件中的哪一个变量。在我的博客A debugging issue caused by source code mapping里我介绍了在我做SAP C4C开发时遇到的一个曾经困扰我很久的问题，...

whidy 2019-08-22 16:11 评论0 收藏0
UI5 Source code map机制的细节介绍

摘要：但是当时因为时间限制，没有去深入学习的更多细节。每一位的对应含义第一位，表示这个位置在转换后的压缩文件的第几列。第三位，表示这个位置属于原始文件的第几行。第五位，数组中的索引，表示这个位置属于源文件中的哪一个变量。在我的博客A debugging issue caused by source code mapping里我介绍了在我做SAP C4C开发时遇到的一个曾经困扰我很久的问题，...

YanceyOfficial 2019-08-15 15:21 评论0 收藏0
JavaScript的Source Map (sourceURL / sourceMappingUR

摘要：常见的源码转换，主要是以下三种情况压缩，减小体积。该项是一个数组，表示可能存在多个文件合并。第一层是行对应，以分号表示，每个分号对应转换后源码的一行。在这个位中，左边的第一位最高位表示是否连续。这两天完成了自己的个人任务，准备学习一下前辈们的经验教训，在项目组的文档中发现了一个要求注意的点，如下： Js文件的开头可以加上类似//@ sourceURL=jquery.extends.j...

renweihub 2019-08-21 16:02 评论0 收藏0