阅读 68

Js编程技巧之jQuery源码(代码技巧篇)

本文是专栏《Js编程技巧之jQuery源码分析》的第二篇,将源码里的一些编码技巧提取并分类,辅之以案例,尽可能使之易于理解和消化

逻辑运算符的高级用法

逻辑运算符可以结合多重运算实现更强大的操作

双“非”

语法:!!var_name

需求:获取变量对应的boolean值

!!0 //false
!! undefined //false
!! 1 //true
!! null //false
复制代码

“且”连接其他表达式

语法:condition && expression

满足条件时才运算表达式并返回它的值

expression 可以为赋值表达式、算数运算表达式、函数调用表达式等

var locked = false;
function handleUnlockMsg(){
  console.log('没有锁住!')
}
!locked && handleUnlockMsg(); 
复制代码

“或”连接其他表达式

语法:condition && expression

不满足条件时才运算表达式并返回它的值

需求:往record对象里添加某个类型的项目,如果没有该类型对应的属性则声明空数组后添加,如果存在直接添加。

var record = {}
function addToRecord({type,name}){
  //判断record[type]是否存在
  //条件为false(不满足)则返回空数组执行
  //最后对整个表达式调用push方法
  (record[type] = record[type] || []).push(name)
  //(record[type] || (record[type] = [])).push(name)
}
addToRecord({
  type:"Music",
  name:"爱你一万年"
})
addToRecord({
  type:"Music",
  name:"东风破"
})
复制代码

巧用 while 循环

while 循环的条件判断里可以同时做三件事情:

  • 表达式计算
  • 赋值
  • 判断真假

案例一

需求:用正则表达式匹配紧跟“我的”后的“爱好”,并依次打印所有的“爱好”。

var string = `我爱中国,我爱旅游,我爱看书,当然必须的:我爱美女`;
var r = /我爱([^,]+)/g;
var temp;
while (temp = r.exec(string)) {
  console.log(`我的爱好--->`, temp[1]);
}
//output:
//我的爱好---> 中国
//我的爱好---> 旅游
//我的爱好---> 看书
//我的爱好---> 美女
复制代码

案例二

需求:数组的拷贝。支持定义起点和终点

function slice(arr,beginIndex,endIndex){
  //返回的新数组
  let ret = [];
  //变量i 被拷贝的元素个数
  let i = endIndex - beginIndex + 1;
  //1.判断个数i 真假 
  //2.i自减后成为新数组的index(最后一位开始),也是起点需要偏移的位移(长度)--> beginIndex+i
  while(i--){
    ret[i] = arr[beginIndex+i]
  }
}
复制代码

巧用字符串替换数组

场景:需要一次性迭代处理一列数据。

很多人会想到定义一个数组变量,进行迭代,完事再释放内存。可如果有多个类似的需求,代码里就需要定义多个一次性变量,降低识别度。

jQuery则将一系列的数据初始化为一串包含分割符的字符,然后运行时再根据排列规则解析为数组,一切都在内部完成

var class2type = {};
jQuery.each( "Boolean Number String Function Array Date RegExp Object Error Symbol".split( " " ),function( _i, name ) {
  //name 为 Boolean, Number, String...
  class2type[ "[object " + name + "]" ] = name.toLowerCase();
});
复制代码
文章分类
前端
文章标签