vue 远程加载js

其实vue加载远程js的教程很多,但是我比较笨呐。。。用不出来,每次都报方法/属性不存在的错误,来看一下典型的写法:

  const s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = '<js地址>';
  document.body.appendChild(s);

如: Vue如何引入远程JS文件
如果这个能满足你们的需求就不需要看下面了。
其实现在我想做到的是js加载完成后执行我想要执行的代码。
现在用jquery来实现:
首先在assets/js/目录下创建common.js,
然后添加函数:

function loadJs(url,_callback_success,_callback_fail){
    var callback_success = function (response) {
        console.log("load js success...",response);
    }
    var callback_fail = function (response) {
        console.log("load js fail...",response);
    }
    _callback_success = _callback_success || callback_success;
    _callback_fail = _callback_fail || callback_fail; 
    $.getScript(url).done(_callback_success).fail(_callback_fail);
}

为了方便调用,可以定义一个结构体:

var API = (function () {
    function API() {
    }

    //加载js的函数
  API.prototype.loadJs = function(url,callback){
    callback = callback || {};
    loadJs(url,callback.success,callback.fail);
  }

  return API;
})();

export default API;

接下来介绍使用方法:
方法1

在webpack.base.conf.js的module.exports/resolve/alias添加:

var webpack = require('webpack')

module.exports = {
...
  resolve: {
    ...
    alias: {
        ....
        'API': path.resolve(__dirname, 'assets/js/common')
    }
    ...
  },
...
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      API: 'API',
    ...
    })
  ]
}

在App.vue的create函数直接添加:

...
created() {
 let api = new API.default();
 window.$api = api;
},
...

这种方法简单粗暴,这样定义的好处是无论在哪里,可以直接使用了:

$api.loadJs("<js地址>",{
  success(){
      //加载你想要做的事
  }
});

方法二
自己写个vue.js插件(1):自定义指令的妙用
在common文件中定义:

export default{
    install(Vue){
        Vue.prototype.$api = new API();
    }
}

在mian.js中加载:

import api from 'assets/js/common'
Vue.use(api)

于是,只要在使用时加上this.就行了:

...
this.$api.loadJs(...
...

方法三
可以直接调用,只需要引入方法即可:

<script>
import {loadJs} from '@/assets/js/common.js'
...
created(){
 //function loadJs(url,_callback_success,_callback_fail)
 loadJs("<js地址>",...
 ...
}
...

好了,说了这么多,那万一不想用jquery怎么办?这个的确难办,因为本人并未实践过,不过提供一下链接供参考,实现并不难:
JS动态加载脚本并执行回调操作

jquery及js实现动态加载js文件的方法
写的总体复杂了了些,但是良好的结构很重要,因为

工欲善其事必先利其器

作者:陨石坠灭
链接:https://www.jianshu.com/p/a29a1e1e8d10
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值