怎么样才是设计功能函数的好思路(javascript)?

在js里面,对于函数的调用,实际上也是也是面向对象的思路,于是写好js函数,也是考核面向对象设计的能力,同时也必须考虑到如何实现高内聚和低耦合,拿一个例子来说,现在的需求是这样的,实现个投资进度框,就是如图所示:总共分四步来走,第一步“创建订单中”,成功改变提示信息“创建订单成功!”,显示,不成功改变提示信息“创建订单失败!”,显示,依次下去第二步,第三步,第四步!

我的dom结构是这样的:

<!--投资操作进度tip-->
<div class="invest_progress_tip">
<div class="progress_tip_title text-center">
<div class="la-timer la-2x" >
<div></div>
</div>
<span>小羊正在拼命地处理中···</span>
</div>
<div class="progress_tip_content">

</div>
</div>
<!--投资操作进度tip//-->

那就是这样的,我需要做的就是设计一个函数,对其调用,依次传参,然后对其<div class="progress_tip_content"></div>添加dom节点,添加每个实现步骤。那如何设计这个函数勒?刚开始,我是依照三种状态来设计这个函数的,flag为0,1,2。0为初始化,1为成功,2为不成功,于是怎么一个函数就出来:

/*
调用说明
show_p_tip({
step:"createOrder", //步骤名称,名称任意
flag: 0, // 0=状态未显示 1=状态已显示(成功) 2=状态已显示(未成功)
msg:‘正在创建订单··· ‘, //提示信息
is_begin: true, //提示框初始化,用于第一步操作,第一步必须初始化,前提flag必为0
is_success: true, //成功支付的提示(成功支付按钮),用于最后一步成功结果,,前提flag必为1
param: object对象 //如 {is_NoAuth:true, url:‘http://www.baidu.com‘, tradeData:‘hahahhaha‘, method:‘post‘} is_NoAuth必为true 前提flag必为2
});

*/

function show_p_tip(object){

switch(object.flag){
case 0:
if(object.is_begin){
$(".invest_tip .invest_tip_close").removeClass(‘close_window‘);
$(".invest_tip").css(‘z-index‘,9996);
$(".invest_progress_tip").center().fadeIn();
}
$(".invest_progress_tip .progress_tip_content").append(‘<div id="div_‘+object.step+‘"><span id="span_‘+object.step+‘">‘+object.msg+‘</span><i class="p-icon p-1"></i></div>‘);
break;

case 1:
if(object.msg!=‘‘){
$(".invest_progress_tip .progress_tip_content #span_"+object.step).html(object.msg);
}
$(".invest_progress_tip .progress_tip_content > div#div_"+object.step+" .p-icon").fadeIn();
if(object.is_success){
$(".invest_progress_tip .progress_tip_content").append(‘<div class="invest_success_result mt15 text-center"><a href="javascript:void(0);" class="invest_result_btn btn btn-primary btn-block">完成支付</a></div>‘);
}
break;

case 2:
if(object.msg!=‘‘){
$(".invest_progress_tip .progress_tip_content #span_"+object.step).html(object.msg);
}
$(".invest_progress_tip .progress_tip_content > div#div_"+object.step+" .p-icon").addClass(‘p-2‘);
$(".invest_progress_tip .progress_tip_content > div#div_"+object.step+" .p-icon").fadeIn();
if(object.param.is_NoAuth){
var form = createForm(object.param);
$(".invest_progress_tip .progress_tip_content").append(‘<div class="invest_noauth_tip mt5">点击支付按钮前往<span class="text-primary">一麻袋</span>进行支付操作</div>‘);
$(".invest_progress_tip .progress_tip_content .invest_noauth_tip").append(form);
}
break;

}

if(object.tip_msg&&object.tip_msg!=‘‘){
$(".invest_progress_tip .progress_tip_title .la-timer>div").addClass(‘success‘);
$(".invest_progress_tip .progress_tip_title span").text(object.tip_msg);
}

}

那么可以看出来,使用flag作为参考依据,于是就会出现很多问题,代码出现了很多问题,比如

状态为flag为1,成功的时候,我要求显示”完成支付“的按钮,需要在flag为1的前提下,添加个参数is_success;

状态为flag为0,显示初始化的时候,需要在第一步做些其他操作(初始化),又要传入参数is_begin来保证第一步可以实现某个操作

虽然功能可以实现,但是代码相当冗余,可扩展性不好,相当不智能!

