STIMULUS(一) —— 介绍

参考阅读: 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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值