Logo

菜单

发布于 2026-01-05 2 阅读
0

Svelte 入门 🦄⚡️🧡 为什么还要学另一个框架？🤦‍♂️🤦‍♀️ 下载应用，开始玩井字棋吧！

Svelte 简介 🦄⚡️🧡

为什么还要学另一个框架？🤦‍♂️🤦‍♀️

下载应用并开始运行

井字棋

为什么还要学另一个框架？🤦‍♂️🤦‍♀️

如果你已经对市面上大量的前端框架及其各种变体感到担忧，为什么还要再增加一个框架呢？

Angular、ReactJS 或 VueJS 等框架让应用程序的快速搭建变得更加容易，团队协作也能更高效地开发出更强大的应用程序。

他们改变了我们设计、开发和交付应用程序的方式。

越来越多的框架不断完善，使得开发简单、快速、高效的应用程序变得更加容易。

Angular ❤️

Angular 是一个完整的工具包，但它很臃肿。

React 💙

React 是一个view only库，virtual DOM但它使用起来很复杂。

Vue 💚

VueJS 编写简单，并且融合了 React 和 Angular 的优点。

苗条🧡

Svelte 是一种构建用户界面的新方法。Svelte 没有虚拟 DOM。

Svelte 可以让你编写更少的代码uses the platform。

Svelte 没有虚拟 DOM，并且uses the platform。

Svelte 在构建过程中优化应用程序，从而提高应用程序的性能。

下载应用并开始运行

枯燥的框架介绍就到此为止，让我们开始编码吧。

从哪里开始呢？

“你好世界”

npx degit sveltejs/template hello-world
cd hello-world
Enter fullscreen mode Exit fullscreen mode

您已从 [此处应填写来源] 克隆了一个模板sveltejs/template。现在安装依赖项并启动服务器。

npm i
npm run dev
Enter fullscreen mode Exit fullscreen mode

你应该看到一个简单的应用程序在localhost:5000Hello World上运行。

让我们深入了解一下，看看会产生什么结果。

组件Svelte定义在.svelte文件中。生成的应用程序具有App.svelte.

组件Svelte本质上就是一个简单的HTML文件。所有 Svelte 组件都可以包含以下三个部分：

  • 脚本 - 用于定义 JavaScript
  • 样式 - 用于定义 CSS
  • 纯 HTML——仅包含您的 HTML 和 Svelte 元素

如果您使用过上面列出的任何框架，那么您可能知道它们是什么props。

Props是你传递给它的属性Components。

export let name标签内的内容script表示该元素name是从组件导出的，我们可以通过属性将信息传递给它。

连接props到组件的部件将首先exported从组件中取出。

<script>
        export let name;
</script>

<style>
        h1 {
                color: purple;
        }
</style>
Enter fullscreen mode Exit fullscreen mode

组件内部定义的任何变量（包括 props）<script>都可以使用HTML component`with`{variable_name}语句。`with`{}用于定义标签中定义的值script。

<h1>Hello {name}!</h1>
Enter fullscreen mode Exit fullscreen mode

应用程序从这里开始main.js。我们导入App.svelte（App组件定义的地方）。

import App from './App.svelte';
Enter fullscreen mode Exit fullscreen mode

然后我们从导入的App组件创建一个 App 对象。接着我们定义该对象target，并将其传递props给组件的构造函数。

它target定义了组件在 HTML 文档中的渲染位置。

这里props我们将定义属性。

const app = new App({
        target: document.body,
        props: {
                name: 'world'
        }
});
Enter fullscreen mode Exit fullscreen mode

app最后，从中导出main.js。

export default app;
Enter fullscreen mode Exit fullscreen mode

还有一个rollup.config.js负责打包和构建应用程序的组件。

import App from './App.svelte';
Enter fullscreen mode Exit fullscreen mode

想要更简洁的版本，请 fork 此分支。codesandbox

井字棋

Tic Tac Toe让我们用 React（官方）示例中的经典示例来重新创建它Svelte。

创建一个 components 文件夹，我们将在这里定义Svelte除 . 之外的所有组件App.svelte。

我们需要以下组件：

  • Square.svelte- 井字棋中的每个方格都是一个独立的svelte组成部分。
  • Board.svelte- 棋盘组件将包含所有方块组件。该组件负责将数据传递给其子square组件，并判断游戏是否仍在进行中或已结束。
  • Game.svelte- Game 组件是对组件的总体封装Board。

我们首先来创建Game.svelte组件。游戏组件将承载该Board组件。

<div class="game">
    <Board />
</div>
Enter fullscreen mode Exit fullscreen mode

现在我们需要导入该Board组件。

<script> 
    import Board from './Board.svelte';
</script>
Enter fullscreen mode Exit fullscreen mode

让我们稍微装饰一下电路板。

<style>
.game {
    display: flex;
    flex-direction: row;
}
</style>
Enter fullscreen mode Exit fullscreen mode

棋盘组件将由三行三列组成。

<div class="board-row">
    <Square />
    <Square />
    <Square />
</div>
<div class="board-row">
    <Square />
    <Square />
    <Square />
</div>
<div class="board-row">
    <Square />
    <Square />
    <Square />
</div>
Enter fullscreen mode Exit fullscreen mode

我们需要Square在该<script>部分导入组件。

<script>
import Square from './Square.svelte';
</script>
Enter fullscreen mode Exit fullscreen mode

让我们稍微修饰一下它们。

