前端 标签

性能优化笔记 网络篇

By hiluluke on

嗯，搞点大事情

记录一些大公司，高级前端工程师的前端优化经验总结，并尝试着做些实验，以后肯定用的上，当看到新的技能时，实时更新在这篇文章。

DNS预解析

我们请求资源时，通常都是一个URL，拿到正确的ip地址必须经过一步DNS解析。DNS预解析的作用是在到某个页面是提前解析了DNS。用法都是这样：

1
<link rel="dns-prefetch" href="hiluluke.cn">

在很多大厂，比如jd.com、taobao.com等的head部分你就能看见很多上面这样的link标签。
然而其使用方法，并不是像上面这样简单，具体的看这篇文章，本文不多做解释。

阅读全文

zepto源码学习 插件方法

By hiluluke on

$.extend

  • 用途
    扩展对象属性。
    第一个参数如果是true就递归的将source给target。

    1
    2
    $.extend(target, [source, [source2, ...]])  ⇒ target
    $.extend(true, target, [source, ...])  ⇒ target v1.0+

  • 相关代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    function extend(target, source, deep) {
      for (key in source)
        if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
          if (isPlainObject(source[key]) && !isPlainObject(target[key]))
            target[key] = {}
          if (isArray(source[key]) && !isArray(target[key]))
            target[key] = []
          extend(target[key], source[key], deep)
        }
        else if (source[key] !== undefined) target[key] = source[key]
    }

    // Copy all but undefined properties from one or more
    // objects to the `target` object.
    $.extend = function(target){
      var deep, args = slice.call(arguments, 1)
      if (typeof target == 'boolean') {
        deep = target
        target = args.shift()
      }
      args.forEach(function(arg){ extend(target, arg, deep) })
      return target
    }
阅读全文

zepto源码学习 对象关系

By hiluluke on

今年重新找工作的时候面试官问了个问题，jQuery的链式函数调用的原理。当时一脸懵逼，因为完全没有去了解过。（事实证明面试能够很好的提高自己）

然后感觉直接去看jq的源码，要仔细看好感觉得花很长时间，还是先看看zepto,反正组织代码的原理都差不多。

构造

在立即调用函数中声明了3个东东：

1
2
3
4
5
6
7
8
9
10
zepto = {};
function Z(dom, selector) {
  var i, len = dom ? dom.length : 0
  for (i = 0; i < len; i++) this[i] = dom[i]
  this.length = len
  this.selector = selector || ''
}
$ = function(selector, context){
  return zepto.init(selector, context)
}

当然声明的位置各有不同，Z函数很显然是构造函数，zepto是构造中间的一些方法的保留吧，然后$上挂上所有对外的方法。构造调用的基本流程是，$调用zepto的init，然后init函数做一些处理，再返回一个Z的｀return zepto.Z(dom, selector)｀,其中zepto.Z返回的就是一个构造函数Z。这样做的处理是要在$上吧zepto挂上，可以在插件里面改写。

阅读全文

toString方法的仔细了解

By hiluluke on

因子

在看Zepto源码的时候发现它做类型判断的时候用的下面的方法：

1
2
3
4
5
6
7
var a = {},
    toString = a.toString;

toString.call(function(){}); // [object Function]
toString.call({}); // [object Object]
toString.call(123); // [object Number]
toString.call("sasa"); // [object String]

上面这个判断类型的方法好像在js高程中好像看见过，不过忘了。然后让我对toString这个方法产生了好奇心，于是去多了解了下。

阅读全文

zepto源码学习 一些私有函数和方法

By hiluluke on

在Zepto里面有一些没有暴露出来的私有方法，有一些值得借鉴的地方，比如里面用来判断类型的type函数。大概纪录如下：

一些类型判断方法

判断数组：

1
2
isArray = Array.isArray ||
      function(object){ return object instanceof Array }

类型判断函数

1
2
3
4
5
6
7
8
9
10
11
var class2type = {},
    toString = class2type.toString;
// class2type map
$.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
  class2type[ "[object " + name + "]" ] = name.toLowerCase()
});

function type(obj) {
    return obj == null ? String(obj) :
      class2type[toString.call(obj)] || "object"
  }

上面的类型判断，基本上可以判断所有的类型。主要是改变toString的this指向来实现的。

阅读全文