开源项目精选: HTML控制框架Stimulus

这篇文章介绍 Stimulus 框架,希望更多的前端工程师可以从中得到启发。

Stimulus是什么

开源项目精选: HTML控制框架Stimulus

Stimulus 是一款炫酷有趣的针对 HTML 的 JavaScript 框架。它可以让你的 HTML 更加闪耀。

如何使用Stimulus

  1. 安装 Stimulus,可以通过 webpack 将 stimulus 加入 bundle 中或直接在<script>标签中加载stimulus.umd.js:
  2. 若要尝试使用 stimulus,可以运行作者提供的 stimulus-starter。使用方法:
    1. 通过 git 加载 stimulus-starter:

      完成后就可以在本地编辑,在 http://localhost:9000/ 查看效果 。
    2. 在 Glitch 上在线编辑,免去安装的过程。
  3. 使用范例:

在 html 文件中加入:

编写控制器:

通过 data-controller 连接控制器 hello_controller。

通过 data-target=”hello.name” 使得控制器可以通过 name 访问 <input> 的输入。

通过 data-action=”click->hello#greet” 执行控制器中 greet 函数。

通过 this.targets.find() 可以获取匹配到的元素。

 

运行效果:

开源项目精选: HTML控制框架Stimulus

为何要用Stimulus

  1. 它通过增加一些效果,使网页看起来更加炫酷。它并不想接管整个前端,相反,它的设计是为了让 HTML 有足够多的行为。这其实是一个普遍的 JavaScript 的思想。
  2. 重要的是,此框架可以与作者的另一个“单页”应用JS客户端框架 Turbolinks 配合的很好。这实现了让web应用可以在移动端达到原生应用的体验。Stimulus是在SPA即单页面应用程序激增的现在应运而生的一个JS框架。
  3. Stimulus 计划将最佳模式汇集到一个适度的小型框架中,围绕三个主要概念:控制,目标,和动作属性。
  4. Stimulus 可以不断刷新页面,只要属性出现或者消失,就会进入页面它适用于DOM的任何更新,无论是整页加载,Turbolinks 页面更改还是Ajax请求。
  5. 上手真的很快,开发者只需要根据 Stimulus 手册花费五分钟就可以写一个控制器。

SPA(单页应用程序)

顾名思义,单页 web 应用就是只有一张 web 界面的应用,是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的web应用程序。

优点:主要体现在速度上,它可以给用户更好的使用体验,让用户在 web APP 感受原生 APP 的速度和流畅。

它快的秘诀在于它同时减少了下载资源的大小(除去第一次加载模板后,后续全部使用 JSON API ),以及极大提高了解析资源的速度(通过 JSON 数据就能更新页面)。

使用Stimulus不得不知Turbolinks

Turbolinks 可以在不增加客户端JS框架的复杂性的情况下,获得单页应用程序的性能优势,使用HTML在服务器端呈现您的视图。当 Turbolinks 自动获取网页,不会招致全页面加载的成本。

开源项目精选: HTML控制框架Stimulus

关于作者

Javan Makhmail:供职于 Basecamp,专研于前端开发,网页制作。不仅是 Stimulus,他还有许多的开源项目制作。

开源项目精选: HTML控制框架Stimulus

个人主页:  GitHub  Twitter