<style>
.board-row:after {
    clear: both;
    content: "";
    display: table;
}
</style>
Enter fullscreen mode Exit fullscreen mode

然后我们将定义Square内部的组件Square.svelte。

<style>
 .square {
    background: #fff;
    border: 1px solid #999;
    float: left;
    font-size: 24px;
    font-weight: bold;
    line-height: 34px;
    height: 34px;
    margin-right: -1px;
    margin-top: -1px;
    padding: 0;
    text-align: center;
    width: 34px;
  }

 .square:focus {
    outline: none;
 }

 .square:focus {
    background: #ddd;
 }
</style>

<script>
let value = "";
</script>

<button class="square"> {value} </button>
Enter fullscreen mode Exit fullscreen mode

我们在元素内部定义value并使用了它button。

点击按钮后，该值应该变为X。我们将使用on:click事件处理程序。

<button class="square" on:click={() => handleClick}> {value} </button>
Enter fullscreen mode Exit fullscreen mode

事件处理程序Svelte已定义on:<event>。

让我们来定义标签handleClick内部的内容<script>。

function handleClick() {
   value = 'X';
}
Enter fullscreen mode Exit fullscreen mode

现在点击按钮，你应该会看到按钮的值变成了X。

没有this复杂的绑定，只有简单的变量声明和修改。

在子组件中维护状态并将其传递给父组件并非易事。我们可以将状态移至父组件，然后由父组件决定如何维护子组件。为此，我们需要修改组件，并通过该组件Board传递状态value和事件处理程序。on:clickBoard

让我们考虑一下这on:click两个value组件。propSquare

<script> 
export let value; 
export let handleClick;
</script>

<button class="square" on:click={handleClick}> {value} </button>
Enter fullscreen mode Exit fullscreen mode

现在我们将修改Board组件。我们将不再逐个定义组件，而是Board定义一个数组squares并使用它。

<script>
    let squares = Array(9).fill('');
</script>
Enter fullscreen mode Exit fullscreen mode

并将 HTML 更改为

  <div class="board-row">
    <Square value={squares[0]} handleClick={() => handleClick(0)}/>
    <Square value={squares[1]} handleClick={() => handleClick(1)}/>
    <Square value={squares[2]} handleClick={() => handleClick(2)}/>
  </div>

  <div class="board-row">
    <Square value={squares[3]} handleClick={() => handleClick(3)} />
    <Square value={squares[4]} handleClick={() => handleClick(4)} />
    <Square value={squares[5]} handleClick={() => handleClick(5)} />
  </div>


  <div class="board-row">
    <Square value={squares[6]} handleClick={() => handleClick(6)} />
    <Square value={squares[7]} handleClick={() => handleClick(7)} />
    <Square value={squares[8]} handleClick={() => handleClick(8)} />
  </div>
Enter fullscreen mode Exit fullscreen mode

我们还需要定义该handleClick方法。

function handleClick(i) {
    squares[i] = 'X';
}
Enter fullscreen mode Exit fullscreen mode

👏 恭喜，太棒了！让我们一起打造真正的游戏吧！

游戏采用交替进行的方式，即一名玩家标记X，另一名玩家标记O。让我们在Board组件中添加此条件。

<!-- Board.svelte -->
let isXTurn = true;

function handleClick(i) {
   squares[i] = isXTurn ? 'X' : 'O';
   isXTurn = !isXTurn;
}
Enter fullscreen mode Exit fullscreen mode

好，现在我们得计算出获胜者。

function calculateWinner(squares) {
    const lines = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6]
    ];
    for (let i = 0; i < lines.length; i++) {
      const [a, b, c] = lines[i];
      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
        return squares[a];
      }
    }
    return null;
}
Enter fullscreen mode Exit fullscreen mode

上述函数将返回一个真值X（O如果有获胜者），否则返回一个假值null。

每次用户点击方格时，我们都需要进行检查。此外，一旦玩家点击某个方格，我们就不应该允许对该方格进行任何其他点击。

function handleClick(i) {
    if (calculateWinner(squares) || squares[i] !== '') {
      return;
    }
   squares[i] = isXTurn ? 'X' : 'O';
   isXTurn = !isXTurn;
}
Enter fullscreen mode Exit fullscreen mode

我们需要向玩家显示游戏状态。游戏状态信息是动态的，也就是说它会不断变化，因此需要有人监听并及时更新显示内容。

在 React 世界中，我们会使用 ` state.`。在 Svelte 中，我们使用 `.` 将组件绑定在一起$。这些值将会更新。

$: winner = calculateWinner(squares)

$: status =  winner ? "Winner: " + winner :"Next player:" + (xIsNext ? "X" : "O");
Enter fullscreen mode Exit fullscreen mode

我们将使用内部的状态HTML。


 <div class="status"> {status} </div>

<style>
.status {
    margin-bottom: 10px;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

现在，每当状态发生变化时，状态都会重新计算。

Svelte 组件简洁精简，没有额外的样板代码，this而且与平台更加贴近。事实上，它们非常简单HTML。

查看Svelte 示例网站，获取更多精彩演示。

更多信息请查看此处的文档。

我们将继续进行更深入的教程Svelte。

如果你喜欢这篇文章，请点赞或留言。❤️

如果您觉得文章中有什么错误或遗漏，欢迎留言评论 :)

你可以在推特上关注我。

文章来源：https://dev.to/sendilkumarn/intro-to-svelte-460b
CSS：placeholder-s...
Hacktoberfest 即将在...