封装一个函数
function addClass(classes){}//可将所有输入的标签的class添加一个类
再封装一个函数
function setText(text){}//可将所有输入标签的textContent变为text
实现这两个函数
第一个函数addClass()是输入一个类名,给选中的所有标签添加一个类,所以要用到classList.add(),具体实现如下
function addClass(node, classes) {
var allTag = document.querySelectorAll(node)
for (let i = 0; i < allTag.length; i++) {
allTag[i].classList.add(classes)
}
}
第二个函数setText()输入文本,修改选中标签中的文本,所以要用到textContent(),具体实现结果如下
function setText(node, text) {
var allTag = document.querySelectorAll(node)
for (let i = 0; i < allTag.length; i++) {
allTag[i].textContent = text
}
}
命名空间
在全局变量中创建一个对象,用来储存封装后的函数,这就是命名空间(名字前面统一加一个前缀)
window.jQuery = {}
jQuery.addClass = addClass
jQuery.setText = setText
jQuery.addClass('div', 'red')
jQuery.setText('div','hi')
整理之后
window.jQuery = {}
jQuery.addClass = function(node, classes) {
var allTag = document.querySelectorAll(node)
for (let i = 0; i < allTag.length; i++) {
allTag[i].classList.add(classes)
}
}
jQuery.setText = function(node, text) {
var allTag = document.querySelectorAll(node)
for (let i = 0; i < allTag.length; i++) {
allTag[i].textContent = text
}
}
jQuery.addClass('div', 'red')
jQuery.setText('div', 'hi')
将node放到前面
node.addClass(classes)
node.setText(text)
1、 方法一:扩展 Node 接口,直接在 Node.prototype 上加函数
Node.prototype.addClass = function(){
...
}
Node.prototype.setText = function(){
...
}
2、 方法二:新的接口 BetterNode
window.jQuery = function(node) {
return {
element: node,
addClass: function(classes) {
var allTag = document.querySelectorAll(node)
for (let i = 0; i < allTag.length; i++) {
allTag[i].classList.add(classes)
}
},
setText: function(text) {
var allTag = document.querySelectorAll(node)
for (let i = 0; i < allTag.length; i++) {
allTag[i].textContent = text
}
}
}
}
let node2 = jQuery('div')
node2.addClass('red')
node2.setText('hi')
第二种叫做「无侵入」。
进一步完善
给个缩写并且使其可以是节点或者选择器
window.jQuery = function(nodeOrSelector){
let nodes = {}
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 if(nodeOrSelector instanceof Node){
nodes = {
0:nodeOrSelector,
length:1
}
}
nodes.addClass = function(classes){
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(classes)
}
}
nodes.setText = function(text){
for(let i=0;i<nodes.length;i++){
nodes[i].textContent = text
}
}
return nodes
}
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
封装ajax
按照jQuery的思路封装一个ajax函数
window.jQuery.ajax = function(url, method, body, success, fail) {
let request = XMLHttpResquest()
request.open(method, url)
request.onreadystatechange = () => {
if (request.readyState === 4) {
if (request.status >= 200 && request.status < 300) {
success.call(undefined, request.responseText)
} else if (request.status >= 400) {
fail.call(undefined, request)
}
}
}
request.send(body)
}
升级一下满足promise规则
window.jQuery.ajax = function({
url,
method,
body,
headers
}) {
return new Promise(function(resolve, reject) {
let request = XMLHttpResquest()
request.open(method, url)
for (let key in headers) {
let value = headers[key]
request.setRequestHeader(key, value)
}
request.onreadystatechange = () => {
if (request.readyState === 4) {
if (request.status >= 200 && request.status < 300) {
success.call(undefined, request.responseText)
} else if (request.status >= 400) {
fail.call(undefined, request)
}
}
}
request.send(body)
})
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。