有什么方法可以在javascript中包含条件吗？

发布于 2024-11-27 12:02:08 字数 919 浏览 5 评论 0原文

我们正在开发一个包含大量 portlet 的门户（页面/门户内的独立应用程序）。每个 portlet 都必须是独立的：它们必须能够在门户内的独立页面上运行。

我们被要求不要向门户基本页面（调用所有内容的页面）添加大量 javascript 文件。它还附带dojo（但没有人使用它）。

有没有办法加载javascript文件（包括jQuery又名，它不能是解决方案）如果它们还没有加载？答案可以使用dojo

现在我们尽管

if (!window.jQuery) {            
        document.write('<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"><' + '/script>');
}
if (!window.jQuery.ui) {
        document.write('<script src="/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></scr' + 'ipt>');
}
[...] other includes

这个问题是 jQuery.ui 测试完成时未加载 jquery，因此会引发错误并且未加载第二个文件。

编辑

重写问题：问题是我们可能有 4 个 portlet，每个 portlet 都需要 jQuery + jQuery-ui + 不同其他插件/文件。因此，他们需要全部包含代码来独立地加载所有这些文件。但是我们也不想加载 jQuery 和 jQuery-ui 4 次。

原文

We're developing a portal with lots of portlets (independent application within the page/portal). Each portlets have to be independent : They have to be able to run on stand-alone page from within the portal.

We've been ask not to add tons of javascript files to the portal base-page (the one that calls everything). It also comes with dojo (but no one uses it).

Are there any way to load javascript files (including jQuery aka, it can't be the solution) if they are not loaded yet? The answer can use dojo

Right now we though of

if (!window.jQuery) {            
        document.write('<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"><' + '/script>');
}
if (!window.jQuery.ui) {
        document.write('<script src="/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></scr' + 'ipt>');
}
[...] other includes

The problem with this is that jquery isn't loaded when the jQuery.ui test is done, so an error is thrown and the 2nd file is not loaded.

Edit

Re-writing the issue : The problem is that we could have 4 portlets, each requiring jQuery + jQuery-ui + differents others plugins/files. So they need to all include code to load all those files independantly. But we don't want to load jQuery and jQuery-ui 4 times either.

分享到QQ

分享到微博

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

发布评论

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

半世晨晓 2024-12-04 12:02:09

稍微误读了这个问题（可以和不能看起来非常相似）。

如果您愿意使用另一个库来处理它，这里有一些很好的答案。

异步加载js文件和其他依赖的js文件

回复收藏 0 原文

江挽川 2024-12-04 12:02:09

我总是通过 js DOM 操作注入 js 文件

if (typeof jQuery == 'undefined') {
    var DOMHead = document.getElementsByTagName("head")[0];
    var DOMScript = document.createElement("script");
    DOMScript.type = "text/javascript";
    DOMScript.src = "http://code.jquery.com/jquery.min.js";
    DOMHead.appendChild(DOMScript);
}

，但它有点挑剔，可能无法在所有情况下工作

I've always injected js files via js DOM manipulation

if (typeof jQuery == 'undefined') {
    var DOMHead = document.getElementsByTagName("head")[0];
    var DOMScript = document.createElement("script");
    DOMScript.type = "text/javascript";
    DOMScript.src = "http://code.jquery.com/jquery.min.js";
    DOMHead.appendChild(DOMScript);
}

but it's a bit picky and may not work in all situations

回复收藏 0 原文

探春 2024-12-04 12:02:09

只需编写您自己的模块（采用 Dojo 格式，自版本 1.6 以来现已切换为标准 AMD 异步加载格式）并在任何时候使用 dojo.require （或 require）已加载 portlet。

这样做的好处是，一个模块总是只加载一次（即使一个 portlet 类型被加载多次），并且仅在第一次需要它时 - dojo.require （或 < code>require) 总是首先检查模块是否已经加载，如果是，则不执行任何操作。此外，Dojo 确保所有依赖项也在模块之前自动加载和执行。您可以拥有一个非常复杂的依赖关系树，并让 Dojo 为您完成所有工作，而无需您费力。

