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

本文链接：https://blog.csdn.net/ZZY1078689276/article/details/70162965

在前端多页面场景中，随着页面数量增加，函数命名冲突问题日益突出。通过将函数放入数据结构并利用闭包进行管理，可以避免重名和混乱。建议每个面板的函数放在独立闭包内，事件函数以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