这是什么JavaScript编码风格？

Question

我正在努力维护具有以下编码风格的ASP.NET MVC应用程序。 该观点有：

<script type="text/javascript">

    $(document).ready(function() {

        SAVECUSTOMERS.init();
    });
</script>

这里包含一个js文件：

var SAVECUSTOMERS = (function() {

    init = function () {

        $("#saveCust").bind("click", OnSave);
        $("#cancel").bind("click", OnCancel);

    },

    OnSave= function() {

        //Save Logic;

    },

    OnCancel = function() {
                //Cancel logic;

    }

    return { init: init };

})();

1. 这是JS编码风格的最佳实践吗？ 意图是非突兀的JS吗？
2. 什么是SAVECUSTOMERS？ 我知道有不同的方法在javascript中创建类（根据此链接 ），但此样式不属于列出的任何类别
3. 我在哪里可以找到有关这种JS编码风格的更多信息？

Answer 1

1）使用$（document）.ready（或来自另一个库的类似函数）函数被认为是JavaScript中的标准实践。 首先，它确保您的JavaScript在已完成评估/构建DOM的页面上执行。 并且它还在识别DOM实际上准备就绪时抽象出一些浏览器实现的不一致性。 但我假设你主要是指第二个代码块。

你看到的是，SAVECUSTOMERS被分配了一个自动执行匿名函数的结果。 这样做有几个原因，最常见的是能够控制匿名函数内的函数和数据的范围和“命名空间”。 这是因为JavaScript具有词法范围，而不是块级范围。

在JavaScript中使用这些自调用函数的做法非常普遍

但是代码本身有几个问题。 变量init，OnSave和OnCancel被声明为全局变量（因为省略了var关键字）。 这在很大程度上违背了将它们包装在自我调用函数中的目的。 此外，该函数的内容使用对象分配语法和标准表达式语法的混合，这将导致语法错误。

此外，通过仅返回init函数，onSave和onCancel函数已通过使用闭包被有效地“隐藏”或变为“私有”。 这有助于保持名称空间的清洁和封装。

如果我正在编写这段代码（这里有一些个人的贡献，有几种方法可以实现simliar），那么它看起来像这样：

var SaveCustomers = (function($) {
    var init = function () {
        $("#saveCust").bind("click", onSave);
        $("#cancel").bind("click", onCancel);
    };

    var onSave = function() {
        //Save Logic;
    };

    var onCancel = function() {
        //Cancel logic;
    }

    return { init: init };

})(jQuery);

关于上述的一些注意事项：

• 我使用var关键字声明变量。 这使它们的范围保持在本函数的本地（你也可以在技术上使用命名函数声明）

• 我将jQuery作为自调用函数中的参数传递，并将其作为函数调用中的参数赋值给$。 这保护了函数内部的$变量，以便我们知道它引用了jQuery，并且还没有被也使用$的二级库所驱动。

2）SAVECUSTOMERS是一个基本的JavaScript对象，它有一个名为'init'的属性，其值是一个函数，由执行中的init声明定义。

3）不确定如何回答这个问题 - 理解JavaScript最佳实践的最佳选择是阅读已知具有高质量的其他JavaScript代码，例如jQuery源代码，Prototype或Underscore等。

Answer 2

这种风格被称为jquery ...你检查过JQuery网站，看看它...

Answer 3

这在javascript中称为自调用函数 。 我在下面给出的一篇文章。 你可以在谷歌上获得更多。

http://2007-2010.lovemikeg.com/2008/08/17/a-week-in-javascript-patterns-self-invocation/

如果你指的是$编程，那么它与JQuery有关，其他答案也提供了链接。

Answer 4

它正在使用JQuery库 。

JQuery包含一个名为$()的函数，它允许您使用类似CSS的语法从DOM中选择元素。

$(document).ready位是一个标准的JQuery方法，用于确保封装的代码仅在页面加载完成后运行。 这是确保事件正确附加到相关DOM对象所必需的。

将函数用作其他函数的参数的位称为“闭包”，它是编写Javascript的一种非常常见的方式，但特别是在使用JQuery时，它使用简单易用的方法和最少的代码。这种编码风格。

请参阅此页面： http ： //blog.morrisjohns.com/javascript_closures_for_dummies，以便初学者讨论闭包在Javascript中的工作方式以及如何编写它们（请注意，此页面根本不看JQuery;闭包是一个Javascript功能，被JQuery大量使用，但你不需要JQuery来编写闭包）

Answer 5

这是使用jQuery处理事件的常用方法。

基本上发生的是您检查文档是否已加载

 $(document).ready(function() {

        SAVECUSTOMERS.init();
    });

当你开始将你的绑定添加到按钮或它们可能是什么时。

Answer 6

SAVECUSOMTERS中代码的目的是模仿对象中的私有属性和公共属性。 由于JS默认不支持这些，因此这个自调用函数执行并返回一定数量的属性。 在这种情况下，它返回'init'方法。 尽管您看到OnSave和OnClick，但您会发现根本无法访问它们。 它们是“私有的”，仅在该函数内部使用。

$()函数是一个名为jQuery http://jquery.com的javascript库的一部分。它是一个非常全面的库，主要用于DOM操作。

$（document）.ready（）函数是jQuery连续轮询页面直到加载的一种方式。 如果是，则执行内部的javascript。

Answer 7

1. 目标是拥有公共和私人职能。 OnSave和OnCancel是私有函数，只能在自执行匿名(function() { ... } ())范围内访问，它返回一个公共访问init函数的对象。

2. SAVECUSTOMERS成为上述函数返回的对象，即{ init: init } ，一个具有一个方法init的对象，可以访问该闭包内的函数。

3. 你可以阅读Douglas Crockford的Javascript：The Good Parts或Stoyan Stefanov的Javascript模式

其他说明：

• $()函数属于jQuery库
• 存在语法错误，因为函数应该由; 不,因为它们在一个函数内，而不是一个对象。