封装内容和功能 – YUI TabView使用小记

本文主要内容取自 Caridy Patino 在2008年发布的文章,原文中使用的是YUI2,笔者对例子做了一些更新,均使用了YUI3.1.1,文章中讨论的这个问题,在Ajax满天飞的现在具有典型意义,所以拿出来重新重新炒了一下。

通常的应用场景中,为了节省和有效利用页面空间,会使用Tab。如果我们有一个Tab,每个Tab展示后提供不同的功能,功能较少时,我会选择将处理用户事件的JS代码写在页面中。例如,在使用YUI的情况下:

构建页面DOM

构建符合要求的页面DOM(当然我们也可以使用YUI来动态的创建DOM,但这样就丧失了搜索引擎友好的特性)。

<div id="demo">     <ul>         <li><a href="#foo">foo</a></li>         <li><a href="#bar">bar</a></li>         <li><a href="#baz">baz</a></li>     </ul>     <div>         <div id="foo">             foo content             <p><a href="javascript:void(0);" id="fooLink">Click Me</a></p>         </div>         <div id="bar">             bar content             <p><a href="javascript:void(0);" id="barLink">Click Me</a></p>         </div>         <div id="baz">             baz content             <p><a href="javascript:void(0);" id="bazLink">Click Me</a></p>         </div>     </div> </div>

Javascript代码

//Create YUI Instance YUI({base:'../lib/yui/build/',combine:true}).use('tabview', function(Y){     var tabview = new Y.TabView({         srcNode:"#demo"     });     tabview.render();     //public message function     function message(e){         var node = e.currentTarget;         alert(node.get("id") + " Clicked ");     }     // attach event handler     Y.one("#fooLink").on("click", message);     Y.one("#barLink").on("click", message);     Y.one("#bazLink").on("click", message); });

通过这种方式,我们创建了一个TabView,并且为Tabview中的每个连接赋予了一个处理事件(当然,例子中用了一个来代替)。在Tab内容中元素和事件较少时没什么问题,但是当内容增多,并且都是通过Ajax动态加载的时候,问题就出现了。

The Problem But this approach can introduce certain dependencies and complexity within our code, because the actions for a certain tab’s content will be defined at the page level, which means that if you want change the content of tab, you probably need to change something at the application level as well — the functionality of the tab’s content is not encapsulated with that content. 由于这种方法将tab内容变化的响应事件定义在了页面级别,因此增加了程序的依赖和复杂性。如果想要更改tab的内容的话,就不得不修改程序的很多东西——也就是说tab的内容和他的功能性没有能很好的封装到一起。

使用Ajax来动态加载内容可以通过YUI的插件机制来实现, 这个时候,如果想在返回内容后触发一些操作,或者为返回内容中的一些元素绑定一些事件。直接再返回的结果中嵌入<script>代码是不行的,因为浏览器默认解析执行这些内容,这也是为了安全性的考虑(想想跨站攻击)。

经过笔者的实验,发现YUI3.1.1中这个问题已经不存在了,在返回内容中包含的脚本也能够正常的执行,这是一个非常棒的特性,这意味着我们可以将内容和逻辑处理封装在一起,从而让我们的代码结构更加清晰。下面是试验过的代码,大部分是YUI Tabview上的源码。

<script type="text/javascript">     //Create YUI Instance     YUI({base:'../lib/yui/build/',combine:true}).use('yui', 'tabview', 'gallery-widget-io', function(Y){         var feeds = {                 Chrome: './server.php?query=chrome',                 Firefox: './server.php?query=firefox',                 Safari: './server.php?query=safari',                 Explorer: './server.php?query=explorer'             },         TabIO = function(config) {             TabIO.superclass.constructor.apply(this, arguments);         };         Y.extend(TabIO, Y.Plugin.WidgetIO, {             initializer: function() {                 var tab = this.get('host');                 tab.on('selectedChange', this.afterSelectedChange);                 tab.on('contentUpdate', this.contentUpdate);                 tab.get('panelNode').on('contentUpdate', this.contentUpdate);             },             contentUpdate:function(e){                 alert("test");             },             afterSelectedChange: function(e) { // this === tab                 if (e.newVal) { // tab has been selected                     this.io.refresh();                 }             },             setContent: function(content) {                 var tab = this.get('host');                 tab.set('content', content);             },             _toggleLoadingClass: function(add) {                 this.get('host').get('panelNode')                     .toggleClass(this.get('host').getClassName('loading'), add);             }         }, {             NAME: 'tabIO',             NS: 'io'         });         var tabview = new Y.TabView({             srcNode:"#demo"         });         Y.each(feeds, function(src, label) {             tabview.add({                 label: label,                 plugins: [{                     fn: TabIO,                     cfg: {                         uri: src                     }                 }]             });         });         tabview.render();         //public message function         function message(e){             var node = e.currentTarget;             alert(node.get("id") + " Clicked ");         }         // attach event handler         Y.one("#fooLink").on("click", message);         Y.one("#barLink").on("click", message);         Y.one("#bazLink").on("click", message);     }); </script>

