Simple things-JS summary of project development

1 Ajax non-asynchronous calls, and the calling function has a return value

function Getencoderinfo (ID) {var encoder = [];$.ajax ({type: "POST", url:basepath+ "/management/source/findsourcebyid", Data: {id:id},datatype: "JSON", async:false,success:function (data) {encoder = Data.source;},error:function (xmlhttpre Quest, Textstatus, Errorthrown) {if (textstatus== "error") {Bootbox.alert ("temporarily unable to connect to the server, please retry later");}}); Return encoder;}

When you send a request using AJAX, and you need to get the return value asynchronously, you can set the async ID to False, collect the return value in the return function, and then return to the end of the function. If you return directly in the Success branch, only the return of the callback function success is identified, not the entire getnencoderinfo. So, if the outer function that calls Ajax must add a return statement after the AJAX call is complete, the function has a return value. Return encoder is written in the success branch, then the return value of the function is undefined.

2 jquery's Bind event

Document initial Statementvar Picencoder = Null;function Createpicencoder () {//Initialize class information Picencoder = new Picencoder (name, Rowx,rowy); var result = Picencoder.init ();//show $ ("#layoutDiv"). CSS ("Display", "block"); $ ("#picencoder_div"). Modal (' Show ');} function Picencoder (name,rowx,rowy) {//Operation type: Add or modify this.action = ' add ';//init various binding events This.init = function () {var obthis=t his;//Save button: First unbind the event with the previous object,//And then reset the Click event $ ("#btn-confirm"). Unbind (); $ ("#btn-confirm"). On ("click", Function () { Obthis.savepicencoder ();});}}

JS defines the global object in an object-oriented manner, the object's init has set the page button's binding event, if there is no Unbind () method, then the number of bound events of the btn-confirm element is the same as the number of times the This.init method executes. Because there is no binding to the previous Picencoder object, each commit adds a binding event, and the result is a commit operation that eventually calls N save operations, which is the number of times that Init executes. Before you bind an event to an element, you should analyze whether you need to unbind the previous binding and then reset the binding event.

In addition, the above binding event will take effect only for elements that have been added to the page. The element is loaded into the page and an event is added to the element so that the event is valid:

var con= "", for (Var i=0;i<blocks.length;i++) {con+= ' <div class= ' bgcolordiv ' > '; con+= '  '; con+= ' </div> '; con+= ' <lable class= "Decoderlabel" value= "' +nextindex+ '" style= "font-size:18px;" > ' +encoder.name+ ' </label> '; con+= ' </div> ';} $ ("#divLib"). html (con);//Add Deleteimg Binding Event $ (". Deleteimg"). Unbind (); $ (". Deleteimg"). On ("click", Function () {});

If an element tag is not added to the HTML page, then the bind event executed on those elements will be invalid, that is, if the Deleteimg binding event code is placed in the for stitching code, then when we click Deleteimg, the button is unresponsive.

3 Front-end debugging

Console.log output debugging information, very convenient. So simple and practical debugging skills, did not write JS before actually do not know. Front-end programming, in fact, as well as the background, completed a demand function, my one JS file, unexpectedly also reached more than 600 lines, its debugging is no less than the server-side code. JS's object-oriented encoding method, it is worth to delve into.

Simple things-JS summary of project development