jq重构到vue有什么办法

JavaScript0142

jq重构到vue有什么办法,第1张

1.先直接砍了jq然后用vue重构。

2.逐条分析你用jq完成的功能,然后列出来,用vue找到合适的替代方案,比如class操作用绑定class判断去做,隐藏显示元素用v-if或是v-show,ajax用axios等等。

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口。具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展。拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

当时John的想法很简单：他发现这种语法相对现有的JavaScript库更为简洁。但他没想到的是，这篇文章一经发布就引起了业界的关注。

于是John开始认真思考着这件事情（编写语法更为简洁的JavaScript程序库），直到2006年1月14日，John正式宣布以jQuery的名称发布自己的程序库。随之而来的是jQuery的快速发展。

2006年1月John Resig等人创建了jQuery。8月jQuery的第一个稳定版本，并且已经支持CSS选择符、事件处理和AJAX交互。

2007年7月，jQuery1.1.3版发布，这次小版本的变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始，jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。

同年9月，jQuery1.2版发布，它去掉了对XPath选择符的支持，原因是相对于CSS语法它已经变得多余了。这一版能够对效果进行更为灵活的定制，而且借助新增的命名空间事件，也使插件开发变得更容易。

这个新的套件是作为曾经流行但已过时的Interface插件的替代项目而发布的。jQuery UI中包含大量预定义好的部件（widget），以及一组用于构建高级元素（例如可拖放、拖拽、排序）的工具。

Repaint又叫Redraw，重绘，它是指一种不影响当前dom结构的和布局的一种重绘动作。

以下的动作都会促发Repaint：

不可见或可见（visibility）

颜色和图片改变（background,border-color,color之类的属性）；

不改变页面元素大小，形状和位置，但改变其外观的变化。

Reflow，又叫重构， 比起 Repaint 来讲就是一种更加显著的变化了。它主要发生在 DOM 树被操作的时候，任何改变 DOM 的结构和布局都会产生 Reflow。但一个元素的 Reflow 操作发生时，它的所有父元素和子元素都会发生 Reflow，最后 Reflow 必然会导致 Repaint 的产生。举例说明，如下动作会产生 Repaint 动作：

浏览器窗口的变化；

DOM 节点的添加删除操作；

一些改变页面元素大小，形状和位置的操作的触发。

减少 Reflow

通过 Reflow 和 Repaint 的介绍可知，每次 Reflow 比其 Repaint 会带来更多的资源消耗，我们应该尽量减少 Reflow 的发生，或者将其转化为只会触发 Repaint 操作的代码。