1. 首页
  2. Laravel

Laravel刺激因素:一个适用于现有HTML的适度JavaScript框架

Basecamp的团队发布了一个新的Javascript框架(v1.0.0),名为Stimulus,从1月30日开始提供。Stimulus与一些更流行的前端JavaScript框架有很大的不同,它主张在HTML内容和行为之间更多地分离关注点:

Stimulus是一个雄心勃勃的JavaScript框架。与其他框架不同,stimulation不会接管应用程序的整个前端。相反,它旨在通过自动将元素连接到JavaScript对象来扩充HTML。

该文档解释了HTML行为和内容之间的分离是通过从HTML到JavaScript的data-controller来桥接的。

下面是一个简单的示例,我认为这很简单:

1<div>
2<input>
3<button>
4</div>

这里是hello控制器代码:

1// src/controllers/hello_controller.js
2import { Controller } from \"stimulus\"
3
4export default class extends Controller {
5greet() {
6console.log(\"Hello, Stimulus!\", this.element)
7}
8}

按钮属性就是这里的票证;您可以将值分解如下:

  • click是事件名称
  • hello是控制器标识符
  • greet是要调用的方法的名称
    • 我们可以将重要元素标记为目标以在控制器中引用它们:

      1<div>
      2<input>
      3<button>
      4</div>

      data-target是控制器名称和目标姓名。以下是如何在控制器中引用此值:

      1// src/controllers/hello_controller.js
      2import { Controller } from \"stimulus\"
      3
      4export default class extends Controller {
      5static>
      6
      7greet() {
      8const>
      9const>
      10console.log(`Hello, ${name}!`)
      11}
      12}

      由于这是一个JavaScript类,因此我们可以从namegetter中获益:

      1// src/controllers/hello_controller.js
      2import { Controller } from \"stimulus\"
      3
      4export default class extends Controller {
      5static>
      6
      7greet() {
      8console.log(`Hello, ${this.name}!`)
      9}
      10
      11get name() {
      12return this.nameTarget.value
      13}
      14}

      这些示例来自Hello刺激简介。stimulation还可以使用开箱即用的turbolink,这对于加速传统的服务器端应用程序非常有用。

      您应该查看安装指南和stimulation starter,开始使用框架。

      与Laravel一起使用stimulation,我还快速地开始尝试stimulation、turbolink和LaravelGitHub repository paulredmond/stimulus laravel演示。以下是我运行它所需的所有操作要点:

      1yarn add stimulus turbolinks
      2yarn add --dev babel-plugin-transform-class-properties

      将以下内容添加到项目根目录下的.babelrc文件中:

      1{
      2\"plugins\": [\"transform-class-properties\"],
      3\"presets\": [
      4[\"env\", { \"modules\": false }]
      5]
      6}

      下一步,创建一个resources/assets/js/controllers文件夹并替换resources/assets/js/app.js文件中的以下内容:

      1var>
      2Turbolinks.start()
      3
      4import { Application } from \"stimulus\"
      5import { definitionsFromContext } from \"stimulus/webpack-helpers\"
      6
      7const>
      8const>
      9application.load(definitionsFromContext(context))

      最后一个重要注意事项:

      Turbolinks需要位于HTML文档的<head>中。当您通过XHR获取文档后导航时,<body>会被替换,因此,脚本需要在<body>标记之外。

      所以只需在头部添加您的app.js文件,如下所示:

      1<head>
      2<!-- ... -->
      3<link>
      4<script>
      5</head>

      干杯!

Laravel刺激因素:一个适用于现有HTML的适度JavaScript框架 为WP2原创文章,链接:https://www.wp2.cn/laravel/laravel%e5%88%ba%e6%bf%80%e5%9b%a0%e7%b4%a0%ef%bc%9a%e4%b8%80%e4%b8%aa%e9%80%82%e7%94%a8%e4%ba%8e%e7%8e%b0%e6%9c%89html%e7%9a%84%e9%80%82%e5%ba%a6javascript%e6%a1%86%e6%9e%b6/

发表评论

您的电子邮箱地址不会被公开。