Small refactoring of JavaScript code

Source: Internet
Author: User

JS also have a period of time, but also read a few books about JS, from the original "sharp jquery" "High performance Javasrcipt" to "JavaScript design mode" and so on, although read some books, see the Book of various theories and techniques, but in the actual use, The real use is not much.

JS Object-oriented and I am familiar with the C # and other languages of the object-oriented slightly different, but the basic will have encapsulation, inheritance, polymorphism and so on. Weak language is inherently polymorphic, there is no type detection of JS relatively can make a lot of strong type of language do not have the flexibility, although this can not be said completely no harm, but this advantage to make JS code rich and colorful.

The process of writing basic adherence to some principles, such as a single principle, open and close principle, Dimitri principle, JS is no exception. However, because of the specificity of JS, many times with the change in demand and the increase in code will likely become a noodle-like code, become difficult to read, easy to expand, repeat and scattered. At this point, you can't help but want to change, want to refactor.

It is not too late to mend.

The purpose of refactoring is to make programs more robust, that is, robustness. Conform to basic principles, extensible, reusable, easy to maintain and so on.

So how can refactoring make programs more robust? Isolate the changes, and the abstractions do not change. Make the program more consistent with the basic principles.

  

varoutconding=function (Result) {varOutcond=1; varOutconded=2; Kinds={kinditem:outcond, kindchildren:outconded}; Cols=[{Value:outcond}];};varinconding=function (Result) {varIncond=1; varInconded=2; Kinds={kind:incond, children:inconded}; Cols=[{price:inconded, value:incond},{
Price:inconded,
Value:incond
}];
}
Outconding (RES);
Inconding (res);

Is the above code robust? Obviously not considering reusability and extensibility at least, if you need to add oncoding,offcoding later do you need to write the duplicated code again and again?

Then it needs to be perfected and reconstructed. Two pieces of code have obvious similarities, such as structure, owning kinds,cols and so on. But there are also different places, such as temporary parameters. How do you pull it out to fit the robustness?

  

var conding=Function (result) {    kinds={},    cols=[];}

First, the invariant abstraction is left, leaving only the basic structure. Then analyze the changes. The problem comes, the inside needs to rely on temporary variables, the variable name of the temporary variable is unknown, the number is unknown, how to abstract it?

Can I use overloading? No, the variable is unknown in the immutable program. What about the parent class that lets the immutable program inherit the change? It seems to be OK, let's try it.

JS has a prototype chain can be simulated inheritance, so that the parent class can be changed, the subclass inherits the parent class, the variables used in the subclass are declared in the parent class, which resolves the unknown of the variable.

It's written, and suddenly there's an idea, isn't there an easier way? Since it is a weak language, why must we use strong language to give up their own advantages?

var conding=function (tempparams, kindsparam,colsparam, result) {    var condingparams= New tempparams ();    Kinds=Kindsparam (condingparams),    cols=Colsparam (condingparams);};

JS no type detection, then I pass a parameter to indicate the temporary variable collection can it? Of course. Next is extensible, follow the single responsibility principle, open and close principle, Dimitri principle, complete the following code.

varconding=function (tempparams, kindsparam,colsparam, result) {varcondingparams=NewTempparams (); Kinds=Kindsparam (condingparams), cols=Colsparam (condingparams);};varOutcondinginfo ={tempparams:function () { This. Outcond =1;  This. outconded =2; }, Kindsparam:function (param) {return{kindItem:param.outCond, KindChildren:param.outConded}}, Colsparam:function (param) {        return[{Value:param.outCond}]}}varIncondinginfo ={tempparams:function () { This. Incond =1;  This. inconded =2; }, Kindsparam:function (param) {return{kind:param.inCond, Children:param.inConded}}, Colsparam:function (param) { return[{price:param.inConded, Value:param.inCond}, {price:param.inConded,    Value:param.inCond}]; }}varres=1; conding (outcondinginfo.tempparams,outcondinginfo.kindsparam,outcondinginfo.colsparam,res) conding ( Incondinginfo.tempparams,incondinginfo.kindsparam,incondinginfo.colsparam,res)

This for the original code, if you need to add a oncoding, just need to add a Oncondinginfo object to be able to, is not extensible? Is it a bit of a relative object-oriented one?

But the pursuit of robustness, object-oriented, although will not become a noodle code, but it is possible that you do not explain the situation, others are difficult to understand what you write, so this creates a reading, contextual content and other issues. This is a matter of choice.

There are some refactoring tips, such as using only in one method, other places not to use the method, try not to write as a global function, preferably directly in the method used to store him with a temporary variable, try not to pollute the overall. Use closures to make the order of the methods to be executed, or to limit execution of certain methods after executing several methods.

If you have good ideas or good skills, welcome to share, welcome to the guidance.

Small refactoring of JavaScript code

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.