整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

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

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

          絡圖片

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

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

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

          以下案例主要是理解關于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文件

          有過一定項目開發經驗的同學一定知道,在實際項目開發過程中,會經常碰到需要動態加載一些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中與字符串有關的方法的封裝,其他需要封裝的方法還有很多,大家也可以自行總結。


          主站蜘蛛池模板: 变态调教一区二区三区| 国产一区风间由美在线观看| 一区二区三区视频在线| 国产精品一区二区av不卡| 一区二区三区四区精品| 日韩精品一区二区三区老鸦窝| 欧美亚洲精品一区二区| 免费视频精品一区二区| 一区二区三区电影在线观看| 精品亚洲一区二区三区在线观看 | 日本一区二区高清不卡| 国产第一区二区三区在线观看| 无码国产亚洲日韩国精品视频一区二区三区 | 日韩在线一区二区| 亚州AV综合色区无码一区| 一区二区三区高清视频在线观看| 中文字幕在线一区二区三区| 少妇无码一区二区三区| 天天综合色一区二区三区| 国产视频一区二区在线播放| 国产精品无码亚洲一区二区三区| 亚洲区精品久久一区二区三区 | 日亚毛片免费乱码不卡一区 | 一区二区精品在线观看| 亚洲av不卡一区二区三区| 国模精品一区二区三区视频| 国产一区二区三区久久精品| 国产精品伦子一区二区三区 | 无码aⅴ精品一区二区三区| 天堂不卡一区二区视频在线观看| 久久久无码精品国产一区| 国产精品成人国产乱一区| 精品黑人一区二区三区| 中文字幕一区二区人妻性色 | 国模无码一区二区三区| 国精产品一区一区三区| 国产aⅴ一区二区三区 | 制服丝袜一区在线| 无码一区二区三区视频| 99精品久久精品一区二区| 日韩伦理一区二区|