[YUI source learning] YUI Get Utility dynamic loading mechanism

2010-09-01  来源:本站原创  分类:Web  人气:210 

[Note] YUI before the analysis is aimed at YUI 2.8 version.

On the dynamic loading

First is that on which a method of dynamic loading and dynamic loading have any effect.

Sometimes the development page, you need to load a lot of js files. Js file for each load consumes a lot of time, while dynamic loading mechanism to allow js file loaded when needed, to speed up page rendering speed. The nature of the script element is added to the Dom tree inside.

Google found a lot of dynamic loading of the article, in fact, mentioned four methods are in fact add a script element to the head inside. But are asynchronous load. The fourth method uses XHR to the request, you can sync, but must declare their synchronization. And this can only be in the homologous strategy.

About YUI Get Utility

Get Utility to see common use areas: translation from YUI / Get Utility official website.

1, cross-domain access to resources: because XMLHttpRequest is a strict homology strategy to obtain third-party data through XHR need a proxy server. If you are able to control or cross-domain resources fully trusted, you can not directly through the proxy server load script where data from different sources; the script file, may be typical json formatted data, the time will quickly look at the implementation of load . One thing is essential, if you load the script file with malicious code, there is no safety mechanism to ensure that users are not subject to the impact of malicious code, because the browser to full permissions to execute the code. So remember this: do not let the user access to those who can not completely trust the data source.

2, advanced loading methods:

In the rich client applications, dynamic load based on user needs js files and css files become very useful, Get utility provides functions to dynamically load resources. (Note: If you load the YUI which resources you can use YUIloader to load, YUILoader use the Get Utility to load YUI components and YUI components to solve dependency)

Now analyze the dynamic loading YUI on the first YUI Get Utility is implemented as closure, only exposed part of the methods and data. API key is used to see inside. Talk about the form of closure, in fact, control of flexible use of the domain.

