整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
絡(luò)圖片
閉包，是幾乎所有前端工程師必須要掌握的一個(gè)技術(shù)，這里簡(jiǎn)單說(shuō)一下閉包的概念，閉包就是指在函數(shù)中調(diào)用函數(shù)以外作用域的行為。常見(jiàn)的閉包就是在函數(shù)內(nèi)部再定義一個(gè)函數(shù)時(shí)，觸發(fā)內(nèi)部函數(shù)，使用外部函數(shù)的行為。
之前的對(duì)象創(chuàng)建分為原生部分和原型部分，基于閉包方式，可以把私有的基本類(lèi)型打包起來(lái)，基于函數(shù)返回值方式建立引用。
但是原型部分的定義，感覺(jué)和閉包定義本身沒(méi)有什么聯(lián)系，所有再重新定義一個(gè)閉包。嘗試把原型的定義也打包起來(lái)。
以下案例主要是理解關(guān)于JavaScript中封裝思想，以及如何使用閉包技術(shù)來(lái)封裝對(duì)象。
<!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;//產(chǎn)品名稱(chēng)
// 公有方法
this.show=function(){
console.log("2019新品："+this.name+"，價(jià)格公道，只要："+calculatorSalePrice());
}
// 私有方法
function calculatorSalePrice(){
return costPrice*4.5; // 一般手機(jī)利潤(rùn)是400%左右
}
// 私有屬性
var _id=id;//產(chǎn)品編號(hào)
var _costPrice=costPrice;//產(chǎn)品成本價(jià)
// 特權(quán)方法(getter&setter)
this.setId=function(id){
_id=id;
}
this.getId=function(){
return _id;
}
this.setCostPrice=function(costPrice){
_costPrice=costPrice;
}
// 構(gòu)造器
//this.setName(name);
this.setCostPrice(costPrice);
}
// 類(lèi)原型公有定義
_product.prototype={
// 公有屬性
isCellphone: true,
// 公有方法
toString : function(){
console.log("果果爸爸青少年編程推薦，"+this.name+"好")
}
}
// 返回上面所有定義
return _product;
})();
var huawei=new Product("1","華為p30",1500);
console.log("產(chǎn)品名稱(chēng)："+huawei.name)
huawei.show()
console.log(huawei.isCellphone);
huawei.toString();
</script>
</body>
</html>
執(zhí)行效果如下：
程序執(zhí)行效果
天給大家分享幾個(gè)好的功能封裝，在你的項(xiàng)目開(kāi)發(fā)中，一定會(huì)用的到，肯定實(shí)用。這樣寫(xiě)，能提高的編碼能力，編寫(xiě)出高效且可維護(hù)的JavaScript代碼。
有過(guò)一定項(xiàng)目開(kāi)發(fā)經(jīng)驗(yàn)的同學(xué)一定知道，在實(shí)際項(xiàng)目開(kāi)發(fā)過(guò)程中，會(huì)經(jīng)常碰到需要?jiǎng)討B(tài)加載一些JS的時(shí)候，比如依賴(lài)的第三方SDK。那如何封裝一個(gè)可以動(dòng)態(tài)加載JS的功能函數(shù)呢？代碼如下
此代碼兩個(gè)核心點(diǎn)：
1. 使用Promise處理異步
2. 使用腳本標(biāo)簽加載和執(zhí)行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"], ()=> {
});當(dāng)一個(gè)對(duì)象的屬性也是一個(gè)對(duì)象的時(shí)候，如何遍歷出這個(gè)對(duì)象上的所有屬性，包括子屬性對(duì)象上的對(duì)象。
使用遞歸循環(huán)遍歷
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);將一個(gè)采用多個(gè)參數(shù)的函數(shù)轉(zhuǎn)換為一系列函數(shù)，每個(gè)函數(shù)只采用一個(gè)參數(shù)，這增強(qiáng)了函數(shù)使用的靈活性，最大限度地減少了代碼冗余，并提高了代碼的可讀性。
function curryAdd(x) {
return function (y) {
return function (z) {
return x + y + z;
};
};
}
const result=curryAdd(1)(2)(3);在某些情況下，特定函數(shù)只允許執(zhí)行一次。這種情況還是挺多的。
once函數(shù)包裝了另一個(gè)函數(shù)，確保它只能執(zhí)行一次
// 封裝
function once(fn) {
let executed=false;
return function (...args) {
if (!executed) {
executed=true;
return fn.apply(this, args);
}
};
}
// 執(zhí)行
const runOnce=once(()=> {
});
runOnce();
runOnce();如果用戶省略參數(shù)，則分配一個(gè)預(yù)定的默認(rèn)值。
function greetUser(name="Guest") {
console.log(`Hello, ${name}!`);
}
greetUser(); // 輸出: Hello, Guest!
greetUser("John"); // 輸出：Hello, John!下面這個(gè)實(shí)例，我需要將數(shù)據(jù)按指定字段分類(lèi)出來(lái)，只需要將使用reduce封裝一個(gè)可執(zhí)行的函數(shù)就行。
在之前的一篇文章《如何打造屬于自己的Javascript武器庫(kù)，來(lái)封裝這些經(jīng)典的方法吧》中，有封裝過(guò)一些簡(jiǎn)單的方法。
今天這篇文章我們繼續(xù)看看關(guān)于字符串處理的常用方法，并將其封裝，完善自己的Javascript武器庫(kù)。
文中的代碼我已經(jīng)放到Github上了，有需要的同學(xué)可以自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/jsCapsulation/capsulation2.js
Javascript
該方法的主要目的是通過(guò)傳遞不同的參數(shù)，選擇去除哪里的空格。
all - 代表所有空格
preBehind - 前后空格
previous - 前面空格
behind - 后面空格
主要思想是：通過(guò)正則表達(dá)式\s匹配空白字符，然后用''去替換空白字符。
得到的代碼如下所示。
去除空格方法
該方法的主要目的是：將字符串的首字母或者全部字母，進(jìn)行大小寫(xiě)轉(zhuǎn)換。根據(jù)傳入的參數(shù)進(jìn)行處理。
FirstUpper - 首字母大寫(xiě)
FirstLower - 首字母小寫(xiě)
AllToggle - 全部大小寫(xiě)相互轉(zhuǎn)換
AllUpper - 全部大寫(xiě)
AllLower - 全部小寫(xiě)
主要思想是：根據(jù)傳入的參數(shù)，配合使用字符串自身的toUpperCase和toLowerCase方法。
得到的代碼如下所示。
字母大小寫(xiě)轉(zhuǎn)換
其中的ToggleCase方法用于大小寫(xiě)相互轉(zhuǎn)換，其如下所示。
大小寫(xiě)相互轉(zhuǎn)換
該方法主要用于檢測(cè)輸入的字符串是否是我們想要的類(lèi)型，例如email代表郵箱，phone代表手機(jī)號(hào)，number代表數(shù)字，chinese代表中文。
主要思想是：獲得想要獲取類(lèi)型的正則表達(dá)式，然后返回匹配的結(jié)果。
得到的代碼如下所示。
檢測(cè)字符串類(lèi)型
上述的檢測(cè)方案完全可以按照需求進(jìn)行擴(kuò)充，直接通過(guò)case，就可以自行添加。
該方法主要用于模仿檢測(cè)設(shè)置密碼的強(qiáng)度，檢測(cè)規(guī)則如下：
如果密碼長(zhǎng)度小于6，則強(qiáng)度為0。
如果密碼包含數(shù)字，則強(qiáng)度加1。
如果密碼包含小寫(xiě)字母，則強(qiáng)度加1。
如果密碼包含大寫(xiě)字母，則強(qiáng)度加1。
如果包含特殊字符，則強(qiáng)度加1。
上述規(guī)則會(huì)累加統(tǒng)計(jì)，最高強(qiáng)度為4。
得到的代碼如下所示。
檢測(cè)密碼強(qiáng)度
該方法主要用于隨機(jī)生成指定長(zhǎng)度的字符串，例如隨機(jī)驗(yàn)證碼我們完全可以通過(guò)這個(gè)方法去實(shí)現(xiàn)。
主要思想是：先通過(guò)Math.random()方法生成隨機(jī)數(shù)，然后調(diào)用toString(36)方法轉(zhuǎn)化為字符串，再截取掉前面的0和小數(shù)點(diǎn)，循環(huán)計(jì)算直到達(dá)到指定長(zhǎng)度。
該方法的核心在于toString()方法的使用，Number類(lèi)型的toString方法已經(jīng)重寫(xiě)，傳入的參數(shù)表示轉(zhuǎn)化的進(jìn)制數(shù)，傳入的范圍是2-36，最小的2表示0-1，最大的36數(shù)字0-9和小寫(xiě)字母a-z，如上面的toString(36)，表示要用36進(jìn)制數(shù)表示。
根據(jù)以上分析，得到的代碼如下所示。
隨機(jī)生成指定長(zhǎng)度字符串
該方法通過(guò)字符串的split方法實(shí)現(xiàn)特別簡(jiǎn)單。通過(guò)split方法按照目標(biāo)字符串分割成數(shù)組，目標(biāo)字符串出現(xiàn)的次數(shù)就是數(shù)組的長(zhǎng)度減去1。
根據(jù)以上分析，得到的代碼如下所示。
統(tǒng)計(jì)指定字符串出現(xiàn)次數(shù)
該方法主要用于將字符串通過(guò)傳入的參數(shù)格式化處理，接收的參數(shù)如下所示。
size - 表示分割的位數(shù)，默認(rèn)為3。
delimiter - 處理后字符串的連接符，默認(rèn)為','
該方法的思想是通過(guò)正則表達(dá)式，動(dòng)態(tài)獲取每次需要捕獲的位數(shù)，然后將其捕獲的位置前后替換為連接符。
得到的代碼如下。
格式化字符串處理
今天這篇文章主要補(bǔ)充了Javascript中與字符串有關(guān)的方法的封裝，其他需要封裝的方法還有很多，大家也可以自行總結(jié)。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
