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

Question

我正在尝试组织我的 javascript。我想做的是为每个 PAGE 设置一个类，而不是直接将 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 文件，即不是一个类/对象来实例化他们的 Page 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文件 - 没有对象来实例化我的对象，因此我调用了加载......这反过来又实例化了对象并调用了构造函数。 .

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

这个好吗，

知道我哪里出错了..

我真的很感谢一些输入，我有点迷失......并且想做正确的事情......我来自aC#.net背景......而且我知道js不是一个合适的OOP语言但我试图这样对待它以获得更好的结构......

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

期待任何信息

Answer 1

JavaScript 是 正确的 OOP 语言。它不像你习惯的那样基于类(它是基于原型(prototype)的)，但它绝对是面向对象的——非常如此。

你可以模拟类和class-based inheritance在 JavaScript 中(它是如此强大)，这对于像你(和我)这样具有该世界背景的人来说很有用。但是类并不是模块化的唯一方法，这就是你所说的。

您的问题中提出的解决方案创建了一个由对象(原型(prototype))支持的函数，然后您可以使用它来创建另一个对象(实例)，然后执行您想要的操作。这符合基于类(Class)的心态(这可能是一个足够好的理由!)，这就是我为我可能需要创造不止一个的事情所做的事情，但从某种意义上说，这可能是矫枉过正，因为您不会在任何给定时间拥有页面对象的多个实例。这也意味着您的点击处理程序不会像您的示例代码中定义的那样工作——当它们被调用以响应点击时，this值将是错误的，它不会指向您的 ReservationPage实例。 (JavaScript 中的函数只是函数，它们不是方法；this 是由函数的调用方式定义的，而不是它的定义方式。像我们这样的人很惊讶，但事实证明它非常有用。) worked around ，当然，但它需要......解决它。

既然您只需要一个用于页面的实例化对象，而不是诸如构造函数和原型(prototype)之类的所有麻烦，为什么不只为页面提供一个对象呢？并且您可以使用闭包(函数)在该对象周围放置范围，以便它可以轻松访问变量而不必担心 this并且不会污染全局命名空间。这是一个这样做的例子:

// 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变量，以及彼此，但我们不必担心 this .这是因为函数是在 somePageData 的范围内声明的。已声明，因此他们“关闭”它(可以访问它)。该访问是“实时的”，它不是副本或其他东西。

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

我也懒得导出任何东西，就像我不得不公开一样(只是 onLoad 函数)。我们的处理程序不需要在闭包之外可用。

上面的另一个方面可能有用:我们关心的所有函数都有名称。命名函数帮助工具通过告诉您发生异常的位置等来帮助您。从工具的 Angular 来看，分配给变量的匿名函数之间存在很大差异:

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
    };
})();

现在，我不会将“一个对象”模式用于我可能想要的任何通用目的；这就是类(或类之类的东西)的用途。因此，上面的链接模拟类和解决 this问题。 :-) 但是为了模块化和组织特定于页面的脚本，类可能是矫枉过正的。