什么是 sammy.js？
sammy.js 是一个小型但功能强大的前端框架，它允许您创建单页应用程序 (SPA)。与其他框架不同，sammy.js 的核心特点是其路由系统。使用 sammy.js，您可以轻松定义路由和处理器，以及动态地更改页面内容。
如何安装 sammy.js？
sammy.js 可以通过 npm 安装：
npm install sammy
或者，您可以将以下代码添加到 HTML 文件中：
<script src="https://cdnjs.cloudflare.com/ajax/libs/sammy.js/0.7.6/sammy.min.js"></script>
如何使用 sammy.js？
首先，我们需要创建一个应用程序实例并定义路由。以下是一个简单的示例：
var app = Sammy("#main", function() {
this.get("#/", function(context) {
context.app.swap("Hello World!");
});
});这个应用程序实例绑定到 ID 为 main 的 DOM 元素上，并定义了一个基本路由 /，当用户访问网站时，它会把 Hello World! 显示在 main 元素中。
除了基本路由之外，我们还可以使用参数来定义变量路由。以下是一个示例：
var app = Sammy("#main", function() {
this.get("#/users/:id", function(context) {
var userID = context.params.id;
context.app.swap("Hello user #" + userID + "!");
});
});在这个示例中，当用户访问 /users/1 时，会显示 Hello user #1!，访问 /users/2 时则会显示 Hello user #2!。
sammy.js 的深度和学习意义
sammy.js 不仅可以帮助我们快速地创建 SPA 应用程序，还可以帮助我们更好地组织代码，并使代码更易于阅读和维护。此外，由于 sammy.js 是基于 jQuery 的，因此您可以轻松地与其他 jQuery 插件集成。
最重要的是，学习 sammy.js 可以帮助我们更好地理解前端路由系统的原理和实现方式，这对于学习其他前端框架和库也大有裨益。
示例代码
以下示例演示了如何使用 sammy.js 来获取和显示 GitHub 用户信息：
-- -------------------- ---- -------
--- --- - -------------- ---------- -
----------------------------- ----------------- -
--- -------- - ------------------------
----------------------------------------- - --------- -------------- -
--- ---- - ------ - --------- - --------
---- -- ----- ------ - --------------- - -- ----
---- -- ----- - -------- - -------
-----------------------
---
---
---
------------ -
---------------------------
---在这个示例中，当用户访问 /users/octocat 时，应用程序会获取 GitHub 用户名为 octocat 的信息，并在页面中显示用户的姓名、头像和个人简介。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33889