一、js設計模式-對癥下藥

SQC 發布于2019-08-26 13:34 / 3146人閱讀

摘要：一個郵箱驗證的功能函數的寫法有幾種簡單的寫法分析這幾個函數可以認為是幾個全局變量，類似于使用場景適用于功能比較單一獨立的邏輯優點寫法用法都比較簡單缺點此時的函數作為全局變量存在，在這種情況多的時候團隊開發時容易被別人的變量覆蓋，而且從業務上

1、一個郵箱驗證的功能函數的寫法有幾種？

(1) 簡單的寫法

function checkName(){};
function checkEmail(){};
function checkPassword(){};

分析：這幾個函數可以認為是幾個全局變量，類似于

var checkName = function(){};
var checkEmail = function(){};
var checkPassword = function(){};

使用場景：適用于功能比較單一、獨立的邏輯

優點：寫法、用法都比較簡單

缺點：此時的函數作為全局變量存在，在這種情況多的時候團隊開發時容易被別人的變量覆蓋，而且從業務上講這幾個屬于一類函數，所以放在一個對象里的話代碼的可讀性大大提高

(2) 作為一個對象的一個屬性的函數

1、 var CheckoutObject = {
      checkName: function(){},
      checkEmail: function(){},
      checkPassword: function(){},
    };

類似于

 2、var CheckoutObject = function(){};
    CheckoutObject.checkName = function(){};
    CheckoutObject.checkEmail = function(){};
    CheckoutObject.checkPassword = function(){};

使用場景：幾個功能有一定的邏輯或者類別上的關系，例如對表單的增刪改查都屬于對表單的操作

分析以及優點：這兩種方式都只有一個全局變量，極大了削弱了命名沖突的隱患，都能直接通過變量名稱CheckoutObject直接使用方法，區別是2屬于函數，在函數內部可以定義所有實例共有的屬性，更加符合類的特點，更加具體的說1是2的一種語法糖、只是2的一種實現方法

缺點：1不太符合類的特點不能去實例化，雖然2可以通過new去創建對象但是創建的對象并不包括那些靜態方法，對于函數變量CheckoutObject復用性比較差，而且包含屬性并不獨立
(3) 函數返回對象，該對象包含郵箱校驗的方法

  var CheckoutObject = function(){
    return {
      checkName: function(){},
      checkEmail: function(){},
      checkPassword: function(){},
    };
  };
  // 調用方法
  var test = new CheckoutObject();
  test.checkName();
  test.checkEmail();
  test.checkPassword();

使用場景：可以用來存放一些公共屬性，會被多人調用，每次都生成新的實例

分析：構造函數返回一個對象，對象包含所需的屬性，每次new都是一個新對象，對象包含校驗需要的屬性

優點：每個實例對象所包含的屬性都是獨立的

缺點：test的對象和CheckoutObject沒什么關系，通過instanceof檢測不出來，

(4) 更具有類特點的對象

var CheckoutObject = function(){
  this.checkName = function(){};
  this.checkEmail = function(){};
  this.checkPassword = function(){};
};
var test = new CheckoutObject();
console.log(test instanceof CheckoutObject); // true

特點：實例對象的類型是構造函數，這樣更適用于封裝
(5) 對象間共享的方法
分析：上述創建的對象都是獨立的擁有自己的屬性，但是這些屬性是相同的，這樣造成了內存的浪費

var CheckoutObject = function(){};
CheckoutObject.prototype.checkName = function(){
  console.log("我叫小將");
};
var test1 = new CheckoutObject();
var test2 = new CheckoutObject();
test1.checkName(); // 我叫小將
test2.checkName(); // 我叫小將
console.log(test1.checkName === test2.checkName); // true

使用場景：各個實例都擁有這個屬性，這樣就可以提取到原型對象中，減小內存損耗

優點：原型屬性被所有屬性所共享

缺點：實例的屬性缺乏獨立性，所以獨立屬性和共享屬性應該對癥下藥

(6) 更簡單的鏈式調用

分析：好的代碼應該精簡，能占一行絕不占兩行

var CheckoutObject = {
  checkName: function(){ return this },
  checkEmail: function(){ return this }
}
CheckoutObject.checkName().checkEmail()

共享的也可以

