Bootstrap Native：在没有jQuery的情况下使用Bootstrap组件

最新推荐文章于 2024-05-13 09:31:01 发布

dingshi7798

最新推荐文章于 2024-05-13 09:31:01 发布

阅读量325

点赞数

文章标签： javascript ViewUI

您是否使用Bootstrap的JavaScript组件？ 你喜欢Vanilla JavaScript吗？ 然后，您可能会对Bootstrap的Native JavaScript项目（Bootstrap Native）感兴趣，该项目旨在通过将组件移植到纯JavaScript来消除组件所需的jQuery依赖性。

为什么要使用Bootstrap Native？

这种端口的动机主要与性能有关。

正如许多基准测试所报道的那样，好处之一就是潜在的性能提升，这可能是由于普通JavaScript优于jQuery的执行速度所致。

另一个性能优势是减少页面重量。让我们进行快速比较。以下所有数字均指压缩后的压缩文件，以KB表示。 bootstrap.js引用原始的Bootstrap脚本， bsn.js Bootstrap本机脚本， jq bsn.js jQuery。在这里，我们正在查看将所有组件收集在一起的捆绑文件，但应注意，这两个库都具有模块化结构，该结构仅允许加载所需的组件及其依赖项。

Bootstrap.js：

jQuery 3.3.1 + Bootstrap.js = 30.0 + 12.9 = 42.9
jQuery 3.1.0 slim + bootstrap.js = 23.6 + 12.9 = 36.5
jQuery 2.2.4 + bootstrap.js = 34.3 + 11.2 = 45.5
jQuery 1.12.4 + bootstrap.js = 38.8 + 11.2 = 50.0

Bootstrap本机JavaScript ：

minifill + bsn.js = 2.4 + 7.8 = 10.2
polyfill.io（在chrome 54上）+ bsn.js = 1.1 + 7.8 = 8.9
polyfill.io（在IE 8上）+ bsn.js = 12.1 + 7.8 = 19.9

（ IE8的polyfill.io大小取自此处。这些polyfill在下一节中讨论 。）

因此，使用Bootstrap组件时，大小在36.5至50.0 KB范围内变化，而使用Bootstrap Native时，范围会缩小至8.9至19.9 KB。

Bootstrap本机浏览器支持

关于浏览器支持，它可以与原始的基于Bootstrap jQuery的脚本媲美。也就是说，它支持主要移动和桌面平台以及IE8 +上的最新浏览器。这是通过两种填充策略实现的。

第一个围绕使用Polyfill.io服务。您所要做的就是在文档中插入相对脚本标记，以获得针对每个浏览器量身定制的一组polyfill：

<script src="https://cdn.polyfill.io/v2/polyfill.js"></script>

可以将服务配置为基于站点上实际使用的功能来自定义其响应。有关详细信息，请参见Pollyfill.io文档。

另外，也可以使用minifill ，这是项目作者自己提供的可能更轻的自定义polyfill 。

引导本机用法

用法与原始的Bootstrap脚本类似，不同之处在于我们将删除jQuery，将Bootstrap脚本替换为Bootstrap Native项目提供的脚本，并在必要时包括polyfills。

因此，在结束</body>标记之前，我们包括Bootstrap Native组件的脚本：

<script src="https://cdn.jsdelivr.net/npm/bootstrap.native@2.0.15/dist/bootstrap-native-v4.min.js"></script>

其他CDN URL可用并在Bootstrap Native文档页面上列出。或者，可以下载文件并在本地提供文件。

如果需要polyfill，则应将其包含在<head>标记中：

<script src="text/javascript" src="https://cdn.jsdelivr.net/gh/thednp/minifill@0.0.4/dist/minifill.min.js"> </script>
<!--[if IE]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->

此代码段使用minifill 。

有关更多详细的使用说明，请参见Bootstrap Native项目文档页面。

一个港口？

确切地说，它不是复制原始脚本的所有功能的文字端口。 Bootstrap Native的作者特意选择保留一些轻微的功能，特别是较少使用的功能，主要是出于性能方面的考虑并简化了开发。

让我们看一下其中的一些问题。

自定义事件

这些是许多Bootstrap组件在其生命周期内触发的事件。例如，一个Modal会引发两个事件-一个事件是在打开时，另一个事件是在关闭时。（实际上，在每种情况下都会触发两个事件，一个事件在动作之前（ 'show' ），另一个事件（ 'shown' ）之后。）
选项卡使用类似的事件来在选项卡切换时通知其观察者：为当前选项卡调度hide事件，为必须显示的选项卡调度show事件。

相反，Bootstrap Native仅为Carousel和Button提供这些事件。当两张幻灯片之间有过渡时，原始的“轮播”会触发几个自定义事件。第一个事件'slide'是在过渡开始之前触发的，而另一个事件'slid'是在过渡完成后触发的。传递给处理程序的事件对象具有两个属性，这些属性提供有关过渡， direction和relatedTarget 。

以下jQuery片段说明了：

$carousel
  .on('slide.bs.carousel', function(e) {
    var caption = $(e.relatedTarget).find('.carousel-caption').text();
    console.log('About to slide to the ' + e.direction + ' to slide ' +  caption);
  })
  .on('slid.bs.carousel', function(e) {
    var caption = $(e.relatedTarget).find('.carousel-caption').text();
    console.log('Slid to the ' + e.direction + ' to slide ' + caption);
  });

