STIMULUS(二) —— Hello, Stimulus
学习 Stimulus 的最简单方式就是构建一个简单的控制器。这一章我们就来学习一个。
先决条件
要往下继续,你需要运行一个 stimulus-starter ,它是一个用于探索 Stimulus 的预配置骨架。
推荐使用 remixing stimulus-starter on Glitch ,这样就能完整地在浏览器里运行了,而且不需要再安装其他东西:
Remix on Glitch
或者,如果你喜欢使用自己的舒适的文本编辑器,您将需要克隆并设置stimulus-starter:
$ git clone https://github.com/stimulusjs/stimulus-starter.git
$ cd stimulus-starter
$ yarn install
$ yarn start请输入代码
然后在浏览器中访问 http://localhost:9000/
。
(注意 stimulus-starter 使用 Yarn 来管理依赖,你得先安装它。)
从 HTML 起步
我们从一个简单的练习开始:带按钮的文本域。点击按钮时,让文本域的值显示在控制台。
每个 Stimulus 项目都是从 HTML 开始的,此项目也不例外。编辑public/index.html
并在<body>
标签后面添加以下代码:
<div><input type="text"><button>Greet</button>
</div>
然后刷新页面,便能看到文本域和按钮了。
控制器为 HTML 带来生命力
作为其核心,Stimulus 的目标是自动将 DOM 元素连接到 JavaScript 对象。这些对象由控制器调用。
我们一起来通过拖拽框架内置的控制器类创建第一个控制器。在 src/controllers/
文件夹里创建一个hello_controller.js
文件。然后放入以下代码:
// src/controllers/hello_controller.js
import { Controller } from "stimulus"export default class extends Controller {
}
链接控制器和 DOM 的标识符
下一步,我们需要告诉 Stimulus 控制器应该怎样连接到 HTML。在 <div>
的 data-controller
属性中添加标识符即可:
<div data-controller="hello"><input type="text"><button>Greet</button>
</div>
标识符充当了元素和控制器之间的链接。在此例中,标识符hello
告诉 Stimulus 去hello_controller.js
创建一个控制器的实例。在安装指南中可以了解更多关于如何动态加载控制器。
检查是否生效
刷新页面,你会看到任何改变都没有。我们应该如何知道控制器有没有生效?
一种方式是在 connect()
方法中添加一个 log 状态,控制器链接到
HTML 时 Stimulus 就会触发它。
在 hello_controller.js
实现 connect()
方法:
// src/controllers/hello_controller.js
import { Controller } from "stimulus"export default class extends Controller {connect() {console.log("Hello, Stimulus!", this.element)}
}
刷新页面,你就能在控制台中看到Hello, Stimulus!
了。
Actions Respond to DOM Events
现在,我们看下,如何修改代码让 log 信息在点击“Greet”按钮时显示。
首先,将 connect()
重命名为 greet()
:
// src/controllers/hello_controller.js
import { Controller } from "stimulus"export default class extends Controller {greet() {console.log("Hello, Stimulus!", this.element)}
}
我们想要在按钮的点击事件触发时调用greet()
方法。在 Stimulus 中,处理事件的控制器方法叫做操作(action)方法。
将 action 方法连接到按钮的点击事件。public/index.html
并添加魔法属性data-action
到按钮上:
<div data-controller="hello"><input type="text"><button data-action="click->hello#greet">Greet</button>
</div>
操作描述符(action descriptor)解释
data-action
的值value click->hello#greet
被成为操作描述符。这里的意思是:
click
是事件名称hello
是控制器标识符greet
要调用的方法名刷新页面并打开开发者控制台。你就能在点击“Greet”按钮时看到 log 信息了。
将重要元素映射到控制器属性中
我们即将完成此次练习,修改 action 使其对我们输入到文本域里的任何名字都说 hello。
要实现它,首先我们需要在控制器中引用 input
元素。然后就能通过读取它的值获取输入的内容了。
Stimulus 让我们将重要元素标记为目标(target),然后我们就能轻松地在控制器中通过相应的属性引用这些元素了。打开public/index.html
添加魔法属性data-target
到 input
元素:
<div data-controller="hello"><input data-target="hello.name" type="text"><button data-action="click->hello#greet">Greet</button>
</div>
﹟目标描述符(Target Descriptors)解释
data-target
的值hello.name
被称为目标描述符. 这里的意思是:
hello
是控制器标识符name
是目标的名称
在我们将 name
添加到控制器的目标描述符列表中时,Stimulus 会自动创建一个this.nameTarget
属性,它会返回第一个匹配到的目标元素。我们可以使用这个属性读取元素的值并构建欢迎字符串。
我们来试试。打开hello_controller.js
然后这样修改:
// src/controllers/hello_controller.js
import { Controller } from "stimulus"export default class extends Controller {static targets = [ "name" ]greet() {const element = this.nameTargetconst name = element.valueconsole.log(`Hello, ${name}!`)}
}
然后刷新页面,打开控制塔。在输入框中输入你的名字,点击“Greet”按钮。Hello, world!
控制器简化重构
我们已经知道 Stimulus 控制器是 JavaScript 类的实例。该类的方法可以作为事件处理器使用。
这意味这我们拥有了标准的重构技术兵工厂。比如,我们可以通过提取name
getter 来清理 greet()
方法:
// src/controllers/hello_controller.js
import { Controller } from "stimulus"export default class extends Controller {static targets = [ "name" ]greet() {console.log(`Hello, ${this.name}!`)}get name() {return this.nameTarget.value}
}
总结和后续步骤
恭喜!你写出了你的第一个 Stimulus 控制器!
本文我们覆盖了该框架的核心概念:controllers, identifiers, actions, 和 targets。在下一章,我们将了解如何组件这些东西构建正儿八经的控制器,呃,像 Basecamp 那样。
Next: Building Something Real
STIMULUS(二) —— Hello, Stimulus相关推荐
- StarUML 系列,静态图与动态图,用例图,类图【ps:熟悉一下starUML】
大部分: 静态图部分,即静态不动的图 1.用例图, Use case diagram 1.展示系统核心功能及与其交互的用户ACTOR 表示:椭圆 sample1.sample2. 2.标准 使用s ...
- [SV]SystemVerilog Constraints(1)
SystemVerilog Constraints(1) 一.Soft Constraints SystemVerilog constraints declared with the keyword ...
- StarUML用户手册
StarUML用户手册 第一章 StarUML概述... 3 StarUML是什么... 3 适合用户的UML工具... 3 真正的UMD支持... 3 高可扩充及适应性... 3 ...
- 前端热门工具简直不要太好用了!
★★★★★ Web前端开发神器:点击查看→→ WebStorm安装与使用 今日送书!包邮!10本!(初来乍到,多多指教) <Bootstrap实战> <图解CSS3核心技术与案例实 ...
- 这50款前端热门工具简直不要太好用了!
来源 | IT智云编程 19年,又是新的一年,"前端届",又出了哪些新的"玩意",今天向你推荐目前比较热门新鲜度靠前的50款前端工具,希望在新的一年里,对你有所 ...
- StarUML使用指南
拷贝地址:http://wenku.baidu.com/view/79ead68483d049649b6658f9.html 第一章 StarUML概述 本章包含StarUML™概述,StarUML™ ...
- Psych101(part2)--Day2
学习笔记,有错必纠 学习书籍:<Psych 101>-- Paul Kleinman Psych 101 IVAN PAVLOV (1849-1936) The man who studi ...
- 目前IT行业最流行的九大前端框架
1. React React – A JavaScript library for building user interfaces React 是一个用于构建用户界面的 JavaScript 库.R ...
- 现流行的九大前端框架
目前流行的9大前端框架 1. React 2. Vue 3. Angular 4. Svelte 5. Alpine 6. Preact 7. LitElement 8. Stimulus 9. Em ...
最新文章
- FPGA设计中RAM的一些基本概念
- mysql问题定位_十、MySQL的SQL优化之定位SQL的问题 - 系统的撸一遍MySQL
- 前端学习(2374):技术栈的使用
- 启动activemq_「Java」 - SpringBoot amp; ActiveMQ
- 写shell工具类,一个常用实例
- 帧中继的基本配置(Basic FrameRealy)
- 【Luyten反编译工具】
- 基于统计语言模型的拼音输入法
- 理解VML||MKL
- 什么是嵌入式开发?嵌入式软件开发入门教程
- Python - 装机系列22 华擎A520+AMD 4650G + Ubuntu装新机过程
- 计算机 英文缩写含义,常见计算机英文缩写含义
- 掌银环境 和 微信浏览器 图片变形问题
- 三维计算机动画的制作软件,几款常用的三维动画设计软件介绍
- 抖音壁纸小程序怎么做?手把手教你开通流量主拥有自己的壁纸小程序
- 深度学习和目标检测系列教程 19-300:关于目标检测AP、IoU和mAP简介
- js 求最接近5的倍数的值
- 认识c语言程序,C语言基础-认识C语言
- 一款好用、免费的电子签名在线编辑工具【电子签名工具】
- OpenGL扩展库基本介绍以及配置(搜集)
热门文章
- Linux下安装、查看、删除软件包
- ale插件 vim_Vim之代码异步检测插件 ALE -- 实时检查verilog等代码的正确性
- vga显卡下载 linux,下载:NVIDIA显卡Linux驱动190.53正式版
- python 输出引号_python输出字符串单双引号如何选择
- batocera游戏整合包_星露谷物语绅士mod整合包
- 服务器不重启磁盘修复,重启后数据盘不见了?别担心,只是磁盘脱机
- windows 改变文件大小 函数_手写 bind call apply 方法 与 实现节流防抖函数
- 附件文件无法保存到服务器,可能是目录属性设置问题,请与管理员联系,Discuz不能上传过大文件的解决办法...
- win10千万不要重置_DELL戴尔电脑WIN10升级后没有声音
- 荣耀x10max鸿蒙,黄石收购荣耀X10Max指纹键电池背光喇叭