这是什么JavaScript编码风格？(What javascript coding style is this?)

这是什么JavaScript编码风格？(What javascript coding style is this?)

我正在努力维护具有以下编码风格的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 }; })(); 这是JS编码风格的最佳实践吗？ 意图是非突兀的JS吗？ 什么是SAVECUSTOMERS？ 我知道有不同的方法在javascript中创建类（根据此链接 ），但此样式不属于列出的任何类别 我在哪里可以找到有关这种JS编码风格的更多信息？

I am working on maintaining a ASP.NET MVC application that has the following coding style. The view has:

<script type="text/javascript"> $(document).ready(function() { SAVECUSTOMERS.init(); }); </script>

There is a js file included that goes along these lines:

var SAVECUSTOMERS = (function() { init = function () { $("#saveCust").bind("click", OnSave); $("#cancel").bind("click", OnCancel); }, OnSave= function() { //Save Logic; }, OnCancel = function() { //Cancel logic; } return { init: init }; })(); Is this a best practices JS coding style? Is the intent to have non obtrusive JS? What is the SAVECUSTOMERS? I understand that there are different ways of creating classes in javascript (per this link), but this style does not fall into any of those categories listed Where can I find more information on this style of JS coding?

最满意答案

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等。

1) Using a $(document).ready (or similar function from another library) function is considered standard practice in JavaScript. First of all, it ensures your JavaScript executes on page that has finished evaluating/building it's DOM. And it also abstracts away some of the browser-implementation inconsistencies when identifying when the DOM is in fact ready. But I assume you are mainly referring to the 2nd code block.

What you see there is that SAVECUSTOMERS is assigned the result of a self-executing an anonymous function. This is done for a few reasons, the most common being the ability to control the scope and 'namespace' of the functions and data inside the anonymous function. This is because JavaScript has lexical scope, and not block level scope.

The practice of using these self-invoking functions in JavaScript is very common

However the code itself has several problems. The variables init, OnSave and OnCancel are declared as global variables (because the var keyword was omitted). This largely defeats the purpose of wrapping them in an self-invoking function. Furthermore, the contents of that function are using a mix of object assignment syntax and standard expression syntax, which will result in syntax errors.

Also, by returning only the init function, the onSave and onCancel functions have been effectively 'hidden' or made 'private' through the use of closures. This helps keep namespaces clean and encapsulated.

If I were writing this code (some personal perferences here, there are a few ways to accomplish something simliar), then it would look like this:

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

Some notes on the above:

I declare variables using the var keyword. This keeps their scope local to this function (you could also technically use named functions declarations as well)

I pass jQuery as the parameter in the self-invoking function, and assign it to $ as the argument in the function call. This protects the $ variable inside the function so that we know it references jQuery, and hasn't been munged by a secondary library that also uses $.

2) SAVECUSTOMERS is a basic JavaScript object, which has a single owned property called 'init', whose value is a function, as defined by the init declaration inside the execution.

3) Not sure about how to answer this question - your best bet for understanding JavaScript best practices is to read through other JavaScript code that is known to be of quality, such as the jQuery source, or Prototype, or Underscore, etc.