srcmini本文概述
jQuery有什么问题？
请不要讨厌jQuery。这根本不是问题, 每个Web开发人员都曾经爱过jQuery, 因为它使前端中的一些艰巨任务非常容易实现并且仍然可靠。如今, 许多开发人员使用其他框架, 例如Angular, React或仅编写Vanilla JS。之所以这样, 是因为它们中的大多数不再需要支持旧版本的浏览器：
| 最新✔ | 最新✔ | 10+✔ | 最新✔ | 6.1+✔ |
通过编写自己的JS代码, 它有可能为所有浏览器提供广泛的兼容性, 因此在大多数情况下, 你将不再需要jQuery。如果仅使用jQuery的话, 包括jQuery也很糟糕(很多开发人员都这样做)。 jQuery的最新版本大约压缩了71.68 KB, 因此, 如果你关心最终的大小(包括插件和其他内容), 那么它对于你的应用程序来说是相当大的大小。要达到此大小, 你还需要计算Bootstrap JavaScript大小, 大约30 KB。
因此, jQuery的问题在于你添加到应用程序中的大小, 因为你需要知道的一件事是, 你使用jQuery并不能使你变得更好或更少, 但是你需要明智并知道何时包括它。
有什么解决办法？
如果要使用Boostrap Framework及其所有JavaScript功能(如Dropdowns, Tabs等)而不使用jQuery, 则需要使用开源库Bootstrap Native。 Bootstrap Native是使用Vanilla Javascript开发的用于Bootstrap 3和Bootstrap 4的库, 与原始jQuery插件相比, 具有卓越的性能。它与RequireJS / CommonJS兼容。使用Bootstrap Native的最大优势将是项目的大小, 因为它的大小仅为20Kb, 压缩后为6.5Kb。
我们建议你访问Github上的官方库, 以获取有关它的更多信息。
如何使用Bootstrap Native
bootstrap.native与UMD(通用模块定义)兼容。它可以在CommonJS和AMD环境中正常工作, 但是会退回到在普通<script>标签环境中导出到窗口的状态。这些组件是用干净的代码开发的, 主要用于本机支持HTML5的现代浏览器。使用Polyfill时, IE8-IE10会非常感谢。该库带有自定义的polyfill, 你可以立即使用它。如前所述, 你可以将Boostrap Native库与Boostrap 3.x或4.x一起使用：
Boostrap 3.x
以下代码段显示了如何在bootstrap版本3中使用本地Bootstrap：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load the Boostrap CSS as you usually do from the CDN or a local copy -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- Here your document markup -->
<!--
Instead of loading jquery.min.js and bootstrap.min.js
Load bootstrap.native from the CDN or a local copy of the library
-->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.12/bootstrap-native.min.js"></script>
</body>
</html>Bootstrap 4.x
以下代码段显示了如何在引导程序的版本4中使用本地引导程序：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load the Boostrap CSS as you usually do from the CDN or a local copy -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<!-- Here your document markup -->
<!--
Instead of loading jquery.min.js and bootstrap.min.js
Load bootstrap.native 4 from the CDN or a local copy of the library
You won't need to load tether neither !
-->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.12/bootstrap-native-v4.min.js"></script>
</body>
</html>编码愉快！
评论前必须登录！
注册