于是另外一种方法出来了,

/*
调用说明
show_p_tip({
action:‘_init‘, //动作名
name: ‘tag1‘, //标识名
msg:‘正在创建订单...‘, //提示信息
status: 1, // 0错误 1正确
form: object对象 //如 {url:‘http://www.baidu.com‘, tradeData:‘hahahhaha‘, method:‘post‘}
});
eg:

show_p_tip({ action:‘_init‘,msg:‘小羊正在疯狂处理中!‘});

show_p_tip({ action:‘_tips‘,name:‘tag1‘,msg:‘正在创建订单...‘});
show_p_tip({ action:‘_tips‘,name:‘tag1‘,msg:‘创建订单成功!‘,status:1});
show_p_tip({ action:‘_tips‘,name:‘tag1‘,msg:‘现金券下单失败!‘,status:0});

show_p_tip({ action:‘_jump‘,form:{url:‘http://www.baidu.com‘, tradeData:‘hahahhaha‘, method:‘post‘}});

show_p_tip({ action:‘_complete‘});

show_p_tip({ action:‘_end‘});
*/
function show_p_tip(object){
switch(object.action){
//初始化
case ‘_init‘:
var msg = object.msg?object.msg:‘小羊正在拼命地处理中!‘;
$(‘.invest_progress_tip‘).attr(‘rel‘,1);
$(‘.invest_progress_tip .progress_tip_title span‘).text(msg);
$(".invest_tip .invest_tip_close").removeClass(‘close_window‘);
$(".invest_tip").css(‘z-index‘,9996);
$(".invest_progress_tip").center().fadeIn();
break;
//流程提示
case ‘_tips‘:
if($(‘.invest_progress_tip‘).attr(‘rel‘)!=‘1‘){
show_p_tip({action:‘_init‘});
}
if(!$(‘#div_‘+object.name).length){
$(".invest_progress_tip .progress_tip_content").append(‘<div id="div_‘+object.name+‘"><span id="span_‘+object.name+‘">‘+object.msg+‘</span><i class="p-icon p-1"></i></div>‘);
}
$("#span_"+object.name).html(object.msg);
if(object.status==1) $("#div_"+object.name+" .p-icon").fadeIn();
if(object.status==0) $("#div_"+object.name+" .p-icon").addClass(‘p-2‘).fadeIn();
break;
//跳转支付
case ‘_jump‘:
var form = createForm(object.form);
$(".invest_progress_tip .progress_tip_content").append(‘<div class="invest_noauth_tip mt5">点击支付按钮前往<span class="text-primary">一麻袋</span>进行支付操作</div>‘);
$(".invest_progress_tip .progress_tip_content .invest_noauth_tip").append(form);
break;
//完成
case ‘_complete‘:
var msg = object.msg?object.msg:‘完成支付‘;
$(".invest_progress_tip .progress_tip_content").append(‘<div class="invest_success_result mt15 text-center"><a href="javascript:void(0);" class="invest_result_btn btn btn-primary btn-block">‘+msg+‘</a></div>‘);
break;
//结束
case ‘_end‘:
var msg = object.msg?object.msg:‘小羊保证完成任务!‘;
$(".invest_progress_tip .progress_tip_title span").text(msg);
$(".invest_progress_tip .progress_tip_title .la-timer>div").addClass(‘success‘);
break;
}
}

这种方式,是以action来做参考依据的,分为5种情况,分别是_init(初始化),_tips(流程提示),_jump(跳转支付),_complete(完成支付),_end(结束),然后再使用递归,这样的话就划分了5个模块来处理这样的功能,_init(初始化),可以在第一步做递归调用,每一步都可以使用_tips(流程提示),即可随时改变状态,提示信息,有可以判断是否初始化,而决定是否递归调用_init(初始化),有可以处理其他特殊情况,比如第一步需要初始化操作,最后一步成功需要显示”完成支付“按钮,都是作为_jump(跳转支付),_complete(完成支付)来处理。代码不冗余了,可扩展性强了!条例清晰多了!

总结:在写js功能处理函数时,正确的思想是根据此功能将其划分成多个模块部分,通用模块,初始化模块,结束模块,特殊模块,用好递归等编程思想,这样的思路可以有效的写出好的代码!come on!!!bin!

时间: 2024-10-20 07:00:26

怎么样才是设计功能函数的好思路(javascript)?的相关文章

Qt调用dll中的功能函数

DLL 优点 ------------------------------------- 1.扩展了应用程序的特性: 2.可以用许多种编程语言来编写: 3.简化了软件项目的管理: 4.有助于节省内存: 5.有助于资源共享: 6.有助于应用程序的本地化: 7.有助于解决平台差异: 8.可以用于一些特殊的目的.windows使得某些特性只能为DLL所用. 转载:http://www.cnblogs.com/hicjiajia/archive/2010/08/27/1810239.html Qt调用d

Rust 功能函数的关系、包和模块简介

Rust 功能函数的关系.包和模块简介 一.功能函数之间的关系 前面看到,一个文件中可以定义多个 function 功能函数,这些功能函数可以被相互使用.程序的入口是main(). 在一个文件中,各个功能函数的定义和使用不受功能函数定义的顺序约束.也就是说,不需要像 C 语言一样,在使用一个函数而还没有定义函数之前要有一个声明语句:而像 java 一样,只要声明的功能函数在一个文件内,可以忽略功能函数在文件中出现的顺序. 二.文件的包管理 当一个文件中的功能函数越来越多,阅读和修改都是个问题.因

【二代示波器教程】第11章 示波器设计—功能模块划分

第11章      示波器设计-功能模块划分 二代示波器的界面上做了五个按钮,分别用于不同功能的配置,本章节就为大家讲解这五个按钮实现的功能. 11.1   主界面上的五个按钮 11.2    Measure测量功能 11.3    ADC电压测量功能 11.4    DAC信号发生器 11.5    Math数字信号处理 11.6    Settings设置 11.7    总结 11.1  主界面上的五个按钮 为了方便各个功能的配置,主界面右侧做了五个按钮,用于实现五个不同功能的配置. 代码

re模块中常用功能函数

re模块中常用功能函数 正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式. re 模块使 Python 语言拥有全部的正则表达式功能. compile 函数根据一个模式字符串和可选的标志参数生成一个正则表达式对象.该对象拥有一系列方法用于正则表达式匹配和替换. re 模块也提供了与这些方法功能完全一致的函数,这些函数使用一个模式字符串做为它们的第一个参数. re.match函数

基于线性表的功能函数大全

顺序表 一:线性表的存储结构 顺序表的顺序存储是指一组地址连续的存储单元依次存储线性表中的各个元素,使得线性表中在逻辑结构中相邻的元素存储在连续的物理存储单元中.采用顺序存储结构存储的线性表通常简称顺序表,可将顺序表归纳为:关系线性化,结点顺序存. 用C语言定义线性表的顺序存储表示 #define MAXSIZE 100 Typedef struct { ElemType elem[MAXSIZE]; int last; } 二:线性表顺序存储结构上的基本运算 (1)查找操作 查找可采用顺序查找

jQuery基础之(三)jQuery功能函数前缀及与window.onload冲突

1.jQuery功能函数前缀 在javascript中,开发者通常会编写一些小函数来处理各种操作细节,例如在用户提交表单时,要将文本框最前端和最末端的空格内容清理掉.而javascript中没有类似trim()功能,在师院jQuery后,便可以使用trim()函数. trim()函数是jQuery对象的一个方法,使用以下例子 <script type="text/javascript"> var sString = " 1234567890"; sStr

04微信公众平台 - 实现【翻译】功能函数,返回一个文本字符串。

一.功能代码函数实现 private function _baiduDic($keyword) { $tranurlaip = "http://openapi.baidu.com/public/2.0/bmt/translate?client_id=9peNkh97N6B9GGj9zBke9tGQ&q={$keyword}&from=auto&to=auto"; //翻译URLapi地址 $transtr = file_get_contents($tranurl

05微信公众平台 - 实现【点歌】功能函数,返回一个文本字符串。

一.功能代码函数实现 /* * 功能5:根据歌名点歌功能,输入歌名即可,传入参数为输入对象$postObj */ private function _listenMusic($postObj) { $ret= "<xml> <ToUserName><![CDATA[%s]]></ToUserName> <FromUserName><![CDATA[%s]]></FromUserName> <CreateTi

03微信公众平台 - 实现【天气查询】功能函数,返回一个文本字符串。

一.功能代码函数实现 private function _weather($city) { include("weather_cityId.php"); $c_name=$weather_cityId[$city]; if(!empty($c_name)){ $json=file_get_contents("http://m.weather.com.cn/data/".$c_name.".html"); $data = json_decode($