js文件的互调

最新推荐文章于 2022-07-01 16:40:41 发布

原创最新推荐文章于 2022-07-01 16:40:41 发布 · 799 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #互调

Web_mobile_app 专栏收录该内容

5 篇文章

订阅专栏

本文通过实例展示了如何在HTML页面中引用多个JS文件，并实现不同JS文件间的函数调用。具体包括创建HTML文件关联JS资源，定义并调用JS文件夹中的函数，以及跨文件夹调用jscore文件夹内的函数。

本文将举例，说明js文件的互调问题

1.创建main.html文件，用于关联js文件

<!DOCTYPE html>
<html>
<head>
    <title>函数作用域测试</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="js/abc.js"></script>
    <script src="jscore/datahandler.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            alert("123");
            ABC.autoDownload();
        });
    </script>
</head>
<body>
    <p>1.在head标签中，添加script标签，引入相应的js文件</p>
    <p>2.调用js文件夹中的ABC.autoDownload()函数</p>
    <p>3.调用jscore文件夹中的DATAHANDLER.upload.init()函数</p>
</body>
</html>

2.创建js文件夹，在此文件夹中新建一个abc.js文件

/**
* Created with JetBrains WebStorm.
* User: ABCUSER
* Date: 13-7-31
* Time: 下午6:38
* To change this template use File | Settings | File Templates.
*/
var ABC={
    autoDownload:function(){
        alert("in autoDownloas()");
        DATAHANDLER.upload.init();
    }
};

3.创建jscore文件夹，在此文件夹中创建datahandler.js文件

/**
* Created with JetBrains WebStorm.
* User: ABCUSER
* Date: 13-7-31
* Time: 下午6:44
* To change this template use File | Settings | File Templates.
*/
var DATAHANDLER={};
DATAHANDLER.upload= {
    init:function(){
        alert("in DATAHANDLER.upload");
    }
}

当然，名字都是可以自己随意命名的。