Those smart and clever folks at The Filament Group formally announced yet another useful tool yesterday: a “lightweight, simple DOM utility” they call Shoestring.
The Filament Group的那些聪明又聪明的人昨天正式宣布了另一个有用的工具：一个称为“ Shoestring ”的“轻巧，简单的DOM实用程序”。
I’ve been using Shoestring for awhile now, and I’m a huge fan. In fact it has become my go-to solution when I need such a tool. It’s small, powerful, and very, very smart.
我一直在使用SHOESTRING已有一段时间了，而且我非常喜欢。 实际上，当我需要这样的工具时，它已成为我的首选解决方案。 它很小，功能强大，而且非常非常聪明。
It’s very rare that I write about a specific tool. Tools come and go. However after talking so much about the importance of reducing JavaScript bloat, I figured I should take the time to explain a little about how I’m doing that myself. Shoestring has played a large role in that. In addition, Shoestring has made some really smart decisions that are worth noting regardless of whether the tool is a fit for you or not:
我很少写关于特定工具的文章。 工具来来去去 。 但是，在谈论了减少JavaScript膨胀 的重要性之后，我认为我应该花点时间来解释一下自己的做法。 鞋带起了很大的作用。 此外，无论该工具是否适合您，Shoestring都做出了一些非常明智的决定，这些值得注意：
在车轮上迭代 (Iterating on the wheel)
反对将另一个框架或实用程序放在一起的一个论点是，我们不应该重新发明轮子。 这不仅是要利用其他人所做的工作，而且还是要避免由另一种语法学习引起的中断。 Shoestring并没有像在轮子上反复迭代那样重塑轮子。jQuery is massively popular. In fact, it’s far easier to find information about how to solve a problem with jQuery than it is to find information about how to solve that same problem with plain old JavaScript.
jQuery非常流行。 实际上，查找有关如何使用jQuery解决问题的信息要比查找有关如何使用普通的旧JavaScript解决相同问题的信息容易得多。
As a results, its syntax is widely recognized and familiar to many. If you’re working on a re-build, it can also hard to escape the hold it has over existing systems and components.
结果，它的语法被许多人广泛认可和熟悉。 如果您正在进行重建，那么也很难摆脱对现有系统和组件的控制。
Shoestring is modeled after jQuery. That makes it a very comfortable transition for folks who have become very familiar with jQuery. Anything that works in Shoestring should also work in jQuery, and while it’s not guaranteed, I’ve found the opposite is often true as well.
Shoestring是根据jQuery建模的。 对于熟悉jQuery的人来说，这是一个非常舒适的过渡。 适用于Shoestring的所有内容也应适用于jQuery，尽管不能保证，但我发现相反的情况也常常成立。
允许智能默认 (Allowing smart defaults)
我过去曾写过关于 the importance of smart defaults. Jared Spool has talked about 智能默认值的重要性的文章 。 Jared Spool谈到 discovering only 5% of users changed the default Word settings. An academic study showed that you could get a huge 发现只有5％的用户更改了默认Word设置 。 一项学术研究表明，只需将默认选项设置为“是”而不是“否”，您就可以大大 increase in organ donors (an increase between 17-50%) simply by making the default option “Yes” instead of “No”. Point being, defaults matter because very few people will change them. 增加器官捐献者 (增加17-50％)。 重要的是，默认值很重要，因为很少有人会更改它们。Shoestring consists of a tiny core and three sets of extensions: DOM manipulation, events, and AJAX. Using the build tool, you can get very granular about what you do and don’t include and keep things as light as possible. Instead of rolling everything in all at once, it’s set up in a way that you can easily pick and choose as needed. Each extension lives on its own (ex: the after method).
Shoestring由一个微小的核心和三组扩展组成：DOM操作，事件和AJAX。 使用构建工具，您可以非常清楚地了解自己的工作，不包括并保持尽可能的轻巧。 无需一次全部滚动所有内容，而是以一种可以轻松根据需要进行选择的方式进行设置。 每个扩展都独立存在(例如： after方法 )。
我如何使用它 (How I’m using it)
尽管您可以随意使用所需的构建，但我一直在使用它的方式是从一组非常稀疏的扩展开始：require([
"shoestring",
"dollar",
"core/each",
"core/inarray",
"core/ready",
"events/bind"
]);As I code, I pull in additional extensions only as I find I need them. If I need to use some AJAX functionality, I drop the relevant extensions into the build and move along. The result is that only what is absolutely needed goes in.
在编写代码时，仅在发现需要扩展时才引入其他扩展。 如果需要使用某些AJAX功能，可以将相关扩展放入构建中并继续进行。 结果是只有绝对需要的东西才能进入。
There are other ways of doing this. You could look for used Shoestring extensions in your code and have a custom build automatically created based on that, for example. But I like the deliberateness that this “simple by default” approach enforces. It makes me think very carefully about every little piece of code that I’m adding to my project, consciously justifying its existence.
还有其他方法可以做到这一点。 例如，您可以在代码中寻找使用的Shoestring扩展，并基于该扩展自动创建自定义版本。 但是我喜欢这种“默认情况下简单”的方法所具有的审慎性。 这使我非常仔细地思考要添加到项目中的每一小段代码，有意识地证明其存在。
切芥末 (Cutting the Mustard)
Cutting the mustard is an incredibly valuable approach in its own right. By drawing a line in the sand between what a core and enhanced experience (and which browsers get each) you remove a lot of complexity and overhead from the process. Less capable browsers benefit from less code and overall bloat. Modern browsers benefit from no longer needed to carry around the extra baggage of endless polyfills and frameworks. Each browser gets what it needs to provide an experience fit for its capabilities, and very little more. 切芥末本身就是一种非常有价值的方法。 通过在核心体验和增强体验(以及哪些浏览器获得每种体验)之间划清界限，您可以消除流程中的许多复杂性和开销。 功能较低的浏览器将从更少的代码和总体膨胀中受益。 现代浏览器受益于不再需要随身携带无尽的polyfill和框架。 每个浏览器都能获得所需的功能，以提供适合其功能的体验，并且仅此而已。Since Shoestring expects browser to support querySelectorAll, one of the tests commonly used to determine what cuts the mustard and what doesn’t, the two compliment each other very nicely.
由于Shoestring希望浏览器支持querySelectorAll ，这是用于确定切芥末和不切芥末的常用测试之一，因此这两者非常好。
At the top of the page, I’ll do a check to see if the browser cuts the mustard. If it does, I’ll then asynchronously load in Shoestring and the rest of the JavaScript (using Filament’s tiny loadJS) to get things kicked off. It’s a snippet that probably looks familar to anyone who’s used a cutting-the-mustard approach themselves:
在页面顶部，我将检查浏览器是否切芥末。 如果是这样，那么我将异步加载Shoestring和其余JavaScript(使用Filament的微小的loadJS )以启动工作。 对于那些亲自使用芥末方法的人来说，这似乎是一个片段：
<script type="text/javascript">
window.myApp = {};
function loadJS(src,cb){...}
if ("querySelector" in document && "addEventListener" in window) {
window.myApp.cutsMustard = true;
document.documentElement.className += " mustard";
loadJS("main.js");
}
</script>Pairing Shoestring with a cutting the mustard approach ensures I’m safe to use Shoestring and benefit from its smaller file size. Cutting the mustard also means I’m a lot less reliant on polyfills and the like, helping keep the overall weight down and reducing the pain of maintenance and overall fragility of the site.
将Shoestring与切芥末方法配对可以确保我可以安全地使用Shoestring，并从较小的文件大小中受益。 减少芥末酱也意味着我不再需要使用polyfills之类的东西了，这有助于减轻整体重量，减轻维护现场的痛苦和整体脆弱性。
结果 (The results)
我对使用Shoestring的项目所获得的结果感到非常满意。 这是在应用gzip之后，我在Shoestring上使用的最后三个项目中使用JavaScript的总权重：- 8.6kb 8.6kb
- 11.8kb 11.8kb
- 9.5kb 9.5kb
That’s pretty tiny and goes a long way towards helping keep the overall weight, load time, and rendering time of the site down.
这非常小，有助于降低网站的整体重量，加载时间和渲染时间 。
Because the API is modeled after jQuery, the transition for has been virtually seamless for team members. And in situations where we stumble upon a legacy script that just can’t be re-written (say, for example, an ad loading script maintained by another team within an organization), switching to jQuery requires no more than a minute or two and results in no loss in productivity.
由于API是根据jQuery建模的，因此对于团队成员而言，过渡几乎是无缝的。 在偶然发现无法重写的旧脚本的情况下(例如，组织内另一个团队维护的广告加载脚本)，切换到jQuery所需的时间不超过一两分钟，并且不会导致生产力损失。
The Filament Group has released a ton of great tools, but this may be my personal favorite of the bunch. Even if you decide you can’t use Shoestring for your own projects, there is a lot to be learned from the approach.
Filament Group发布了很多很棒的工具，但这可能是我个人最喜欢的工具。 即使您决定不能在自己的项目中使用Shoestring，也可以从该方法中学到很多东西。
翻译自: https://timkadlec.com/2014/10/reducing-javascript-bloat-with-shoestring/
341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
