有没有一种优雅的方式来缓慢升级 jQuery?
我们想要从一个版本的 jQuery 升级到另一个版本。我们使用各种在线插件并编写了许多我们自己的插件。现在的挑战是尝试在不完全重写的情况下缓慢迁移所有脚本对象。我有一个关于如何处理这个问题的想法:
但我有疑问:
- 下面的想法是个好主意吗?
- 我可以(直接)告诉每个 jQuery 对象依赖项所在的位置吗?
- 如果这是一个坏主意……你会如何处理?
- 我是否只需重写升级时发生损坏的每个对象? (sux!)
解释问题:
如果您的所有插件仅在单个页面的范围内运行,那么很容易解决不同的版本:只需在页面级别而不是母版页级别执行文件包含(废话!)。然而,位于母版页或用户控件中的对象有点困难......因为它们需要特定版本才能正确运行。
这是我的想法:
插件的定义以匿名函数开始。
(function ($){<!- code goes here -->})(jQuery);
我见过的所有依赖项都以此为起点。
示例: jQuery 依赖项包括插件,例如:ui.widget、ui.position、ui.core 等。
那么,如果我使用 JavaScript 对象引用每个版本的 jQuery(及其依赖项)并将该对象传递到各个内部,会怎样?和在线插件?
对象引用可能如下所示:
var jQueryVersion1_3_2 = function(){<!- paste the files contents here-->};
var jQueryVersion1_4_4 = function(){<!- paste the files contents here-->};
插件:
我的内部和在线插件仍然可以作为(正常)文件链接包含在内,但通过以下更改
从这里开始:
// Plug-in X
(function ($){<!- its untouched code -->})(jQuery);
// Plug-in Y
(function ($){<!- its untouched code -->})(jQuery);
// Plug-in Z
(function ($){<!- its untouched code -->})(jQuery);
...版本控制在这里很糟糕!
到此...
// Plug-in X
(function ($){<!- its untouched code -->})(jQueryVersion1_3_2);
// Plug-in Y
(function ($){<!- its untouched code -->})(jQueryVersion1_3_2);
// Plug-in Z
(function ($){<!- its untouched code -->})(jQueryVersion1_4_4);
...现在我们可以慢慢升级我们的对象。
我看到的唯一问题:
挑战变成了插件依赖关系(版本之间)。在测试升级中,以下内容开始破坏各种插件,例如:
- ui.widget、ui.position、ui.core 等(在升级时全部破坏)。
我看到的唯一答案是:
将 jQuery 和所有各种引用包装到一个函数中并将其保存到上面的变量中。然后将该中间对象传递到每个插件 AS jQuery 中。
帮助我,欧比旺·克诺比……你是我唯一的希望!
We are wanting to upgrade from one version of jQuery to another. We use various online plug-in's and have written many of our own. The challenge now comes in the form of trying to SLOWLY MIGRATE all your scripted objects SLOWLY without a complete re-write. I have an idea on HOW to handle this:
BUT I HAVE QUESTIONS:
- Is the idea below even a good idea?
- Can I (directly) tell each jQuery object where dependencies live?
- If this is a bad idea...how do YOU handle it?
- Do I simply re-write EVERY object that happens to break upon upgrading? (sux!)
EXPLAINING THE ISSUE:
If all your plug-in's live ONLY within the scope of a single page, then different versions are easily addressed: simply do your file-includes at the page level instead of the master-page level (duh!). However, objects that live in the master-page or in user-controls are a bit tougher...as they need specific versions to run correctly.
HERE'S MY IDEA:
The definition of a plug-in starts with an anonymous function.
(function ($){<!- code goes here -->})(jQuery);
All of the dependencies I've seen use this as a starting point.
EXAMPLES:
jQuery dependencies include plug-ins like: ui.widget, ui.position, ui.core, etc.
So what if I reference each version of jQuery (and its dependencies) using a JavaScript object and pass THAT OBJECT INTO the various in-house and online plug-ins?
THE OBJECT REFERENCES MIGHT GO LIKE THIS:
var jQueryVersion1_3_2 = function(){<!- paste the files contents here-->};
var jQueryVersion1_4_4 = function(){<!- paste the files contents here-->};
THE PLUG-INS:
My in-house and online plug-ins could still be included as (normal) file-links, but with the following changes
GO FROM THIS:
// Plug-in X
(function ($){<!- its untouched code -->})(jQuery);
// Plug-in Y
(function ($){<!- its untouched code -->})(jQuery);
// Plug-in Z
(function ($){<!- its untouched code -->})(jQuery);
...versioning sucks here!
TO THIS...
// Plug-in X
(function ($){<!- its untouched code -->})(jQueryVersion1_3_2);
// Plug-in Y
(function ($){<!- its untouched code -->})(jQueryVersion1_3_2);
// Plug-in Z
(function ($){<!- its untouched code -->})(jQueryVersion1_4_4);
...now we can upgrade our objects SLOWLY.
THE ONLY ISSUE I SEE:
The challenge becomes the plug-in dependencies (between versions). In a test upgrade the following began to break across various plug-ins, things like:
- ui.widget, ui.position, ui.core, etc. (all broke upon upgrading).
THE ONLY ANSWER I SEE IS:
Wrapping jQuery and all the various references into a single function and saving THAT into the variable above. Then pass THAT intermediary object into each plug-in AS jQuery.
Help me Obi-Wan Kenobi...you're my only hope!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
使用 $.noConflict 全局创建所有版本
然后将每个 jQuery 插件(内部或第 3 方)包装在闭包中,例如:
使用此方法唯一可以破坏的是在外部使用
var foo
的第 3 方代码创建全局对象的任何函数。您需要查找任何全局函数/对象/方法并使用window.foo = ...
手动提升它们值得庆幸的是,创建全局函数/对象/方法无论如何被该方法认为是不好的形式,所以不应该'这些不要太多。
Using $.noConflict to globally create all your versions
Then wrap every jQuery plugin, internal or 3rd party in closures like:
The only thing that can break with this method is 3rd party code that uses
var foo
outside of any functions to create global objects. You need look for any global functions/objects/methods and hoist them manually usingwindow.foo = ...
Thankfully creating global functions/objects/methods is considered bad form by that method anyway so there shouldn't be too many of those.