天天看點

YUI3:GET

Get 工具提供了一個,在頁面加載完之後,附加腳本和css資源(包括跨域資源)到DOM上的機制。

Get工具兩種常見的用例:

1.跨站資料檢索:因為XMLHttplRequest(YUI IO Utility也是使用XMLHttpRequest)依靠一個嚴格的同源政策,是以,要通過XHR檢索第三方資料需要一個伺服器代理。(具體搜尋一下XMLHttpRequest工作原理)。如果是能控制或者完全信任的跨域資源,可以不通過服務端代理而直接加載 script 資料從不同源的地方;而 script 檔案,可能是典型 json 格式化的資料,在 load 的時候會立馬執行。有一點至關重要,如果你加載的 script file 有惡毒的代碼,沒有安全的機制可以保證使用者不受到惡毒代碼的影響,因為浏覽器會以完全的權限來執行這些代碼。是以記住這一點:不要讓使用者接觸到那些不能徹底信任的資料源。

2.逐漸加載方法:在富用戶端應用中,基于使用者動态加載需要的 js 檔案和 css 檔案變得非常有用, Get utility 提供了動态加載資源的功能。(注意:如果是加載 YUI 裡面資源,可以使用 YUI loader 來加載, YUILoader 使用 Get Utility 來加載 YUI 元件,并且對解決 YUI 元件依賴問題) 。

 開始

配置一個Get Utility 事務(Configuring a Get Utility Transaction。請問如何翻譯?)

使用提供給你的回調函數的參數.

Getting Started

Configuring a Get Utility Transaction

Making Use of Arguments Supplied to Your Callback

Using the Get Utility to Insert Script Nodes

Using the Get Utilty to Insert CSS Files

Using JSONP Web Services

How is the Get Utility Different From IO?

YUI on Mobile Devices

開始

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>;

 你可以取得一個腳本(Y.Get.script())and/or CSS(Y.Get.css())資源到頁面。script和css方法都有一下參數:

1.URL(s):指定你需要加載到頁面的URL(s), URL(s)可能是字元串或者字元串數組。

2.options:一個可選的配置對象,它包含了transaction(互動?)的資訊;更多内容下面會講到。

一個簡單的檔案請求可能如下:

YUI().YUI().use(function(Y) { var url = http://search.yahooapis.com/SiteExplorerService/V1/inlinkData?" + "appid=3wEDxLHV34HvAU2lMnI51S4Qra5m.baugqoSv4gcRllqqVZm3UrMDZWToMivf5BJ3Mom" + "&results=20&output=json&omit_inlinks=domain" + "&callback=YAHOO.example.SiteExplorer.callback" + "&query=http://developer.yahoo.com/yui/", obj = Y.Get.script(url, { onSuccess: function() { alert("file loaded"); }; }); // 'obj'将是一個隻有一個成員的對象,tID, //它是transaction中的唯一身份辨別符, //它具有以下格式:"q0","q1","q2"..."qn" will be an object with a });

配置Get Utility Transaction

通過第二個參數配置script和css方法,這個可選的參數包含一個對象,這個對象包含以下字段:

配置選項 目的作用
onSuccess (function) Callback method invoked by Get Utility when the requested file(s) have loaded successfully.
onFailure (function) Callback method invoked by Get Utility when an error is detected or 

abort

 is called.
onProgress (function) Callback method invoked by Get Utility after each node is inserted.
onTimeout (function) Callback method invoked by Get Utility if a timeout is detected.
onEnd (function) Callback method invoked by Get Utility when a transaction completes no matter how the transaction ended.
attributes (object) A hash of attributes to apply to the dynamically created nodes. You might use this to add media="print" to a css file, for example.
win (window) The 

window

 into which the loaded resource(s) will be inserted. Default: 

Y.config.win

.
context (object) The execution context in which all callbacks will run. Default: the current 

YUI

 instance.
data (any) Data to pass as an argument to 

onSuccess

 or 

onFailure

 callbacks. Default: 

null

.
autopurge (boolean) If set to true, script nodes will automatically be removed every 20 transactions (this number is globally configurable via the

Y.Get.PURGE_THRESH

 property); script nodes can be safely removed in most cases, as their contents (having executed) remain available. CSS nodes should not have this set to true as it will remove the CSS rules. Default: 

true

 for script nodes, 

false

 for CSS nodes.
timeout (int) Number of milliseconds to wait for a script to finish loading before timing out

使用提供給回調函數的參數

正如上面部分,你的回調函數(無論是onSuccess還是onFailure),能夠使用提供給配置對象的data 成員(将如你已經在configuration中提供了一個這樣的data成員—如上表格)。當然,并不是隻有data這一成員可以使用,下面的成員也可以使用:

(說簡單點就是,在onSuccess或者onFailure函數中,允許使用下面的參數:)

FIELD CONTENTS
tId (string) The unique identifier for this transaction; this string is available as the 

tId

member of the object returned to you upon calling the 

script

 or 

css

 method.
data (any) The 

data

 field you passed in your configuration object when the 

script

 or 

css

method was called. Default: 

null

.
nodes (array) An array containing references to node(s) created in processing the transaction. These will be script nodes for JavaScript and link nodes for CSS.
win (window) The window object in which the nodes were created.
purge() (function) Calling the returned 

purge()

 method will immediately remove the created nodes. This is safe and prudent for JavaScript nodes, which do not need to persist. If CSS nodes are purged, the rules they contain are no longer available and the page will repaint accordingly.

 使用Get Utility插入腳本節點 var successHandler = function(o) { //o,包含了上表中所有描述的域。 o.purge(); //在執行之後立即移除script腳本節點。 Y.log(o.data); //傳遞給配置對象的data成員 } var objTransaction = Y.Get.script("http://json.org/json.js", { onSuccess: successHandler, data: { field1: value1, field2: value2 } })

當使用Y.Get.script()方法增加一個或者多個腳本檔案到頁面上時,Get Utility 按照以下步驟執行:

1.将一個腳本節點加載到請求腳本檔案的目标視窗

2.将新腳本的src屬性設定為指定的URL

3.如果transaction成功,腳本被加載執行。

4.腳本節點的load時間被激發

5.Get Utility檢查是否有更多的URL,如果有,将傳回第一步。

6.如果這個最後一個,Get Utility将喚醒onSuccess回調函數(如果指定了一個回調函數)

如下:

var handlerData = { //傳遞給success or failure句柄的資料。 //就像上面的。 }; var successHandler = function(oData) { //code to execute when all requested scripts have been //loaded; this code can make use of the contents of those //scripts, whether it's functional code or JSON data. }; var aURLs = [ "/url1.js", "/url2.js", "/url3.js" //等等。。。 ]; Y.Get.script(aURLs, { onSuccess: successHandler, data: handlerData });

 使用Get Utility 來插入CSS檔案

當你使用使用Y.Get.css()方法來增加一個或者多個CSS檔案到頁面上時,Get Utility 遵循以上腳本步驟。在Firefox和Safari上不相容。

使用JSONP Web Services

Get Utility 和IO的差別