JS元件化驗證檢測

2021-06-29 00:29:20 字數 2329 閱讀 9946

在web開發過程中,我們時常會遇到輸入檢測的情況。如果只是簡單的輸入驗證檢測,例如郵箱、**等。我們可以簡單的使用if…else if…來依次判斷。但是如果這些判斷存在延遲檢測(例如ajax驗證),再使用if…else if…已經無法滿足需求了。

但是好在,利用jquery的deffer方法。通過done(func)巢狀,可以實現序列化的檢測:

第二種結構設計:

接下來,我們開始構建我們的元件容器:

var condition = function(func) ).success(function() ).next(function(result) ).success(function() ).start();

// condition 1

// success 1

// condition 2

// success 2

有時候,我們會需要支援多個success事件,所以可以對success方法進行擴充:

var condition = function(func)

然後考慮or分支結構,我們使用乙個陣列儲存condition列表。當執行到包含列表的元件時,遍歷執行:

condition.prototype.nextor = function()

} else ).next(function(result) ).next(function(result) ).start();

// condition 1.1

// condition 1.2

// condition 2-1

// condition 3

// condition 2-2.1

// condition 2-2.2

// condition 3

我們發現通過兩個分支走後,都呼叫了condition3,這是我們不希望看到的。我們接下去要實現元件的once:

condition.prototype.nextor = function() ).start();

} else ).next(function(result) , 100);

var s2_2 = new condition(function(result) , 100);

}).next(function(result) , 100);

s1.nextor(s2_1, s2_2).success(function() ).start();

// condition 1.1

// condition 1.2

// condition 2-1

// condition 2-2.1

// condition 3

// condition 2-2.2

給每個分支新增乙個標示符,當標示符為false時,停止該分支還未執行的所有檢測:

var condition = function(func)

if(!_once) return;

_once = false;

_next._doaction();

for(i = 0 ; i < arguments.length ; i += 1) {

arguments[i].success(function() {

dosuccess();

return _next;

測試如下:

// condition 1.1

// condition 1.2

// condition 2-1

// condition 2-2.1

// condition 3

好了,乙個簡易版的元件就完成了,通過這種元件化方式可以可方便的在中間插入、刪除乙個新的條件檢測,也可以很容易建立乙個分支檢測。此處僅作拋磚引玉,考慮更複雜的情況,還有fail、always等事件處理。就讓各位自己嘗試著完成吧。

關於軟體形式化驗證

軟體開發中一般使用 測試 來找bug,這種方法只能找到bug,不能證明程式沒有bug。形式化驗證是用邏輯來驗證程式的可靠性,就是把一段程式用邏輯的方法證明一遍,證明它能得到預期的結果,沒有bug。一般這類研究主要應用於昂貴的航天器材的作業系統 危險的醫療裝置的程式之中。因為航天器材 醫療裝置牽扯到人...

poj3318 隨機化驗證

題意 驗證兩個矩陣a b相乘是否等於c 思路 直接相乘的話n 3,不行 可以加入乙個輔助行矩陣h,如果a b c,那麼 h a b h c,因為h a 之後還是乙個行矩陣,時間複雜度為n 2。不過為了避免錯誤,h陣列需要隨機。code include include include includeu...

web自動化驗證碼處理

在自動化測試中,處理驗證碼時可以直接找研發注掉 或者讓研發同學設定乙個萬能驗證碼,不過如果這兩種方法都行不通的話,我們也可以自行解決 1 滑動驗證 滑動驗證比較簡單,我們可以通過js獲取影象中滑塊到影象最左側的距離,距離滑塊拖動的距離 2 檔案驗證碼 1 定位元素位置location 方法 大小 2...