js调用js

最新推荐文章于 2022-09-08 17:29:55 发布

BlueSkyInMyEye

最新推荐文章于 2022-09-08 17:29:55 发布

阅读量1.4k

点赞数

分类专栏： Js技术文章标签： Import js js调用js

Js技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

来源：http://stackoverflow.com/questions/950087/include-javascript-file-inside-javascript-file
In response to e-satis comment:

there actually is a way to load a javascript file not asynchronously, so you could use the functions included in your newly loaded file right after loading it, and i think it works in all browsers.You need to use jQuery.append() on the<head> element of your page, i.e. :

$("head").append('<script type="text/javascript" src="' + script + '"></script>');

However, this method also has a problem: if an error happens in the imported js file, Firebug (and also Firefox Error Console and Chrome Developer Tools as well) will report it's place incorrectly, which is a big problem if you use Firebug to track js errors down alot (i do). Firebug simply doesn't know about the newly loaded file for some reason, so if an error occurs in that file, it reports that it occurred in your main html file and you will have trouble finding out the real reason for the error.

But if that is not a problem for you, then this method should work.

I have actually written a jQuery plugin called $.import_js() which uses this method:

(function($)
{
    /*
     * $.import_js() helper (for javascript importing within javascript).
     */
    var import_js_imported = [];

    $.extend(true,
    {
        import_js : function(script)
        {
            var found = false;
            for (var i = 0; i < import_js_imported.length; i++)
                if (import_js_imported[i] == script) {
                    found = true;
                    break;
                }

            if (found == false) {
                $("head").append('<script type="text/javascript" src="' + script + '"></script>');
                import_js_imported.push(script);
            }
        }
    });

})(jQuery);

So all you would need to do to import js is:

$.import_js('/path_to_project/scripts/somefunctions.js');

I also made a simple test for this at : http://www.kipras.com/dev/import_js_test/

What it does is it includes a main.js file in the main HTML and then the script in main.js uses$.import_js() to import an additional file called included.js, which defines this function:

function hello()
{
    alert("Hello world!");
}

And right after including included.js, the hello() function is called, and you get the alert.

来源：http://blog.csdn.net/boral_li/article/details/4179215
众多编程语言都有类似import、include、using等关键字实现引入其它源码文件的功能，但是Javascript却不没有这样的关键字，但是我们可以自己来实现import方法：

var JCore = {//构造核心对象
    version:1.0,
    $import:function(importFile){
        var file = importFile.toString();
        var IsRelativePath = (file.indexOf("$")==0 ||file.indexOf("/")==-1);//相对路径(相对于JCore)
        var path=file;
        if(IsRelativePath){//计算路径,$开头表示使用当前脚本路径，/开头则是完整路径
            if(file.indexOf("$")==0)
                file = file.substr(1);
            path = JCore.$dir+file;
        }
        var newElement=null,i=0;
        var ext = path.substr(path.lastIndexOf(".")+1);
        if(ext.toLowerCase()=="js"){
            var scriptTags = document.getElementsByTagName("script");
            for(var i=0;ilength;i++) {  
                if(scriptTags[i].src && scriptTags[i].src.indexOf(path)!=-1)
                    return;
            }
            newElement=document.createElement("script");
            newElement.type="text/javascript";
            newElement.src=path;
        }
        else if(ext.toLowerCase()=="css"){
            var linkTags = document.getElementsByTagName("link");
            for(var i=0;ilength;i++) {
                if(linkTags[i].href && linkTags[i].href.indexOf(path)!=-1)
                    return;
            }
            newElement=document.createElement("link");
            newElement.type="text/css";
            newElement.rel="Stylesheet";
            newElement.href=path;
        }
        else
            return;
        var head=document.getElementsByTagName("head")[0];
        head.appendChild(newElement);
    },
    $dir : function(){
            var scriptTags = document.getElementsByTagName("script");
            for(var i=0;ilength;i++) {  
                if(scriptTags[i].src && scriptTags[i].src.match(/JCore/.js$/)) {  
                    path = scriptTags[i].src.replace(/JCore/.js$/,"");   
                    return path;
                }
            }
            return "";
    }()
}

其中$dir表示当前脚本文件的路径，通过当前文件的文件名查找路径；$import方法可以导入js脚本或css样式表文件，如果以$开头则使用当前脚本文件的路径导入文件，如果以/开头则表示是完整的脚本路径！

$import("/Script/myfile.js");
$import("/Script/mystyle.css");
$import("$myfile.js");

为html动态添加script节点元素或style节点元素只是动态导入脚本的一种脚本，除此之外，还可以通过Ajax异步请求js脚本文件，然后通过eval方法把获取的脚本文本转换为脚本代码实现动态导入功能！但是css样式表文件无法通过这种方式导入！不过CSS样式表本身即有@import关键字，可以实现文件引用包含！

来源：http://lamblog.blog.163.com/blog/static/200724238201211733142/

JS文件都放到一个统一的JS里引用。缺点是这种方法要先在一个不用这些

JS文件的一个页先引用一次。因为这种引用机制是异步引用JS文件，

所以当你在当前页面用这些JS文件时就会有问题。

head=document.getElementsByTagName('head').item(0);
CreateLink("../Ext/resources/css/ext-all.css");
CreateLink("../css/MainStyle.css");
CreateScript("../Ext/adapter/ext/ext-base.js");
CreateScript("../Ext/ext-all.js");
CreateScript("../js/default.js");
function CreateScript(file){
    var new_element;
     new_element=document.createElement("script");
     new_element.setAttribute("type","text/javascript");
     new_element.setAttribute("src",file);
    void(head.appendChild(new_element));
}

function CreateLink(file){
    var new_element;
     new_element=document.createElement("link");
     new_element.setAttribute("type","text/css");
     new_element.setAttribute("rel","stylesheet");
     new_element.setAttribute("href",file);
    void(head.appendChild(new_element));
}

BlueSkyInMyEye

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js调用js

来源：http://stackoverflow.com/questions/950087/include-javascript-file-inside-javascript-fileIn response to e-satis comment:there actually is a way to load a javascript file not asynchronously, so y
复制链接

扫一扫