JavaScript team programming specifications

This specification is formulated in response to the JavaScript functional programming style and the reality that companies rely heavily on jQuery for coding.

It is forbidden to use eval, with and caller (use strict requirement of ecma262 v5). eval is only allowed to be machine generated when encrypting.

The var keyword must be added when declaring a variable. Except in statements such as for(;;) loops, continuous declarations are not allowed in principle. Because the efficiency of continuous declaration is not as high as that of separate declaration, and it is easy to expose it to the global scope by mistake.

Constant, all caps.

Variable names cannot use pinyin, and English words are organized in camel case style.

Semicolons should be added wherever possible (basically except for, function, if, switch, try, while) to prevent compression failure due to this problem.

Custom classes can only be used for the construction of UI libraries. Private custom classes are not allowed in business code.

In principle, the use of pseudo-objects (String, Number, Boolean) is not allowed, use their literals directly.

In principle, Array and Object are not allowed to be used. Use their literals [], {} directly.

Handle this carefully to prevent binding failure and point to window. It is recommended to use that to reference it.

If you want to call the function itself, it is forbidden to use named function expressions. Write the following code in the first line of the target function. For details, please google "Named Function Expressions Revealed":

var self = arguments.callee;

It is forbidden to extend the prototype of native objects, especially Object.prototype.

It is forbidden to bind events to a certain element on the page, that is, the following code style:

<a href="http://www.php1.cn/">简明现代魔法</a>

It is forbidden to use IE's conditional comments, which will disappear once compressed.

var f = function () {
    /*@cc_on if (@_jscript) { return 2* @*/  3; /*@ } @*/
};

It is forbidden to declare functions within blocks. For details, please google "Named Function Expressions Revealed".

if (x) { //ng
  function foo() {}
}
  
if (x) {
  var foo = function() {}
}

for-in loop can only be used on object.

It is forbidden to use multi-line strings because when compiling, whitespace characters at the beginning of the line cannot be ignored; whitespace characters after "" will produce strange errors; although most script engines support this writing method, it is not ECMAScript of standard specifications.

var myString = 'A rather long string of English text, an error message \
                actually that just keeps going and going -- an error \
                message to make the Energizer bunny blush (right through \
                those Schwarzenegger shades)! Where was I? Oh yes, \
                you\'ve got an error and all the extraneous whitespace is \
                just gravy.  Have a nice day.';

Technically, string splicing HTML code is not allowed, please use front-end template or back-end template.

For string literals, use ' instead of ".

For comments, use JSDoc.

Each line should not be too long. After writing a piece of code, please use an IDE to format it.

Add custom variables to elements , uniformly use the "data-" prefix to connect with the "data-*" mechanism of HTML5.

It is forbidden for jQuery to use chain operations of more than one line, which is very difficult to read.

Use ID selectors more. , class selector, label selector, use child element structure pseudo-classes and position pseudo-classes (nth- child,: first,: eq,: gt) with caution

Searching for nearby element nodes in existing jQuery objects, not recommended Use multi-level find to search, and use related traversal functions.

JavaScript programs should be placed in external JS files as much as possible to facilitate compression and caching.

Standard features are better than non-standard features (if provided by the class library, Prioritize using functions in class libraries).

$("XXXX").find("YYYY").find("ZZZZ"); //ng
$("XXXX").next() //或者nextUntil, nextAll, prev, prevAll, prevUntl, children, closest,
  
.siblings

When adding events to elements, the order to consider is delegate > live > bind.

jQuery has a problem with the following events: change resize mouseenter mouseleave mousewheel, and generally the event cannot be used. Proxies, such as mousewheel events, can only use plug-ins.

Do not leave code snippets in JS files that are no longer used in the future.

Any ID or class name referenced by jQuery should be prefixed with js_ to warn others. People deleted it by mistake when adjusting the style.

JS code must be placed within the $$ namespace object, and the execution of all functions starts from the main function.

   ;;;$(function(){
//...其他用到的变量
        var $$ = window.$$ = {
          //本页面私有的辅助函数1
          _assist1:function(){
  
          },
          //本页面私有的辅助函数2
          _assist2:function(){
  
          },
          //本页面私有的辅助函数3
          _assist3:function(){
  
          },
          //本页面私有的辅助函数4
          _assist4:function(){
  
          },
          //本页面私有的辅助函数5
          _assist5:function(){
  
          },
//....更多的私有函数
          //功能1
          feature1:function(){
  
          },
          //功能2
          feature2:function(){
  
          },
          //功能3
          feature3:function(){
  
          },
          //功能4
          feature4:function(){
  
          },
          //功能5
          feature5:function(){
  
          },
          //从后台获取的JSON数据统一放到这个对象中，以便其他函数调用
          jsons:{},
//....更多需求，一个需求对应一个函数
          main:function(){
            $$.feature1();
            $$.feature2();
            $$.feature3();
            $$.feature4();
//....在main主函数中调用它们。
          }
        }
        $$.main();
      });

The format for obtaining JSON data from the background is unified to

$.getJSON(url,params,function(json){
     if(json && json.status === "1"){
       $.flash(json.msg);
       $$.jsons["xxxx"] = json;//将JSON保存起来
     }else{
       $.flash(json.msg,"error")
     }
});
$.post(url,params,function(json){
     if(json && json.status === "1"){
       $.flash(json.msg);
       $$.jsons["xxxx"] = json;
     }else{
       $.flash(json.msg,"error")
     }
},"json");

. In order to separate the request and execution callbacks, we use the dependBy function, which effectively avoids multiple levels of nested callbacks and greatly improves the understandability of the code.

$.dependBy(["list_configs"],$$.jsons,function(){
     var json = $$.jsons.ist_configs;
     //......其他代码
});

I can’t think of much for now. If you have any good suggestions, please feel free to give them. Please enlighten me.

The above is the content of JavaScript team programming specifications. For more related content, please pay attention to the PHP Chinese website (www.php.cn)