这是非常标准的 Dojo 基础设施。然后整个 Dojo 工具包都构建在它之上，您也可以使用它来构建您自己的模块。事实上，Dojo 鼓励您将应用程序分解为可管理的块（我的观点是越小越好）并在必要时动态加载它们。此外，利用类层次结构和 mixins 支持。提供了许多 Dojo 内部结构来帮助您做到这一点。

您还应该按名称空间组织您的类/模块，以获得最大的可管理性。在我看来，这种类型的大型企业级 Web 应用程序是 Dojo 相对于 jQuery 等其他库的真正优势所在。对于一些带有一些动画的快速而肮脏的网页，您通常不需要这样的基础设施，但当您构建复杂且庞大的应用程序时，您真的很欣赏它。

例如，1.6 之前的样式：

portletA.js:

dojo.provide("myNameSpace.portletA.class1");
dojo.declare("myNameSpace.portletA.class1", myNameSpace.portletBase.baseClass, function() { ...
});

main.js:

dojo.require("myNameSpace.portletA.class1");
var myClass1 = new myNameSpace.portletA.class1(/* Arguments */);

1.6 后的样式：

portletA.js:

define("myNameSpace/portletA/class1", "myNameSpace/portletBase/baseClass", function(baseClass) { ...
    return dojo.declare(baseClass, function() {
    });
});

main.js:

var class1 = require("myNameSpace/portletA/class1");
var myClass1 = new class1(/* Arguments */);

Just write your own modules (in Dojo format, which since version 1.6 has now switched to the standard AMD async-load format) and dojo.require (or require) them whenver a portlet is loaded.

The good thing about this is that a module will always only load once (even when a portlet type is loaded multiple times), and only at the first instance it is needed -- dojo.require (or require) always first checks if a module is already loaded and will do nothing if it is. In additional, Dojo makes sure that all dependencies are also automatically loaded and executed before the module. You can have a very complex dependency tree and let Dojo do everything for you without you lifting a finger.

This is very standard Dojo infrastructure. Then entire Dojo toolkit is built on top of it, and you can use it to build your own modules as well. In fact, Dojo encourages you to break your app down into manageable chunks (my opinion is the smaller the better) and dynamically load them when necessary. Also, leverage class hierachies and mixins support. There are a lot of Dojo intrastructure provided to enable you to do just that.

You should also organize your classes/modules by namespaces for maximal manageability. In my opinion, this type of huge enterprise-level web apps is where Dojo truely shines with respect to other libraries like jQuery. You don't usually need such infrastructure for a few quick-and-dirty web pages with some animations, but you really appreciate it when you're building complicated and huge apps.

For example, pre-1.6 style:

portletA.js:

dojo.provide("myNameSpace.portletA.class1");
dojo.declare("myNameSpace.portletA.class1", myNameSpace.portletBase.baseClass, function() { ...
});

main.js:

dojo.require("myNameSpace.portletA.class1");
var myClass1 = new myNameSpace.portletA.class1(/* Arguments */);

Post-1.6 style:

portletA.js:

define("myNameSpace/portletA/class1", "myNameSpace/portletBase/baseClass", function(baseClass) { ...
    return dojo.declare(baseClass, function() {
    });
});

main.js:

var class1 = require("myNameSpace/portletA/class1");
var myClass1 = new class1(/* Arguments */);

回复收藏 0 原文

樱花落人离去 2024-12-04 12:02:09

Pyramid 是一个依赖库，可以处理这个情况很好。基本上，您可以在 dependencyLoader.js 文件中定义依赖项（在本例中为 javascript 库），然后使用 Pyramid 加载适当的依赖项。请注意，它仅加载依赖项一次（因此您不必担心重复）。您可以在单个文件中维护依赖项，然后根据需要动态加载它们。这是一些示例代码。

文件：dependencyLoader.js

//Set up file dependencies
Pyramid.newDependency({
    name: 'standard',
    files: [
    'standardResources/jquery.1.6.1.min.js'
     //other standard libraries
    ]
});

Pyramid.newDependency({
name:'core',
files: [
    'styles.css',
    'customStyles.css',
    'applyStyles.js',
    'core.js'
    ],
   dependencies: ['standard']
});


Pyramid.newDependency({
name:'portal1',
files: [
    'portal1.js',
    'portal1.css'
    ],
    dependencies: ['core']
});

