在另一个包含的javascript中包含javascript [英] including javascript in another included javascript

问题描述

我正在使用JQuery.UI日期选择器，但需要进行一些更改以更新插件小部件，然后才能在Web应用程序中实际使用它.为了进行测试，我只需要使用常规标签加载JQuery和datepicker库，然后将修改代码放入其自己的标签中，最后我将datepicker的标签以及初始化代码放入另一个标签中.当只有一页使用修改后的日期选择器时，所有这些都可以使用.

现在，我想在多个页面上开始使用修改后的数据，并且我不想在每个使用日期的地方都保留对datepicker的所有修改.我想做的是为datepicker创建一个包装文件，其中包括修改代码和使用datepicker所需的include，然后在使用datepicker的页面中，仅包含包装脚本文件.

这全部归结为在另一个包含的javascript文件中包含一个javascript文件.

我意识到这是其他一些问题的重复，但是当我尝试其他问题(例如document.write和JQuery addScript技术)中的建议修复程序时，它们似乎不适用于我在Chrome中.我遇到的第一个问题是addScript函数告诉我在JQuery库中存在一个问题，该库通常在主文件中带有标记加载.如果我注释掉addScript，则不会发生该错误. document.write方法似乎可以运行，但随后的日期选择器都不起作用.

我想知道在另一个脚本加载中如何最好地加载该脚本，因此我可以创建包装器，并且该解决方案需要在所有主流浏览器中都能正常工作.

这一切的麻烦之处在于，该过程必须适应使用PHP + Ajax创建的页面，但是我首先要获得一个纯HTML + Javascript + JQuery + JQuery.UI Datepicker解决方案.

如果已经回答了这个问题，并且可以解决我在此处概述的限制，请向我指出该解决方案，请不要仅仅说重复问题"，而应就此解决.我已经在该论坛和其他论坛上回顾了这些解决方案，并且看到了许多简单而又复杂的解决方案，这些解决方案无法正常工作或导致正确的错误.

如果标签确实支持嵌套包含，那将非常非常地好，所有这些都将变得更加容易，并且使用此概念来支持包装器以隔离对基础库对象的替代就是对象的全部目的.因此，支持和CSS的健壮的跨浏览器技术确实过期了.如果它在那里，那么我会想念它的，但是从我所看到的来看，它并不是以准备好黄金时段"的方式出现的.

谢谢， 霍华德·布朗

解决方案

您尝试过这种方法吗?

var Loader = function () { }
Loader.prototype = {
    require: function (scripts, callback) {
        this.loadCount      = 0;
        this.totalRequired  = scripts.length;
        this.callback       = callback;

        for (var i = 0; i < scripts.length; i++) {
            this.writeScript(scripts[i]);
        }
    },
    loaded: function (evt) {
        this.loadCount++;

        if (this.loadCount == this.totalRequired && typeof this.callback == 'function') this.callback.call();
    },
    writeScript: function (src) {
        var self = this;
        var s = document.createElement('script');
        s.type = "text/javascript";
        s.async = true;
        s.src = src;
        s.addEventListener('load', function (e) { self.loaded(e); }, false);
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(s);
    }
}

用法

var l = new Loader();
l.require([
    "example-script-1.js",
    "example-script-2.js"], 
    function() {
        // Callback
        console.log('All Scripts Loaded');
    });

您可能会嵌套任意数量的包含项(每个都包含在各自的回调中)，它们仍然可以使用.

请提供 CSS技巧

I am using the JQuery.UI datepicker, but have several changes that need to be applied that update the plug-in widget before it can actually be used in my web-app. For testing, I simply load JQuery and the datepicker libraries with the normal tags, then put in the modifying code in its own tag, and finally I put in the tag for the datepicker and the initializing code in yet another tag. This all works when there is only one page that uses the modified datepicker.

Now I want to start using modified data on several pages and I don't want to have to maintain all of the modifications for the datepicker in each place where I use it. What I'd like to do is create a wrapper file for the datepicker, which includes the modifying code and the includes needed to use datepicker, then in the pages that use a datepicker, I'd just include the wrapper script file.

This all boils down to including a javascript file in another included javascript file.

I realize that this is a duplicate of some of the other questions, but when I tried the suggested fixes in those other questions, such as the document.write, and the JQuery addScript techniques, they don't seem to work for me in Chrome. The first problem I run into is that the addScript function tells me that there is a problem way down deep in the JQuery library, which is loaded normally with a tag in the main file. If I comment out the addScript then the error doesn't occur. The document.write method seems to run, but then none of the datepickers work.

I'd like to know how the best do the script load within another script load, so I can create my wrapper, and the solution needs to work in all of the major browsers.

The wrinkle in all of this is that the process must be adaptable to pages created using PHP + Ajax, but I first want to get a pure HTML + Javascript + JQuery + JQuery.UI Datepicker solution working.

If this has already been answered, and works with the constraints that I've outlined here, please point me to that solution, please don't just say 'duplicate question' and leave it at that. I've reviewed the solutions in this forum and others, and have seen lots of simple and more complex solutions that just don't work or result in out right errors.

It would be really, really, nice if tag did support nested includes, this all would be much easier, and using this concept to support wrappers to isolate overrides to the base library objects is what objects are all about. So a robust, cross browser technique that supports the and css includes really is over-due. If it's out there then I missed it, but from what I've seen it's not there in a 'ready-for-prime-time' fashion.

Thanks, Howard Brown

解决方案

have you tried something like this?

var Loader = function () { }
Loader.prototype = {
    require: function (scripts, callback) {
        this.loadCount      = 0;
        this.totalRequired  = scripts.length;
        this.callback       = callback;

        for (var i = 0; i < scripts.length; i++) {
            this.writeScript(scripts[i]);
        }
    },
    loaded: function (evt) {
        this.loadCount++;

        if (this.loadCount == this.totalRequired && typeof this.callback == 'function') this.callback.call();
    },
    writeScript: function (src) {
        var self = this;
        var s = document.createElement('script');
        s.type = "text/javascript";
        s.async = true;
        s.src = src;
        s.addEventListener('load', function (e) { self.loaded(e); }, false);
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(s);
    }
}

usage

var l = new Loader();
l.require([
    "example-script-1.js",
    "example-script-2.js"], 
    function() {
        // Callback
        console.log('All Scripts Loaded');
    });

You could potentially nest as many includes as you want (each one in it's respective callback) and they would all still work.

Credit to CSS Tricks for the solution

这篇关于在另一个包含的javascript中包含javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！