更好的是,如果返回结果中包含了对外部脚本的引用,引用的脚本同样也会执行,下面是服务端的代码。

<?php $html = ''; if( isset($_GET['query']) ){     switch($_GET['query']){         case "chrome":             $html .= "<a href='http://www.baidu.com'>Chrome</a><br />";             $html .= "<a href='http://www.baidu.com'>Chrome</a><br />";             $html .= "<a href='http://www.baidu.com'>Chrome</a><br />";             $html .= time();             break;            case "firefox":             $html .= "<a href='http://www.baidu.com'>Firefox</a><br />";             $html .= "<a href='http://www.baidu.com'>Firefox</a><br />";             $html .= "<a href='http://www.baidu.com'>Firefox</a><br />";             $html .= time();             break;            case "safari":             $html .= "<a href='http://www.baidu.com'>Safari</a><br />";             $html .= "<a href='http://www.baidu.com'>Safari</a><br />";             $html .= "<a href='http://www.baidu.com'>Safari</a><br />";             $html .= time();             break;            case "explorer":             $html .= "<a href='http://www.baidu.com'>Explorer</a><br />";             $html .= "<a href='http://www.baidu.com'>Explorer</a><br />";             $html .= "<a href='http://www.baidu.com'>Explorer</a><br />";             $html .= time();             break;        }     $html .= "<p><a href='javascript:void(0);' id='delegateId'>Delegate Event</a></p>";     $html .= "<script type='text/javascript'>alert('test');</script>";     $html .= "<script type='text/javascript' src='../server/external.js'></script>";     echo $html; }

目前Tab中处理返回内容的情况比两年的Caridy遇到的时候,处理要简单的很多,但是还有很多情况我们不能使用Tab的,YUI 3.1中,单独的使用 node.set(‘content’)并不会将内容中的脚本进行解析,这时,有两个可以使用的非常有用的工具,分别是”Dispatcher”和node.delegate。

前者是 Bubbling Library 中的一员,而后者是YUI提供的一个非常有用的工具。

今天先写到这里,后面会继续探讨再不是Tab的情况下,如果解析执行返回内容中的脚本。

参考资料:

1、Useing the TabView Control with My Dispatcher Plugin

2、YUI Tabview

3、Progressive Enhancemeng

4、YUI Plugin

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏贺贺的前端工程师之路

React中的Redux

整个应用的state被存储在一棵object tree中,并且这个object tree只存在于唯一一个store中。

13020
来自专栏九彩拼盘的叨叨叨

学习纲要:异步流程处理

修改上面的代码,用 Promise,async/await,事件发布订阅 这几种方式实现下面的需求

10420
来自专栏技术墨客

React 渲染性能优化

在React内部已经使用了许多巧妙的技术来最小化由于Dom变更导致UI渲染所耗费的时间。对于很多应用来说,使用React后无需太多工作就会让客户端执行性能有质的...

10630
来自专栏angularejs学习篇

angularjs学习第四天笔记(第一篇:简单的表单验证)

您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指...

12010
来自专栏玩转JavaEE

MongoDB副本集其他细节

副本集环境的搭建以及一些基本的操作我们都了解了,本文我们来看看这个数据复制到底是怎么实现的。 ---- 数据同步方式 MongoDB中的复制功能主要是使用操作日...

37350
来自专栏阮一峰的网络日志

Bookmarklet编写指南

前一段日子,我写了两个Bookmarklet----"短网址生成"和"短网址还原"。 它们用起来很方便,除了我本人之外,其他朋友也在用。第一次发布Bookmar...

49790
来自专栏技术墨客

React学习(7)—— 高阶应用:性能优化 原

在React内部已经使用了许多巧妙的技术来最小化由于Dom变更导致UI渲染所耗费的时间。对于很多应用来说,使用React后无需太多工作就会让客户端执行性能有质的...

14720
来自专栏柠檬先生

zepto 基础知识(6)

101.$.ajax   $.ajax(options) 类型:XMLttpRequest   执行Ajax请求。他可能是本地资源,或者通过支持...

309100
来自专栏angularejs学习篇

angularjs学习第四天笔记(第一篇:简单的表单验证)

您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指...

12920
来自专栏mySoul

作为window对象属性的元素 多窗口和窗体

如果html文档中用id属性为元素命名。并且如果 window对象没有此名字的属性,则window对象会赋予一个属性,其名字为id属性的值,其值指向该元素

17050

扫码关注云+社区

领取腾讯云代金券