博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
通过XStyle通过AMD加载CSS文件
阅读量:2515 次
发布时间:2019-05-11

本文共 2325 字,大约阅读时间需要 7 分钟。

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!

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 . With curl.js, all you need to do to load a CSS file is:

因此,请考虑使用出色JavaScript加载程序,例如 使用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,我们可以定义完整的组件,样式表以及所有内容!

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的功能比我上面介绍的要强大得多,但是仅将样式表与给定模块的其他所有部分一起加载的能力是无价的。 提高组织和编码速度; 克里斯做得好!

 

翻译自:

转载地址:http://luvwd.baihongyu.com/

你可能感兴趣的文章
【2】oracle创建表空间
查看>>
剑指offer-二叉树中和为某一值的路径
查看>>
Java反射机制
查看>>
Python 正则表达式
查看>>
C++ AppendMenu
查看>>
在所选中的物体中取消选中一些物体.txt
查看>>
grid - 网格项目跨行或跨列
查看>>
Shell 基本运算符
查看>>
2019年2月
查看>>
Google Noto Sans CJK 字体
查看>>
ES集群性能调优链接汇总
查看>>
STL库的应用
查看>>
spark算子
查看>>
(转)Linux服务器SNMP常用OID
查看>>
zoj2112 主席树动态第k大 ( 参考资料链接)
查看>>
弹出框popupWindow
查看>>
Python学习(007)-函数的特性
查看>>
扑克牌的顺子
查看>>
nodejs + express 热更新
查看>>
ClientScriptManager.RegisterClientScriptBlock Method 无效
查看>>