Public Functions for Page 擁有一個兼具對稱與不對稱美的縮寫 —— pffp
宣告:
pffp不是什麼? pffp 不是一個框架;pffp不是一個特定的外掛或工具。
pffp是什麼? pffp 是頁面公共函式集;pffp 擁有一個關於 JavaScript描述的 頁面公共邏輯 處理函式的 編寫風格的 定義。
pffp被分享的理由(存在的意義): 它所定義的函式(介面)編寫規則 兼具 使用的便捷性,閱讀的清晰性 和 維護的可擴充套件性。故,在這裡,與其說是在分享這麼一個頁面公共函式集,不如說是在分享這個函式集的函式規範定義。
pffp 的由來:
pffp 函式規範定義來自於一個同名的JavaScript公共函式集。 這個函式集出身於一個過渡性的專案。它為一個 相對於業務需求不太完善的 前端UI框架而生,主要目的是封裝/抽象關於 呼叫框架元件實現頁面互動行為的 程式邏輯。以便開發者能夠專注於處理業務方面的問題。
簡而言之,它為苛刻的開發環境而生,而且很好 適應並改善 所在的開發環境。由於專案的過渡性決定了它可能被遺棄的命運,故在這裡將其記錄並分享,希望其生命能夠得到延續。
pffp函式一大特點:
第一個入參為 入參集物件。其後的入參基本都是必須的或基礎的。非必須的及作開關用的入參 通過第一個入參中傳入。
先看個例子,嚐點鮮:
一個函式的3種呼叫方法:
1 2 3 4 5 6 |
/**隱藏第一個物件,顯示第二個物件*/ pffp.executeObjectsFunction({},[thisInputObj, thisSelectObj],['hide','show']); /**隱藏兩個物件*/ pffp.executeObjectsFunction({funcNameAry:['hide']},[thisInputObj, thisSelectObj]); /**顯示兩個物件*/ pffp.executeObjectsFunction({objAry:[thisInputObj, thisSelectObj],funcNameAry:['show']}); |
(既然省去了不少程式碼,就不用再在名稱上太過節省了,需保證意義的完整,還需顧及全域性內函式命名的統一性,故不隨意簡化。)
例 子中的函式程式碼是在pffpTools中定義的,當然它也屬於pffp。他們的關係在後文中再作說明。說這點的目的是說明,這個函式並非前面所說的互動行 為邏輯函式(至少不是頁面級的)。它及其他pffpTools都服務於pffp中頁面互動行為邏輯公共函式。簡而言之,簡化程式碼,強壯邏輯。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
var pffpTools = { executeObjectsFunction: function(v, objAry, funcNameAry) { if (typeOf(v, 'object')) { objAry = objAry || v.objAry; funcNameAry = funcNameAry || v.funcNameAry; } if (!typeOf(objAry, 'array')) { objAry = [objAry]; } if (!typeOf(funcNameAry, 'array')) { funcNameAry = [funcNameAry]; } var objAryLength = objAry.length; var resultAry = []; while (objAryLength-- > 0) { var obj = objAry[objAryLength]; var tempResultObj = {}; if (typeOf(obj, 'object')) { var funcNameAryLength = funcNameAry.length; while (funcNameAryLength-- > 0) { var funcNameStr = funcNameAry[funcNameAryLength]; if (typeOf(obj[funcNameStr], 'function')) { tempResultObj[funcNameStr] = obj[funcNameStr](); } } } resultAry[resultAry.length] = tempResultObj; } delete arguments; // 不知此處是否多此一舉,歡迎大家指正。 return resultAry.reverse(); } } |
Public Function for Page 簡介
Public Function For Page(pffp),頁面公共函式。主要基於元件,按照設計來執行相關頁面行為。(即在元件上將頁面互動行為進行了統一的設計與封裝,減少開發人員開發時對頁面基本行為邏輯的思考與處理工作量,統一了產品的整體風格,便於元件的更新和頁面行為的統一更改。)
pffp開發人員根據具體需求通過修改mypffp來過載pffp中的函式,並通過pffp來呼叫過載或新增的函式,如通呼叫pffp自身的函式一樣。
pffp使用時的風格如同編寫程式導向的程式一樣,在面向頁面元件物件的程式處理邏輯中,以過程的思考方式來生成頁面元素。
pffp根據使用需要,細分為負責處理基本資料的工具函式集pffpTools、負責程式互動行為的pffpInteractive、負責業務邏輯的函式集pffpBusiness。在使用時它們將通過pffp函式集物件來呼叫。
如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
1 var p_tempSetTimeout; 2 /**頁面公用函式——工具篇*/ 3 var pffpTools = { 4 +--233 lines: getFuncArgumentsName: function(v, func) { 237 } 238 /**頁面公用函式——互動行為篇*/ 239 var pffpInteractive = $.extend({}, pffpTools); 240 pffpInteractive = $.extend({}, pffpInteractive, { 241 +--1513 lines: userLevel: 'middle' 1754 }); 1755 /**頁面公用函式——業務邏輯篇*/ 1756 var pffpBusiness = $.extend({}, pffpInteractive); 1757 pffpBusiness = $.extend({}, pffpBusiness, { 1758 +--311 lines: encryptFormPassword: function(v, v_formObj, passwordKeyAry, encryptKeyValueStr, extendFunc) { 2069 }); 2070 2071 /**頁面公用函式*/ 2072 var pffp = $.extend({}, pffpBusiness); 2073 2074 /* mypffp為使用者自定義及重寫pffp預留 */ 2075 var mypffp = {}; 2076 pffp = $.extend({}, pffp, mypffp); 2077 |
# 函式風格說明 #
Public Function for Page(pffp),中的函式,其主要用於封裝頁面元件元素的行為邏輯。不包含資料處理的基本工具函式。
函式入參:
第一個入參:一定是稱作v的入參物件。其包括了所有函式需要接收的入參(這些入參是以v物件的屬性形式存在)。
優點是,使用者無需關心函式接收各個入參的位置順序,對於一些非必要引數,可優先考慮這樣的方式。
缺點是,使用者必須明確入參在函式內部是的名稱是什麼,建議各個函式在相同屬性的入參命名上,採用統一名稱,以防混淆。
其餘位置入參:由於各個函式的用途不同,所需入參不同,所以沒有固定的順序。但是存在一個入參的順序制定原則。
必要入參優先。
基礎入參優先。
當以上原則衝突時,滿足靠前的原則的引數位置優先。
必要入參:呼叫此函式時,必須賦值的引數(無論以何種形式)。
基礎入參:屬於此函式所操縱物件的屬性(包括屬性名稱)或者行為(包括行為名稱),甚至是物件本身,使用者自定義擴充套件事件(如ajax提交資料成功時執行的successFunc)。
配置性入參:這裡的配置是指標對此函式的配置,比如某個控制函式邏輯走向的開關入參,建議像這樣的對於所操作物件沒有直接實際意義的引數只通過第一位置入參集物件傳入。
另,不建議使用objToBeHide、objToBeDraw這樣的(僅僅為簡單的操作生的)入參。建議將其包括在successFunc(操作成功時執行的函式)或extendFunc(操作外擴充套件執行的邏輯函式)的處理邏輯中。
當入參即出現在第一位置的入參集物件中,又出現在後面位置的入參中時,以後面位置中的入參值為為準。
所有引數都可以直接在入參集物件中賦值,只有基礎入參(必要或非必要,一定是物件的屬性或行為變數,而非一些開關變數)才可以擁有函式第一入參後的某個入參位置。
函式入參的初始處理原則:
為實現支援通過入參物件集傳入引數的方式,故在函式的起始部分需要有一個囊括在if(typeOf(v.’object’)){}中的入參處理邏輯(typeOf 為common中的一個自定義檢測入參型別的公共方法)。遵循函式入參優先順序原則,只當函式入參中沒有所要入參時,才在入參集物件中去尋找對應的入參值。通常每個可能的入參都需要在此“註冊”(處理)一次,原則上不改變函式使用者原本希望傳入的入參值。
函式返回值:
通常函式用於封裝頁面互動邏輯行為並沒必要返回任何值。但是對於初始化元件的函式,則需要將初始化的元件物件返回,這是pffp中預設的規則。
推薦閱讀:《網易郵箱前端Javascript編碼規範:基礎規範》
本文由 computerScience 博主 Will 投遞於伯樂線上。也歡迎其他朋友投稿哦~
【如需轉載,請標註並保留原文連結、譯文連結和譯者/作者等資訊,謝謝合作!】