JS - 跨文件变量检测
JS - 跨文件变量检测
我正在使用CDN来加载以下JavaScript文件:
- https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
- https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js
- http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js
- http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js
对于每一个文件,如果CDN被阻止或不可用,我该如何使用本地的副本?
JS - 跨文件变量检测
当我们使用CDN加载脚本时,有时候需要确认CDN脚本是否加载成功。我们可以通过检测CDN脚本定义的变量或函数是否存在来判断。如果不存在,则表示CDN加载失败,需要加载本地脚本副本。
以下是基于这个原理的解决方案之一:
(如果window.jQuery属性未定义,则表示CDN脚本未加载)
我们也可以根据这个方法自己构建解决方案。例如,jquery tooltip插件创建了`$.tooltip()`函数,我们可以使用以下代码进行检测:
对于为什么作者使用`\x3c`的疑问,是因为否则`<\/script>`会提前结束脚本。
`<\/script>`也可以正常工作。
为什么不使用`if ($.tooltip === undefined)`?
这也是有效的,有很多检测存在性的方法。我喜欢使用`typeof`检测,它们是"bulletproof"的。
这个方法可以正常工作,但是我认为使用`document.write()`不是正确的做法!
不建议使用`document.write`。浏览器可能会阻止`document.write`脚本的网络请求。
`document.write`的使用是不被推荐的。可以参考以下链接了解更多信息:
- https://developers.google.com/web/updates/2016/08/removing-document-write
- https://www.chromestatus.com/feature/5718547946799104
`is the only one that has it right. This answer will fail in Chrome`(引用自原文)
问题的出现原因是在多个文件中检测变量时存在困难,需要一种方法来确保变量在文件之间正确加载和检测。
解决方法是使用一个插件,如yepnopejs。该插件可以通过加载文件并在加载完成后检测变量是否存在来解决这个问题。下面是一个使用yepnopejs的示例代码:
yepnope([{ load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js', complete: function () { if (!window.jQuery) { yepnope('local/jquery.min.js'); } } }]);
这段代码将加载jQuery库文件,如果加载完成后未发现window.jQuery变量,则加载本地的jquery.min.js文件。这样就确保了在文件之间正确检测和加载变量。
从文档中可以了解到,yepnopejs仍然需要测试一个对象,可以使用`test`属性来进行测试。使用`complete`事件可以在加载或超时后触发回调函数。默认超时时间可以被覆盖。在加载或未加载文件后,`complete`事件都会触发,而`callback`事件只会在加载或未加载单个文件后触发。
需要注意的是,yepnopejs已经被废弃,不再推荐使用。
JS - Variable detection across files问题的出现原因是在加载JavaScript文件时,需要检测某个变量是否已经存在。在上述代码中,首先尝试通过加载外部的jQuery库来检测window.jQuery变量是否存在,如果不存在,则通过document.write方法加载本地的jQuery库。
为了解决这个问题,可以使用以下方法:
1. 在加载文件之前,先检测变量是否存在。可以使用typeof操作符来检查变量是否已经定义。例如,可以使用以下代码来检测window.jQuery变量是否存在:
if (typeof window.jQuery === 'undefined') { document.write('