1. 封装一个函数
<body>
<ul>
<li id="item1">选项1</li>
<li id="item2">选项2</li>
<li id="item3">选项3</li>
<li id="item4">选项4</li>
<li id="item5">选项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
}
}
// 封装函数，获取自己的兄弟姐妹
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)
}
}
// 封装函数 添加或者移除class
function addClass(node, classes) {
for (let key in classes) {
var value = classes[key]
-- 优化前 ---------------------
if (value) {
node.classList.add(key)
} else {
node.classList.remove(key)
}
-- 优化后 ---------------------
var methodName = value ? 'add' : 'remove'
node.classList[methodName](key)
}
}
addClass(item3, {a: true, b: false, c: true})
代码优化守则：
如果出现类似的代码，就存在优化的可能
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]
-- 优化前 ---------------------
if (value) {
node.classList.add(key)
} else {
node.classList.remove(key)
}
-- 优化后 ---------------------
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调用
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})
不用命名空间的缺点：
别人不知道你的库叫什么
会不知不觉把全局变量给覆盖了
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初体验
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) { // 如果参数不存在，则获取文本
var texts = []
for (let i = 0; i < nodes.length: i++) {
texts.push(nodes[i].textContent)
}
return texts
} else { // 如果参数存在，则传入文本
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)) { // 两个参数必填
return 'c-' + index // 添加类名 c-0 c-1
}
var classes = ['red', 'yellow', 'blue', 'green', 'pink']
x.onclick = addClass(function (index, currentClass)) { // 两个参数必填
return classes[index] // 添加类名 c-0 c-1
}
