I am in a front-end project with JS collation of some of the common methods, which used to the idea, mainly is the Convention.

The name and the background to the JSON data contract, you can achieve the effect is to unify things, reduce differences, improve the commonality of modules, and then you can achieve specific different module content can be automatically or copy assignment of the way

Incidentally, the controls used in this front-end project are generally handwritten, other types, such as the menu is accordion.js, the accordion control

/* file created:  December  18, 2014 * @Author  igo* @LastModify  2014-12-19**/// Class//todo: string Object   Add Public format method (String.prototype.format = function), which is written for the purpose of increasing development efficiency, using closures args)  {    var result = this;    if  ( arguments.length > 0)  {        if  ( arguments.length == 1 && typeof  (args)  ==  "Object"  {             for  (Var key in args)  {                if   (args[key] != undefined)  {                     var reg = new regexp ("({"  + key +  "})",  "G");                      result = result.replace (Reg, args[key]);                 }             }        } else {             for  (var i = 0; i <  arguments.length; i++)  {                 if  (arguments[i] != undefined)  {                     //var reg  = new regexp ("({[ + i + ]})",  "G");//This will have a problem when the index is greater than 9, thank you for the point                      var regt = new  RegExp ("({)"  + i +  "(})",  "G");                     result = result.replace (Regt,  arguments[i]);                 }            }         }    }    return result;})  (); TODO: Some common small methods of encapsulation var commonhelper =  (function  ($, commonhelper)  {     var baseUrl =  "http://51creator.vicp.net/cloudants/";     var  $id  = function  (ID)  { return  document.getElementById (ID);  }    commonhelper.donothing = function  ()  { };    //temporarily not enabled! Universal assignment, make all the judgments clear, with a unified port access, to achieve all the code to share a set of operations to achieve maximum reuse. Reduce differences in different specific module methods and increase versatility         commonhelper.applyalt= function ( Jsonobject)  {            for  (var i  in jsonobject)  {                 var obj =  $id (i);                 var objVal = jsonObject[i];                 //Assignment Value text                 if  (obj && ! ( Objval instanceof array && obj.innertext))  {                     $ ("#"  + i). Text (JsonObject[i]);                 }                 //assigning images   image judgments                  if  (obj.tagname  ==  "img")  {                     $ ("#"  + i). attr ("src",  objval);                 }                 //Assignment chart, type is several, canvas, inner layer is judged as   by suffix,bar  line  and Pichart                  //Assignment Template              }        }     commonHelper.apply = function  (Jsonobject)  {         if  (!jsonobject)  return  "";         for  (Var i in jsonobject)  {             if  (document.getElementById (i)  && ! ( Jsonobject[i] instanceof array))  {                 $ ("#"  + i). Text (Jsonobject[i]);             }        }     }    commonHelper.applySrc = function  (Jsonobject)  {         for  (VAR i in jsonobject)  {             if  (Jsonobject[i].tostring () indexOf (".") &NBSP;&GT;&NBSP;-1)                  $ ("#"  + i). attr ("src",  jsonobject[i]);         }     }    commonHelper.applyChartBar = function  ( Jsonobject)  {        for  (var i in jsonobject )  {            if  (i.ToString (). IndexOf ( "_bar")  != -1 && document.getelementbyid (i)  != null)  {                 var ctx3 =  document.getElementById (i). GetContext ("2d");       &nbSp;         window.mybar3 = new chart (CTX3). Bar (JSONOBJECT[I],&NBSP;{&NBSP;RESPONSIVE:&NBSP;TRUE&NBSP;});             }        }    }     commonHelper.applyChartLine = function  (Jsonobject)  {         for  (Var i in jsonobject)  {             if  (i.ToString () indexOf ("_line")  != -1  && document.getelementbyid (i)  != null)  {                 var ctx2 = document.getelementbyid (i). GetContext ("2d");                 window.myline2 = neW chart (CTX2). Line (JSONOBJECT[I],&NBSP;{&NBSP;RESPONSIVE:&NBSP;TRUE&NBSP;});             }        }    }     commonHelper.applyPiChart = function  (ret)  {         for  (Var i in ret)  {             if  (Document.getelementsbyclassname (i). length > 0)                  $ ("."  + i). attr ("Data-percent",  ret[i]). Easypiechart ({                     animate: 1000,                      size: 100,                     linecap:  "Square",                     scaleColor:  "#ccc",                     trackColor:  "#ddd",                      barcolor:  "#0093dd",                     lineWidth:  "3"                  }); ;        };          commonHelper.applyTemplate = function  (el,  Template)  {        var text =  "", args = arguments;         if  (arguments.length >= 2)  {             for  (var i = 2; i <  arguments.length; i++)  {                 var reg = new regexp ("({)"  +  (I&NBSP;-&NBSP;2)  +  "(})",  "G");                 template = template.replace (Reg, arguments[i]);             }        }         text = template;        $ ("#"  + el). html (text); &Nbsp;        commonHelper.applyTemplate = function  (el,  Template, argarray)  {    }     commonhelper.geturl =  function  (token)  {        return baseurl +  token;    }     return commonhelper;}) (jquery, commonhelper | |   {});


