2015-11-10 4 views
2

В связи с какой-либо причиной, мы собираемся удалить JQuery из нашего унаследованного приложения (не спрашивайте почему!)Как издевается Jquery готовой функции

Тем не менее, 1000+ файлов шаблоны конструкторов, делает используется функция jquery ready. Мы планируем сделать следующую макетную стратегию.

<head> 
<script type="text/javascript"> 
    // // http://stackoverflow.com/a/9899701 
    (function(funcName, baseObj) { 
     // The public function name defaults to window.docReady 
     // but you can pass in your own object and own function name and those will be used 
     // if you want to put them in a different namespace 
     funcName = funcName || "docReady"; 
     baseObj = baseObj || window; 
     var readyList = []; 
     var readyFired = false; 
     var readyEventHandlersInstalled = false; 

     // call this when the document is ready 
     // this function protects itself against being called more than once 
     function ready() { 
      if (!readyFired) { 
       // this must be set to true before we start calling callbacks 
       readyFired = true; 
       for (var i = 0; i < readyList.length; i++) { 
        // if a callback here happens to add new ready handlers, 
        // the docReady() function will see that it already fired 
        // and will schedule the callback to run right after 
        // this event loop finishes so all handlers will still execute 
        // in order and no new ones will be added to the readyList 
        // while we are processing the list 
        readyList[i].fn.call(window, readyList[i].ctx); 
       } 
       // allow any closures held by these functions to free 
       readyList = []; 
      } 
     } 

     function readyStateChange() { 
      if (document.readyState === "complete") { 
       ready(); 
      } 
     } 

     // This is the one public interface 
     // docReady(fn, context); 
     // the context argument is optional - if present, it will be passed 
     // as an argument to the callback 
     baseObj[funcName] = function(callback, context) { 
      // if ready has already fired, then just schedule the callback 
      // to fire asynchronously, but right away 
      if (readyFired) { 
       setTimeout(function() { 
        callback(context); 
       }, 1); 
       return; 
      } else { 
       // add the function and context to the list 
       readyList.push({ 
        fn: callback, 
        ctx: context 
       }); 
      } 
      // if document already ready to go, schedule the ready function to run 
      if (document.readyState === "complete") { 
       setTimeout(ready, 1); 
      } else if (!readyEventHandlersInstalled) { 
       // otherwise if we don't have event handlers installed, install them 
       if (document.addEventListener) { 
        // first choice is DOMContentLoaded event 
        document.addEventListener("DOMContentLoaded", ready, false); 
        // backup is window load event 
        window.addEventListener("load", ready, false); 
       } else { 
        // must be IE 
        document.attachEvent("onreadystatechange", readyStateChange); 
        window.attachEvent("onload", ready); 
       } 
       readyEventHandlersInstalled = true; 
      } 
     } 
    })("docReady", window); 

    // Mock jquery. 
    var jQuery = function(baseObj) { 
     return { 
      ready: function(baseObj) { 
       docReady(baseObj); 
      } 
     } 
    }; 
    var $ = jQuery; 
</script> 

</head> 

Обратите внимание, что мы склонны фальсифицировать jquery с помощью следующего фрагмента кода.

// Mock jquery. 
var jQuery = function (baseObj) { 
    return { 
     ready: function (baseObj) { 
      docReady(baseObj); 
     } 
    } 
}; 
var $ = jQuery; 

Он работает в тех случаях

  • jQuery(document).ready(function() {...});
  • $(document).ready(function() {...});

Однако, как мы можем сделать следующий синтаксис работает хорошо?

$(function() {...}); 

ответ

1

Проверьте, если передаваемый параметр является функцией

var jQuery = function(baseObj) { 
    if (typeof baseObj === 'function') 
     return docReady(baseObj); 

Код:

// Mock jquery. 
var jQuery = function (baseObj) { 
    if (typeof baseObj === 'function') 
     return docReady(baseObj); 

    return { 
     ready: function (baseObj) { 
      docReady(baseObj); 
     } 
    } 
}; 
var $ = jQuery; 
1

В третьем случае, если вы на самом деле не вызывающему готовую функцию. Поскольку это просто связывает функцию в ней.

$(function() {...}); 

Таким образом, нижняя функция не вызывается, вы просто возвращаете функцию объекта, которая не вызывается.

var jQuery = function (baseObj) { 
    return { 
     ready: function (baseObj) { 
      docReady(baseObj); 
     } 
    } 
}; 

Вам необходимо вызвать функцию непосредственно для третьего случая, как показано ниже.

// Mock jquery. 
    var jQuery = function (baseObj) { 
     if (typeof(baseObj) === 'function') docReady(baseObj); 
     return { 
      ready: function (baseObj) { 
       docReady(baseObj); 
      } 
     } 
    }; 

Демо: http://jsfiddle.net/kishoresahas/vnd92c1u/

У меня также было, так ситуация, А некоторые, что аналогичный код будет для долго.

Смежные вопросы