Web前端JavaScript面向對象閉包實現封裝小

Web前端JavaScript面向對象閉包實現封裝小實例

絡圖片

閉包，是幾乎所有前端工程師必須要掌握的一個技術，這里簡單說一下閉包的概念，閉包就是指在函數中調用函數以外作用域的行為。常見的閉包就是在函數內部再定義一個函數時，觸發內部函數，使用外部函數的行為。

之前的對象創建分為原生部分和原型部分，基于閉包方式，可以把私有的基本類型打包起來，基于函數返回值方式建立引用。

但是原型部分的定義，感覺和閉包定義本身沒有什么聯系，所有再重新定義一個閉包。嘗試把原型的定義也打包起來。

以下案例主要是理解關于JavaScript中封裝思想，以及如何使用閉包技術來封裝對象。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<!--

果果爸爸青少年編程

2019-8-2

-->

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文件

有過一定項目開發經驗的同學一定知道，在實際項目開發過程中，會經常碰到需要動態加載一些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);

功能三，柯里化（Currying）

將一個采用多個參數的函數轉換為一系列函數，每個函數只采用一個參數，這增強了函數使用的靈活性，最大限度地減少了代碼冗余，并提高了代碼的可讀性。

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進行數據結構轉換

下面這個實例，我需要將數據按指定字段分類出來，只需要將使用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中與字符串有關的方法的封裝，其他需要封裝的方法還有很多，大家也可以自行總結。

在線咨詢

上一篇：如何修改尺寸大小，附下載鏈接
下一篇：HTML基礎（六）-表單（下）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Web前端JavaScript面向對象閉包實現封裝小

功能一，動態加載JS文件

功能二，遞歸檢索對象屬性

功能三，柯里化（Currying）

功能四，函數僅執行一次

功能五，添加默認值

功能六，利用Reduce進行數據結構轉換

言

去除空格的方法

字母大小寫切換

檢測字符串類型

檢測密碼強度

隨機生成指定長度字符串

統計給定字符串中,目標字符串出現的次數

格式化處理字符串

結束語

您的項目需求