替换 html <script src=“xxx.js”> 是否安全？ “包括”与 $.getScript(...) ？

当前位置：文江博客话题详情

替换 html

（我对 Javascript 和 JQuery 还很陌生）我试图通过为每个 html 文件创建一个 js 文件来保持代码干净。我还有几个常见的 js 文件，其中包含特定于页面的 js 文件使用的代码。

我正在寻找在给定的 js 文件中导入/包含其他 js 文件的解决方案，我遇到了这个

我可以将它们移动到我的 js 文件并使用 ，而不是在我的 html 页面中使用多个作为导入/包含$.getScript(...) 代替吗？我的意思是，安全吗？这是一个好的做法吗？

编辑

循环引用安全吗？

编辑 II

为了更清楚起见，假设我有 a1.js、a2.js 和 a3.js。

对于 a1.js：

$.getScript("a2.js");
$.getScript("a3.js");
...

对于 a2.js：

$.getScript("a3.js");
...

对于 a3.js：

$.getScript("a2.js");
...

a2.js< 之间存在潜在的无限循环/code> 和 a3.js。我应该在每个 js 文件中用这样的方式处理它：

var vari;

if (typeof vari === 'undefined') {
    vari = 1;
}

原文

(I am still very new to Javascript and JQuery) I am trying to keep my code clean by creating one js file per html file. I also have a couple of common js file containing code used by page-specific js files.

I was searching for solutions to import/include other js files in a given js file and I came accross this one. It refers to $.getScript().

Instead of using multiple <script src="xxx.js"></script> as imports/includes in my html pages, could I move them to my js files and use $.getScript(...) instead? I mean, is it safe? Is it a good practice?

EDIT

Is it safe regarding cyclic references?

EDIT II

To make it more clear, let's imagine I have a1.js, a2.js and a3.js.

For a1.js:

$.getScript("a2.js");
$.getScript("a3.js");
...

For a2.js:

$.getScript("a3.js");
...

For a3.js:

$.getScript("a2.js");
...

There is a potential infinite loop between a2.js and a3.js. Should I handle it with something like this in each js file:

var vari;

if (typeof vari === 'undefined') {
    vari = 1;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

黎歌 2024-12-17 19:49:29

关于良好实践，答案一如既往......这取决于。

您的页面样式

相反：

如果您使用脚本来替换某些页面字体，效果将是字体更改对用户来说更加明显。
如果您的脚本更改了某些元素的高度，这将非常明显。

PRO：

如果您加载一个脚本来处理用户首先必须编辑的特定表单，那么完全没有问题
如果您加载一个启动动画的脚本，并且可以用单个加载动画代替，您可以这样做。
如果你的页面是一个有很多视图和模型的应用，你可以使用像getJson一样的getScript，这样你的页面速度将会大大提高。

您的编码风格

并非每个页面和脚本都以这种方式使用。 JQuery 的 $(document).ready() 会触发每个注册的处理程序一次，即使在事件发生之后也是如此。这并不一定意味着每个处理程序都以这种方式工作，当然不是 DOM2 事件。
如果您有任何内联脚本，它将不再工作。
您无法再保证初始化代码的特定顺序，因此您可能会遇到必须添加更多检查的问题，例如预期可见的容器仍然可见。

奖励是什么？

在高性能页面上，您会获得一些明确的信息。但页面末尾的脚本标签可以做同样的事情事半功倍（主要是：删除内联脚本）。在我看来，getScript 就像是最后的奖励，您不应该过度使用它，因为它不仅有可能吓跑其他开发人员，而且可能会吓跑您的客户。我只会在 Web 应用程序的环境中使用它，因为这是

对您的评论的响应的真正好处更新

在您的页面上使用 getScript 应该如下所示：

//since you need it there will be some kind of wrapper
var initClosure = function() {...}

if(typeof optionalNamespace == 'undefined') {
    $.getScript('/foo.js', initClosure);
} else {
    initClosure();
}

所有依赖代码都在 initClosure 中，并且您检查命名空间或变量名称（甚至像 window['blub'] 或简单的 blub 之类的名称也可以）。您将需要这个，因为依赖于 getScript 的函数（通常设置默认值或向 dom 附加某些内容）应该只被调用一次。

尽管如此，我并没有真正看到循环引用的意义，因为这意味着：

加载脚本 1 ->等等->已加载 -> 加载脚本 2 ->等待->已加载-> [...] ->加载脚本 1

这种情况应该避免，至少有 2 个原因

浏览器无法预测这种情况。如果有多个脚本标签，您的浏览器将负责并行下载，因此整体速度（简化和粗略）是最大文件需要加载的时间。在我的示例中，它将获取脚本负载的总和。
脚本的初始化将被处理两次，因此任何状态都会丢失。

Regarding good Practice that answer is as always... it depends.

Your Page Style

Contra:

If you for example use a script to substitute some page fonts, the effect will be that the font change will be even more visible for the user.
If your script changes the height of some elements, this will be very noticeable.

PRO:

If you load a Script to handle a specific form, that the user first has to edit, there is no problem at all
If you load a Script that starts animation that can be substituted with a single loading animation you can do this.
If your page is a application with many views and models, you can use getScript like getJson, in this case your page speed will greatly improve.

Your Coding Style

Not every Page and Script is structured to be used this way. JQuery's $(document).ready() fires every registered handler once, even after the event occurred. This does not necessarily mean every handler works this way, certainly not the DOM2 Events.
If you have anywhere inline Scripts it will no longer work.
You can no longer guarantee a certain order your initialization code will have, so you can run in problems have to add more checks, that e.g. a expectedly visible container is still visible.

Whats the reward?

On high performance pages, you gain some thats clear. But script tags at the end of the page can do the same thing with half the work (mainly: remove inline scripts). In my opinion getScript is something like a last reward, you should not overuse it, because the potential to not only scare other developers but also your customers away is clearly there. I would only use it in the environment of a web application, because here are the real benefits

UPDATE response to your comment

Using getScript on your page should look like this:

//since you need it there will be some kind of wrapper
var initClosure = function() {...}

if(typeof optionalNamespace == 'undefined') {
    $.getScript('/foo.js', initClosure);
} else {
    initClosure();
}

All depending code is in initClosure, and you check a namespace, or variable name (even something like window['blub'] or simply blub will work). You will need this, since the on getScript depending function, wich typically sets default values or appends something to the dom should only be called once.

Nevertheless I don't really see the point in cyclic references, because this would mean:

load script 1 -> wait -> loaded ->load script 2 -> wait ->loaded -> [...] ->load script 1

This situation should be avoided for at least 2 reasons

The browser can not predict this. If there are several script tags, your browser will take care of parallel downloads, so the overall speed (simplified & rough) is the time the biggest file will need to load. In my Example it will take the sum of the script loads.
Initialization of your scripts will be handled twice, so any state will get lost.

回复收藏 0 原文

~没有更多了~