通过XStyle通过AMD加载CSS文件

AMD loaders are letting us load just about anything: AMD modules, basic JavaScript files (from any origin), text-based files (HTML templates, for example), and more. Unfortunately most loaders don't have CSS loading capabilities, most likely because "onLoad"-style events aren't provided by all browsers for stylesheets. Luckily my SitePen colleague Kris Zyp has created XStyle, an AMD package available to AMD loaders for reliable stylesheet loading. Let's take a brief look at XStyle!

AMD加载器使我们几乎可以加载任何东西：AMD模块，基本JavaScript文件(来自任何来源)，基于文本的文件(例如HTML模板)等等。 不幸的是，大多数加载程序没有CSS加载功能，这很可能是因为并非所有浏览器都为样式表提供“ onLoad”样式的事件。 幸运的是，我的SitePen同事Kris Zyp创建了XStyle，这是AMD加载程序可以使用的AMD软件包，用于可靠地加载样式表。 让我们简要看看XStyle！

View Demo 观看演示

In fairness to XStyle, it's more than just an AMD plugin for loading stylesheets. XStyle provides the capability to:

为了公平起见，XStyle不仅仅是一个用于加载样式表的AMD插件。 XStyle提供以下功能：

• Shim and extend CSS
  填充和扩展CSS
• Load stylesheets and execute callbacks
  加载样式表并执行回调
• Nested @import loading
  嵌套@import加载

Shimming and extending CSS is great but doesn't seem to be something I would need often; loading CSS with JavaScript modules is nice because:

填充和扩展CSS很棒，但似乎并不是我经常需要的东西。 用JavaScript模块加载CSS很不错，因为：

1. Loading modules and templates together but needing to add LINK tags manually sucks
   一起加载模块和模板，但是需要手动添加LINK标签

2. One define() to define a complete widget from JS, to template, and CSS, is ideal; especially for third party components

   一个定义从JS到模板以及CSS的完整小部件的define()是理想的； 特别是对于第三方组件

So consider a great JavaScript loader like curl.js. With curl.js, all you need to do to load a CSS file is:

因此，请考虑使用出色JavaScript加载程序，例如curl.js。 使用curl.js，加载CSS文件所需要做的就是：

curl(["css!path/to/file.css"], function() {
    // defineCSS loaded, do stuff!
});

Sweet, right? With a different loader, you can load your CSS files with other modules by coding:

亲爱的，对吗？ 使用其他加载器，您可以通过编码将CSS文件与其他模块一起加载：

define(["xstyle!./path/to/file.css"], function(){
    // module starts after css is loaded
});

Outstanding! With XStyle we can define a complete component, stylesheet and all!

优秀！ 借助XStyle，我们可以定义完整的组件，样式表以及所有内容！

View Demo 观看演示

XStyle is capable of much more than what I've presented above, but just the ability to load stylesheets with every other piece of a given module is priceless. Improves organization and speed of coding; well done Kris!

XStyle的功能比我上面介绍的要强大得多，但是仅将样式表与给定模块的其他所有部分一起加载的能力是无价的。 提高组织和编码速度； 克里斯做得好！

 

翻译自: https://davidwalsh.name/amd-xstyle