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 1. 在webpack.base.conf.js的module.exports/resolve/alias添加:

var webpack = require('webpack')

module.exports = {
...
  resolve: {
    ...
    alias: {
        ....
        'API': path.resolve(__dirname, 'assets/js/common')
    }
    ...
  }
...
}
  1. 在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文件的方法

写的总体复杂了了些,但是良好的结构很重要,因为 > 工欲善其事必先利其器

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏社区的朋友们

Java 动态加载 so 的解决方案

业务场景有对 so 实现动态加载/替换的需求,但 Java 并没有直接动态加载 so 的机制。本文将深度剖析 Java 加载 so 的实现机制,并提出一套 Ja...

2K10
来自专栏测试驿栈

Jmeter(三十一)_dummy sampler模拟数据驱动

之前写过一篇数据驱动的文章 数据驱动测试 ,但是内容过于简单,有些关键的地方没有写明白。这两天参照了一下官方文档,重新整理了一篇数据驱动测试!

42640
来自专栏大数据

使用Go构建一个Data Thrashing CLI工具

以下所撰就是这个快速上手的项目。最后,我将在容器中搭建服务,并将其放入Kubernetes(k8s)集群中,不过下面操作都是在CLI环境下进行的。

26900
来自专栏守望轩

Visual Studio 2008 每日提示(二十三)

#221、在对象浏览器中按对象和成员排序 原文链接:You can sort objects and members in the Object Browse...

39560
来自专栏owent

Linux 和 Windows PowerShell 常用工具/命令 记录

enca: http://dl.cihar.com/enca/   文件名编码转换 iconv: 文件编码转换 convmv: 文件名编码转换 ldd: ...

1K40
来自专栏逸鹏说道

Python3 与 C# 并发编程之~ 线程篇2

其实以前的 Linux中是没有线程这个概念的, Windows程序员经常使用线程,这一看~方便啊,然后可能是当时程序员偷懒了,就把进程模块改了改(这就是为什么之...

21740
来自专栏程序员的碎碎念

PHPExcel 表格导入数据代码解析(二)

前面大概讲了phpexcel用表格导入数据到数据库中的教程,今天会详细剖析函数代码,话不多说,先上代码: public function upload...

37560
来自专栏前端布道

全方位理解JavaScript的Event Loop

下面我们一个一个的来了解 Event Loop 相关的知识点,最后再一步一步分析出本段代码最后的输出顺序。

11730
来自专栏大学生计算机视觉学习DeepLearning

VS下如何建立一个新的MFC程序 网络编程 课设 基于C++ MFC 连接数据库 小应用 小项目浅析展示

50930
来自专栏大学生计算机视觉学习DeepLearning

网络编程 课设 基于C++ MFC 连接数据库 小应用 小项目浅析展示

49860

扫码关注云+社区

领取腾讯云代金券