jquery - 图像滑块的逻辑会是 jQuery“模式”吗？

Question

我想做一些类似于图像滑块的东西。进入滑块的相同逻辑是我非常需要的东西。我知道存在一百万个插件和教程，但我想要的是从基本的 jQuery 模式中学习，如“滑块”或“手风琴”，而没有任何绒毛。我想查看非常基本的 jQuery 模式来学习。

在JavaScript 模式集合中找到的模式之一会是我正在寻找的吗？

Answer 1

我不会将滑块功能称为模式，它更像是一种技巧.. jQuery 的模式确实有限（与 js 它本身.. 或其他语言相比，尽管 jQuery 不被视为一种语言，因为它是一种衍生语言js的工作）

现在 jQuery 的模式（或者在大多数情况下是所有模式）只是一种代码组织方式和代码技巧..

插件创作存在 jQuery 模式...您可以查看这篇文章，或阅读代码并在jQuery Boilerplate上进行大量评论。

回到您的问题，没有与核心功能相关的模式供您使用，但是您可以使用一个来组织并在将来拥有更好的可扩展代码。

Answer 2

图像滑块中没有足够的逻辑来保证正确的软件设计模式。

查看您的链接，其中许多不是模式，而只是对您可以在 javascript 中执行的操作的描述

对于图像滑块本身，让我们从两个组件中查看它：

用户交互组件：按钮（上一个，下一个）或滑块

图片组件：显示当前选中的图片

您真正需要做的就是存储当前选定图像的索引，并在选择该图像时查找将图像滑块滑动到的 x 位置。

这是一个粗略的例子：

http://jsfiddle.net/mattdlockyer/bNnEw/

你会看到它一开始主要是一个功能循环，它完成所有的腿部工作并存储正确的索引以滑动#imagesdiv 以使用 jQuery 中的 animate 函数。当用户与按钮交互时调用它，但当滑块触发它的滑动事件时也可以很容易地调用它。有关滑块的更多信息，请参见此处：http: //jqueryui.com/slider/

就我个人而言，我会采用所有这些函数式编程并将其放入适当的 javascript 模块中。查看此链接，了解如何使用模块模式的一个很好的示例：http: //www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

基本上，仅图像滑块的概念并不能保证模式，但是将其包装在一个模块中以便它可以重复使用，甚至可能在同一页面上多次使用，绝对值得做。

Javascript 是一种函数式语言，有很多“模式”可以编写干净、可移植的函数式代码，但恕我直言，它们并不等同于 OOP 设计模式。

享受小提琴，希望这对您的 javascripting 冒险有所帮助。