啃jQuery源码,记录所思所想

2017/12/31 纪念今天是我们90后最后一次的18岁

研读的源码地址:https://github.com/hoyinWong/jquery-1/blob/master/src/data.js

&&-发现一个看得懂但是不明白为何这样写的正则,希望有缘人能告知:

var rbrace = /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/;
function getData( data ) {
// rbrace正则的作用是test data是不是json字符串
    if ( rbrace.test( data ) ) {
        return JSON.parse( data );
    }
}

既然rbrace在括号中用?:是不希望捕获子模式,那为何不直接写成这样,通过测试,两者处理的结果是一样的:

var rbrace = /^\{[\w\W]*\}|\[[\w\W]*\]$/;

so,若能有网友告知,不胜感激。

&&-看了源码才知道为什么设定元素data-属性值(data-attribute)时,建议不要大写,因为jQuery会将大写的做如下转换,驼峰反转:

var rmultiDash = /[A-Z]/g;
function dataAttr( elem, key, data ) {
    var name;
    // data from the HTML5 data-* attribute
    if ( data === undefined && elem.nodeType === 1 ) {
        //$&:是与 regexp 相匹配的子串,所以这里会将大写的字一个个替换成-大写字符,比如key=myTestHH,执行key=key.replace( rmultiDash, "-$&" )会变成:key=my-Test-H-H,然后toLowerCase()后变为my-test-h-h;
        name = "data-" + key.replace( rmultiDash, "-$&" ).toLowerCase();
    }
}

看完源码后,终于明白在实际项目中你为什么这样操作会拿不到值了:
$(elem).data(‘myTestHH’);

2018/01/01 新的一年,hoyin你好,愿每一天都在进步,都有学习

在研究jQuery.extend(A,B)浅复制和深复制的区别,发现一篇不错的文章,值得学习:
jQuery.extend()浅深复制
知乎上关于浅深复制的区别
浅复制:A对象拷贝B对象的所有字段,如果字段是内存地址,则拷贝地址,如果字段是基元类型,则只是单纯的复制值,从中可以看出浅复制的缺点是如果改变B字段所指向的内存地址,那A也会受到影响。浅复制的实现原理如下:

var obj = { a:1, arr: [2,3] };
var shallowObj = shallowCopy(obj);
function shallowCopy(src) {
  var dst = {};
  for (var prop in src) {
    //单纯的把obj的字段都拷贝到shallowObj,不涉及到递归。
    if (src.hasOwnProperty(prop)) {
      dst[prop] = src[prop];
    }
  }
  return dst;
}

深复制:这种方式会完全拷贝所有数据,优点是B与A不会相互依赖(A,B完全脱离关联), 缺点是拷贝的速度更慢,代价更大。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值