javascript，调用包含构造函数的类来设置单击事件等？

我正在尝试组织我的javascript。我想做的是为每个页面创建一个类，而不是直接将javascript输入js——这是一个好的实践吗

让我解释一下。。考虑了一长串的，我真的很感激任何输入，好的或坏的和我的变量命名的想法。。。当然，请记住，这是一种类，所以我必须创建该类，但我必须将其命名为…（见下文）。。。我正在使用prototype+构造函数模式

// THIS FILE WILL BE SAVED as RESERVATIONPAGE
function ReservationPage(){
    // Setup click events in this constructor
    $('submit-button').bind('click',this.submit_click);

    $('clear-button').bind('click',this.clear_click);

    // setup other variables   
}

ReservationPage.prototype = {
      constructor: ReservationPage,
      submit_click : function () {
            alert(' you just clicked the submit button');
      },
      clear_click : function () {
            alert('button for clearning the form fields!!');
      }
};

然后每个页面都需要一个标准的js文件，即不是一个类/对象来实例化他们的页面js，就像上面所说的那样…，所以是一种入口点-因此

// THIS FILE WILL BE SAVED as ReservationLoad - notice the word Load :-) -- don't know if this is good naning convetion, anybody suggest anything different??

var reservationPage = new ReservationPage(); // CREATES NEW INSTANCE OF THE CLASS/OBJECT ..

我没有其他的方法，我真的很感激你的意见。我将广泛使用jquery，但这不重要。。。。。我需要一个标准的JS文件-没有对象来实例化我的对象，因此我调用了load。。。。这反过来实例化对象并调用构造函数

构造函数设置单击事件，然后调用方法

这个好吗,

你知道我哪里出错了吗

我真的很感激一些投入，我有点迷茫。。。。。。想把它做好。。。我来自c#net背景。。。。。我知道js不是一种合适的OOP语言，但我正试图这样对待它，以便更好地进行结构化

这样，我的所有js文件都与我的HTML和CSS分开：。。html中没有输入任何事件。。。它们都是通过代码输入的

---

期待任何信息

JavaScript是一种合适的OOP语言。它不像你习惯的那样是基于类的（它是基于原型的），但它绝对是面向对象的——非常多

你可以用JavaScript（非常强大）模拟类和类，这对像你（和我）这样有着相同背景的人很有用。但是类并不是模块化的唯一方式，这正是您要说的

您的问题中提出的解决方案创建了一个由对象（原型）支持的函数，然后您可以使用该函数创建另一个对象（实例），然后执行您想要的操作。这符合基于类的思维方式（这可能是一个很好的理由！），这是我为可能需要创建多个对象的事情所做的，但从某种意义上说，出于这个目的，这可能有些过分，因为在任何给定的时间都不会有多个页面对象实例。这还意味着您的单击处理程序将无法按照示例代码中的定义工作——当响应单击而调用它们时，

this

值将是错误的，它不会指向您的

ReservationPage

实例。（JavaScript中的函数只是函数，它们不是方法；

这个

是由函数的调用方式定义的，而不是它的定义方式。让我们这样的人感到惊讶，但事实证明它非常有用。）当然，这是可以的，但它需要……解决它

既然页面只需要一个实例化对象，而不需要所有的构造函数和原型，为什么不为页面只需要一个对象呢？您可以使用闭包（函数）将作用域放在该对象周围，这样它就可以轻松访问变量，而不必担心

这个

，也不必污染全局名称空间。下面是一个这样做的示例：

// Create a closure (function) to scope our variables, assign its
// return value to a variable for our page
var reservationPage = (function() {
    var somePageData;       // A private variable for our page

    // Our load function; we'll export that below
    function onLoad() {
        // Hook some elements
        $('submit-button').bind('click', submit_click);
        $('clear-button').bind('click', clear_click);

        // Set up some page data
        somePageData = 42;
    }

    // A private function for handling the click of the submit button
    function submit_click() {
        alert('You just clicked the submit button; page data is ' + somePageData);
    }

    // A private function for handling the click of the clear button
    function clear_click() {
        alert('You just clicked the clear button; page data is ' + somePageData);
    }

    // Export any functions we may need outside the closure
    return {onLoad: onLoad};
})();
$(document).ready(reservationPage.onLoad);

请注意，所有函数都可以访问

somePageData

变量，也可以访问彼此，但我们不必担心

这个

。这是因为函数是在声明

somePageData

的范围内声明的，因此它们“关闭”了它（可以访问它）。这种访问是“实时的”，它不是拷贝或其他东西

请注意，我已将整个内容包装在一个函数中。我这样做是因为我们希望避免将所有内容都转储到全局名称空间中，因为A）这是正确的（tm），B）将所有页面合并到一个可重用的文件中。您的组合文件中可以有四个或五个（或20个）页面对象，所有这些对象都使用相同的名称定义了一个var，它们将保持不同，因为它们在单独的函数中声明。类似地，页面的函数（

onLoad

等）的作用域为函数。使用这样的作用域函数称为“模块模式”

除了必须公开外，我也不必再费心导出（只需

onLoad

函数）。我们的处理程序不需要在闭包之外可用

上面提到的另一个有用的方面是：我们关心的所有函数都有名称。命名函数帮助工具通过告诉您异常发生的位置等来帮助您。从工具的角度来看，分配给变量的匿名函数之间有很大的区别：

var fname = function() { /* ... */ };

…和一个命名函数：

function fname() { /* ... */ };

不过，这只是一个旁注；您也可以使用问题中的代码来实现这一点：

ReservationPage.prototype = (function(){
    function submit_click() {
        alert(' you just clicked the submit button');
    }

    function clear_click() {
        alert('button for clearning the form fields!!');
    }

    return {
        constructor:  ReservationPage,
        submit_click: submit_click,
        clear_click:  clear_click
    };
})();

---

现在，我不会将“一个对象”模式用于任何我可能需要不止一个对象的通用目的；这就是类（或类似类的东西）的用途。因此，上面的链接指向模拟类和解决

这个
问题。：-）但是，为了模块化和组织特定于页面的脚本，类可能会有些过分。
JavaScript是一种合适的OOP语言。它不像你习惯的那样是基于类的（它是基于原型的），但它绝对是面向对象的——非常多

你可以用JavaScript（非常强大）模拟类和类，这对像你（和我）这样有着相同背景的人很有用。但是类并不是模块化的唯一方式，这正是您要说的

您问题中提出的解决方案创建了一个由对象（原型）支持的函数，然后您可以使用该函数创建另一个对象（原型）