JQuery的那些问题

一、普通引入注意点

插件大多依赖于 jQuery，所以注意在插件文件之前引用 jQuery。

二、重置方法不好使

JQ在重置form时 KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲form').reset();…(’#form’)[0].reset();

三、jQuery在webpack下的全局引入

运行命令安装jquery包

当前项目目录下运行命令
cnpm install jquery --save-dev 或 npm install --save jquery
以上两个命令都可以，分析一下：
1、cnpm是从淘宝镜像上下载，npm是官方提供的下载路径，据说cnpm比较快，但是我这里速度差别不大。
2、–save-dev 是保存在开发环境下，–save 是保存在基础环境下，但感觉也没有差别。
目前只发现影响依赖引入package.json文件中的位置：
–save 配置会存在的dependencies下，–save-dev 配置会存在devDependencies下。
dependencies下的在项目打包的时候也会打进去；
devDependencies下的只存在开发环境，打包部署的时候不会打进去。
3、jquery --save 还是 --save jquery 顺序先后没有影响。

修改webpack配置

修改webpack.base.conf.js，添加plugins

const webpack=require('webpack');
plugins: [
	new webpack.ProvidePlugin({
		jQuery: 'jquery',
		'window.jQuery': 'jquery',
		'root.jQuery': 'jquery'
	})
]

或者在webpack.dev.conf.js的plugins追加

new webpack.ProvidePlugin({
	jQuery: 'jquery',
	'window.jQuery': 'jquery',
	'root.jQuery': 'jquery'
})

其中为了将jequery的使用$符号与vue的$区别，在此配置使用jQuery代替$。
区别：
如果在base里添加，部署环境能直接用；
如果在dev里添加，部署环境会发现未定义，需要在prod里也添加一边。

main.js是否还需要引入

在main.js中import $ form 'jquery’需要不需要的问题：
因为我在webpack.base.conf.js中配置了jQuery的使用同时将其引入，所以main.js无需二次引入。
类比所有外部引入的js，全局使用需要在main.js引入，局部使用在局部引入即可。

使用jQuery的animate执行多个动画

vue中为实现输入框抖动，并添加红色边框，使用jQuery的animate执行多个动画，代码段如下：

let emptyfields = jQuery('#test')
jQuery(emptyfields).stop()
          .animate({ left: '-10px' }, 100).animate({ left: '10px' }, 100)
          .animate({ left: '-10px' }, 100).animate({ left: '10px' }, 100)
          .animate({ left: '0px' }, 100)
          .addClass('required')
.required {
	border: 1px solid #f00;
}

然后发现抖动异常，简化定位：

jQuery(emptyfields).animate({ left: '-10px' }, 100).animate({ left: '10px' }, 100)

发现向左移动不足10px立马向右移动至10px位置，怀疑是执行时间设置问题，任意设置现象还是不变。
查询资料(https://www.jianshu.com/p/ab65b10f85b2)，发现用法好像没有什么问题：
按顺序执行多个动画写法没什么问题啊……
费解
费解
费解
继续查询资料的过程中意识到，为什么要用jQuery的animate呢。
不是说操作DOM的成本很高，jQuery就是提供很多对dom的便利操作，但当前用的是vue啊！
于是改用css的animation属性，控制userShake为true或false即可。代码段如下：

<div class="styled-input" v-bind:class="{required: userShake}">
.required
{
  border: 1px solid #f00;
  box-sizing: border-box;
  animation: myshake 0.3s 1;
}
@keyframes myshake
{
  0% {left: 0px;}
  15% {left: -10px;}
  25% {left: 0px;}
  40% {left: 10px;}
  50% {left: 0px;}
  60% {left: 5px;}
  70% {left: 0px;}
  80% {left: -5px;}
  90% {left: 0px;}
  100% {left: 0px;}
}
@-webkit-keyframes myshake /*Safari and Chrome*/
{
  0% {left: 0px;}
  15% {left: -10px;}
  25% {left: 0px;}
  40% {left: 10px;}
  50% {left: 0px;}
  60% {left: 5px;}
  70% {left: 0px;}
  80% {left: -5px;}
  90% {left: 0px;}
  100% {left: 0px;}
}

补充知识点：dom的回流与重绘
详见：
https://mp.weixin.qq.com/s/pa9mmQah-DNb9fNAYe2AvA
总结：
reflow(回流)：
根据Render Tree布局(几何属性)，意味着元素的内容、结构、位置或尺寸（包括字体大小的改变）发生了变化，需要重新计算样式和渲染树；
repaint(重绘)：
意味着元素发生的改变只影响了节点的一些样式（背景色，边框颜色，文字颜色等），只需要应用新样式绘制这个元素就可以了；
为了避免回流与重绘，需要减少对dom的操作。避免逐项更改样式，可以将样式挂在公共层级。或者将元素脱离文档流，定位成固定位置或绝对位置。