Module mode using JS module architecture mode

/* file created:  December  9, 2014 *//**latest modify:2014-12-12*updator:igo* login logic ***/var page351helper =  (function  ($, page351Helper,  Ajaxhelper, commonhelper)  {     "use strict";     var  applyStoreInfo_RT = function  (ret)  {         ret = ret | |  {  "Success": true,  "Store_lunname":  "lun1",  "store_errors":  ", " Store_alarms ": "  };        commonhelper.apply (ret);     }    var applyStoreCapacity_RT = function  (ret)  {        ret = ret | |  {  "Success": true,  "Store_total":  "100G",  "store_used":  "50G",  "store _health ": " 20% " };&Nbsp;       commonhelper.apply (ret);         $ ("#store_used"). Height (ret.store_health);     }    var  applyStoreFullInfo_RT = function  (ret)  {         ret = ret | |  {  "Success": true,  "store_id":  "1",  "Store_name":  "Store1",  "store_ Lunlocation ": " xxx ", " store_type ": " xxx ", " store_volumespace ": " xxx ", " store_ Linkhosts ": " 8 ", " Store_linkvms ": " 4 ", " Store_pathsmode ": " XXX ", " store_allpaths ": "  };        commonhelper.apply (ret);     }    var applyStoreIODelay_RT = function  (ret)  {         ret = ret | |  {};    &nbsP;   commonhelper.applychartbar (ret);         Commonhelper.apply (ret);     }    var applystoreentity_rt =  function  (ret)  {        ret = ret | |  {};        commonhelper.apply (ret);     }     page351Helper.initial = function  ()  {         //todo: Interface:store!getstoreinfo_rt         Ajaxhelper.post ({            url:  Commonhelper.geturl ("Store!getstoreinfo_rt"),             data: { store_id:  ""  },             success: applystoreinfo_rt        });         //todo: interface: store! Getstorecapacity_rt        ajaxhelper.post ({             url: commonhelper.geturl ("Store!getStoreCapacity_RT"),             data: { store_id:  ""  },            success:  applystorecapacity_rt        });         //todo: Interface: Getstorefullinfo_rt        ajaxhelper.post ({             url: commonhelper.geturl (" Getstorefullinfo_rt "),             data: {  store_id:  ""  },            success: applystorefullinfo_rt         });         //todo: interface: Store!getStoreIODelay_RT          ajaxhelper.post ({             url: commonhelper.geturl ("Store!getstoreiodelay_rt"),             data: { store_id:  ""  },             success: applyStoreIODelay_RT         });         //todo: interface: store! Getstoreentity_rt        ajaxhelper.post ({             url: commonhelper.geturl ("Store!getStoreEntity_RT"),             data: { store_id:  ""  },             success: applyStoreEntity_RT          });          return page351Helper; }) (jquery, page351helper | |  {}, ajaxhelper, commonhelper); $ (function  ()  {     Page351helper.initial ();});

I use JS in a front-end project to sort out some of the common methods, the use of the idea, mainly is the Convention.