Pyramid.newDependency({
name:'传送门2',
文件：[
'portal2.js',
'portal2.css'
],
依赖项：['核心']
});
Html 文件

<head>
    <script src="standardResources/pyramid-1.0.1.js"></script>
    <script src="dependencyLoader.js"></script>
</head>

...
    <script type="text/javascript">
        Pyramid.load('portal1');
    </script>
...
    <script type="text/javascript">
        Pyramid.load('portal2');
    </script>

因此共享文件只会加载一次。您可以选择加载依赖项的方式。您还可以定义进一步的依赖项组，例如

Pyramid.newDependency({
name:'loadAll',
    dependencies: ['portal1','portal2']
});

在 html 中，一次性加载所有依赖项。

<head>
    <script src="standardResources/pyramid-1.0.1.js"></script>
    <script src="dependencyLoader.js"></script>
    <script type="text/javascript">
        Pyramid.load('loadAll');
    </script>
</head>

其他一些可能也有帮助的功能是，它可以处理其他文件类型（如 css），并且还可以在准备发布时将单独的开发文件合并到单个文件中。在此处查看详细信息 - Pyramid 文档

注意：自从我从事金字塔。

Pyramid is a dependency library that can handle this situation well. Basically, you can define you dependencies(in this case, javascript libraries) in a dependencyLoader.js file and then use Pyramid to load the appropriate dependencies. Note that it only loads the dependencies once (so you don't have to worry about duplicates). You can maintain your dependencies in a single file and then load them dynamically as required. Here is some example code.

File: dependencyLoader.js

//Set up file dependencies
Pyramid.newDependency({
    name: 'standard',
    files: [
    'standardResources/jquery.1.6.1.min.js'
     //other standard libraries
    ]
});

Pyramid.newDependency({
name:'core',
files: [
    'styles.css',
    'customStyles.css',
    'applyStyles.js',
    'core.js'
    ],
   dependencies: ['standard']
});


Pyramid.newDependency({
name:'portal1',
files: [
    'portal1.js',
    'portal1.css'
    ],
    dependencies: ['core']
});

Pyramid.newDependency({
name:'portal2',
files: [
'portal2.js',
'portal2.css'
],
dependencies: ['core']
});
Html Files

<head>
    <script src="standardResources/pyramid-1.0.1.js"></script>
    <script src="dependencyLoader.js"></script>
</head>

...
    <script type="text/javascript">
        Pyramid.load('portal1');
    </script>
...
    <script type="text/javascript">
        Pyramid.load('portal2');
    </script>

So shared files only get loaded once. And you can choose how you load your dependencies. You can also just define a further dependency group such as

Pyramid.newDependency({
name:'loadAll',
    dependencies: ['portal1','portal2']
});

And in your html, just load the dependencies all at once.

<head>
    <script src="standardResources/pyramid-1.0.1.js"></script>
    <script src="dependencyLoader.js"></script>
    <script type="text/javascript">
        Pyramid.load('loadAll');
    </script>
</head>

Some other features that might also help is that it can handle other file types (like css) and also can combine your separate development files into a single file when ready for a release. Check out the details here - Pyramid Docs

note: I am biased since I worked on Pyramid.

回复收藏 0 原文

嘿咻 2024-12-04 12:02:08

解决这个问题的方法似乎是使用单独的脚本块。显然，在脚本块关闭之前， document.write 不会影响脚本的加载。
也就是说，试试这个：

<script>
    if (!window.jQuery) {
        document.write('<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"><' + '/script>');
    }
</script>
<script>
    if (!window.jQuery.ui) {
        document.write('<script src="/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></scr' + 'ipt>');
    } 
</script>

对我有用。在 IE 和 Firefox 中测试。

The solution to this seems to be to use separate script blocks. Apparently the document.write will not effect the loading of the scripts, until the script block closes.
That is, try this:

<script>
    if (!window.jQuery) {
        document.write('<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"><' + '/script>');
    }
</script>
<script>
    if (!window.jQuery.ui) {
        document.write('<script src="/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></scr' + 'ipt>');
    } 
</script>

Works for me. Tested in IE and Firefox.

回复收藏 0 原文

~没有更多了~