前端多页面情况下函数的命名与函数方法的调用

在前端多页面场景中,随着页面数量增加,函数命名冲突问题日益突出。通过将函数放入数据结构并利用闭包进行管理,可以避免重名和混乱。建议每个面板的函数放在独立闭包内,事件函数以DOM ID命名,工具类提供公共接口以供跨页面调用。以layout、dialog、tab和panel的示例说明,创建euf对象以区分不同面板的函数。
摘要由CSDN通过智能技术生成

与上一篇有些类似之处,都是在处理前端页面不断增多,页面间不断的拼接与嵌套,页面与页面间的函数方法的命名和dom元素一样出现了命名头疼的问题,比如说在easyUI前端框架下就是如此,我的解决办法还是采用数据结构的方法,不同面板,不同页面间的函数均放在数据结构下进行维护和管理,采用闭包的方法防止众多的函数方法的重名,命名混乱,容易引起歧义等问题。


我建议,一个面板中的方法最好命名在一个闭包里,防止众多的函数方法的干扰,它的最大的特点是闭包外面的方法不能随意引用闭包内部的函数,这样假设在闭包A中有一个命名为aa的函数,那么在闭包B中同样可以使用aa为函数名,同样也不会引起函数冲突问题,同时我建议dom元素的事件函数直接采用id名称来命名,这样方便理解函数与dom节点之间的对应关系,降低命名难度的同时更加的方便与理解与使用。而闭包内的工具类直接独立出来,并提供给外部一个访问的接口,这样,方便于其它页面,其它函数对于工具类的调用。


我们仍以layout->dialog->tab->tab1->panel中的dom元素为例来说明,在layout中我们仍以eastUp面板区域为例在说明,此时我们创建的对象就不能使var eu=new Object()了,因为这是之前的dom节点初始化所采用的命名方式,此时我们为了区别,另起一个名为euf(eastUp Function)的对象,创建方式是var euf=new Object().


详细代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../js/jquery-easyui-1.5.1/themes/default/easyui.css">
    <link rel="stylesheet" href="../../js/jquery-easyui-1.5.1/theme
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值