简体   繁体   English

Javascript:从另一个文件调用函数

[英]Javascript : calling function from another file

I'm just new comer at Javascript so when I read a Javascript document, and there're many complex structures that I cannot follow. 我只是Javascript的新人所以当我阅读Javascript文档时,有许多复杂的结构我无法遵循。

Here is the short explanation of Javascript code that I'm reading : in my case there are two main files : Helper.js and Circle.js . 以下是我正在阅读的Javascript代码的简短说明:在我的例子中有两个主要文件: Helper.jsCircle.js

In Helper.js, there is a method name : using:function(param1,param2) . 在Helper.js中,有一个方法名: using:function(param1,param2) And below is code for Circle.js : 以下是Circle.js代码:

Helper.using('py.Figures', function (ns) {

    ns.Circle = function (params) {
        // some additional methods and code here
    }

    ns.Alert = function(){   // for the test purpose
           alert('hello');
    }
});

And in file test.html, I write some code like this : 在文件test.html中,我写了一些这样的代码:

<script src="Helper.js"></script>
<script src="circle.js"></script>
<script>
   test = function(){
        py.Figures.Alert();  // calling for testing purpose
   }
</script>
<body onload="test();"></body>

When I run on Chrome and view in console, I meet this error : 当我在Chrome上运行并在控制台中查看时,我遇到了以下错误:

Uncaught TypeError: Object # has no method 'Alert' 未捕获的TypeError:对象#没有方法'警报'

It means I haven't import those class, yet. 这意味着我还没有导入那些课程。 Please tell me how to calling function from another file. 请告诉我如何从另一个文件调用函数。 In my case is : calling Alert() 在我的情况是:调用Alert()

Thanks :) 谢谢 :)

@ Edit: I have added some links for the code : @编辑:我为代码添加了一些链接:

Helper.js Helper.js

Circle.js Circle.js

Why don't you take a look to this answer 你为什么不看看这个答案

Including javascript files inside javascript files 在javascript文件中包含javascript文件

In short you can load the script file with AJAX or put a script tag on the HTML to include it( before the script that uses the functions of the other script). 简而言之,您可以使用AJAX加载脚本文件,或者在HTML上添加脚本标记以包含它(在使用其他脚本的功能的脚本之前)。 The link I posted is a great answer and has multiple examples and explanations of both methods. 我发布的链接是一个很好的答案,有两个方法的例子和解释。

Yes you can. 是的你可以。 Just check my fiddle for clarification. 请检查我的小提琴以获得澄清。 For demo purpose i kept the code in fiddle at same location. 出于演示目的,我将代码保存在相同的位置。 You can extract that code as shown in two different Javascript files and load them in html file. 您可以提取该代码,如两个不同的Javascript文件所示,并将它们加载到html文件中。

https://jsfiddle.net/mvora/mrLmkxmo/ https://jsfiddle.net/mvora/mrLmkxmo/

 /******** PUT THIS CODE IN ONE JS FILE *******/

    var secondFileFuntion = function(){
        this.name = 'XYZ';
    }

    secondFileFuntion.prototype.getSurname = function(){
     return 'ABC';
    }


    var secondFileObject = new secondFileFuntion();

    /******** Till Here *******/

    /******** PUT THIS CODE IN SECOND JS FILE *******/

    function firstFileFunction(){
      var name = secondFileObject.name;
      var surname = secondFileObject.getSurname()
      alert(name);
      alert(surname );
    }

    firstFileFunction();

If you make an object using the constructor function and trying access the property or method from it in second file, it will give you the access of properties which are present in another file. 如果使用构造函数创建对象并尝试从第二个文件中访问该属性或方法,则它将允许您访问另一个文件中存在的属性。

Just take care of sequence of including these files in index.html 只需在index.html中处理包含这些文件的顺序

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM