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 投递于伯乐在线。也欢迎其他朋友投稿哦~

【如需转载,请标注并保留原文链接、译文链接和译者/作者等信息,谢谢合作!】

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值