大型web应用程序倾向于积累大量支持前端和后端功能的库。我想减少依赖项的数量，以提高稳定性和易于维护。我正在寻找一个很好的路径来减少依赖的web应用程序，包括库，如:
- 引导
- CKEditor
- 选择/Select2
- jQuery +各种插件
- d3/拉斐尔
- SlickGrid
- 车把
- 强调
我正在寻找能够尽可能多地结合这些依赖关系的技术、语言或框架。
以下是我到目前为止所探索的内容:
重构小的依赖关系并删除未使用的部分可以有很长的路要走。
React将对jQuery面条式代码施加纪律，并减少对一些依赖项的需求。
Elm将在类型安全方面更进一步。
ClojureScript还将通过函数式编程范式强加纪律。
除了重构之外，为了与Ruby on Rails后端集成，所有这些潜在的解决方案都会引入一些额外的复杂性。React似乎为当前依赖提供了最多的替代。
最安全的方法似乎是从重构开始，逐步引入函数式语言或库之一。带着这个目标，我该如何重构呢?首先重构为纯JS(即删除jQuery)有用吗?
库/依赖项
通常，当我继承一个大型项目进行重构时，首先要做的是确定核心依赖项，例如，大多数自定义代码使用的主库是什么?从你的列表中，我已经可以告诉下划线和jQuery基本上试图做同样的事情。哪一个是最优化和最快的，多年来逐渐趋于平稳。让我们暂时假设Underscore仍然是最快的，您仍然依赖jQuery来遍历等等。你是否愿意包含一个额外的库来获得微速?在我看来，每个页面的额外负载是不值得的。
然后Bootstrap最有可能是你的主要CSS驱动程序，然而，它有一些JavaScript功能可能会被使用。旋转木马，日期选择器，下拉菜单，切换其他一些小部件…看看他们是否被使用(可能是)，如果没有，摆脱Bootstrap js库。请记住Bootstrap仍然依赖于jQuery。
selected/select是可选插件。他们的目标很可能在Bootstrap/jQuery中被涵盖。试着重构它们。
Slickgrid也是一个网格系统。与Bootstrap网格相比，它有什么好处?听起来他们重构了Bootstrap。如果使用它，重构到一个引导网格，以增加团队的共同知识。
车把用于模板。如果你使用逻辑运算符，它是有用的，否则你可以很容易地找到一个小的替代函数。
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 ready内联事件结束，试着只用一个ready事件来初始化项目所需的一切。
- jQuery +各种插件
- 引导
- 车把
CKEditor重构为延迟加载selected/Select2refactor to core libd3/Raphael重构为延迟加载SlickGridrefactor to core lib下划线重构为core lib
这里的想法是有一个实例或加载器文件与您的库对话。也许是在整个代码中使用的自定义函数文件(如果您愿意，可以保存下划线函数)。原型或"类"和单例来完成它。一篇关于重构的好文章，如果我可以添加如何设置的链接。现在，咕哝/吞咽设置并不是什么太花哨的东西。JS(npm, wer)和CSS(compass, less)的自动化可以在飞行中讨论。
结论jQuery很可能是你的主要依赖项。所以如果你把它拿出来，你将从头开始。你说的所有插件都是页面加载上的额外脂肪。越少越好，但有时重用其他功能是值得的，比如cookie脚本、json支持、polyfills……这样的例子不胜枚举。尽量使用一个或两个核心库，并清楚地分离依赖项和应用程序代码。别忘了压缩^^
重构快乐!