`
decentway
  • 浏览: 160043 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

YUI 3 周边

阅读更多

1.跨域请求:cross-domain

初步体验“AJAX不能跨域访问”(原创)[有源码,有示例]


ajax跨域访问(cross-domain)


百度搜索一下



 2.好像YUI中,数组用"[]"表示,对象用"{}"表示。例如.

//数组对象
[
    {make:"Chevrolet",model:"Bel Air",year:1957},
    {make:"Dodge",model:"Dart",year:1964},
    {make:"Ford",model:"Mustang",year:1968}
];
 
//二维数组   即:A array of arrays 
[
    ["Chevrolet", "Bel Air", 1957],
    ["Dodge", "Dart", 1964],
    ["Ford", "Mustang", 1968]
];

 3.CDN

CDN的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。

 4.Site Explorer

也就是站点管理器。

yahoo的站点管理器地址:http://sitemap.cn.yahoo.com/?require_login=1

 5.YUI dump

var obj = {
    num: 1,
    str: "string",
    bool: true,
    date: new Date(),
    fn1:{
        obj_num: 1,
        obj_str: "obj_string",
        tt:{
            a:'88'
        }
    },
    fn2:function() {
    alert('s');
    }
}
alert(Y.dump(obj));//默认深度是3

 

查看YUI api 的dump:

返回对象或者数组的一个简单字符串表示。其他类型的对象返回时将不会加工处理。数组被期待索引。为关联数组使用对象符号(object notation 例如JSON,JavaScript object notaion 这里该如何理解? )

 

6.冒泡传递

意思说,如果在一个div下面还有一个子div,那么子div事件触发,主div的事件也将触发。

看个例子就知道了:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 
<head> 
<title> 阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)</title> 
<meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" /> 
<script type="text/javascript"> 
function doSomething (obj,evt) { 
alert(obj.id); 
var e=(evt)?evt:window.event; 
if (window.event) { 
e.cancelBubble=true; 
} else { 
//e.preventDefault(); 
e.stopPropagation(); 
} 
} 
</script> 
</head> 
<body> 
<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow"> 
<p>This is parent1 div.</p> 
<div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange"> 
<p>This is child1.</p> 
</div> 
<p>This is parent1 div.</p> 
</div> 
<br /> 
<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;"> 
<p>This is parent2 div.</p> 
<div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;"> 
<p>This is child2. Will bubble.</p> 
</div> 
<p>This is parent2 div.</p> 
</div> 
</body> 
</html> 

 7.event facade

<div id="foo">
鼠标经过我
</div>

<script type="text/javascript">

//assuming we have an element on the page with an ID
//attribute "foo":
YUI().use('node-base','console', function(Y) {
	(new Y.Console()).render();

    // the function we'll use to handle the event:
    var handleClick = function(e) {
        // pass the 注意!!“event facade”  好像是代表e  to the logger or console for inspection:
        Y.log(e);
    };
 
    Y.on("click", handleClick, "#foo");
});

</script>

8.event target 事件目标

target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。

<html>
<head>

<script type="text/javascript">
function getEventTrigger(event)
  { 
  x=event.target; 
  alert("The id of the triggered element: " + x.id);
  }
</script>
</head>

<body >

<p id="p1" onmousedown="getEventTrigger(event)">
Click on this paragraph. An alert box will show which element triggered the event.</p>

</body>
</html>

 9.渐进增强(Progressive Enhancement)

http://ued.taobao.com/blog/2008/10/09/understanding-progressiveen-hancement-chs-translation/

 

10.未样式化的内容的闪动

 

如果因为某种原因,你只用@important来导入你的样式表,你可能注意到在应用CSS之前,IE将显现一两秒的未样式化的(X)HTML。可以通过在文件的<head>中添加一个<link>元素或<script>元素来避免出现这种情况。更进一步信息,请查看www.bluerobot.com/web/css/fouc.asp的flash of unstyled content

  • 大小: 18.2 KB
分享到:
评论

相关推荐

    yui3-master.zip

    《深入理解YUI3:基于yui3-master.zip的探讨》 YUI(Yahoo! User Interface Library)是由雅虎公司开发的一套开源JavaScript库,它为Web开发者提供了丰富的功能和工具,以创建交互性强、性能优秀的网页应用。YUI3是...

    YUI3 dialog组件

    **YUI3 Dialog组件详解** YUI3是Yahoo!推出的一款强大的JavaScript库,它提供了丰富的UI组件和工具,用于构建高性能、跨平台的Web应用程序。Dialog组件是YUI3中的一个重要部分,它允许开发者创建可交互的弹出窗口,...

    YUI3 中tree的两种实现

    这篇博文“YUI3 中tree的两种实现”探讨了如何在YUI3中创建和管理树形结构。 1. **YUI3 TreeView组件** YUI3 TreeView组件是YUI3核心库的一部分,它允许开发者创建交互式的树结构。这个组件支持节点的添加、删除、...

    从YUI2到YUI3看前端的演变

    从YUI2到YUI3看前端的演变

    yui3-3.17.2最新版

    在实际使用YUI 3.17.2时,开发者可以通过`yui3-3.17.2`这个压缩包文件获取所有必要的资源。这个压缩包中包含了库的源码、示例、文档和其他辅助工具。开发者可以按照项目需求,选择合适的模块和组件进行集成。 在...

    从YUI2到YUI3看前端的演变 pdf

    YUI3 引入了粒度更细的模块管理方式,通过异步 HTTP 请求加载模块、然后执行回调来加载和使用模块。现场有很多人提出疑问,大家无非关心的是“效率”二字。个人以为在现阶段,这种方式有一点激进,否能为广大用户所...

    YUI3 完整包

    Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。

    YUI3.6文档及示例

    1. **模块系统**:YUI3引入了模块化设计,允许开发者按需加载组件,降低页面的初始化时间。模块可以通过`YUI.use()`方法来加载,实现了代码的异步加载和依赖管理。 2. **事件系统**:YUI的事件处理机制强大且灵活,...

    YAHOO YUI3简单入门

    **YUI3简介** YUI(Yahoo! User Interface Library)是雅虎公司开发的一个开源JavaScript库,主要用于构建富互联网应用程序(RIA)。YUI3是YUI的第三个主要版本,它在设计时注重模块化、可扩展性和性能优化,提供了...

    YUI3.7.3 最新版本 带API

    1. **模块系统**:YUI3引入了CommonJS风格的模块系统,允许开发者通过`YUI.use()`方法加载所需模块,实现按需加载,减少页面初始化时的加载量。 2. **事件处理**:YUI3提供了强大的事件系统,支持DOM事件、自定义...

    yui 资源包

    3. **事件处理**:YUI的事件系统强大,支持事件绑定、解绑、事件冒泡等,使得用户交互编程简单易行。 4. **动画效果**:通过Transition和Anim模块,可以轻松实现平滑的CSS3动画和JavaScript动画效果。 5. **数据绑定...

    yahoo3.0 YUI Examples

    1. **YUI 3.0架构**:YUI 3采用了模块化设计,允许开发者按需加载组件,降低了页面加载时间。每个模块都有独立的命名空间,避免了全局变量污染。 2. **核心组件**:YUI 3的核心组件包括事件处理、DOM操作、动画效果...

    YUI3 Cookbook

    ### YUI3 Cookbook知识点概述 #### 一、YUI3简介 YUI3(Yahoo User Interface Library Version 3)是雅虎开发的一款免费开源的JavaScript库,它为开发者提供了丰富的前端开发工具,包括动画效果、事件处理、DOM操作...

    YUi文档(中文的哦)

    ### YUI3中文文档知识点详解 #### YUI3概述及YUIGlobal对象介绍 **YUI3** 是一个开源的JavaScript库,旨在提供一系列工具和API,帮助开发者构建高性能、高质量的Web应用。YUI3的核心优势在于其模块化的设计、强大...

    yui.rar 例子

    《深入理解YUI:基于“yui.rar 例子”的解析》 YUI,全称Yahoo! User Interface Library,是雅虎公司推出的一款开源JavaScript库,旨在帮助开发者构建高性能、易于维护的网页应用。本篇文章将结合“yui.rar 例子”...

    yuicompressor-yui compressor

    yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...

    YUI 入门教程YUI 入门教程YUI 入门教程

    YUI,全称为Yahoo! User Interface Library,是一个开源的JavaScript库,主要用于构建富互联网应用程序(RIA)。本教程将深入介绍YUI的基础知识和关键特性,帮助开发者快速入门。 首先,YUI提供了一系列强大的DOM...

    【YUI组件】基于YUI的表单验证器

    3. **事件监听**:YUI表单验证器可能会通过监听表单元素的`onsubmit`、`onchange`等事件来进行实时验证。 4. **错误提示**:验证失败时,如何优雅地向用户展示错误信息,是用户体验的重要组成部分。 5. **自定义验证...

    yui3.10.3最新版

    YUI 3是YUI库的第三个主要版本,与之前的版本相比,它进行了彻底的重构,更加模块化,易于定制和扩展。它遵循CommonJS规范,允许开发者按需加载所需的功能,从而减少了页面加载时间。YUI 3的核心组件包括事件处理、...

Global site tag (gtag.js) - Google Analytics