尝试将这个 jQuery slideShow 插件变成一个简洁的模块化 "module"
Trying turn this jQuery slideShow plugin into a neat and modular "module"
我制作了一个幻灯片 jQuery 插件 $.fn.slideShow
,它的工作原理如下:
.slideShow(int transitionDelay, string transtionType, string slideTag)
如您所想,int 或 string keywords 不存在于javaScript,我只是把它们放在那里为每个 参数指定 数据类型 。 第一个必要的参数是(以毫秒为单位)每张幻灯片的延迟 AKA 转换延迟。第二个参数是可选的。它指定转换类型(默认值:正常 AKA 无转换)。可能的输入是 push、normal/no-transition 和 fade;这是每张幻灯片的不同过渡动画。第三个也是最后一个参数指定幻灯片包含的 HTML 标签(默认值:li)。此幻灯片显示在提供给插件的选择器中。现在您对我的插件的功能有了基本的了解,让我们谈谈问题。
你看,实际上有两种主要的方法来编写代码。一种是把它弄得乱七八糟,没人看得懂,另一种是把它弄得整整齐齐,模块化。但是要使代码整洁和模块打包并不容易;因为您需要想出最可重用和可循环的方式来存储变量,以及更多 'modularize' 代码的方式。
显然,我不知道在这种情况下如何模块化我的代码。我到处都有大量的全局变量,许多重新声明的变量等。在我的情况下,这将是最好的方法 (不是基于意见条款或偏好,而是基于真实的事实和性能) 将这样的 jQuery 插件变成功能齐全的模块?使用诸如 IIFE 之类的模块化模式会有帮助吗?我也见过模块化接口,例如 browsify,但我不太确定 是 开始或至少 如何 做所以。
在更高级别上,性能辩论可能会变成一个主要是学术活动,有很多分歧。我建议采用您理解的模块化插件模式,并且可以以您可以解释的方式构建,这样读者就可以适应。
会推荐 https://toddmotto.com/mastering-the-module-pattern/ as a better explanation of a modular pattern than I could provide here, coupled with a more extensive overview here: https://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns
其他模式方法在这里:https://www.viget.com/articles/jquery-plugin-patterns。评论更具体的代码可能更容易 example/query
我制作了一个幻灯片 jQuery 插件 $.fn.slideShow
,它的工作原理如下:
.slideShow(int transitionDelay, string transtionType, string slideTag)
如您所想,int 或 string keywords 不存在于javaScript,我只是把它们放在那里为每个 参数指定 数据类型 。 第一个必要的参数是(以毫秒为单位)每张幻灯片的延迟 AKA 转换延迟。第二个参数是可选的。它指定转换类型(默认值:正常 AKA 无转换)。可能的输入是 push、normal/no-transition 和 fade;这是每张幻灯片的不同过渡动画。第三个也是最后一个参数指定幻灯片包含的 HTML 标签(默认值:li)。此幻灯片显示在提供给插件的选择器中。现在您对我的插件的功能有了基本的了解,让我们谈谈问题。
你看,实际上有两种主要的方法来编写代码。一种是把它弄得乱七八糟,没人看得懂,另一种是把它弄得整整齐齐,模块化。但是要使代码整洁和模块打包并不容易;因为您需要想出最可重用和可循环的方式来存储变量,以及更多 'modularize' 代码的方式。
显然,我不知道在这种情况下如何模块化我的代码。我到处都有大量的全局变量,许多重新声明的变量等。在我的情况下,这将是最好的方法 (不是基于意见条款或偏好,而是基于真实的事实和性能) 将这样的 jQuery 插件变成功能齐全的模块?使用诸如 IIFE 之类的模块化模式会有帮助吗?我也见过模块化接口,例如 browsify,但我不太确定 是 开始或至少 如何 做所以。
在更高级别上,性能辩论可能会变成一个主要是学术活动,有很多分歧。我建议采用您理解的模块化插件模式,并且可以以您可以解释的方式构建,这样读者就可以适应。 会推荐 https://toddmotto.com/mastering-the-module-pattern/ as a better explanation of a modular pattern than I could provide here, coupled with a more extensive overview here: https://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns
其他模式方法在这里:https://www.viget.com/articles/jquery-plugin-patterns。评论更具体的代码可能更容易 example/query