1. 程式人生 > >理解javascript中的策略模式

理解javascript中的策略模式

// 策略物件
var strategys = {
    isNotEmpty: function(value,errorMsg) {
        if(value === '') {
            return errorMsg;
        }
    },
    // 限制最小長度
    minLength: function(value,length,errorMsg) {
        if(value.length < length) {
            return errorMsg;
        }
    },
    
// 手機號碼格式 mobileFormat: function(value,errorMsg) { if(!/(^1[3|5|8][0-9]{9}$)/.test(value)) { return errorMsg; } } }; var Validator = function(){ this.cache = []; // 儲存效驗規則 }; Validator.prototype.add = function(dom,rules) { var self = this; for(var
i = 0, rule; rule = rules[i++]; ){ (function(rule){ var strategyAry = rule.strategy.split(":"); var errorMsg = rule.errorMsg; self.cache.push(function(){ var strategy = strategyAry.shift(); strategyAry.unshift(dom.value); strategyAry.push(errorMsg);
return strategys[strategy].apply(dom,strategyAry); }); })(rule); } }; Validator.prototype.start = function(){ for(var i = 0, validatorFunc; validatorFunc = this.cache[i++]; ) { var msg = validatorFunc(); // 開始效驗 並取得效驗後的返回資訊 if(msg) { return msg; } } }; // 程式碼呼叫 var registerForm = document.getElementById("registerForm"); var validateFunc = function(){ var validator = new Validator(); // 建立一個Validator物件 /* 新增一些效驗規則 */ validator.add(registerForm.userName,[ {strategy: 'isNotEmpty',errorMsg:'使用者名稱不能為空'}, {strategy: 'minLength:6',errorMsg:'使用者名稱長度不能小於6位'} ]); validator.add(registerForm.password,[ {strategy: 'minLength:6',errorMsg:'密碼長度不能小於6位'}, ]); validator.add(registerForm.phoneNumber,[ {strategy: 'mobileFormat',errorMsg:'手機號格式不正確'}, ]); var errorMsg = validator.start(); // 獲得效驗結果 return errorMsg; // 返回效驗結果 }; // 點選確定提交 registerForm.onsubmit = function(){ var errorMsg = validateFunc(); if(errorMsg){ alert(errorMsg); return false; } }

相關推薦

理解javascript策略模式

// 策略物件 var strategys = { isNotEmpty: function(value,errorMsg) { if(value === '') { return errorMsg; } },

理解javascript的焦點管理

javascript document function 管理系統 對焦點 焦點作為javascript中的一個重要功能,基本上和頁面交互都離不開焦點。但卻少有人對焦點管理系統地做總結歸納。本文就javascript中的焦點管理作詳細介紹 焦點元素  到底哪些元素可以獲得焦點呢?默認情況下

深入理解javascript之設計模式

rip 是我 解決問題 不想 接受 button move center 常識 設計模式 設計模式是命名、抽象和識別對可重用的面向對象設計實用的的通用設計結構。設計模式確定類和他們的實體、他們的角色和協作、還有他們的責任分配。 每個設計模式都聚焦於一個面向對象的設計難題

理解javascript的回調函數(callback)【轉】

自己實現 需要 his tab 定義函數 copy 輸入 mil 幹什麽 在JavaScrip中,function是內置的類對象,也就是說它是一種類型的對象,可以和其它String、Array、Number、Object類的對象一樣用於內置對象的管理。因為function

簡單理解javascript的原型對象,實現對之間共享屬性和行為

type屬性 定義 say 能夠 方法 () post spa popu javascript中提供了構造函數。可以方便的創建對象。典型的構造函數例如以下: function Person(name, age) {   this.name = name;

通過例子深入理解javascript的new操作符

not 而是 efi undefine new blog div 函數功能 成功 1.首先看一道題目 1 function Cat(name,age){ 2 this.name=name; 3 this.age=age; 4 } 5 console.l

深入理解JavaScript的函數操作

要求 使用情況 並不是 回文 工作 alert http load 函數 匿名函數 對於什麽是匿名函數,這裏就不做過多介紹了。我們需要知道的是,對於JavaScript而言,匿名函數是一個很重要且具有邏輯性的特性。通常,匿名函數的使用情況是:創建一個供以後使用的函數。 簡單

理解JavaScript的去抖函數

清除 渲染 註定 back 導致 lB brush stop rail 何為去抖函數?在學習JavaScript去抖函數之前我們需要先弄明白這個概念。很多人都會把去抖跟節流兩個概念弄混,但是這兩個概念其實是很好理解的。 去抖函數(Debounce Function),是一個

圖說js的this——深入理解javascriptthis指針

前端 javascript this沒搞錯吧!js寫了那麽多年,this還是會搞錯!沒搞錯,javascript就是回搞錯!…………在寫java的時候,this用錯了,idea都會直接報錯!比如……但是,js,……idea,愛莫能助了……在面向對象編程裏有兩個重要的概念:一個是類,一個是實例化的對象,類是一個

理解JavaScript的屬性描述符

http script 如果 als enume this 參數 賦值運算 setter 我們把描述JavaScript中定義內部特性的屬性叫做屬性描述符 分為兩大類:數據描述符和存取描述符 數據描述符是一個擁有可寫或不可寫的屬性(Writable); 存取描述符不包含數據

徹底理解JavaScript的this

fun www strong turn htm 生成 環境 sna java this 是 JavaScript 語言的一個關鍵字。 它是函數運行時,在函數體內自動生成的一個對象,只能在函數體內使用。 函數的不同使用場合,this 有不同的值。總的來說,this 就是函數運

JavaScript進階】深入理解JavaScriptES6的Promise的作用並實現一個自己的Promise

  1.Promise的基本使用 1 // 需求分析: 封裝一個方法用於讀取檔案路徑,返回檔案內容 2 3 const fs = require('fs'); 4 const path = require('path'); 5 6 7 /** 8 * 把一個回

深入理解Javascript的valueOf與toString

基本上,javascript中所有資料型別都擁有valueOf和toString這兩個方法,null除外。它們倆解決javascript值運算與顯示的問題,本文將詳細介紹,有需要的朋友可以參考下。 toString() toString()函式的作用是返回object的字串表示,JavaScript中ob

完全理解JavaScript的this關鍵字

前言 原文 王福朋老師的 JavaScript原型和閉包系列 文章看了不下三遍了,最為一個初學者,每次看的時候都會有一種 "大徹大悟" 的感覺,而看完之後卻總是一臉懵逼。原型與閉包 可以說是 JavaScirpt 中理解起來最難的部分了,當然,我也只是瞭解到了一些皮毛,對於 JavaScript OOP

深入理解JavaScript的設計模式

使用適當的設計模式可以幫助你編寫更好、更易於理解的程式碼。這樣的程式碼也更容易維護。但是,重要的是不要過度使用它們。在使用設計模式之前,你應該仔細考慮你的問題是否符合設計模式。 當你開始一個新的專案時,你不會立即開始編碼。你必須定義專案的目的和範圍,然後列出專案特性或規格說明。之後,你可以開始編寫程式碼

【譯】理解 JavaScript 的 undefined

原文地址:Understanding JavaScript’s ‘undefined’ 原文作者:Angus Croll 譯文出自:掘金翻譯計劃 本文永久連結:github.com/xitu/gold-m… 譯者:yanyixin 校對者:noahziheng, M

理解javascript淺拷貝和深拷貝

首先,我們要知道javascript的資料型別。 javascript有兩種資料型別,基礎資料型別和引用資料型別。 基礎資料型別:儲存在棧記憶體中的簡單資料段,有undefined,boolean,number,string,null。 引用資料型別:Array,物件,Function儲

理解javaScript的作用域和上下文Understanding Scope and Context in JavaScript

譯者注:一直對於作用域和上下文感到很混亂,無意中看到這篇文章,覺得講得很好,故翻譯來與大家分享。翻譯不好之處,請大家多多指教。 原文連結:http://ryanmorr.com/understanding-scope-and-context-in-javascript/   前言部分,不做翻譯

全面理解JavaScript的 this

全面理解JavaScript中的 this 上下文 VS 作用域 作用域(scope) 是在執行時程式碼中的某些特定部分中變數,函式和物件的可訪問性。換句話 說,作用域決定了程式碼區塊中變數和其他資源的可見性。而上下文 (context)是用來指定程式碼某些特定部分中 this 的值。

【進階1-1期】理解JavaScript 的執行上下文和執行棧

本期的主題是呼叫堆疊,本計劃一共28期,每期重點攻克一個面試重難點,如果你還不瞭解本進階計劃,文末點選檢視全部文章。 如果覺得本系列不錯,歡迎點贊、評論、轉發,您的支援就是我堅持的最大動力。 執行上下文是當前 JavaScript 程式碼被解析和執行時所在環境的抽象概念。 執行上下文的型別 執行上