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,如果已经存在,则不加载;总之会在判断完成后在执行回调。

时间: 2024-08-07 10:39:48

js文件动态添加的实现的相关文章

js 如何动态添加数组_百度知道

1.数组的创建var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长度以外

android webview与js交互(动态添加js)

1.本地html与本地html里的js交互 2.本地html与本地js交互 3.网络html与网络js交互 4.网络html与本地js交互 5.各个情况动态添加js 以上5点都可以用一种方式来模拟,在本篇中采用本地html与本地js交互 (包含动态添加js的操作) 6.拦截url请求(在webview加载完成以后,触发的请求url) 7.拦截url请求后返回自己封装的数据(基于第6点,加载完成后,触发一些请求数据的url时拦截并自己封装数据返回给webview) 注:6.7点将在下一篇博客介绍

ThinkPHP中关于JS文件如何添加类似__PUBLIC__图片路径

在对html样式进行优化的时候,经常会用到Js/jquery进行一些跳转切换的样式,而我们常做的就是在Js/jquery代码中嵌url图片链接代码,以实现动态交互的页面效果. 如下图所示: ------------------------------------------------------------------------------------------------------------------------------- 问题:Js文件不认识__PUBLIC__这些think

如何使用validate.js进行动态添加和移除表单验证信息

表单是我们在开当中的常客,那么对表单的验证也是必须的,那么如何实现动态给表单添加验证规则呢? 方法: 1,动态添加验证规则 // 添加$("#addConnectUser").rules("add",{rules:{required:true,isString:true},messages:{required:"用户名为必填项",isString:"请输入规范字符"}});// 移除 $("#addConnectUs

js动态创建style节点(js文件中添加css)

ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 --------------------- 有很多提供动态创建 style 节点的方法,但是大多数都仅限于外部的 css 文件.如何能使用程序生成的字符串动态创建 style 节点,我搞了2个小时. 静态外部 css 文件语法: @import url(style.css); 动态外部 css 文件加载的方法有如下: 第一种: var style = docum

js jquery 动态添加表格

for循环将你要添加的标签写上,然后直接var talbeAdd=""for(){ tableAdd+="<tr><td>这儿写你要添加的内容</td></tr>"; }$("table").append("这个写你要添加的标签");你想通过什么事件添加自己写

Js实现动态添加删除Table行示例

<table cellpadding="0" cellspacing="0" border="1" style="margin:auto; width:96%;" id="LearnInfoItem"> <tr > <td colspan="8" bgcolor="#96E0E2" style="height:30px;&quo

js实现动态添加删除(留言板)

介绍:仿照留言板写一个类似的实例,具有添加.删除的简单功能 思路:点击发布按钮,利用DOM操作进行元素添加[appendChild()],点击删除按钮,利用DOM找到父节点,进行删除[removeChild()] <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style typ

js回车动态添加表格,右键动态删除表格行

<script type="text/javascript" language="javascript">//屏蔽浏览器右键function stop(){ return false;}document.oncontextmenu = stop;var i=3;$(function() { //点击页面其他位置右键菜单消失 $('body').bind('click', function(ev) { $('#menu').css('display','n