Cacher is the code snippet organizer for pro developers

$字

自訂C關鍵字

;(function() {
  var _cQuery = window.cQuery,
    cQuery = function() {
      // execute constructor
      // 等於 cQuery.prototype.init()
      return new cQuery.fn.init()
    }
  // 原型可以用物件方式增加
  // cQuery.fn等同於 cQuery.prototype
  cQuery.fn = cQuery.prototype = {
    constructor: cQuery,
    init: function() {
      console.log(this)
      return this
    },
    test: function() {
      console.log('test')
    }
  }
  // 新增於 cQuery.prototype，等同在cQuery.fn.init原型下新增屬性
  cQuery.fn.init.prototype = cQuery.fn
  window.C = window.cQuery = cQuery
})()

// 呼叫方式
C().test()

解釋

1. cQuery.fn.init.prototype = cQuery.fn : 因為cQuery.fn.init()，他是一個空的 constructor 需把 cQuery.prototype 綁定到它之下，它才可以引用 cQuery 下的方法

$.extend

擴增 jquery 的 prototype method

範例

cQuery.extend = cQuery.fn.extend = function(obj) {
  for (var prop in obj) {
    this[prop] = obj[prop]

    console.log('prop:', prop)
    // prop: test

    console.log('obj[prop]:', obj[prop])
    // obj[prop]: ƒ () {
    //  console.log('測試!')
    // }
  }
  return this
}

cQuery.fn.extend({
  test: function() {
    console.log('測試!')
  }
})

// 呼叫方式
C().test() // 測試!

$.param

use in a URL query string or Ajax request

範例

cQuery.param = function(obj) {
  var prefix,
    s = []
  for (prefix in obj) {
    s[s.length] =
      encodeURIComponent(prefix) + '=' + encodeURIComponent(obj[prefix])
    console.log('prefix:', prefix)
    // prefix: name
    // prefix: age

    console.log('obj[prefix]:', obj[prefix])
    // obj[prefix]: chuanshanjia
    // obj[prefix]: 30
  }
  console.log(s)
  // 0: "name=chuanshanjia"
  // 1: "age=30"
  // length: 2
  // __proto__: Array(0)

  return s.join('&;')
}

var param = cQuery.param({ name: 'chuanshanjia', age: 30 })
console.log(param) // name=chuanshanjia&;age=30

$.each()

原始碼段落

each : function(obj, callback) {
  var length,
    i = 0

  if (isArrayLike(obj)) {
    length = obj.length
    for (; i < length; i++) {
      // 實作callback
      if (callback.call(obj[i], i, obj[i]) === false) {
        break
      }
    }
  } else {
    for (i in obj) {
      if (callback.call(obj[i], i, obj[i]) === false) {
        break
      }
    }
  }

  return obj
}

範例 - Array

// Callback
function print(i, val) {
  console.log('this:', this)
  console.log('i:', i, ' ,value:', val)
}

var ary = ['a', 'b', 'c']

for (let i = 0; i < ary.length; i++) {
  if (print.call(ary[i], i, ary[i]) === false) break
}

// 結果
this: [String: 'a']
i: 0  ,value: a
this: [String: 'b']
i: 1  ,value: b
this: [String: 'c']
i: 2  ,value: c

範例 - Object

let obj = {
  name: 'linche',
  age: 27,
  sex: 'male'
}

for (let i in obj) {
  if (print.call(obj[i], i, obj[i]) === false) break
}

// 結果
this: [String: 'linche']
i: name  ,value: linche
this: [Number: 27]
i: age  ,value: 27
this: [String: 'male']
i: sex  ,value: male

$.trim()

let text = 'abc d e f   '

let rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g

let newText = (text + '').replace(rtrim, '')

console.log('New text:', newText, ' ,length:', newText.length)

// Result
New text: abc d e f  ,length: 9

trigger()

執行全部的 handlers 和行為到對應的 elements，透過給定的事件類型

範例

// 替#foo註冊一個custom事件
$('#foo').on('custom', function(event, param1, param2) {
  alert(param1 + '\n' + param2)
})

// 在button click時，觸發#foo的custom事件
$('button').on('click', function() {
  $('#foo').trigger('custom', { Custom: 'Custom1', Event: 'Event1' })
})