YUI 三周边

2012-10-08

YUI 3 周边1.跨域请求：cross-domain初步体验“AJAX不能跨域访问”(原创)［有源码，有示例］//数组对象[{make:C

YUI 3 周边
1.跨域请求：cross-domain

初步体验“AJAX不能跨域访问”(原创)［有源码，有示例］

//数组对象[    {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 三周边

查看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

热点排行

Web前端

YUI 三 周边

YUI 三周边