简体   繁体   English

如何使Javascript / JQuery对象方法可在整个HTML页面中访问

[英]How to make Javascript/JQuery object methods accessible throughout HTML page

I would like to create a single Javascript/JQuery object that would hold many function which could be access through a HTMl page but I keep running into errors. 我想创建一个Javascript / JQuery对象,其中包含许多可以通过HTMl页面访问的功能,但是我一直遇到错误。 Below is my external JS file 下面是我的外部JS文件

function AppPage(settings){
    function save(formid){
        //get form data and save
    };
    function delete(rowid){
        //get rowid and delete via ajax
    }
}

Now I would like to initialize the Javascript object and have it accessible throughout 现在,我想初始化Javascript对象,并在整个过程中对其进行访问

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <script src="../js/app.page.js"></script>
    <script type="text/javascript">
        $(function(){
               var app_page = new AppPage({
                      base: "http://localhost/app"
               });
          });
   </script>
   </head>
   <body>
     <a onclick="app_page.save('save something')">Example Save Link</a>
     <a onclick="app_page.delete('delete something')">Example Delete Link</a>
  </body>

When I try calling the functions I just get an error 当我尝试调用函数时,我只会得到一个错误

ReferenceError: app_page is not defined ReferenceError:未定义app_page

How can I organize this better? 我该如何更好地组织呢?

You could do something like this: 您可以执行以下操作:

<script>
    var app_page = {
        save: function (formid) {
            //get form data and save
        },

        delete: function (rowid) {
            //get rowid and delete via ajax
        },
    }
</script>

You can then call them like this: 然后可以这样称呼他们:

app_page.save("formid")
app_page.delete("rowid")

By object I guess you mean constructor function and The definition of constructor 'AppPage' in incorrect.That will not work even in your javascript. 按对象,我猜你的意思是构造函数和构造函数'AppPage'的定义不正确。即使在您的javascript中也无法使用。

correct way 正确的方法

function AppPage(){
   this.save = function(formid){
     //get form data and save
   };
   this.delete = function(rowid){
     //get rowid and delete via ajax
   };
}
var app_page = new AppPage();

and If you want it to be an object you have to use following syntax. 如果要使其成为对象,则必须使用以下语法。

var app_page = {
   save: function(formid){
     //get form data and save
   },
   delete: function(rowid){
     //get rowid and delete via ajax
   }
};

**don't use 'delete', it's a reserved keyword. **请勿使用“删除”,这是一个保留关键字。

You need to declare the child functions of AppPage as properties. 您需要将AppPage的子功能声明为属性。 You also need to store the settings object you're passing in or your child functions will have nothing to reference: 您还需要存储要传入的settings对象,否则子函数将没有任何可参考:

function AppPage(settings){

    // Store the settings
    this.settings = settings;

    // Define the "save" method
    this.save = function(formid){
        console.log("Save " + formid + " to " + this.settings.base);
    };

    // Define the "delete" method
    this.delete = function(rowid){
        console.log("Delete " + rowid  + " to " + this.settings.base);
    }
}

While ill advised to use global variables your var before the variable initialization makes it local to the function you defined it in. Remove var before app_page and it will work. 虽然不明智使用全局变量的var的变量初始化使得地方给你定义它的功能之前。app_page之前删除变种,它会工作。

On the other hand i advise you to create a global object of yours where you define all your functionality on. 另一方面,我建议您在定义所有功能的地方创建自己的全局对象。

Also your functions from the app_page object are not exposed you must assign them to the object in which they are defined attaching them to the base object so you get this.save = function()... 同样,app_page对象中的函数不会公开,您必须将它们分配给定义了它们的对象,然后将它们附加到基础对象上,这样您就可以得到this.save = function()...

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

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