Bootstrap Native支持两个事件，但是事件对象没有direction和relatedTarget属性。我们可以通过以下方式将先前的代码片段转换为原始JS：

carousel.addEventListener('slide.bs.carousel', function(e) {
  console.log('About to slide');
});

carousel.addEventListener('slid.bs.carousel', function(e) {
  console.log('Slid');
});

如果我们需要其他组件的自定义事件怎么办？自己实现它们并不难。我们可以参考Bootstrap Native Carousel代码并使用CustomEvent API 。

首先创建事件对象：

if (('CustomEvent' in window) && window.dispatchEvent) {
  slid =  new CustomEvent("slid.bs.carousel");
  slide = new CustomEvent("slide.bs.carousel");
}

当幻灯片过渡即将开始时，将触发'slide'事件：

if (slide) {
  this.carousel.dispatchEvent(slide);
}

最后，当转换完成时，将触发'slid'事件：

if (slid) {
  self.carousel.dispatchEvent(slid);
}

基于此模型，可以将相似的代码轻松添加到其他组件。

并非在所有浏览器上都可以使用 CustomEvent API，但是前面提到的polyfills涵盖了它。

程序化API

这是API Bootstrap组件公开的，以允许使用JavaScript进行初始化和控制。例如，在Modal元素上，可以调用三种方法来控制其可见性：

$('#mymodal').modal('show')
$('#mymodal').modal('hide')
$('#mymodal').modal('toggle')

相反，Bootstrap Native通常不提供这种编程控制。上面的方法不适用于模式，也不适用于下拉菜单，制表符，警报或轮播。

其他差异

如果我们对组件进行并排比较，很明显，Bootstrap Native不是真正的端口，在某些情况下会删除功能，而在另一些情况下会添加一些新内容。

例如，在工具提示中，我们必须使用Bootstrap显式地初始化它们，因为出于性能原因，相对的data-api是opt-in 。在Bootstrap Native中，只要正确设置了DATA API属性，初始化都是自动的。此外，本机版本可以自动放置工具提示，而无需任何其他选项。但是，它没有涵盖Bootstrap提供的模板系统。

下拉菜单提供了另一个示例，该示例由于故意的实现选择而相对于Bootstrap组件略有不同。单击菜单项后，jQuery下拉菜单关闭，而“本机”菜单保持打开状态。

键盘输入处理也不完整。标签导航有效，但其他操作已部分实现。

关于Carousel，jQuery组件默认情况下会响应键盘输入，而在原始版本中，必须使用data-keyboard属性启用此行为：

<div id="carousel" class="carousel slide" ... data-keyboard="true">

此组件的另一个区别是持续时间选项的自定义方式。该值用于确定现有幻灯片和输入幻灯片之间的过渡时间必须间隔多长时间。这两个库都定义了相同的默认值600ms ，这是一个合理的可接受值，对于大多数用例来说应该是可以的。

如果要更改此值，则考虑到两个库中的动画都是使用CSS进行的，首先我们必须添加一些CSS规则以覆盖默认的工期值。

在Bootstrap中，我们需要使用一些jQuery代码来修改JavaScript中硬编码的值：

$carousel.data()['bs.carousel'].constructor.TRANSITION_DURATION = 2000;

另一方面，Bootstrap Native在组件根元素上公开了data-duration属性，因此该过程更加容易：

<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false" data-duration="2000">

其他组件（例如“模态”和“工具提示”）可以使用相同的选项来更改过渡持续时间。

其他问题在文档页面和项目问题跟踪器中列出并说明。

结论

我认为该项目非常有趣，但是我不会这么快就丢弃原始的jQuery版本。实际上，与其他“ jQuery Vs Vanilla JS”比较中一样，获胜者通常取决于特定的用例。

上一节中研究的问题不应成为主要障碍，因此，如果您不寻求Bootstrap JavaScript组件的完美字面转换，并且准备好应对一些细微差异，那么这可能是正确的解决方案。

另外，必须提到的是该项目正在积极开发中，并且提供了对在GitHub跟踪器上打开的问题的快速反馈。

因此，您要在下一个Bootstrap项目中尝试一下吗？随时在评论中分享您的想法。

这篇文章是由Joan Yin同行评审的。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

如果您掌握了Bootstrap的基础知识，但又想知道如何将Bootstrap技能提高到一个新的水平，请查看我们的使用Bootstrap 4建立您的第一个网站课程，以快速，有趣地介绍Bootstrap的功能。

From: https://www.sitepoint.com/use-bootstrap-components-without-jquery/

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap Native：在没有jQuery的情况下使用Bootstrap组件

你使用引导程序的JavaScript组件？你喜欢香草的JavaScript ？然后，你可能会感兴趣的本地JavaScript的引导项目（引导母语），由它们移植到普通的JavaScript，以消除组件所需的jQuery的依赖，其目的。为什么要使用本机引导？这种端口的动机大多与性能。一个好处是潜在的性能提升可能来自过度的jQuery普通的JavaScript优越的执行速度，因为在许多...
复制链接

扫一扫