zoukankan      html  css  js  c++  java
  • js文件动态添加的实现

    基于AMD和CMD的模块开发和按需加载,给我们的开发过程带来了便捷。

    今天就来就分享一个自己在项目开发中用到的一个按需加载js的一个方法,不多说,直接ps代码啦

    /**
     * JS 加载到顶部
     * @param {String} url
     * @param {Boolean} 请求并加载
     * @param {Function} fn
     * @return {Boolean}
     */
    function requireJs(url, multi, fn) {
        if (typeof multi == 'function') {
            var _temp = fn;
            fn = multi;
            multi = _temp;
        }
        var ss = document.getElementsByTagName('script');
        var loaded = false;
        for (var i = 0; i < ss.length; i++) {
            if (ss[i].src && ss[i].getAttribute('src') == url) {
                loaded = true;
                break;
            }
        }
        if (loaded) {
            if (fn && typeof fn != 'undefined' && fn instanceof Function){
                fn();
                return false;
            } 
        }
        var s = document.createElement('script'),
        b = false;
        s.setAttribute('type', 'text/javascript');
        if (multi) {
            this.loadJs = fn;
            var noArg = url.indexOf('?') == -1;
            s.setAttribute('src', url + (noArg?'?':'&') + 'callback=WYSIWYG.loadJs');
        } else {
            s.setAttribute('src', url);
            s.onload = s.onreadystatechange = function () {
                if (!b && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
                    b = true;
                    if (fn && typeof fn != 'undefined' && fn instanceof Function) fn();
                }
            };
        }
        document.getElementsByTagName('head')[0].appendChild(s);
    }

    该方法会检查页面是否已经引入了需要引入的js,如果没有,则加载该js,如果已经存在,则不加载;总之会在判断完成后在执行回调。

  • 相关阅读:
    Ubuntu 16.04 设置静态IP 注意事项
    C++ Primer: 1. 初识输入和输出
    车牌识别1:License Plate Detection and Recognition in Unconstrained Scenarios阅读笔记
    梳理检测论文-Refinement Neural Network
    linux 的 磁盘管理
    ubuntu 18 设置语言环境
    Ubuntu 18.04 的网络配置
    YoLo 实践(1)
    Distributed TensorFlow
    MXNet 分布式环境部署
  • 原文地址:https://www.cnblogs.com/oygg/p/5870916.html
Copyright © 2011-2022 走看看