Web.simmons.edu



Notes on JS from the Stefanov book on JavaScript PatternsUse JSLint to be sure you are ECMA5 compliant. My comments:You can find it at I use the following settings (near the bottom of the page):Tolerate (column 1) eval : set it to 'true' so can evaluate expressions in document.write. NOTE: I NEVER use the eval( ) function.Tolerate (column 2) 'missing us strict pragma': set it to true so don't get error messages for certain built in functionsAssume (column 4) a browser if you are testing an html page set it to true. Leave at default if you are testing a js or CSS file.Assume (column 4) console, alert,..... so don't get error messages for prompt and alert: set it to trueI use 4 for indentationREMINDER: You can use or to validate your html5 and to validate yourCSS. You will find that jslint is a little fussier about enforcing good programing style than the other htlm5 validators. For example, it will remind you to insert semi-colons at the end of in-line styling: <p style = “color:red;”>and to put spaces around = and + signs and after comma. The semi-colons reminder are because the interpreter will insert them otherwise, and this way you can be sure they are in the correct places. The extra spaces provide readability.Obviously, all code should be validated.Minimize the number of global variablesIf you don’t use var what you really get is a property of the global object (which may be referenced by this when outside all functions, or by window.Since it is a property it may be delete’d --- true vars can not be deleted.So you should always use var, even for global vars.If you codemyGlobal=”hello”;then all the following will write “hello” to the console: console.log(myGlobal); console.log(window.myGlobal); console.log(window[“myGlobal”]); console.log(this.myGlobal);Put all the var declarations together at the startBetter yet, at the start of the script define all the global vars you will need – ditto inside a function with local vars.If you initialize them at the same time, you’ll have a clue as to what you wanted:var n=0, ss_Num =” “, last_po=0;Notice that the vars are comma separated.Do not chain the initiailizationsvar a=b=0; will make b a global and a a localNaming conflictsVars declared inside a function are hoisted – that is it is as tho’ they were declared at the start of the function. This may interfere w global vars w same name.Example p14-15More efficient for loop:for (j = 0, max = myArray.length; j < max; j++) { //do stuff }is more efficient – introducing max avoids the need to re-evaluate the array length on each iteration. This is even more important when using an HTMLCollection (i.e. what gets returned from DOM methods such as document.getElementsByTagName or document.images )Also prefer i+=1 to i++ and similarly i-=1 is better than i--. Even better (per Crockford) are i = i +1; and i = i -1 (Crockford has said this is to avoid people getting confused about the difference between i++ and ++i.)Finding all properties of an objectUse for –in loops to iterated over non-arrays, BUT youMust use hasOwnProperty() to avoid going up the prototype chain:for (var j in myObj) { if ( myObj.hasOwnProperty(j) ) { //filter console,log(j, “ : “, myObj[j]); }where you have previously declared:var myObj = { x: 0, y: 0, size: “large”;}Avoid implicit type casting on comparisons by using === and !==For example, (0 == false) is true but (0 === false) is not.Avoid eval() for security reasons.In callbacks from Ajax use JSON.parse() or the json library at .Watch out for strings which get evaluated in setInterval() and setTimeout() and the Function() constructor for the same reason.parseInt should include base 10 or put a + in front of the string --- otherwise a string which starts with 0 will get treated as hex:mo = parseInt(month,10);Curly braces are a big dealUse them even when they may be omitted b/c semicolon insertion – esp. when the function returns an object literalOpen the braces on the preceding line and close them under the word (e.g. function) which started the whole thing.Indent everything inside curly braces (4 spaces is about right)Good practice:if (some condition) { //do some stuff} else { //do other stuff}for (var i=0; i<5; i+=1) { //even if only one statement}Capitalize the names of constructors.Here are other commons conventions:function MyFunction() { //looks like a constructorfunction myfunction() { //probably shouldn’t call this with newvar my_variable = 0; //all lower case – not intended as a function.In other words, camelCase is reserved for functions and underscores for other types of objects. Of course, this is a CONVENTION only.var PI=3.14159; //all caps usually means the value won’t change in the script._myMethod: function ( ) { //stuff } //method named as _xxx is intended to be private.You can generate API documentation using the JSDoc Toolkit or YUIDoc (p30)Literal notation is preferred to using Array(), etc. – CH 3 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download