jQuery会死吗?我为什么不用vue写富文本

一、事件背景：

我最近开源了一个个人耗时半年打造的富文本及一套适用于web后台的ui框架，在gitee上受到网友们的关注，部分网友对我采用jquery的技术栈提出了质疑。总结起来：无非是jquery已经落后，不久将死。甚至有少数网友很激进：非vue技术栈，你不应该加入我这个群，不管你做得多好。对应这个事情，首先我一般不反驳，因为我对vue，jquery有自己的应用场景度量。但是对于这种不分场景应用而盲目赶潮流的观点，我是持否定态度的。

为此我想有必要通过这篇文章，说明一下：我为什么用jquery来写vue和web后端ui框架，而不用vue。在文章开始前，先贴一下我开源的富文本：

gitee： https://gitee.com/kevin-huang/Bui-Editor-public

浮动文本/图片/视频功能

绘制流程图功能

移动设备模拟功能

通过上述富文本的截图，可以大概了解到这个富文本的功能很丰富，许多功能可以说是全网富文本里面的only-one。这么复杂的应用对技术栈的选择很重要，良好适配的技术栈可以在设计上，编码上给开发者更大的自由度，同时可以避免很多繁杂的实现，提升代码质量，降低后期的维护，运营的成本。

二、我的观点：

1、vue技术栈适用于移动端应用开发，对于pc端web应用，vue技术栈并不见得优于传统技术栈(相对于vue来说是传统的)。

2、jquery是目前dom操作的王者，除此无二，jquery和vue不可比较，他们各自擅长的场景不一样。

3、复杂应用，原生JavaScript +  jquery是比较好的技术栈组合，优于vue技术栈。

三、jquery、vue技术栈诞生背景，擅长场景说明

jquery：

诞生背景

1、jquery诞生于2006年，它诞生的背景是浏览器的dom操作繁杂，各种浏览器api不统一。市场需要一个前端JavaScript库解决dom操作的痛点。

2、jquery诞生的年代，移动应用还在萌芽，它的设计实现都是面向pc端的，当时的前端技术范畴也还没有mvvm(数据驱动)的思想，它为操作dom而生。

　　　  擅长场景：

dom操作为主的场景，如富文本，流程设计器，这些应用需要对dom进行大量的操作，jquery最合适不过。

对于这种场景，vue的编程规范会造成设计实现上的束缚，其双向绑定在这里也是多余的，完全没有用武之地！

缺点：

1、jquery没有mvvm思想，不能解决移动端带宽、性能的痛点。

2、jquery没法实现数据驱动开发，还需要开发者编写dom读写操作。

vue：

诞生背景

1、vue的诞生之前，已经有了许多成熟的mvvm框架，如backbone、angular，他们都是在一些数据驱动的需求场景中得到很好的应用，但也并没有像vue被开发者如此着迷。

2、backbone、angular既然已经有了数据驱动的实现，为何没有像vue那样火呢，因为他们要么比较笨重，要么还没有解决移动端应用的痛点(带宽、性能)。

3、vue可以说是为移动应用而生，轻量，其设计的虚拟dom解决移动设备频繁触发浏览器刷新而引起的性能/电量问题，其设计的单页打包(webpack)模式，解决了跳转需要网络请求的带宽痛点。

擅长场景：

1、数据驱动的双向绑定场景，特别是表单读写，可以说解放了表单读写对dom的操作编程。

2、移动应用场景，通过双向绑定，虚拟dom、webpack打包，解决移动端web应用的设备性能/电量、带宽痛点。

缺点：

1、采用数据驱动，没有灵活的dom操作，不适用于dom操作为主的应用场景。

2、在复杂应用中，大量的dom监听、data状态联动维护并不是一种好的机制。

3、webpack打包方式解决了移动应用的痛点，但也带来了发布后，难以跟踪定位问题，没法即刻修改已经在线页面的缺点。

4、学习成本相对传统技术栈高一些，对团队的前端知识要求也相对高一些。

四、vue应用场景说明

pc端web应用场景

1、pc端没有移动端性能、带宽的限制，采用vue技术栈，反而带来了开发环境繁杂、学习额外的非w3c规范的web知识、发布后难以定位跟踪问题、没法即刻修改在线页面这些缺点。

2、pc端的应用，大多是普通的表单开发应用，除此之外基本都是展示类型的页面，个人认为除了表单的双向绑定，监控类ui的数据联动，其他如ui表现/结构的编程采用vue有点多余。

