资讯专栏INFORMATION COLUMN

STIMULUS(一) —— 介绍

wind3110991 / 3413人阅读

摘要:参考阅读是一款拥有谦逊理想的框架。这是一个受欢迎的方案,比如当你六个月后返回一个模板不记得各种东西是如何组合在一起的时候。可读的代码,也意味着团队中的其他人也能通过阅读模版或者开发者控制台,来快速地追踪行为或判断问题。

参考阅读:https://chloerei.com/2018/02/...

Stimulus 是一款拥有谦逊理想的 JavaScript 框架。Stimulus 不会把你的应用程序整个搬到前端,它的设计理念是通过自动化将元素连接到 JavaScript 来你的 HTML。

将 HTML 连接到 JavaScript

Stimulus 的工作方式是不停地监控页面,等待 data-controller 这个魔法属性出现。例如class属性,你可以在它里面放入多个值。不同于应用或移除 CSS 类名,data-controller 的值是用于与 Stimulus 控制器相连接或断开连接的。
你可以这样认为:class 是连接 HTML 和 CSS 的桥梁,data-controller 是连接 HTLM 和 JavaScript 的桥梁。

在此基础上,Stimulus 拯救了魔法属性data-action,它描述了页面上的事件应该怎样触发控制器方法;还有魔法属性data-target,它为你提供了在控制器作用域(controller’s scope)中寻找元素的句柄(handle )。

关注点分离

Stimulus 的魔法属性让你清晰地将内容与行为分离,如同你使用 CSS 将内容与形式分离那样。此外,Stimulus 的自然约定也鼓励你按名称对相关联的代码进行分组。

这样的安排能帮助你构建可复用的,类似 trait 的控制器,为你的代码带来足够使用的结构层次,使之远离 “JavaScript 汤”。

可阅读的文档

当你的 JavaScript 行为是由魔法属性映射的,你可以阅读一段 HTML 便能知道发生了什么。这是一个受欢迎的方案,比如当你六个月后返回一个模板,不记得各种东西是如何组合在一起的时候。

可读的代码,也意味着团队中的其他人也能通过阅读模版或者开发者控制台,来快速地追踪行为或判断问题。

水是温暖的

现在是时候来探索一下 Stimulus 的工作方式了。继续阅读,学习如何构建你的第一个控制器。

Next: Hello, Stimulus

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100099.html

相关文章

  • STIMULUS(二) —— Hello, Stimulus

    摘要:每个项目都是从开始的,此项目也不例外。控制器为带来生命力作为其核心,的目标是自动将元素连接到对象。检查是否生效刷新页面,你会看到任何改变都没有。在中,处理事件的控制器方法叫做操作方法。这意味这我们拥有了标准的重构技术兵工厂。 学习 Stimulus 的最简单方式就是构建一个简单的控制器。这一章我们就来学习一个。 先决条件 要往下继续,你需要运行一个 stimulus-starter ,...

    bigdevil_s 评论0 收藏0
  • 前端开发者手册2019

    摘要:年,和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后,前端开发者可以从浏览器开发中学习到,编写代码不需要考虑浏览器引擎的限制。 前端开发者手册2019 Cody Lindley 编著 原文地址 本手册由Frontend Masters赞助,通过深入现代化的前端工程课程来提高你的技能。 下载:PDF ...

    church 评论0 收藏0
  • 前端开发者手册2019

    摘要:年,和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后,前端开发者可以从浏览器开发中学习到,编写代码不需要考虑浏览器引擎的限制。 前端开发者手册2019 Cody Lindley 编著 原文地址 本手册由Frontend Masters赞助,通过深入现代化的前端工程课程来提高你的技能。 下载:PDF ...

    xiao7cn 评论0 收藏0
  • 前端开发者手册2019

    摘要:年,和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后,前端开发者可以从浏览器开发中学习到,编写代码不需要考虑浏览器引擎的限制。 前端开发者手册2019 Cody Lindley 编著 原文地址 本手册由Frontend Masters赞助,通过深入现代化的前端工程课程来提高你的技能。 下载:PDF ...

    邹立鹏 评论0 收藏0
  • 自适应宽度元素单行文本省略用法探究

    摘要:单行文本省略和元素及其父元素的属性都无关元素或为元素内单行文本省略,需要给元素或为元素添加样式为元素的子元素如果是自适应宽度时,内的子元素实现单行文本省略,需要给添加样式单行文本省略是现代网页设计中非常常用的技术,几乎每个站点都会用到。单行文本省略适用于显示摘要信息的场景,如列表标题、文章摘要等。在响应式开发中,自适应宽度元素单行文本省略容易失效不起作用,对网页开发这造成困扰。因此,本文将要...

    K_B_Z 评论0 收藏0

发表评论

0条评论

wind3110991

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<