Question

我在页面中执行了一些无法移动的遗留jQuery，即

jQuery(document).bind('click', function(){
    console.log('click');
});

现在jQuery的加载位于页面底部＆＃39; AFTER＆＃39;上面的内联代码，页面错误＆jQuery未定义＆＃39;

我想使用与此类似的模式：

var deferInlineScripts = []; 
    window.$ = function(inlineFunction) {
    deferInlineScripts.push(inlineFunction);
};

看到在这里工作：https://jsfiddle.net/xpvt214o/165864/

使用

获取内联脚本并执行它们（一旦jQuery被加载＆＃39;）

for (i = 0; i < deferInlineScripts.length; i++) {
    deferInlineScripts[i]();
}

但与Fiddle不同，我的遗留代码没有$（function（）{}）;并且不能移动，改变或包围任何东西，即

jQuery(document).bind('click', function(){
    console.log('click');
});
jQuery(document).ready(function(){
    console.log('ready');
});

这是我想要解决的小提琴https://jsfiddle.net/xpvt214o/165972/所以Bind＆amp;在加载jQuery之后执行就绪函数。

Answer 1

最初将window.jQuery定义为返回代理的函数。此代理将允许执行后续任意伪造的查找（例如.bind中的jQuery(document).bind）。访问的属性和最终调用的结果函数的参数可以存储在一个数组中，然后在jQuery正确加载后执行。

＆＃13;

<script>
const deferCallHandler = {
  get: function(jqFirstArg, jqProp) {
    return function(...secondArgs) {
      deferredInlineScripts.push({
        jqFirstArg,
        jqProp,
        secondArgs,
      });
    }
  }
};
const deferredInlineScripts = [];
window.jQuery = function(jqFirstArg) {
  return new Proxy(jqFirstArg, deferCallHandler);
}

document.addEventListener('DOMContentLoaded', function(){
  // window.jQuery has now been properly assigned to the true jQuery object
  deferredInlineScripts.forEach(({ jqFirstArg, jqProp, secondArgs }) => {
    jQuery(jqFirstArg)[jqProp](...secondArgs);
  });
});

/* Can't change this code */
jQuery(document).bind('click', function(){
  console.log('click');
});
jQuery(document).ready(function(){
  console.log('ready');
});

</script>
<div>some element</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

延迟内联jQuery Ready / Bind功能

1 个答案: