絡圖片
閉包,是幾乎所有前端工程師必須要掌握的一個技術,這里簡單說一下閉包的概念,閉包就是指在函數中調用函數以外作用域的行為。常見的閉包就是在函數內部再定義一個函數時,觸發內部函數,使用外部函數的行為。
之前的對象創建分為原生部分和原型部分,基于閉包方式,可以把私有的基本類型打包起來,基于函數返回值方式建立引用。
但是原型部分的定義,感覺和閉包定義本身沒有什么聯系,所有再重新定義一個閉包。嘗試把原型的定義也打包起來。
以下案例主要是理解關于JavaScript中封裝思想,以及如何使用閉包技術來封裝對象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
果果爸爸青少年編程
2019-8-2
-->
<script type="text/javascript">
var Product=(function(){
var num=10;
function _product(id,name,costPrice){
// 公有屬性
this.name=name;//產品名稱
// 公有方法
this.show=function(){
console.log("2019新品:"+this.name+",價格公道,只要:"+calculatorSalePrice());
}
// 私有方法
function calculatorSalePrice(){
return costPrice*4.5; // 一般手機利潤是400%左右
}
// 私有屬性
var _id=id;//產品編號
var _costPrice=costPrice;//產品成本價
// 特權方法(getter&setter)
this.setId=function(id){
_id=id;
}
this.getId=function(){
return _id;
}
this.setCostPrice=function(costPrice){
_costPrice=costPrice;
}
// 構造器
//this.setName(name);
this.setCostPrice(costPrice);
}
// 類原型公有定義
_product.prototype={
// 公有屬性
isCellphone: true,
// 公有方法
toString : function(){
console.log("果果爸爸青少年編程推薦,"+this.name+"好")
}
}
// 返回上面所有定義
return _product;
})();
var huawei=new Product("1","華為p30",1500);
console.log("產品名稱:"+huawei.name)
huawei.show()
console.log(huawei.isCellphone);
huawei.toString();
</script>
</body>
</html>
執行效果如下:
程序執行效果
天給大家分享幾個好的功能封裝,在你的項目開發中,一定會用的到,肯定實用。這樣寫,能提高的編碼能力,編寫出高效且可維護的JavaScript代碼。
有過一定項目開發經驗的同學一定知道,在實際項目開發過程中,會經常碰到需要動態加載一些JS的時候,比如依賴的第三方SDK。那如何封裝一個可以動態加載JS的功能函數呢?代碼如下
此代碼兩個核心點:
1. 使用Promise處理異步
2. 使用腳本標簽加載和執行JS
// 封裝
function loadJS(files, done) {
const head=document.getElementsByTagName('head')[0];
Promise.all(files.map(file=> {
return new Promise(resolve=> {
const s=document.createElement('script');
s.type="text/javascript";
s.async=true;
s.src=file;
s.addEventListener('load', (e)=> resolve(), false);
head.appendChild(s);
});
})).then(done);
}
// 使用
loadJS(["test1.js", "test2.js"], ()=> {
});
當一個對象的屬性也是一個對象的時候,如何遍歷出這個對象上的所有屬性,包括子屬性對象上的對象。
使用遞歸循環遍歷
function getAllObjectProperties(obj) {
for (const prop in obj) {
if (typeof obj[prop]==="object") {
getAllObjectProperties(obj[prop]);
} else {
console.log(prop, obj[prop]);
}
}
}
const sampleObject={
name: "John",
age: 30,
address: {
city: "Example City",
country: "Example Country"
}
};
getAllObjectProperties(sampleObject);
將一個采用多個參數的函數轉換為一系列函數,每個函數只采用一個參數,這增強了函數使用的靈活性,最大限度地減少了代碼冗余,并提高了代碼的可讀性。
function curryAdd(x) {
return function (y) {
return function (z) {
return x + y + z;
};
};
}
const result=curryAdd(1)(2)(3);
在某些情況下,特定函數只允許執行一次。這種情況還是挺多的。
once函數包裝了另一個函數,確保它只能執行一次
// 封裝
function once(fn) {
let executed=false;
return function (...args) {
if (!executed) {
executed=true;
return fn.apply(this, args);
}
};
}
// 執行
const runOnce=once(()=> {
});
runOnce();
runOnce();
如果用戶省略參數,則分配一個預定的默認值。
function greetUser(name="Guest") {
console.log(`Hello, ${name}!`);
}
greetUser(); // 輸出: Hello, Guest!
greetUser("John"); // 輸出:Hello, John!
下面這個實例,我需要將數據按指定字段分類出來,只需要將使用reduce封裝一個可執行的函數就行。
在之前的一篇文章《如何打造屬于自己的Javascript武器庫,來封裝這些經典的方法吧》中,有封裝過一些簡單的方法。
今天這篇文章我們繼續看看關于字符串處理的常用方法,并將其封裝,完善自己的Javascript武器庫。
文中的代碼我已經放到Github上了,有需要的同學可以自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/jsCapsulation/capsulation2.js
Javascript
該方法的主要目的是通過傳遞不同的參數,選擇去除哪里的空格。
all - 代表所有空格
preBehind - 前后空格
previous - 前面空格
behind - 后面空格
主要思想是:通過正則表達式\s匹配空白字符,然后用''去替換空白字符。
得到的代碼如下所示。
去除空格方法
該方法的主要目的是:將字符串的首字母或者全部字母,進行大小寫轉換。根據傳入的參數進行處理。
FirstUpper - 首字母大寫
FirstLower - 首字母小寫
AllToggle - 全部大小寫相互轉換
AllUpper - 全部大寫
AllLower - 全部小寫
主要思想是:根據傳入的參數,配合使用字符串自身的toUpperCase和toLowerCase方法。
得到的代碼如下所示。
字母大小寫轉換
其中的ToggleCase方法用于大小寫相互轉換,其如下所示。
大小寫相互轉換
該方法主要用于檢測輸入的字符串是否是我們想要的類型,例如email代表郵箱,phone代表手機號,number代表數字,chinese代表中文。
主要思想是:獲得想要獲取類型的正則表達式,然后返回匹配的結果。
得到的代碼如下所示。
檢測字符串類型
上述的檢測方案完全可以按照需求進行擴充,直接通過case,就可以自行添加。
該方法主要用于模仿檢測設置密碼的強度,檢測規則如下:
如果密碼長度小于6,則強度為0。
如果密碼包含數字,則強度加1。
如果密碼包含小寫字母,則強度加1。
如果密碼包含大寫字母,則強度加1。
如果包含特殊字符,則強度加1。
上述規則會累加統計,最高強度為4。
得到的代碼如下所示。
檢測密碼強度
該方法主要用于隨機生成指定長度的字符串,例如隨機驗證碼我們完全可以通過這個方法去實現。
主要思想是:先通過Math.random()方法生成隨機數,然后調用toString(36)方法轉化為字符串,再截取掉前面的0和小數點,循環計算直到達到指定長度。
該方法的核心在于toString()方法的使用,Number類型的toString方法已經重寫,傳入的參數表示轉化的進制數,傳入的范圍是2-36,最小的2表示0-1,最大的36數字0-9和小寫字母a-z,如上面的toString(36),表示要用36進制數表示。
根據以上分析,得到的代碼如下所示。
隨機生成指定長度字符串
該方法通過字符串的split方法實現特別簡單。通過split方法按照目標字符串分割成數組,目標字符串出現的次數就是數組的長度減去1。
根據以上分析,得到的代碼如下所示。
統計指定字符串出現次數
該方法主要用于將字符串通過傳入的參數格式化處理,接收的參數如下所示。
size - 表示分割的位數,默認為3。
delimiter - 處理后字符串的連接符,默認為','
該方法的思想是通過正則表達式,動態獲取每次需要捕獲的位數,然后將其捕獲的位置前后替換為連接符。
得到的代碼如下。
格式化字符串處理
今天這篇文章主要補充了Javascript中與字符串有關的方法的封裝,其他需要封裝的方法還有很多,大家也可以自行總結。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。