`
KeepCrazy
  • 浏览: 60946 次
社区版块
存档分类
最新评论

利用eval()函数给树节点统一添加单击事件实现新建选项卡功能

阅读更多
[size=medium]

eval(str)是JavaScript自带的一个函数,它可以执行传入的JavaScript语句字符串,并返回语句执行得到的结果. 比如: var a= eval('2+3'); 它的执行效果和a=2+3相同.
eval("alert('this is a test')"); 和alert('this is a test')效果相同. 大家也许会觉得eval函数纯粹是多此一举, 就连W3C school也有这个意思:
"虽然 eval() 的功能非常强大,但在实际使用中用到它的情况并不多". 但实际上eval这个函数有时还是有很大用处的, 巧妙地使用eval()会给你一个很大的惊喜.
    ExtJs中, TreePanel和TabPanel是一对很好的搭档:前者作为菜单, 后者作为工作区域. 现在的问题是如何给节点添加单击事件以达到这样的效果: 单击一个树节点, 打开一个新的选项卡.

有两种解决方案:
    第一种是给每个节点单独添加单击事件. 功能少的时候可以采用这个方法.功能多时,若采用这个方法就显得很笨拙了.
    详细介绍第二种——使用eval函数.
   
    整个工程包含一个JSP文件和三个js文件(extjs自带的不算).
    index.jsp: 唯一的作用就是作为js和css的载体.
    main.js: 生成主界面;
    login.js:生成登录界面 ;
    register.js:生成注册界面.
   
    达到的效果如tree.jpg所示(偷个懒,没写提交按钮):



相关代码在附件js.zip中. 下面详细解析main.js中给treepanel的代码(主要是看注释啦).
 var left=new Ext.tree.TreePanel({
        region:"west",
        width:150,
        title:"功能导航",
        listeners:{
            "click":function(node){
                var text=node.attributes.text;
                var id=node.attributes.id;
                
                var p=center.getItem(id)//
                if(center.getItem(id)!=null){
                    center.setActiveTab(p);
                    return;
                }
                
                var fun=id+".getPanel()";//拼出生成目标面板的方法名                
                p=eval(fun);//执行以fun作为方法名的方法,并将返回的面板对象存入变量p中
                center.add(p);//center就是中央的tabPanel
                center.setActiveTab(p);
            }
        }
    });    
  //  ....
    var nodeRegister =new Ext.tree.TreeNode({
        text:"注册",
        id:'register'
    });
  //  ....


.比如单击'注册'时, fun的值为为 "register.getPanel()".而registered.getPanel() 方法是定义在register.js中的一个生成注册面板的方法:

Ext.namespace("register");

    register.getPanel=function(){
            var p=new Ext.FormPanel({
                title:"注册",
                id:'register',
                closable:true,
                width:500,
                height:500,
                frame:true,
                defaults:{
                    labelWidth:65
                },
                items:[{
                    xtype:"textfield",
                    fieldLabel:"用户名"
                },{
                    xtype:"textfield",
                    inputType:"password",
                    fieldLabel:"密码"
                },{
                    xtype:"textfield",
                    inputType:"password",
                    fieldLabel:"确认密码"
                }]
            });
            return p;//返回注册面板
        }


这种利用eval+字符串拼接解决方案的优点是够简单,  缺点是生成面板的方法命名和节点的属性值必须要统一,(在示例中为了少写几个属性,  我直接用了节点的id属性作为方法名的一部分.你也可以定义其它的属性去拼方法名,比如url), 并且所有的js文件都在index中引用, 无论有没有需要都会全部加载.
还有另外一种利用eval+继承 的解决方案不需要在index.jsp引用全部的js文件, 可以实现按需加载,但在原理上有点复杂, 此处也不详细讲解了,代码贴在附件js2.zip中.

[/size]
  • 大小: 10.1 KB
  • js.zip (1.9 KB)
  • 下载次数: 11
2
0
分享到:
评论

相关推荐

    java实现eval函数

    然而,如果你提供的压缩包"java实现eval函数"包含的是一个Java项目,那么它很可能是实现了类似功能的自定义解决方案,可能是一个解析器或者编译器,用于处理特定的表达式或脚本语法。这个项目可能包括以下几个部分:...

    javascript 自定义eval函数实现

    JavaScript中的`eval()`函数是一个非常强大但又颇具争议的功能,它允许执行一个字符串作为JavaScript代码。在本讨论中,我们将深入探讨如何自定义`eval()`函数以提高代码的安全性和效率,同时也会涉及到JavaScript的...

    eval函数的一些用法

    由于JavaScript引擎的具体实现细节通常涉及大量底层代码,这里仅简单概述:`eval`的代码会被编译成中间表示(如字节码或抽象语法树),然后由虚拟机执行。值得注意的是,`eval`在不同作用域下有不同的行为:如果在...

    用C语言实现eval函数.zip

    标题中的“用C语言实现eval函数”提示我们,这个压缩包可能包含了一组教程或代码示例,旨在教授如何在C语言中实现一个类似于高级语言中的`eval`函数。`eval`函数通常用于执行字符串形式的代码,这在C语言中并不直接...

    Javascript中eval函数的用法

    JavaScript 中 eval 函数的用法 JavaScript 中的 eval 函数是一个非常强大且灵活的函数,可以将一个字符串当作一个 JavaScript 表达式来执行。正如我们在上面的描述中所看到的,eval 函数可以将一个字符串解释成 ...

    java实现js中eval功能

    在Java中,没有直接对应的内置函数可以实现这样的功能,但我们可以构建一个类似的机制来模拟`eval()`的行为。 首先,我们需要理解`eval()`的核心功能:将字符串转换为可执行的代码。在Java中,这可以通过编译和执行...

    Python实现四则运算模仿eval函数计算处理

    使用Python实现的四则运算,注释清晰,功能备注完整,主要练习函数递归和正则表达式,目前只能计算整数的四则运算,如需完善,可把int改为float类型,然后修改正则表达式即可,代码逻辑完全不用动。供初学Python的...

    深入认识javascript中得eval函数

    尽管`eval`函数提供了强大的功能,但鉴于其可能带来的安全性和性能问题,建议谨慎使用。在大多数情况下,有其他更好的替代方案可以实现相同的目标,同时避免潜在的风险。开发者应该了解`eval`的工作原理及其局限性,...

    javascript执行eval函数时利用正则表达式去掉回车符换行符和注释

    最后,关于文档`javascript执行eval函数时利用正则表达式去掉回车符换行符和注释.doc`,这可能是详细阐述这一过程的文档,包含了具体实现和可能遇到的问题的解决方案。阅读此文档将有助于深入理解如何实际应用这些...

    Python的eval函数写的eval-calc(计算器)

    Python的eval函数写的eval_calc(计算器) 进行了多重符号判断,可以在很大程度上帮助孩子们学习。

    Perl die、warn、eval函数使用总汇

    本文介绍了Perl中的三个关键函数:`die`、`warn` 和 `eval`,它们对于实现有效的错误处理机制至关重要。通过这些函数,我们可以更好地控制程序的行为,并在出现问题时提供有用的反馈。无论是简单的警告提示还是复杂...

    javascript中eval函数用法分析.docx

    ### JavaScript中eval函数用法分析 #### 一、eval函数简介 `eval()`函数是JavaScript中的内置函数之一,用于解析并执行包含JavaScript代码的字符串。它只有一个参数,该参数可以是字符串或非字符串类型。 - **非...

    在Javascript中Eval函数的使用.doc

    在JavaScript中,`eval...在大多数情况下,通过改进设计和利用JavaScript的内置功能,可以避免使用`eval()`。在需要动态执行代码时,考虑使用更安全的`new Function()`或现代JavaScript特性,如模板字符串和函数构造。

    在Javascript中Eval函数的使用?

    JavaScript中的`eval()`函数是一个非常特殊且功能强大的工具,它能够执行一个字符串作为JavaScript代码。这个函数在很多情况下被用于动态地编译和运行代码,但同时也因为其潜在的安全风险和性能问题而备受争议。在...

    在java中利用动态编译实现eval

    在Java中,实现类似`eval`功能的一种方法是利用Java的动态编译API,例如`javax.tools.JavaCompiler`接口和相关的工具类。以下是一个简单的示例,演示如何将字符串转换为Java方法并执行: ```java import javax....

    winform Eval的功能

    在.NET环境,尤其是C#和VB.NET中,虽然没有内置的Eval函数,但可以通过一些方式实现类似的功能。下面我们将深入探讨如何在WinForms应用中实现类似Eval的功能,并讨论其应用场景和潜在的安全风险。 1. **动态代码...

    javascript中eval函数用法分析

    本文实例分析了javascript中eval函数用法。分享给大家供大家参考。具体分析如下: eval()只有一个参数,如果传入的参数不是字符串,则直接返回这个参数。否则会将字符串当成js代码进行编译,如果编译失败则...

Global site tag (gtag.js) - Google Analytics