本文由Craig Bilner进行了同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态!
jQuery的无处不在,仍然在Web开发领域中发挥着至关重要的作用。 定期使用它并不奇怪,尤其是在使用Ember之类的框架时。 该框架具有与jQuery插件类似的组件,因为它们都被设计为对您的项目负有单一责任。
在本文中,我们将开发一个简单的Ember组件。 本教程将展示如何将jQuery插件集成到Ember应用程序中。 该组件充当插件的包装器,该插件显示图片缩略图列表。 每当我们单击缩略图时,它将在图片预览器中显示它的较大版本。 通过提取单击的缩略图的src
属性来工作。 然后,我们将预览器的src
属性设置为缩略图的属性。 可以在GitHub上找到本文的完整代码 。
考虑到这一点,让我们开始进行该项目。
设置项目
首先,让我们创建一个新的Ember项目。 首先,在CLI上执行以下命令:
npm install -g ember-cli
完成后,可以通过运行以下命令创建项目:
ember new emberjquery
这将在名为emberjquery
的文件夹中创建一个新项目,并安装所需的依赖项。 现在,通过写cd emberjquery
进入目录。
该项目包含我们将在本教程中编辑的不同文件。 您必须编辑的第一个文件是bower.json
文件。 打开它,并将您当前的Ember版本更改为2.1.0。 我为此项目创建的jQuery插件可以作为Bower软件包使用。 您可以通过bower.json
添加到bower.json
文件中,将其包括在项目中:
"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"
现在,要安装插件和新版本的Ember,请运行以下命令:
bower install
由于此插件不是Ember组件,因此我们需要手动添加所需的文件。 在ember-cli-build.js
文件中,在return语句之前添加以下两行:
// Lines to add
app.import("bower_components/jquerypic/js/jquerypic.js");
app.import("bower_components/jquerypic/styles/app.css");
return app.toTree();
};
这些行导入两个文件,并将它们包括在构建中。 一个是插件文件本身,另一个是插件的CSS文件。 样式表是可选的,如果您打算自己设置插件样式,则可以随意将其排除。
创建一个新的插件组件
将插件包含在应用程序中之后,让我们通过执行以下命令开始创建新组件:
ember generate component jquery-pic
此命令创建一个类文件和一个模板文件。 在模板文件中,粘贴bower_components/jquerypic/index.html
文件中的内容。 将内容放置在body
标签中,不包括脚本。
此时,模板文件应如下所示:
{{yield}}
<div class="jquerypic" >
<div class="fullversion-container">
<img src="http://lorempixel.com/640/480/nature/1" alt="" class="full-version" >
</div>
<div class="thumbnails">
<img src="http://lorempixel.com/640/480/nature/1" alt="" class="thumbnail">
<img src="http://lorempixel.com/640/480/nature/2" alt="" class="thumbnail">
<img src="http://lorempixel.com/640/480/nature/3" alt="" class="thumbnail">
<img src="http://lorempixel.com/640/480/nature/4" alt="" class="thumbnail">
<img src="http://lorempixel.com/640/480/nature/5" alt="" class="thumbnail">
</div>
</div>
在类文件中,添加一个名为didInsertElement
的函数:
import Ember from 'ember';
export default Ember.Component.extend({
didInsertElement: function () {
}
});
我们现在处于关键时刻。 使用jQuery,插件初始化通常在document.ready
函数中进行,如下所示:
$(document).ready(function(){
//Initialize plugin here
});
相反,对于Ember组件,此初始化发生在名为didInsertElement
的特殊函数中。 当组件准备就绪并已成功插入DOM时,将调用此函数。 通过将我们的代码包装在此函数中,我们可以保证两件事:
- 插件仅针对该组件初始化
- 该插件不会干扰其他组件
在初始化插件之前,让我们以当前状态使用组件。 为此,请使用以下命令创建索引模板:
ember generate template index
然后将以下代码添加到模板以使用该组件:
{{jquery-pic}}
完成后,使用以下命令加载Ember服务器
ember serve
使用此命令启动服务器。 打开您选择的浏览器并访问命令行界面指定的URL。 您应该在图片预览器下方看到缩略图列表。 请注意,当您单击缩略图时,没有任何反应。 发生这种情况是因为我们没有连接插件事件处理程序。 我们开始做吧!
但是在描述如何执行正确的初始化之前,我将向您展示许多开发人员所犯的错误。 该解决方案乍看起来似乎可行,但我将通过显示它引入的错误来证明它不是最佳解决方案。
Ember组件初始化
为了显示问题,让我们开始将以下代码添加到didInsertElement
函数中:
$(".jquerypic").jquerypic();
不使用Ember时,这通常是初始化插件的方式。 现在,检查您的浏览器窗口,然后单击缩略图。 您应该看到它们已按预期加载到大图片预览器中。 所有人似乎都可以正常工作,对吧? 好吧,检查添加第二个组件实例时会发生什么。 为此,请向索引模板添加另一行,其中包含我之前显示的相同代码。 因此,您的模板现在应如下所示:
{{jquery-pic}}
{{jquery-pic}}
如果切换到浏览器窗口,应该会看到该组件的两个实例。 单击实例之一的缩略图时,您会注意到该错误。 这两个实例的预览器都会发生变化,而不仅仅是单击实例。
要解决此问题,我们需要稍微更改初始化程序。 下面报告了正确使用的语句:
this.$(".jquerypic").jquerypic();
不同之处在于,我们现在使用this.$
而不是$
。 这两个组件实例现在应该可以正常运行。 单击一个实例的缩略图应不会影响其他组件。
当我们在组件中使用this.$
,我们仅引用特定于该组件的jQuery处理程序。 因此,我们对它执行的任何DOM操作都只会影响该组件实例。 而且,任何事件处理程序都将仅在该组件上设置。 当我们使用全局jQuery属性$
,我们指的是整个文档。 这就是为什么我们的初始初始化会影响其他组件的原因。
我不得不修改我的插件以演示此错误,这可能是以后文章的主题。 但是,处理组件的DOM的最佳实践是使用this.$
。
销毁插件
好了,到目前为止,我们已经看到了如何设置事件处理程序。 现在是时候展示删除插件中设置的任何事件的方法了。 当我们的组件要从DOM中删除时,应该这样做。 我们应该这样做是因为我们不希望任何多余的事件处理程序挂起。 幸运的是,Ember组件提供了另一个名为willDestroyElement
钩子。 每当Ember即将销毁并从DOM中删除组件实例时,都会调用此钩子。 我的插件有一个stopEvents
方法,可以在插件实例上调用它。 该方法应在Ember为我们提供的特殊挂钩中调用。 因此,在组件中添加以下功能:
willDestroyElement: function () {
this.get('jquerypic').stop();
}
修改didInsertElement function
,使其如下所示:
didInsertElement: function () {
var jquerypic = this.$(".jquerypic").jquerypic();
this.set('jquerypic', jquerypic);
},
在didInsertElement
函数中,我们只是将插件实例存储在组件的属性中。 我们执行此操作,以便可以在其他功能中访问它。 在willDestroyElement
函数中,我们在插件实例上调用stopEvents
方法。 尽管这是一个好习惯,但我们的应用程序无法触发此挂钩。 因此,我们将建立一个演示点击处理程序。 在此处理程序中,我们将在插件实例上调用stopEvents
方法。 这使我可以证明所有事件处理程序都已按照我们的意图被删除。
现在,让我们向组件添加一个click函数处理程序:
actions: {
stopEvents: function () {
this.get('jquerypic').stop();
}
}
然后将一个段落标签添加到组件模板,如下所示:
<p {{action "stopEvents"}} >
Stop Events
</p>
单击此标记后,它将调用会破坏插件的stopEvents
操作。 单击该段落后,插件将不再响应单击事件。 要再次启用事件,您必须像在didInsert
挂钩中一样初始化插件。
在最后一部分中,我们完成了简单的Ember组件。 恭喜你!
结论
在本教程中,您已经看到jQuery插件在我们的职业生涯中仍然发挥着至关重要的作用。 凭借其强大的API和JavaScript框架,了解如何将两个世界结合在一起并使它们和谐地工作非常有用。
在我们的示例中,该组件充当插件的包装,该插件显示图片缩略图列表。 每当我们单击缩略图时,它将在图片预览器中显示它的较大版本。 这只是一个示例,但是您可以集成所需的任何jQuery插件。
再次提醒您, 该代码在GitHub上可用 。
您是否在Ember应用程序中使用jQuery插件? 如果您想讨论它们,请随时在下面的部分中进行评论。
From: https://www.sitepoint.com/how-to-integrate-jquery-plugins-into-an-ember-application/