1. 封裝一個函數(shù)
<body>
<ul>
<li id="item1">選項(xiàng)1</li>
<li id="item2">選項(xiàng)2</li>
<li id="item3">選項(xiàng)3</li>
<li id="item4">選項(xiàng)4</li>
<li id="item5">選項(xiàng)5</li>
</ul>
</body>
-----------------------------
var allChildren = item3.parentNote.children
var array = {
length: 0
}
for (var i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== item3) {
array[array.length] = allChildren[i]
array.length += 1
}
}
// 封裝函數(shù)唤蔗，獲取自己的兄弟姐妹
function getSiblings(node) { /*API*/
var allChildren = node.parentNote.children
var array = {
length: 0
}
for (var i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== node) {
array[array.length] = allChildren[i]
array.length += 1
}
}
return array
}
getSibings(item3)
1.1 再封裝一個
var classes = {
'a': true,
'b': false,
'c': true
}
for (let key in classes) {
var value = classes[key]
if (value) {
items3.classList.add(key)
} else {
items3.classList.remove(key)
}
}
// 封裝函數(shù) 添加或者移除class
function addClass(node, classes) {
for (let key in classes) {
var value = classes[key]
-- 優(yōu)化前 ---------------------
if (value) {
node.classList.add(key)
} else {
node.classList.remove(key)
}
-- 優(yōu)化后 ---------------------
var methodName = value ? 'add' : 'remove'
node.classList[methodName](key)
}
}
addClass(item3, {a: true, b: false, c: true})
代碼優(yōu)化守則：
如果出現(xiàn)類似的代碼掷空，就存在優(yōu)化的可能
2. 命名空間
2.1
window.yydom = {}
yydom.getSiblings = getSiblings
yydom.addClass = addClass
yydom.getSiblings(item3)
yydom.addClass(item3, {a: true, b: false, c:true})
2.2
window.yydom = {}
yydom.getSiblings = function (node) { /*API*/
var allChildren = node.parentNote.children
var array = {
length: 0
}
for (var i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== node) {
array[array.length] = allChildren[i]
array.length += 1
}
}
return array
}
yydom.addClass = function (node, classes) {
for (let key in classes) {
var value = classes[key]
-- 優(yōu)化前 ---------------------
if (value) {
node.classList.add(key)
} else {
node.classList.remove(key)
}
-- 優(yōu)化后 ---------------------
var methodName = value ? 'add' : 'remove'
node.classList[methodName](key)
}
}
yydom.getSiblings(item3)
yydom.addClass(item3, {a: true, b: false, c:true})
2.3
Node.prototype.getSiblings = function () { // Node.prototype中增加了getSiblings方法
var allChildren = this.parentNote.children
var array = {
length: 0
}
for (var i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== this) {
array[array.length] = allChildren[i]
array.length += 1
}
}
return array
}
items3.getSibings() // this就是.前面的
items3.getSiblings.call(item3) // 用call調(diào)用
Node.prototype.addClass = function (classes) { // this不用傳
for (let key in classes) {
var value = classes[key]
var methodName = value ? 'add' : 'remove'
this.classList[methodName](key)
}
}
items3.addClass({a: true, b: false, c: true})
items3.addClass.call(items3, {a: true, b: false, c: true})
不用命名空間的缺點(diǎn)：
別人不知道你的庫叫什么
會不知不覺把全局變量給覆蓋了
2.4
window.Node2 = function (node) {
return {
getSiblings: function (node) {
var allChildren = node.parentNote.children
var array = {
length: 0
}
for (var i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== node) {
array[array.length] = allChildren[i]
array.length += 1
}
}
return array
},
addClass: function (classes) {
for (let key in classes) {
var value = classes[key]
var methodName = value ? 'add' : 'remove'
node.classList[methodName](key)
}
}
}
}
var node2 = Node2(item3)
node2.getSiblings()
node2.addClass(['a', 'b', 'c'])
2.5
window.jQuery = function (node) {
return { // 返回的是對象 key: value
getSiblings: function (node) {
var allChildren = node.parentNote.children
var array = {
length: 0
}
for (var i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== node) {
array[array.length] = allChildren[i]
array.length += 1
}
}
return array
},
addClass: function (classes) {
for (let key in classes) {
var value = classes[key]
var methodName = value ? 'add' : 'remove'
node.classList[methodName](key)
}
}
}
}
var node2 = jQuery(item3)
node2.getSiblings()
node2.addClass(['a', 'b', 'c'])
2.6
window.jQuery = function (nodeOrSelector) {
let node
// 判斷nodeOrSelector類型
if (typeof nodeOrSelector === 'string') {
node = document.querySelector(nodeOrSelector)
} else {
node = nodeOrSelector
}
return { // 返回的是對象 key: value
getSiblings: function (node) {
var allChildren = node.parentNote.children
var array = {
length: 0
}
for (var i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== node) {
array[array.length] = allChildren[i]
array.length += 1
}
}
return array
},
addClass: function (classes) {
for (let key in classes) {
var value = classes[key]
var methodName = value ? 'add' : 'remove'
node.classList[methodName](key)
}
}
}
}
var node2 = jQuery("#item3")
node2.getSiblings()
node2.addClass(['a', 'b', 'c'])
2.7
jQuery初體驗(yàn)
window.jQuery = function (nodeOrSelector) {
let nodes = {}
// 判斷nodeOrSelector類型
if (typeof nodeOrSelector === 'string') {
let temp = document.querySelectorAll(nodeOrSelector)
for (let i = 0; i < temp.length; i++) {
nodes[i] = temp[i]
}
nodes.length = temp.length
} else {
nodes = {
0: nodeOrSelector,
length: 1
}
}
nodes.addClass = function (classes) {
for (let key in classes) {
var value = classes[key]
var methodName = value ? 'add' : 'remove'
nodes.classList[methodName](key)
}
}
}
nodes.text = function () {
if (text === undefined) { // 如果參數(shù)不存在润绵，則獲取文本
var texts = []
for (let i = 0; i < nodes.length: i++) {
texts.push(nodes[i].textContent)
}
return texts
} else { // 如果參數(shù)存在汛蝙，則傳入文本
for (let i = 0; i < nodes.length: i++) {
nodes[i].textContext = text
}
}
}
return nodes
}
var node2 = jQuery('ul' > 'li')
node2.addClass(['blue'])
node2.text()
3. jQuery初探
var node2 = jQuery('ul > li')
node2.addClass('red') // 添加類名
node2.removeClass('red') // 刪除類名
node2.togoleClass('red) // 切換
x.onclick = addClass(function (index, currentClass)) { // 兩個參數(shù)必填
return 'c-' + index // 添加類名 c-0 c-1
}
var classes = ['red', 'yellow', 'blue', 'green', 'pink']
x.onclick = addClass(function (index, currentClass)) { // 兩個參數(shù)必填
return classes[index] // 添加類名 c-0 c-1
}
