pffp(一個JavaScript公共函數接口規範)的簡介

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 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 投遞於伯樂在線。也歡迎其他朋友投稿哦~

【如需轉載,請標註並保留原文鏈接、譯文鏈接和譯者/作者等信息,謝謝合作!】

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章