本文目錄一覽：
封裝一個自己的js庫
接下來，我講封裝一個仿jQuery的庫，主要包含jQuery中綁定，css，等方法，我講它定義為 “HQuery”
jQuery中的 $ 符號意味着什麼？
先思考一下jQuery庫中alert(typeof $)的結果，它是一個對象，也是一個函數
所以美元符$字面上是jQuery，其實就是一個jq對象，裡面可以接受函數，字符串，還要一種是對象(比如this)
給自己的Hquery填加$符號：
Hquery是基於面向對象實現的，所以我們需要先寫構造函數，為了方便遍歷和其他方法的操作，所有內容返回到一個數組中，這個數組衣服於Hquery對象存在，之後將為這個Hquery對象屬性添加方法
我們使用Hquery操作DOM等實現一系列的功能，選擇器是必不可少的，所有我們首先封裝好選擇器，這樣就可以能省去document.getElementsByClass等等麻煩的操作
其他的方法，我就不一一介紹了，下面直接給大家上一個多種方法封裝好的，大家k’y
function封裝成一個js
按下面的操作即可。
1、
(function(){
window.sbDog={};//創建一個自己的對象相當於C#中的命名空間
vargetId=function(id){
returndocument.getElementById(id)
};
sbDog.getId=getId;//將函數註冊到命名空間上
})();
2、
//下面的代碼在window對象中創建一個屬於自己的對象或者命名空間，並在裡面寫上自執行函數的方法，以便於我們調用這個自執行函數中的一些功能。
(function(){
window.sbDog={
myID:function(id){
console.log(document.getElementById(id).value);
}
}
})();
//調用
window.onload=function(){
console.log(sbDog.myID(test));
}
新手請教，如何將一段JS代碼封裝成一個方法
鑒於樓主欠缺編程經驗，我就先不說封裝成jQuery插件等高大上的做法了。單就論封裝成方法而言。
方法，也就是函數。是面向過程式語言一種代碼復用的初級手段，簡而言之，就是把重複的部分用函數封裝起來。
例如貓叫多遍，cat.meow(), 你總不可能寫對應次數的代碼，一般會寫成：
function meow(num){
for(var i=0;inum;i++){
cat.meow()
}
}
meow(1000)
這就是一種最基礎的代碼復用。
當然，面向對象的語言也許有更簡單的 cat.meow(1000)
那麼，針對樓主的情況。逐步講一下各層次的方法。最簡單的用函數封裝一下就是：
function effect(srcDom,destDom,className){
$(srcDom).mouseenter(function(){
$(destDom).addClass(className)
}).mouseout(function(){
$(destDom).removeClass(className)
})
}
然後調用
effect(‘#plate-1′,’#plate-1hover’,’plate-1after’)
effect(‘#plate-2′,’#plate-2hover’,’plate-2after’)
effect(‘#plate-3′,’#plate-3hover’,’plate-3after’)
鑒於樓主的DOM的ID和Class命名比較有規律，可以寫成這樣
function effect(name){
$(‘#’+name).mouseenter(function(){
$(‘#’+name+’hover’).addClass(name+’after’)
}).mouseout(function(){
$(‘#’+name+’hover’).removeClass(name+’after’)
})
}
然後調用
effect(‘plate-1’)
effect(‘plate-2’)
effect(‘plate-3’)
但是這樣還是不夠通用，樓主應該看看事件方面有關事件委託的知識
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/189409.html
微信掃一掃 
支付寶掃一掃 