移动端应用场景

1、移动应用场景，对性能、带宽有要求，移动设备的特点也决定了其在问题跟踪定位，更新部署方面与pc端有差异。

2、vue技术栈应用于移动应用场景具有天生的设计实现优势。

我的总结：

1、 pc端采用传统的ui技术栈，同时在传统的基础上引入轻量级mvvm方案解决表单读写开发编程，即优于vue技术栈。这也Bui会实现一个min-mvvm的初衷。

2、移动端应用，毫无疑问，采用vue技术栈是王道。

欢迎登陆我的demo网站，体验可能是全网最强大的富文本应用：

http://www.vvui.net/bui/

以上所述是小编给大家介绍的jQuery会死吗?我为什么不用vue写富文本,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • vue富文本框（插入文本、图片、视频）的使用及问题小结

    今天在vue里面插入富文本遇到了一些小坑在这里提供给大家用于参考,如有错误,望多加指正. 我这里使用的是Element-ui的上传图片组件 首先引入Element-ui(这个我就不作赘述了,详情参考element中文官网) 在引入富文本组件vue-quill-editor 使用在main.js引入相应的样式 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/

  • vue中使用ueditor富文本编辑器

    最近在做后台管理系统的时候遇到要使用富文本编辑器.最后选择了ueditor,我的项目使用 vue+vuex+vue-router+webpack+elementUI的方案完成框架的搭建, 1.下载UEditor官网最新的jsp版本的包,下载完成解压之后得到一个utf8-jsp的文件夹,里面包含的内容如下: 2.将这个文件夹改名为ueditor,并且移入自己项目中的static文件夹下,修改ueditor.config.js文件夹中的内容,如下图: 3.编写子组件 <template> <

  • 轻量级富文本编辑器wangEditor结合vue使用方法示例

    轻量级富文本编辑器wangEditor结合vue使用方法示例

    1.安装 使用npm下载: `npm install wangeditor` 2. 创建实例 (1)基本用法: <template> <div> <div id="editor" class="editor"></div> </div> </template> <script> import E from 'wangeditor' export default { name: 'ed

  • Vue.js结合Ueditor富文本编辑器的实例代码

    Vue.js结合Ueditor富文本编辑器的实例代码

    在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器. 前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了. 1. 总体思路 1.1 模块化 vue的很大的一个优势在于模块化,我们可以通过模块化实现页面和逻辑的复用.所以可以把Ueditor重新封装成一个.vue的模板文件.其他组件通过引入这个模板实现代码复用. 1.2 数据传输 首先父组件需要设置编辑器的长度.宽度.初始文本,这些数据可以通过prop

  • Vue+Element使用富文本编辑器的示例代码

    Vue+Element使用富文本编辑器的示例代码

    富文本编辑器在任何项目中都会用到,在Element中我们推荐vue-quill-editor组件,现在我就把它提供给大家,希望对大家有用.具体截图如下: 安装编辑器组件 具体方法:npm install vue-quill-editor --save 编写组件 首先我们在components文件夹里创建ue.vue组件,效果图如下: 组件 <!-- 组件代码如下 --> <template> <div> <script id="editor"

  • vue2.0项目中使用Ueditor富文本编辑器示例代码

    vue2.0项目中使用Ueditor富文本编辑器示例代码

    最近在vue项目中需要使用富文本编辑器,于是将Ueditor集成进来,作为公共组件. 项目地址:https://github.com/suweiteng/vue2-management-platform 1.放入静态资源并配置 首先把官网下载的Ueditor资源,放入静态资源src/static中. 修改ueditor.config.js中的window.UEDITOR_HOME_URL配置,如下图: 2.引入 在main.js中引入 import '../static/UE/ueditor.

  • Vue2.0中集成UEditor富文本编辑器的方法

    在vue的'项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor. 这类的文章网上有很多,我进行了摸索.手写代码.汇总.排版,形成了这篇文章. 下载对应的UEditor源码 首先,去官网上下载UEditor的源码,根据你后台语言的不同下载对应的版本(PHP.Asp..Net.Jsp). http://ueditor.baidu.com/website/download.html 下载

  • 在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery... kindEditor:功能强大,代码简洁,需要配置后台,而且好久没见更新了 wangEditor:轻量.

  • jQuery会死吗?我为什么不用vue写富文本

    一.事件背景: 我最近开源了一个个人耗时半年打造的富文本及一套适用于web后台的ui框架,在gitee上受到网友们的关注,部分网友对我采用jquery的技术栈提出了质疑.总结起来:无非是jquery已经落后,不久将死.甚至有少数网友很激进:非vue技术栈,你不应该加入我这个群,不管你做得多好.对应这个事情,首先我一般不反驳,因为我对vue,jquery有自己的应用场景度量.但是对于这种不分场景应用而盲目赶潮流的观点,我是持否定态度的. 为此我想有必要通过这篇文章,说明一下:我为什么用jquery

  • vue通过v-html指令渲染的富文本无法修改样式的解决方案

    1.问题描述 在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式. 代码如下,div.article-context里面的图片修改成自适应,但是没有任何效果. <div class="article-context" v-html="post.content"></div> <style scoped> .article-context img { width: auto; height: auto;

  • vue集成百度UEditor富文本编辑器使用教程

    vue集成百度UEditor富文本编辑器使用教程

    在前端开发的项目中,难免会遇到需要在页面上集成一个富文本编辑器.那么,如果你有这个需求,希望可以帮助到你. vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是我将百度富文本编辑器放到vue项目中使用.效果图如下 废话不多说. 1.使用vue-cli构建一个vue项目.然后下载UEditor源码,地址 把项目复制到vue项目的static文件下.目的是让服务可以访问到里面的文件,打开UEditor目录文件.这里下载的是jsp版本的.文件名字没有更改过.打

  • 如何在vue中使用kindeditor富文本编辑器

    如何在vue中使用kindeditor富文本编辑器

    第一步,下载依赖 yarn add kindeditor 第二步,建立kindeditor.vue组件 <template> <div class="kindeditor"> <textarea :id="id" name="content" v-model="outContent"></textarea> </div> </template> <s

  • 详解vue中使用vue-quill-editor富文本小结（图片上传）

    vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器,在进行富文本编辑的时候,我们往往要插入一些图片,vue-quill-editor默认的处理方式是直接将图片转成base64编码,这样的结果是整个富文本的html片段十分冗余,通常来讲,每个服务器端接收的post的数据大小都是有限制的,这样的话有可能导致提交失败,或者是用户体验很差,数据要传递很久才全部传送到服务器. 1.下载Vue-Quill-Editor npm install vue-quill-editor

  • 详解Vue基于vue-quill-editor富文本编辑器使用心得

    vue-quill-editor的guthub地址,现在市面上有很多的富文本编辑器,我个人还是非常推荐Vue自己家的vue-quill-deitor,虽然说只支持IE10+,但这种问题,帅给别人吧! 那么我们直击正题,在vue中使用quill呢,我们需要npm进行安装,安装命令如下: npm install vue-quill-editor 再安装依赖项 npm install quill 使用: 在main.js中进行引入 import Vue from 'vue' import VueQui

  • Vue写一个简单的倒计时按钮功能

    在项目开发里,我们经常会遇到发送验证码.点击了之后有60秒倒计时的按钮,很常见却也很简单,但是在写这个按钮的时候有个别地方还要注意下,今天写出来,如有问题欢迎指正! 完成的效果如下: 为了更快显示出效果,我把时间设成了5秒.按钮在点击之后会出现倒计时,同时按钮变为不可点击状态,样式也发生变化,鼠标悬浮上的样子也会发生变化. 接下来我们用代码来实现: <button class="button" @click="countDown"> {{content}

  • 阿望教你用vue写扫雷小游戏

    前言 话说阿望还在大学时,某一天寝室突然停网了,于是和室友两人不约而同地打开了扫雷,比相同难度下谁更快找出全部的雷,玩得不亦乐乎,就这样,扫雷伴我们度过了断网的一周,是整整一周啊,不用上课的那种,可想而知我们是有多无聊了. 这两天临近过年了,该放假的已经放假了,不该放假的已经请假了,公交不打挤了,地铁口不堵了,公司也去了大半部分的人了,就留阿望这种不得不留下来值班的人守着空荡荡的办公室了,于是,多年前那种无所事事的断网心态再次袭来,于是,想玩扫雷的心再次蹦跶出来,于是,点开了电脑的附件,于是,发

  • Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)

    使用教程(注意细看总结部分,写了几点,希望有所帮助): 1.安装插件:npm install vue-quill-editor 2.安装插件依赖:npm install quill 3.main.js文件中引入: import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' impor

随机推荐