摘要:進一步完善給個縮寫并且使其可以是節點或者選擇器可將所有的添加一個可將所有的變為封裝按照的思路封裝一個函數升級一下滿足規則
封裝一個函數
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封裝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://specialneedsforspecialkids.com/yun/96225.html
摘要:相信很多小伙伴在面試的過程中都被問過鏈式調用的原理,甚至有些面試官還會讓你用其實現例如加法操作,舉例第一次看到這個題目時,或許你沒有什么頭緒,不要緊,讓我們慢慢來首先,大家還是否記得在使用時,我們會經常這樣去操作一個節點這是怎么做到的原理很 相信很多小伙伴在面試的過程中都被問過js鏈式調用的原理,甚至有些面試官還會讓你用其實現例如加法操作,舉例: add(1)(2)(3) //6...
摘要:歡迎來我的專欄查看系列文章。算是中一個非??梢越梃b的用法,以前聽到這個概念是非??謶值?,當看了源碼,弄懂原理之后,發現超級有意思。參考源碼分析鉤子機制屬性操作源碼學習本文在上的源碼地址,歡迎來。 歡迎來我的專欄查看系列文章。 hooks 在英語中的意思表示鉤子或掛鉤,在 jQuery 中也有 hooks 這么一個概念,它的功能在考慮到一些兼容性和其它特殊情況的條件下,優先考慮這些特殊情...
摘要:所以你編譯后的文件實際上應當只輸出,這就需要在配置里用來控制這樣上面的模塊加載函數會在返回值后面加一個,這樣就只返回的部分。 之前一篇文章分析了Webpack打包JS模塊的基本原理,所介紹的案例是最常見的一種情況,即多個JS模塊和一個入口模塊,打包成一個bundle文件,可以直接被瀏覽器或者其它JavaScript引擎執行,相當于直接編譯生成一個完整的可執行的文件。不過還有一種很常見的...
摘要:和,前者是過濾選擇器而后者是子代選擇器。第三章中的操作查找節點想要查找元素節點或者是屬性節點,就是通過前一章學習的選擇器獲取相應元素的文本,或者是通過選擇器屬性名獲取某元素相應屬性的值。 About Javscript record the thing which maybe forgetten 原生JavaScript Javascript DOM document.writ...
閱讀 4150·2021-09-22 15:34
閱讀 2765·2021-09-22 15:29
閱讀 490·2019-08-29 13:52
閱讀 3351·2019-08-29 11:30
閱讀 2259·2019-08-26 10:40
閱讀 833·2019-08-26 10:19
閱讀 2256·2019-08-23 18:16
閱讀 2311·2019-08-23 17:50