|
Post by account_disabled on Jan 3, 2024 5:22:02 GMT -4
这是因为在我们拥有整个 包之前它不会出现。在大型应用程序中,形成不同的块并将它们分开非常重要。单个组件的依赖关系越少越好 和 CSS 是我们客户端 JavaScript视图的硬依赖项。没有它们,我们就无法真正显示内容。将它们分组在一个地方可以降低我们项目的复杂性。 基于这些结论,我开始编写 CSSX 客户端库。 认识 库 要使CSSX 库可用,请在页面上包含cssxminjsnpm install cssx文件,或者通过运行来安装 npm 模块。如果您有构建过程,那么您可能会对 npm 包感兴趣。 GitHub 上提供了在线演示。您可以在那里看到 的实际应用。 (需要 CSSX 客户端库,以便在运行时注入 CSSX。稍后,我们将看到需要。 哪些其他模块来支持普通 CSS 语法。在那之前,让我们关注纯 JavaScript API。) 下面是一个非常基本的示例,其中注册了一个规则: ; 复制 如果我们在浏览器中运行它,我们会看到style文档头部注入了一个新标签: <> 复制 该add方法接受选择器和 CSS 属性作为对象文字。这可行,但它是静态声明。在 中这样做几乎没有任何好处。我们可以轻松地将这些样式放入外部 CSS 文件中。让我们将代码转换为以下内容:复制 现在还有另一件事。我们现在 Whatsapp 号码列表 可以动态更改字体大小。上面代码的结果是这样的:复制 因此,用 编写 CSS 现在变成了对象文字的组合。我们可以使用 JavaScript 语言的所有功能来构建它们。默认情况下,定义变量、使用工厂函数。 和扩展基类等简单的事情都在这里。封装性、可重用性、模块化——我们免费获得所有这些东西。 CSSX 库有一个极简的 API,主要是因为 JavaScript 非常灵活 的组成留给开发人员。公开的功能围绕实际样式的生成。例如,在编写 CSS 时,我们倾向于创建组。其中一些组是由布局结构(页眉、侧边栏和页脚的样式)形成的。以下是如何使用 CSSX 规则对象来确定样式范围:直写下去会很烦人;所以,d存在一条捷径。 我们还有另一种类似的方—— 。该库不会链接选择器,而是嵌套定义。这是一个例子: 复制 该 API 可用于创建媒体查询或keyframes定义。理论上,这足以产生类似 Sass 的输出。还有一个n快捷方式,而不是nested 到目前为止,我们已经了解了如何生成在运行时应用于页面的有效 CSS。然而,编写这样的样式需要花费大量时间,而且即使我们的代码具有良好的结构,它也不像编写普通 CSS 那样好。 具有挑战性的部分:JavaScript 中的实际 CSS 语法 正如我。
|
|