2016-07-22 123 views
1

我正在使用JQuery.UI datepicker,但有几个更改需要应用更新插件小部件才可以实际上在我的web应用程序中使用。为了测试,我只需将JQuery和日期选择器库加载到普通标记中,然后将修改代码放入其自己的标记中,最后我将日期选择器的标记和另一个标记中的初始化代码放入。当只有一个页面使用修改后的datepicker时,这一切都可以工作。包括javascript在另一个包括javascript

现在我想开始在多个页面上使用修改后的数据,我不想在每个使用它的地方都维护datepicker的所有修改。我想要做的是为datepicker创建一个包装文件,其中包括修改代码和使用datepicker所需的包含,然后在使用datepicker的页面中,我只包含包装脚本文件。

这一切归结为包括一个JavaScript文件在另一个包括的JavaScript文件。

我意识到这是其他一些问题的重复,但是当我在其他问题(如document.write和JQuery addScript技术)中尝试建议的修复时,它们似乎不起作用对于我在Chrome中。我碰到的第一个问题是addScript函数告诉我,在JQuery库中存在一个问题,通常在主文件中加载一个标签。如果我注释掉addScript,那么错误不会发生。 document.write方法似乎运行,但然后没有任何日期选择器工作。

我想知道在另一个脚本加载中如何最好地加载脚本,所以我可以创建我的包装,并且解决方案需要在所有主要浏览器中都可以使用。

所有这些问题的起因是该过程必须适用于使用PHP + Ajax创建的页面,但我首先需要获得纯HTML + Javascript + JQuery + JQuery.UI Datepicker解决方案。

如果这个问题已经得到解答,并且与我在这里列出的约束条件一起工作,请指出我的解决方案,请不要只是说'重复问题'并将其留在那里。我已经在这个论坛和其他论坛上回顾了解决方案,并且看到了很多简单和更复杂的解决方案,但这些解决方案无法正常工作或导致出现错误。

如果标签确实支持嵌套包含,那么这真的很好,这一切都会容易得多,并且使用这个概念来支持包装来隔离基础库对象的覆盖是对象的全部内容。所以支持和CSS的强大的跨浏览器技术包含真正的逾期。如果它在那里,那么我错过了它,但是从我所看到的,它不是以“随时可用的黄金时间”的方式存在的。

感谢, 霍华德布朗

+0

为什么不将其复制到一个文件? –

+0

为什么您需要稍后加载它? –

+0

你是什么意思**包括一个JavaScript文件在另一个包括的JavaScript文件** – madalinivascu

回答

0

我很怀疑乌尔会喜欢我的建议,但伊马给它一个去反正

创建一个名为includes.php

把所有的东西在THT文件文件

使用

<? include("includes.php"); ?>

在需要的地方

这样你可以把你所有的脚本在一个文件中,并已列入尽可能多的网页他们为u希望与代码一个简单的线条

+0

这样做会更有效率,并缓存平铺文件和可选最小化文件。 – GolezTrol

+0

为什么downvote大声笑这是一个完全有效的答案不是最优化的可能,但仍然有效的实践上我见过各种网站,引擎,框架......使用这种方法 – 2016-07-22 05:19:23

+0

约瑟夫火焰 - 我真的很喜欢这一个最好的,不要投票。相反,我会投票,但我没有代表这样做。它的简单和完全正是我想要做的!由于我正在使用PHP,因此我将执行此操作。 您的其他解决方案在非PHP情况下仍然可以派上用场,所以我仍然需要尝试一下。 :) –

-1

你可以使用一个Git系统的本地存储库您的更改可以在需要时进行一些合并。这将是我的建议。分叉原始分支,然后添加您的更改。这也被称为补丁文件。

+0

这是很难维护,并且当你想更新一个图书馆时,事情可能很容易中断。 – GolezTrol

+0

为什么我会因此而失望?它是一个有效的解决方案,但真正的解决方案可能并不适合您,但它是一个解决方案,而且大多数人实际上会做。或者他们会将他们想要的更改提交给原始创作者。 – JQluv

+0

JQluv - 感谢您的支持。我不会投它,因为它是维护代码库的一个非常好的方法。不过,我认为这与将所有日期选择器代码放在包装脚本文件中相同 - 易于执行,管理不太清晰。我认为将1000行datepicker的库代码注入到具有所有修补程序代码的同一个文件中真的会让整个事情变得困难和维护。保持库与补丁分离有助于保持更清晰和模块化。为每个修补程序分配不同的文件可能会被杀死。 –

3

你有没有试过类似的东西?

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 Tricks为解决

+0

虽然这是完全可行的,实际上相当天才,这将是更为繁琐,那么已经建议的解决方案 – 2016-07-22 06:15:30

+0

这真是一个独特的解决方案!我把你的功劳看成是CSS Tricks,所以看起来这也可以让我在每个使用datepicker的页面中加载我需要的两个CSS文件。有趣。至于其他做同样的方法。我所指的最初没有工作,或者日期选择器根本没有工作,或者报告了脚本错误。 –

+0

继续 - 在上面的新建议中,我已经对它们进行了评论,但到目前为止,除了您的建议,它们不符合我的需要,或者在将代码合并到一个