如何在没有 jQuery 的情况下使用 Bootstrap 组件
1个回答
展开全部
用原生 JavaScript
原生 JavaScript 的执行速度优于 jQuery，这会带来潜在的性能提升。
另一个性能优势在于降低了页面的大小。现在来做个快速的对比。下面所有数字都是通过 gzip 压缩过后的文件大小，单位为 KB。bootstrap.js 指原来的 Bootstrap 脚本，bsn.js 则代表 Bootstrap Native 脚本，jq 表示 jQuery。这里我们看到所有需要的组件组成的文件包，但需要指出的是，这两个库都是模块化结构，可以只加载需要的组件及其依赖的组件
1、使用 Bootstrap 组件时，大小范围在 [38.4, 50.0] KB，而使用 Bootstrap Native，这个范围缩小到 [8.9, 19.9] KB.
2、浏览器支持
关于浏览器支持，是与 原来 Bootstrap 基于 jQuery 的脚本 进行比较，它支持 最新的主要的移动浏览器和桌面浏览器的最新版本及 IE8+ 。这由两个 polyfill 策略实现
<script src="https://cdn.polyfill.io/v2/polyfill.js"></script>
3、用法
用法与原来的 Bootstrap 脚本类似，只是不再使用 jQuery，而用由这个项目支持的 Bootstrap 脚本。另外，如果需要的话，还要加入 polyfill。
现在在 </body> 标签之前引入所需要的脚本文件：
<script src="https://cdn.jsdelivr.net/bootstrap.native/1.0.4/bootstrap-native.js"></script>
文档页面 上还列举了一些其它的 CDN URL。也可以将文件下载到本地，在本地使用。
如果需要用到 polyfill，它们需要在 <head> 标签中引入：
<script src="https://cdn.jsdelivr.net/minifill/0.0.3/minifill.min.js"> </script>
<!--[if IE]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
这段代码采用 minifill polyfill。
4、自定义事件
许多 Bootstrap 组件都会在生命周期中触发事件。例如，Modal 会触发两个事件，分别是在它打印后和关闭后（实际上每个动作都对应两个事件，一个在动作前发生（'show'），一个在动作后发生（'shown'））。
Tab 组件在切换标签的时候也有类似的事件通知其观察者：为当前标签发送一个隐藏事件，同时为将要显示的标签发送一个显示事件。
Bootstrap Native 则不同，它只为 Carousel 和 Button 提供了这些事件。最初的 Carousel 会在两张幻灯片之间切换的时候触发一对事件。一个是 'slide'，在切换发生前发生，另一个是 'slid'，在切换结束后发生。传递给事件处理函数的事件对象有两个属性与切换有关，direction 和 relatedTarget。
5、编程 API
Bootstrap 组件的 API 允许使用 JavaScript 来进行初始化和控制。例如，Modal 组件有 3 个方法用于控制其可见性：:
$('#mymodal').modal('show')
$('#mymodal').modal('hide')
$('#mymodal').modal('toggle')
Bootstrap Native 一般不提供这些编程控制。上述方法已不再存在于 Modal，以及 Dropdonw，Tab，Alert 和 Carousel。
原生 JavaScript 的执行速度优于 jQuery，这会带来潜在的性能提升。
另一个性能优势在于降低了页面的大小。现在来做个快速的对比。下面所有数字都是通过 gzip 压缩过后的文件大小，单位为 KB。bootstrap.js 指原来的 Bootstrap 脚本，bsn.js 则代表 Bootstrap Native 脚本，jq 表示 jQuery。这里我们看到所有需要的组件组成的文件包，但需要指出的是，这两个库都是模块化结构，可以只加载需要的组件及其依赖的组件
1、使用 Bootstrap 组件时，大小范围在 [38.4, 50.0] KB，而使用 Bootstrap Native，这个范围缩小到 [8.9, 19.9] KB.
2、浏览器支持
关于浏览器支持，是与 原来 Bootstrap 基于 jQuery 的脚本 进行比较，它支持 最新的主要的移动浏览器和桌面浏览器的最新版本及 IE8+ 。这由两个 polyfill 策略实现
<script src="https://cdn.polyfill.io/v2/polyfill.js"></script>
3、用法
用法与原来的 Bootstrap 脚本类似，只是不再使用 jQuery，而用由这个项目支持的 Bootstrap 脚本。另外，如果需要的话，还要加入 polyfill。
现在在 </body> 标签之前引入所需要的脚本文件：
<script src="https://cdn.jsdelivr.net/bootstrap.native/1.0.4/bootstrap-native.js"></script>
文档页面 上还列举了一些其它的 CDN URL。也可以将文件下载到本地，在本地使用。
如果需要用到 polyfill，它们需要在 <head> 标签中引入：
<script src="https://cdn.jsdelivr.net/minifill/0.0.3/minifill.min.js"> </script>
<!--[if IE]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
这段代码采用 minifill polyfill。
4、自定义事件
许多 Bootstrap 组件都会在生命周期中触发事件。例如，Modal 会触发两个事件，分别是在它打印后和关闭后（实际上每个动作都对应两个事件，一个在动作前发生（'show'），一个在动作后发生（'shown'））。
Tab 组件在切换标签的时候也有类似的事件通知其观察者：为当前标签发送一个隐藏事件，同时为将要显示的标签发送一个显示事件。
Bootstrap Native 则不同，它只为 Carousel 和 Button 提供了这些事件。最初的 Carousel 会在两张幻灯片之间切换的时候触发一对事件。一个是 'slide'，在切换发生前发生，另一个是 'slid'，在切换结束后发生。传递给事件处理函数的事件对象有两个属性与切换有关，direction 和 relatedTarget。
5、编程 API
Bootstrap 组件的 API 允许使用 JavaScript 来进行初始化和控制。例如，Modal 组件有 3 个方法用于控制其可见性：:
$('#mymodal').modal('show')
$('#mymodal').modal('hide')
$('#mymodal').modal('toggle')
Bootstrap Native 一般不提供这些编程控制。上述方法已不再存在于 Modal，以及 Dropdonw，Tab，Alert 和 Carousel。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
网易云信
2023-12-06 广告
UIkit是一套轻量级、模块化且易于使用的开源UI组件库，由YOOtheme团队开发。它提供了丰富的界面元素，包括按钮、表单、表格、对话框、滑块、下拉菜单、选项卡等等，适用于各种类型的网站和应用程序。UIkit还支持响应式设计，可以根据不同...
点击进入详情页
本回答由网易云信提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