var CheckoutObject = function(){};
CheckoutObject.prototype.checkName = function(){
  console.log(this);
  return this;
};
CheckoutObject.checkName()

使用場景：適合一系列操作，例如本博文的校驗

優點：調用方式簡潔，易懂

缺點：每個函數都必須返回當前this，也就是this必須指向當前執行環境

2、原生對象（例如Array）添加獨立的方法

為原生對象添加屬性通常是通過原型對象

Array.prototype.remove = function(){};

缺點：所有Array都具有了這個remove屬性造成了污染
優點：如果大部分實例都需要這個方法這就成了優點了

Array.prototype.addMethod = function(name, fn){
  this[name] = fn;
};

這樣所有的Array都具有addMethod這個屬性，但是具體添加的方法是每個實例所共有，具體用那種看實際使用場景，而且可以在addMethod函數內加一些其它的共享屬性

鏈式添加和使用

Function.prototype.addMethod = function(name, fn){
  console.log(this === Method);
  this.prototype[name] = fn;
  return this;
};
var Method = new Function();
Method.addMethod("checkName", function(){
  console.log("姓名檢查");
  return this;
}).addMethod("checkEmail", function(){
  console.log("郵箱檢查");
  return this;
})

var method = new Method();
method.checkName().checkEmail();

使用場景：為原型對象添加共享方法，但是具體執行每個原型實例可以自己定義

優點：提供共享的添加函數，具體添加的函數每個Method獨立，method再次共享

總結：綜上可以看到每種方式都有其使用場景，要對癥下藥選擇最合適的模式

云服務器 GPU云服務器 JS設計模式 js繼承模式 js設計素材 js 創建對象安全模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109087.html

對癥下藥，快速下載github單個文件夾

摘要：如何從上下載單個文件夾然后再看了看插件這個插件能顯示樹狀目錄，還提供了單個文件的下載。單個文件本身就提供這個功能。瞎扯淡的前言前幾日遇到一個比較麻煩的事情，剛好周末有時間，不知道大家是否和我一樣，在github閱讀源碼的時候，只想看他的src目錄，當然在github上面閱讀非常的麻煩，各種快捷都用不了，函數跳轉，全局搜索….等等。但是。。。關鍵來了，很有源碼整個項目都非常的大，介...

RichardXG 2019-08-22 18:43 評論0 收藏0
看完離編寫高性能的JavaScript又近了一步

摘要：加上內部函數被返回，被其他對象引用，形成了閉包，因此對應的變量對象存在于閉包函數的作用域鏈中。因此訪問次數越多，費用越高，頁面性能就會受到很大影響。盡管還主動執行了一次操作，曲線也沒有下降。副標題：常見的JavaScript內存泄露這是關于JavaScript內存泄露相關的序列文章中一篇。由于時間有限更新進度會有點慢，但會持續更新的。自己也在學習中，難免對某些知識點的理解不是很正確...

Nekron 2019-08-21 17:54 評論0 收藏0
JAVA團隊開發手冊 - 3. 開發流程

摘要：開發流程對于一個項目，最大的問題就是如何拆解為任務，分配到合適的人手里，并在有限的時間內完成它。但是我們把整個項目進行拆解的話，每個星期進行統計分析，就可以對癥下藥，提高開發效率。開發流程對于一個項目，最大的問題就是如何拆解為任務，分配到合適的人手里，并在有限的時間內完成它。就像做建筑工程一樣，其實做IT也是可以量化的，可能有的人砌磚砌得慢一些，有的人快一些。但是我們把整個項目...

魏憲會 2019-08-15 13:32 評論0 收藏0
CSS Sticky 其實很簡單

摘要：大致步驟如下監聽滾動事件，計算目標元素距離視口的距離。距離滿足條件時，創建占位元素，修改目標元素定位方式為。僅僅為了實現這個效果頁面上沒有其他內容大動干戈性價比很低。對癥下藥，讓滾動發生在被誤匹配上的祖先元素內即可恢復。為什么要寫這篇文章 Sticky 也不是新知識點了，寫這篇文章的原因是由于最近在實現效果的過程中，發現我對 Sticky 的理解有偏差，代碼執行結果不如預期。決定寫篇文章重新...

番茄西紅柿 2019-05-23 15:55 評論0 收藏0