大型网络应用程序往往会积累大量支持前端和后端功能的库。我想减少依赖项的数量，以提高稳定性和易于维护。我正在寻找一种减少 Web 应用程序依赖关系的好方法，其中包括以下库：
我正在寻找尽可能多地结合这些依赖项的技术、语言或框架。
这是我目前所探索的：
重构小依赖和删除未使用的部分可能会有很长的路要走。
React 将对 jQuery 意大利面条代码施加约束并减少对一些依赖项的需求。
Elm 将通过其类型安全进一步加强纪律。
ClojureScript 也将通过函数式编程范式施加纪律。
除了重构之外，所有这些潜在的解决方案都会引入一些额外的复杂性，以便与 Ruby on Rails 后端集成。 React 似乎是当前依赖项的替代品最多。
最安全的前进道路似乎是从重构开始，然后逐步引入其中一种功能语言或库。考虑到这个目标，我将如何重构？首先重构为纯 JS（即删除 jQuery）会有用吗？
【问题讨论】：
标签： javascript ruby-on-rails refactoring
通常当我继承一个大型项目进行重构时，首先要做的是确定核心依赖关系，例如大多数自定义代码使用的主要库是什么？从您的列表中，我已经可以看出 underscore 和 jQuery 基本上都在尝试做同样的事情。哪一个是最优化最快的，这些年来已经逐渐拉平。让我们假设第二个 Underscore 仍然是最快的，你仍然依赖 jQuery 进行遍历，什么不是。您是否愿意包含一个额外的库来获得微速度？在我看来，每个页面的额外负载不值得。
那么 Bootstrap 很可能是您的主要 CSS 驱动程序，但是，它有一些 JavaScript 功能可以使用。轮播、日期选择器、下拉、切换其他一些小部件……看看它们是否被使用（可能是），如果没有，摆脱 Bootstrap js 库。请记住，Bootstrap 仍然依赖于 jQuery。
Chosen/select 是可选插件。他们的目标很可能在 Bootstrap/jQuery 中涵盖。尝试重构它们。
Slickgrid 也是一个网格系统。 Bootstrap 网格有什么好处？听起来他们重构了 Bootstrap。如果使用，重构为引导网格以增加团队的共同知识。
Handlebars 用于模板。如果你使用逻辑运算符它很有用，否则你可以很容易地找到一个小的替换函数。
function renderTemplate(obj, template) {
var tempKey, reg, key;
for (key in obj) {
if (obj.hasOwnProperty(key)) {
tempKey = String("{{" + key + "}}");
reg = new RegExp(tempKey, "g");
template = template.replace(reg, obj[key]);
}
}
return template;
}
CKEditor/Raphael 是具有特定目标的库 => wysiwyg/vector。最好保持那些但延迟加载听起来很理想。仅在需要时将它们包含在页面上。
// after the additional library was loaded ...
cacheObj1.on('focus', this.initCKE);
cacheObj2.on('click', this.initVector);
如果您的服务器语言句柄 <script> 包含在 <head> 标记中，您可以选择保留特定页面所需的简单脚本引用。不要以 20 个内联 DOM 就绪事件结束，尽量只用一个就绪事件来初始化您的项目所需的一切。
现在棘手的部分开始了。你的 JavaScript 技能有多好，以前的程序员有多好？如果你发现很多 jQuery 选择器到处都是，很有可能它不是以模块化方法编程的。将代码的每一个和平重构为可配置的东西的艰巨任务开始了。
这里的想法是拥有一个与您的库对话的实例或加载器文件。也许一个自定义函数文件（如果您愿意，可以包含下划线函数）在整个代码中使用。原型或“类”和单例来完成它。 nice post 关于重构，如果我可以添加有关如何设置它的链接。然后，现在 grunt/gulp 设置并没有什么花哨的。 JS(npm, bower) 和 CSS(compass, less) 的自动化可以即时覆盖。
jQuery 很可能是您的主要依赖项。所以如果你把它拿出来，你将从头开始。您谈论的所有插件都是页面加载的额外负担。越少越好，但有时仅仅为了重用其他功能（如 cookie 脚本、json 支持、polyfills 等）就可以得到回报……不胜枚举。尝试坚持使用一两个核心库，并明确区分依赖项和应用程序代码。
别忘了bundle and minify^^
重构愉快！
【讨论】：
$ 对象。 Modernizr 是我会以 0 为例的东西。您将其捆绑并缩小，所有额外的，仅在特定场合使用的东西都被动态包含，或者通过在头部放置脚本标签，或者通过 ajax 库加载或其他技术。