jquery软件(jquery1.4.2) 收藏 0

取代Jquery，用Vue 构建Bootstrap 4 应用

尽管前端程序现在发展迅速，各种框架层出不穷，但是对广大非前端码农来说构建Web界面的最好的选择仍然还是Bootstrap 4。但是Bootstrap依赖于已经严重过时，被抛弃的jQuery组件，那么如何解决这个问题就迫在眉睫了。

Vue项目以其轻巧、高性能，易上手，双向数据绑定，组件化的特点，快速流行并广为使用，那么有没有可能将Bootstrap的依赖改为Vue呢？答案是肯定的。

本文我们就介绍这样一个解决方案，Bootstrap-Vue项目。

Bootstrap-Vue项目提供了Bootstrap项目中jQuery组件依赖了Vue替换方案，可以实现绝大多数案例和组件的替代。我们建议以Vue Cli插件方式使用，这样可以实现项目自动创建和配置，依赖项添加。首先我们安装Vue Cli

由于npm安装较慢，甚至会失败，需要，先安装国内镜像，可以使用cnpm或者npm别称：

然后用cnpm安装vue.js

这样Vue CLI会自动创建一个Vue项目，提示选择项，选择\”default\”即可。

进入该项目目录：

使用下面的命令将Bootstrap-Vue插件添加到项目中。选项提示时，选择 \”Y\”。

这样无需任何复杂设置就可以设置好一个以vue启动的Bootstrap项目。

默认情况下，Vue CLI为提供了一个示例HelloWorld应用程序。这都没啥用的，我们直接清除，包括App.vue和部件目录下的 HelloWorld.vue：

Bootstrap所有功能基本都可以在bootstrap-vue中以全局注册的组件来使用。这些组件通常和Bootstrap同名，为了以示区别，他们都以开头b-xxxx。

在此我们创建一个新的App.vue模板并添加一个Bootstrap容器：

然后启用该服务

然后，浏览器访问，应该看到以下内容：

另外，如果查看页面源码，可以看到该b-container组件已使用常规的Bootstrap元素和类进行渲染：

许多组件都可以使用Vue道具进行配置。例如， b-btn组件，可以在页面中添加一个将按钮。b-btn有一个variant控制按钮主题，此处设置为primary。

Vue支持将动态值绑定到Bootstrap组件。例如，对b-alert组件添加一个alert提示信息。我们将其设success并提供一些提示信息。

可以将showprop绑定到本地data属性来有条件地显示信息showAlert。然后将showAlert响应组件click事件来切换的值b-btn。

比jQuery逻辑写起来简单多了。

一些Bootstrap功能是作为指令而非组件提供的，因此可以轻松地将其添加到给已有元素。

例如，要添加工具提示功能，可以使用v-b-tooltip指令。下面我们使用指令参数hover向按钮添加一个，在按钮悬停时触发。

注：tooltip插件需要popper.js的依赖项，但是使用Vue CLI安装Bootstrap-Vue，会自动include。

利用Bootstrap-Vue 来替换Bootstrap 4中的jQuery非常容易，而且可以带来vue cli的巨大的功能优势，大家可以尝试将手头的项目都替换一下。

强劲新版本来袭！jQuery 4.0.0、Rsbuild 0.4、Shiki v1.0发布！

随着 React、Vue、Angular 三大框架的流行，新增的站点使用 jQuery 已经比较少了，但是存量的站点使用 jQuery 的量级还是非常的大。从网站 javascript 库使用统计的历史趋势可以看出，jQuery 的使用占比在 77% 以上，仍处于高位。

jQuery 4.0.0 已经开发了很长时间，现在已经可以发布测试版了！该版本涵盖了很多内容，开发团队很高兴看到它的发布。开发团队进行了错误修复、性能改进和一些重大变更。毕竟，移除了对 IE<11 的支持！尽管如此，希望对用户造成的影响微乎其微。

许多破坏性更改是团队多年来一直想做的，但在补丁或小版本中无法实现。jQuery 开发团队删减了遗留代码，删除了一些以前废弃的 API，删除了一些从未记录的公共函数的内部参数，并放弃了对一些过于复杂的 \”神奇\” 行为的支持。

jQuery 团队将在最终版本发布前发布一份全面的升级指南，概述移除的代码以及如何迁移。jQuery Migrate 插件也将随时提供帮助。现在，请试用测试版，如果遇到任何问题，请告知我们。

jQuery 4.0 不再支持 IE 10 及更老版本。有些人可能会问，为什么不取消对 IE 11 的支持呢？我们计划分阶段取消支持，下一步将在 jQuery 5.0 中进行。现在，我们将从移除支持IE 11以上版本的代码开始，在一个PR中减少-867 gzipped字节！

jQuery 4.0还放弃了对其他旧版浏览器的支持，包括 Edge Legacy、iOS <11、Firefox <65 和 Android 浏览器。您无需进行任何更改。如果您需要支持这些浏览器，只需坚持使用 jQuery 3.x。

更多参考：https://blog.jquery.com/2024/02/06/jquery-4-0-0-beta/

Rsbuild 是基于 Rspack 的构建工具，旨在成为增强版的 Rspack CLI，更加容易上手和开箱即用。Rsbuild 是 Webpack 应用迁移到 Rspack 的最佳方案，他能帮助你减少 90% 配置并获得 10 倍构建速度。

Rsbuild v0.4 版本提供内置的模块联邦支持。此外，还包含一些 API 的不兼容更新，主要特性如下：

• 开箱即用的模块联合
• 改进插件 Hook API
• 改进性能
• 支持 Rsdoctor
• 支持设置装饰器版本

Rsbuild 现在提供一个内置的 moduleFederation 选项，这将使得在 Rsbuild 中配置模块联邦变得更加容易。

当你使用该选项时，Rsbuild 会自动修改默认的 publicPath 和 splitChunks 配置，使模块联邦可以开箱即用。

在 Rsbuild 插件中使用 hook 时，现在可以通过 order 字段来声明 hook 的顺序：

loadConfig 方法现在会返回配置内容和配置文件的路径：

• 减少 deepmerge 性能开销
• 减少对 core-js 的 require.resolve 性能
• 移除重复的 autoprefixer 插件
• 升级 webpack-bundle-analyzer 以移除 lodash 依赖

更多参考：https://github.com/web-infra-dev/rsbuild/releases/tag/v0.4.0

Shiki 是一个轻量且强大的语法高亮工具，由著名的轮子大师 antfu 打造。

Shiki v1.0 是一次重大重写，解决了大部分长期存在的问题。之前称为 Shikiji，现在合并回 Shiki。主要亮点如下：

• 完全支持 ESM，不再需要静态资产或 CDN 设置
• 不依赖文件系统，与平台无关，可用于 Node.js、浏览器和其他任何现代运行时。
• 内置双主题，有效支持明暗模式
• 变形和装饰 API，最大限度提高可定制性
• 官方 rehype 和 markdown-it 插件
• TwoSlash 整合现在是 Shiki 转换器而非包装器
• 更多主题和更好的语言支持。作为独立软件源维护：https://github.com/shikijs/textmate-grammars-themes
• 新文档：https://shiki.style

更多参考：https://github.com/shikijs/shiki/releases/tag/v1.0.0

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com