How to manage your Javascript code

Today we don't talk about technical issues, let's talk about how to manage your Javascript code in front-end development. First of all, let's start by saying which management methods are generally available. I believe seajs , Requirejs for front-end developers are not unfamiliar, good they are the front-end code modular development of the tool, obviously in a modular way to manage our Javascript code, is a good choice.

But today I do not talk about modular development, because the above two tools have done very well, just to their official website to find the appropriate documentation, study hard, not too much time you can master the modular development. Today we are going to talk about how to do your own project code management without relying on the module management tools.

First of all, I think a standalone Web project should have a top-level namespace, and all the ancillary code developed for this project should be placed as far as possible under that namespace. If the project is very large, we can be divided into two-level namespace, level three namespace, etc. according to the business module. But what is a big project, this can only be defined by developers themselves.

Then, just the namespace is not enough, if all your code in a JS file, it would be a tragedy. Why do you say that? First, if we have a tip component, the function is to add a tag hint function to the specified element, and when we need to use this component on multiple pages, you will find that each page will reference N more useless code. Second, all the code is written in a file, then your JS file, will be a monster, thousands of tens of thousands of lines, debugging is also quite difficult. So, to control your JS code, please separate plug-ins, components, public methods, save to a separate JS file, and then use the top-level namespace we have prepared to bring them together.

Then, a reasonable set of coding specifications will make your code management less effective. Ordinary variable small hump, the class name Big hump, the constant capital, the private variable plus the front underline, can improve the readability and maintainability of your code very well. Add a space between the operators, and the code uses 4 (or 2) spaces to indent properly, allowing your code to be neatly organized and legible. Code blocks use curly braces tightly (even if there is only one line), and the use of parentheses by the ternary operator will make your code neat and logically clear. A unified component development model that allows your code to be professional without sacrificing elegance. There are many, no longer listed, these specifications in many specifications have been written very clear, here to recommend a personal feel very good JS specification, interested friends can also find goojje, degrees Niang blending blending, learning more JS specification, let oneself more professional. Of course, the so-called "letter book, is better than no book", so, the specification for reference only, not strictly limited, developers can on the basis of the standard to retain a little bit of their own personality, but must ensure the style of unity.

Finally, let's look at a simple code example, where the namespace takes Seejs as an example.

First, let's get our namespace out of the way and add some basic information:

1 window. Seejs = {2     Copyright: "Copyright©mrzheng",3     version: "1.0.0"4 };

In the second step, we define a component structure:

1(function(window, undefined) {2Seejs.plugins = Seejs.plugins | | {};3 4     functionTips (cfg) {...}5 6Tips.prototype = {7 Constructor:tips,8Init:function() {...}9     };Ten  OneSEEJS.plugins.Tips = SEEJS.plugins.Tips | |Tips; A  -}) (window);

Just for example, I will not write more. Finally, we provide some tools for our project:

1 (function(window, undefined) {2     var TOOLS = Seejs.tools | |  {}; 3 4     function (str) {...}; 5     function (hex, Alpha) {...}; 6 7     Seejs.tools = tools; 8 9 }) (window);

Now we can enter SEEJS in the console and then hit enter to see our code structure clearly:

1Seejs = {2Copyright: "Copyright©mrzheng",3 Plugins: {4Tips:function(CFG) {}5     },6 Tools: {7Trimfunction(str) {},8Hextorgba:function(hex, alpha) {}9     },TenVersion: "1.0.0" One}

Well, it is here, purely personal humble opinion, Welcome to Exchange!!!

Author blog: Hundred Yards villa

How to manage your Javascript code