js中封裝函式 入門

2021-10-03 09:44:50 字數 2626 閱讀 8626

前言

在日常開發過程中，會使用很多重複的功能，為了方便使用，我們將這些重複的功能，封裝成函式，雖然這樣做了，但是還是有點不方便，每次都得重新封裝，能不能一勞永逸？答案是能，建立乙個js檔案，將所有的功能函式，都複製進去，以後要想使用某個功能，引入檔案即可，就能夠使用這個檔案中的函式

補零

function buling(n)else


// buling(); 直接拿這個就行了
日期格式化

function createdate()


// 4.拼接


var str = y+"年"+buling(m)+"月"+buling(qf_date)+"日 "+qf_day+" "+buling(h)+":"+buling(mts)+":"+buling(s);


return str;


} // console.log(createdate());
計算兩個日期之間的差值

function datediff(date1,date2)else


var d2 = date2 ? new date(date2) : new date();


// console.log(d1);


// console.log(d2);


// 如何計算差值？


// 不安全的做法：兩個日期物件可以直接相減


// console.log(d1 - d2);


// 最安全的做法是，獲取時間戳，然後相減


var t1 = d1.gettime();


var t2 = d2.gettime();


var time = math.abs(t1 - t2);


// 根據毫秒數，計算天，時，分，秒


var tian = parseint(time/1000/60/60/24);


var shi = parseint((time - tian*24*60*60*1000)/1000/60/60);


var fen = parseint((time - tian*24*60*60*1000 - shi*60*60*1000)/1000/60);


var miao = parseint((time - tian*24*60*60*1000 - shi*60*60*1000 - fen*60*1000)/1000);


// 優化最終資料的拼接結果，想返回就返回，不想返回就直接列印


console.log(tian + "天" + shi + "時" + fen + "分" + miao + "秒");


}// datediff("2008,8,8 20:8:8", "1949,10,1,10:1:0"); 


// datediff("2008,8,8 20:8:8");
獲取非行內樣式

// 獲取非行內樣式的相容：必然會得到當前的樣式值


function getstyle(ele,attr)else


}// getstyle();
範圍隨機數

//生成乙個一階段使用過的rgb的隨機顏色值，結果使用字串顯示：rgb(210,145,67)


function random(a,b)


// random()
隨機顏色值

function randomrgb()


// randomrgb()
陣列去重

function norepeat(arr) }}


return arr;


}// var arr2 = norepeat(arr);
運動得封裝

function move(ele,attr,target)else


let speed = (target - inow)/10;


speed = speed < 0 ? math.floor(speed) : math.ceil(speed);


if(inow === target)elseelse


}}, 30);


}// move(); 元素物件,樣式,目標距離
事件冒泡的阻止，是有相容的 取消冒泡stopbubble()

// 方法相容正常瀏覽器e.stoppropagation();


// 屬性相容ie瀏覽器e.cancelbubble = true;


function stopbubble(e)else


}// stopbubble() ;
總結

原創作品，違法必究

疫情期間，我們逆戰必勝

uni app中封裝統一請求函式

封裝統一請求函式有利於專案的維護 整體功能簡單實用，但小編遇到乙個巨坑，專案中在vue檔案使用跳轉方法，url引數輸入 後工具提示的路徑為 pages login login 但是在外部js檔案中使用uni跳轉的api，快捷提示的路徑為 pages login login.vue 這就導致實際使用找...

封裝原生的JS，vue中封裝全域性使用的函式

function fun fun 這裡的this，指向的是window new fn new 的函式指向的不是window而是指向了該函式新的物件，目的是改變指標，建立物件例項 function fun1 var aa new fun1 aa.x 原型 讓某乙個大類都有某個方法 var arr ar...

Vue中封裝input元件

最近有點忙不過來 脫了很久，沒有更新 抱歉。今天要將的時如何自定義封裝input元件 博主知識發個簡單的模板 碼友們可以更具自己的實際專案新增需要的引數 我的專案中的ui圖是這樣的 如下 子元件的模板設定 completion input box input box name type text r...