JAVA高级面试进阶训练营视频教程

admin

　　一、问题：

　　　　最近在写vue项目时，想引入某些非模块化的第三方插件时，总是发现会有报错。且在与本地运行插件测试对比时发现插件根本没有注入到jQuery中（console.log($.fn)查看当前jq有哪些方法），例如：

　　　　

       本地测试                                     　　　　　　　　　　　　　　　　　　　　　　　　　　　Vue页面测试

Object [jquery: "1.10.2",  …]           　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Object [jquery: "1.10.2",…] 
  .                                                                                         .
  .                                                                                         .
  .                                                                                         .
val: ƒ (e)                                                                                val: ƒ (e)
velocity: ƒ ()                                                                          width: ƒ (i,o)
width: ƒ (i,o)                                                                            wrap: ƒ (e) 
wrap: ƒ (e) wrapAll: ƒ (e)
wrapAll: ƒ (e) wrapInner: ƒ (e)
wrapInner: ƒ (e) 

　　二、原因：

　　　　由于jQuery这类的通用插件基本都是在模块化引入进来，即在webpack.base.conf.js里引入，每个页面使用的都是通用jq，单页面引入的第三方插件并不会注入到通用的jq中，故jq内无插件方法。

 plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    })
  ],

　　　　肯定有人会疑惑，那我在单页面再单独引入jQuery与插件可以吗，很不幸地是此时js加载顺序是：单页面jQuery--->插件--->模块化jQuery--->插件，也就是说模块化的jq肯定会加载进来。

　　　　

import  '../../static/jquery-background/js/jquery.min.js';
import  '../../static/jquery-background/js/velocity.js';

 

　　三、解决方案：

　　　既然模块化jq肯定会加载进来，只需把模块化jq引入单页面，拿插件方法注入。

　　　步骤：

　　　　①新建任意名.js，例如jquery-vendor.js；添加如下内容：

import $ from 'jquery'
window.$ = $
jQuery = $
window.jQuery = $
export default $

　　　　②将新建的js与插件放在static下同一文件夹下，然后vue页面引入即可:

import $ from '../../static/jquery-background/js/jquery-vendor.js';
import  '../../static/jquery-background/js/velocity.js';