YAHOO.util.Get = function() {

   //_next   It can only be used in yahoo.util.get   ,  It encapsulates the  .

var _next=function(){


//return  It is available   API :

return {



   . . . . . .



YUI is also used by createElement, and then append script node to node or node to load, but the difference is a pair of nodes onload event listener, and to achieve synchronization by monitoring the effect of making script node simultaneously loaded in accordance with the order End.

YUI2.8 which loaded on the onload event listener on the node has bug, do not blame YUI, is to leave the browser wars, the consequences. Talk about this a bit later.

Load theory:

YUI on the script and css load, a function which can load multiple resource url, are still synchronized. For loading purposes, YUI as a transaction to deal with, when the suspension occurs when the method calls the custom onFailure. YUI Get the order in accordance with the definition of a url of a load, the design process is the last resource url for onload listener, only later, when the loading finished loading the next url resources.

Another one is _next function is _track function. In the next function to call once, shift click on the url array, remove the first element, and call _track to listen. In _track function monitor in, url's onloaded event handling calls on _next is also called the next url.

Come to talk about YUI2.8 bug exists in the local.

First talk in the append node on the dynamic loading, the onload of the node to monitor. script node and css link node of the monitor is different and in each browser is different.

[YUI source learning] YUI Get Utility dynamic loading mechanism

The map source http://www.zachleat.com/web/2010/07/29/load-css-dynamically/

Above explained:

Javascript and css in the case of homology of these resources can be a way to get through the XHR data browser for the onreadystatechange Event;

In the case of different sources, and load the script node to monitor, firefox and ie event name ie for the onreadystatechange, firefox for the onload;

css node ie do a good listener, and the script is still the same, but firefox has no such monitoring.

With the difference between firefox and ie to explain this a bit shallow, and the YUI source browser is used for its core to the various different treatment,

if (ua.ie) {
            n.onreadystatechange = function() {
        } else if (ua.webkit) {

            if (type === "script") {
                   if (ua.webkit >= 420) {
                     n.addEventListener("load", function() {
               // Here use the poll method to confirm that the script resource loading up
                } else {
                    var q = queues[id];
                    if (q.varName) {
                        var freq=YAHOO.util.Get.POLL_FREQ;
                        q.maxattempts = YAHOO.util.Get.TIMEOUT/freq;
                        q.attempts = 0;
                        q._cache = q.varName[0].split(".");
                        q.timer = lang.later(freq, q, function(o) {
                            var a=this._cache, l=a.length, w=this.win, i;
                            for (i=0; i<l; i=i+1) {
                                w = w[a[i]];
                                if (!w) {
                                    // if we have exausted our attempts, give up
                                    if (this.attempts++ > this.maxattempts) {
                                        var msg = "Over retry limit, giving up";
                                        _fail(id, msg);
                                    } else {
                            f(id, url);
                    }, null, true);
                    } else {
                        lang.later(YAHOO.util.Get.POLL_FREQ, null, f, [id, url]);

        // FireFox and Opera support onload (but not DOM2 in FF) handlers for
        // script nodes.  Opera, but not FF, supports the onload event for link
        // nodes.
        } else {
            n.onload = function() {
                f(id, url);

The following source code as YUI Get inside _track function

// FireFox and Opera support onload (but not DOM2 in FF) handlers for

// script nodes.  Opera, but not FF, supports the onload event for link

// nodes.


        } else {

            n.onload = function() {

                f(id, url);



Figure source article is css node pseudo listening. Interested to see.

YUI 2.8, and not in firefox the css link node implementation monitoring, synchronization, so a load in just a css to load the resources in the API, YAHOO.util.Get.css the url parameters not only <string> like the script method of the url parameter <string|string[]>

These are only personal humble opinion, there is the wrong place please correct me.

  • [YUI source learning] YUI Get Utility dynamic loading mechanism 2010-09-01

    [Note] YUI before the analysis is aimed at YUI 2.8 version. On the dynamic loading First is that on which a method of dynamic loading and dynamic loading have any effect. Sometimes the development page, you need to load a lot of js files. Js file for

  • google Api javascript dynamic loading 2009-09-22

    google dynamic loading api can not only own the ajax loaded modules can also be loaded at the same time many of the three popular modules, such as jQuery, dojo, yui, etc.. This article has a way of dynamically loaded briefly. This dynamic loading is

  • YUI study notes: YUI Dom 2010-10-28

    YUI components used in one of the most dom component (YAHOO.util.Dom), and see if it can probably guess the name of the function of this component. Yes, it is packaged a bit some of the native DOM methods and simplify some common operations, and more

  • Dynamic loading JS script four kinds of methods 2009-02-27

    To achieve dynamic loading JS script has four kinds of methods: 1, direct document.write <script language="javascript"> document.write ( "<script src='test.js'> <\ / script>"); </ script> 2, dynamic script to ch

  • AJAX + XML-based XLoadTree dynamic loading of components of the document tree JS 2009-06-26

    Tree node has recently started to load and read a good article, look around them to share BeanSoft evaluation: This component tree is not perfect, but it is based on self-object-oriented, based on the AJAX + XML + DOM, the head is also relatively sma

  • Dynamic loading properties files with the application of SpringQuartz 2010-03-29

    Write an essay on the previous dynamic loading property file example, refer to the following this post: http://zhangzhenting.javaeye.com/blog/600269 Properties file for dynamic loading, once again gives a more simple example, removing the config.xml

  • JavaScript object dynamic loading technology 2010-04-28

    What is a JavaScript object dynamic loading JavaScript dynamic loading (JavaScript Object Dynamic Loading) - The reason is called dynamic, is for there to be another form of the usual static load. JavaScript typical static loading method is through <

  • Spring3.0 Source Learning --- IOC (1) 2010-05-11

    SVN recently downloaded a Spring3.0 source learning. First introduce the individual to the current understanding of IOC for the Spring in it. Welcome to discuss, Oh, do not Paizhuan. Spring into a realization of the IOC. Resources (Resource) Location

  • ComboBoxCheckTree dynamic loading data solutions 2010-06-07

    Today, the next ComboBoxCheckTree dynamic loading of data read its own source; found it after the tree will need to click so we use direct rendering as text boxes and drop-down box that will complain of the same load;, That solution directly 1, rewri

  • paoding dynamic loading dictionary 2011-09-01

    Dynamic loading on paoding dictionary, online most of the following code, but I downloaded the 2.0.4 source and found Paoding.java the file time and space, this method does not exist Paoding paoding = PaodingMaker.make(); paoding.stopAutoDetecting();

  • Dynamic loading javascript 2009-05-13

    / ** * Dynamic loading JS files * / var Faceye = ( version: 1.0, / ** * Easy access to httpRequest * / httpRequest: function () ( var xRequest = null; if (window.XMLHttpRequest) ( xRequest = new XMLHttpRequest (); ) Else if (window.ActiveXObject) ( x

  • Ajax dynamic loading tree menu 2009-11-06

    Recently, the company requires a dynamic loading of the tree menu, first open the page when loading the first level node, point to the first floor with Ajax after any node to the node under the dynamic loading of child nodes, found in the online did

  • Dynamic loading properties file 2010-03-29

    Dynamic loading properties file example: java application: package com.zzt.application; import java.io.File; import org.apache.commons.configuration.CombinedConfiguration; import org.apache.commons.configuration.ConfigurationException; import org.apa

  • java dynamic loading of classes 2010-04-14

    1. Class Dynamic Loading JDk loaded when the class is not loaded with the same time, but when it encountered a class loaded static statement block only executed once when the class loads Use-verbose: class parameters can see the JDK classes detail th

  • Flex good learning resources to support the open source learning together 2010-07-02

    Flex good learning resources to support the open source learning together Article Category: Flash Programming Keyword: flex Flex good learning resources to support the open source learning together 1. Do not know what control style settings? See it:

  • Dynamic loading using LayoutInflater layout and operation of controls 2010-11-03

    Transfer from ( http://www.blogjava.net/improviser/archive/2010/10/29/336476.html ) We know the layout of the file by the Android software interface to describe, but often are used in the Activity setContentView () to the layout of the display. But i

  • Summary of individual stages of knowledge (b) java in the static and dynamic class loading mechanism and compile 2010-11-16

    java class loading mechanism in the All classes loaded by class loader, load in memory which corresponds to a java.lang.Class instance that before the class loader look at java * (class) during the execution of this action: 1. Find JRE; 2. Find JVM.d

  • Dynamic loading javascript files 2010-12-23

    Dynamic loading javascript? A very popular topic, if you already know how to dynamically load external javascript, then you can skip this article to read the rest. If you do not know how to dynamically load an external javascript file, please be pati

  • java class loading mechanism of learning custom class loading mechanism 2010-05-15

    package com.easyway.commons.ispace.dev.oop.classloaders; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileInputStream; /** * Class Loading Mechanism : * Create a custom class loader, just need to expand java.lang.ClassLoa

  • Hibernate lazy loading mechanism 2009-09-18

    Lazy loading: Lazy loading mechanism is in order to avoid unnecessary performance overhead and put forward the so-called lazy loading is that when data in the real needs when we come to the real implementation of the data load operation. Provided in