自己實現乙個類似 jQuery 的函式庫

2022-02-21 06:16:08 字數 1640 閱讀 2430

假如我們有乙個需求,需要給元素新增樣式類,使用原生的js很容易搞定。

function addclass(node, classname)

// 使用

var element = document.queryselector('#div1')

addclass(element, 'active')

function addclass(node, classname)

var dom = {}

dom.addclass = addclass

// 使用

var element = document.queryselector('#div1')

dom.addclass(element, 'active')

1. 使用原型, 侵入式

node.prototype.addclass = function(classname)

// 使用

var element = document.queryselector('#div1')

element.addclass('active')

2.使用建構函式,非侵入式

function node2(node) 

}}var element = document.queryselector('#div1')

var node2 = node2(element)

node2.addclass('active')

將建構函式node2的名稱替換成jquery

function jquery(node) 

}}var element = document.queryselector('#div1')

var node2 = jquery(element)

node2.addclass('active')

// 給乙個別名 $

window.$ = jquery;

// 將上面的**合併成一行後,是不是已經很像了

$(document.queryselector('#div1')).addclass('active')

window.jquery = function(nodeorselector) 

// 檢測傳遞的是元素還是乙個選擇器

if (typeof nodeorselector === 'string')

nodes.length = temps.length

} else if(nodeorselector instanceof node)

} nodes.addclass = function(classname)

} nodes.gettext = function()

return texts.join('')

} nodes.settext = function(text)

} return nodes; }

window.$ = jquery

類似jquery的乙個demo

通過以下的demo,可以大體知道jquery的一些組織結構以及一些實現方法。實際上jquery就是乙個全域性變數,只是在這個變數上新增了各種屬性和方法。首先我們要理解什麼是匿名函式自執行,簡單點就是如下結構的寫法就是乙個匿名函式自執行,function thepara window 可以分為兩個大的...

可想實現乙個自己的簡單jQuery庫? 四

修改f selector 裡的判斷,新增domready 我們知道在jquery中還有一種選擇器寫法 function 在dom載入完畢後馬上就執行,這樣的方法會比onload更快,所以domready對於我們來說一定是必不可少的 我們在init方法中要新增以下判斷 if selector if t...

乙個自己實現的string

最近實現了乙個string 類,新增了一些c 11 元素。除了基本的構造析構函式,拷貝構造和賦值函式,另外新增移動拷貝和賦值函式。default是乙個很方便的特性有木有。default constructor kianstring default kianstring const char c ch...