打造Js库

最新推荐文章于 2024-09-08 07:58:11 发布

蓝色_冰点

最新推荐文章于 2024-09-08 07:58:11 发布

阅读量836

点赞数

分类专栏： Ajax 文章标签： function include javascript path fun firefox

本文链接：https://blog.csdn.net/sharp_ice/article/details/3719252

版权

Ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

最近开始用AJAX来进行开发，随之而来的一个问题就是，页面要引入N多个<script src="" type="text/javascript"></script>，而且有些文件又依赖于其它的js文件，所以我在想，如果能像C语言那样，把一整套js做成一个库的形式，如果某个js(如：js1)文件需要另一个js(如:js2)文件所定义的功能，那么只要在这个js1文件中加一行代码，把js2包含进去，而页面呢只需要用script标签把js1引入就OK了。

有了这个想法，就开始着手进行开发，把我写的代码发布一下，以供有兴趣的人参考，如果有更高明的方法，谢谢指导

header.js文件如下：

 
  //文件名：header.js 
//JsLib必须包含的头文件 
var Lib={
    timerID:null,    //测试include的时间标志 
    path:null,  //库文件目录 
    scripts:[], //所有已包含的js 
    main:function(){alert("未指定Lib.main程序入口")},  //程序入口 
    //取文件目录 
    GetFilePath:function(fn)
    {
        var path="";
        var found=false;
        var scripts=document.getElementsByTagName("SCRIPT");
        for(var i=0;i<scripts.length;i++)
        {
            var fullPath=scripts[i].src;
            var index=fullPath.lastIndexOf("/");
            var fileName=fullPath.substr(index+1);
            if(fileName.toLowerCase()==fn.toLowerCase())
            {
                if(found)
                {
                    alert("警告：您在代码中多次导入["+fn+"],这有可能导致错误");
                }
                path=fullPath.substring(0,index+1);
                found=true;
            }
        }
        if(!found)
        {
            alert("警告：无法找到文件["+fn+"]");
        }
        return path;
    },
    //文件包含函数，所取目录相对于header.js所在目录 
    include:function(path)
    {
        var fullPath=this.path+path
        for(var i=0;i<this.scripts.length;i++)
        {
            var sc=this.scripts[i];
            if(sc.src.toLowerCase()==fullPath.toLowerCase())
            {//重复包含，跳过 
                return;
            }
        }
        var script=document.createElement("script");
        script.type="text/javascript";
        script.language="javascript";
        script.src=fullPath;
        
        var head=document.getElementsByTagName("head")[0];
        this.scripts.push(script);
        if(!script.readyState)
        {//fireFox兼容 
            script.οnlοad=function(evn)
            {
                this.readyState="loaded";
            }
        }
        head.appendChild(script);
    },
    //运行程序 
    Run:function()
    {
        //this.runningMain=fun;   //保存要运行的函数 
        this.timerID=window.setInterval("Lib.Trying()",1);  //开启定时器，检测include的文件，并偿试运行 
    },
    //偿试中 
    Trying:function()
    {
        for(var i=0;i<this.scripts.length;i++)
        {
            var script=this.scripts[i];
            if(!script.readyState)
            {//fireFox下没有readyState属性，该属性会在script.onload时，被赋值 
                return;
            }
            var state=script.readyState;
            if(state!="loaded" && state!="complete")
            {//尚有未加载完成的js文件 
                return;
            }
        }
        window.clearInterval(this.timerID); //清除定时器 
        this.main(); //运行 
    }
}
Lib.path=Lib.GetFilePath("header.js");
function LibRun(evn)
{
    Lib.Run();
}
if(window.attachEvent)
{
    window.attachEvent("onload",LibRun)
}
else
{
    window.addEventListener("load",LibRun,false);
}
 
 

path1/js2.js文件如下：

 
  /// <reference path="../header.js" /> 
function Fun2()
{
    alert("fun2");
}
 
 

js1.js文件如下：

 
  /// <reference path="header.js" /> 
Lib.include("path1/js2.js");
function fun1()
{
    alert("f1");
}
 
 

调用页面代码如下：

 
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <!-- header.js是必须的，它定义了最基本的include和Run等方法 -->
    <script src="JsLib/header.js" type="text/javascript"></script>
    <!-- 除header.js外，我们只需一个Script标签就OK了 -->
    <script language="javascript" type="text/javascript">
    Lib.include("js1.js");  //包含js1.js。我们无需担心是否包含了js2.js，因为这是js1.js的事情。
    Lib.main=function()
    {    
        fun1(); //在js1中定义
        Fun2(); //在js2中定义，但js1中包含了js2
    }
    </script>
</head>
<body>
</body>
</html>
 
 