Project Practice from the javascript language itself

Project Practice from the javascript language itself
Dulao5 2005-1-15

With the rise of ajax, javascript has gained more and more attention. Importantly, ajax has brought about changes in the web software architecture to some extent. More and more functions are allocated to the client for implementation, and the scale of javascript sub-projects is growing. How can we use javascript more efficiently, organize javascript more scientifically, and ensure project progress more smoothly? I want to talk a little bit about my experience.

I. Developers need to carefully learn the javascript language itself
Because javascript is the "most misunderstood language in the world", most people do not fully understand javascript syntax, but write javascript code according to their own understanding based on the keywords that look like c or java. In fact, javascript is a very unique language, which is very different from c ++/java. To use javascript to make a bigger project, developers must honestly learn the javascript syntax. After mastering the syntax, we will not regard delete as a memory object to release, and will not worry about whether the parameter is passed as a value or a reference. Only by understanding the prototype-based OO method of javascript can we write javascript programs with a good architecture.
The javascript authoritative guide is the most suitable book and is highly recommended. In addition, the ECMA262 document can be used as a reference. The popular online jscript manual chm version is easy to use, but this is Microsoft's jscript implementation, which is slightly different from the standard javascript. You should pay attention to the above injection information when using it. Many articles have been introduced on the Internet about the javascript prototype and OO.

II. Good Code comes from good design
The code is beautiful only when the design is good. The current javascript sub-projects are no longer the "sides" and "casual weapons" of previous web projects. In a large ajax project, javascript will be very complex, the asynchronous model of ajax is also different from the program design of the previous sequential execution. Therefore, we recommend that you design javascript before using javascript. We recommend that you use case-driven methods to analyze the case clearly so that you can consider all possible page interaction processes globally, draw interaction diagrams between some objects on the page, and analyze the status of some data objects, make a detailed javascript design.

3. Use design patterns to reuse design experience in other fields
If javascript is complex, you can consider using some patterns. I think most javascript developers are not "javascript class". :) After mastering the language nature of javascript, We can reuse our experience in other fields. The javascript or ajax framework is used to create a global data buffer pool in singleton mode, the observer mode is used to separate interface objects from data objects, and the command mode is used to implement user operation queues.

4. Code debugging skills
The javascript code is not well debugged because:

• Generally, developers are not proficient in the javascript language. That is, the above mentioned.
• Web projects involve many factors, increasing complexity. Server scripts, templates, html, and js may increase debugging difficulty.
• The browser has compatibility issues. There may be differences between IE, Mozilla, opera, and other browsers in terms of details.
• Lack of tools. Although mozilla's jsdebugger is very useful (there are bugs, such as problems with the eval debugger), debugging tools in other browser environments are not very good. The script debug tool provided by the ms system can also debug local code and directly debug website js Code. I have not found any debugging tool except the javascript console for opera.

I recommend several debugging skills here:

1. Use the jsdebugger plug-in of Mozilla firefox. I will not talk about it any more. It is the most typical js debugging tool. Online debugging of remote site javascript works very well.
2. Isolate the problem, create a local html file and js file, and use the ms script debug debugging tool for debugging. If the js module is relatively independent, you can use this tool. If you write an hta project, this tool is of course the first choice.
3. HttpWatch is a plug-in ie, which is very useful. It can monitor any http session in ie and view the original text of the http session. You can use this tool to check whether your program has a session with the server, and what the Parameters & returned data are.
4. Create a textarea for debugging on the webpage
   You can create a textarea In the webpage to accept the js statements you want to run, and then add a button to execute the entered code using the js eval function.
   This method is very suitable for online debugging. After a webpage error occurs, write code to output the object values on the page. We recommend that you write some dump tool functions for better results.
   I like this method very much. I can use the switch to open the hidden textarea on the page at any time for debugging. It feels like connecting a server to a terminal, then you can use shell to do anything: the function can be redefined here. You can operate any element on the interface, call any function of any object, and output any runtime value you need.
5. Use exception and assert)
   Using the try {} catch (e) {} structure not only shields error information, but also makes the interface more friendly. Our programs can use exceptions and throw exceptions to build a better error handling mechanism.
   There is a story in which I wrote this code when using the string. localeCompare function:
   Var iRe = str1.localeCompare (str2 );
   Switch (iRe ){
   0: return ....
   1: return ....
   -1: return ....
   Defalut: throw "error: localeCompare return other value"
   }
   I forgot to write it. I did not expect my colleague to throw an exception when using firefox in linux. Then we learned that localeCompare in linux firefox does not return 0/1/-1, returns a specific value.
   This exception throws effective detection of code imperfections.

   The exception dump in firefox can get more detailed call stack information, which is very good. The exception information of IE is not so detailed.

   Exceptions and assertions can also be combined into a very effective debugging tool.
   Assert is a very effective debugging tool in other languages, which often appears in this form:
   Assert (<condition> );
   When the program is in the debug state and the condition is false, the system stops running and reports this asserted. Since assertions are defined by ourselves, we can easily identify where errors occur and locate bugs.
   The javascript language does not provide macros or assert. We can simulate it like this.
   If (_ is_debug) assert = function (expression, strLable ){
   If (! Expression) throw Error (strLable );
   }
   Else assert = function () {}; // _ is_debug is a global variable.
   This allows the program to throw an exception in the debugging mode when "impossible" occurs, and ignore it in the released version.

   The call information of the current stack can be output in this way to make up for the defect that the exception object in IE just mentioned does not have stack information:
   Function callStackInfo (){
   Var s = "", line = "";
   Var cer = arguments. callee. caller;
   While (cer ){
   Var sf = cer. toString ();
   S + = line + sf. substring (sf. indexOf ('function'), sf. indexOf ('{') + "\ n ";
   Line = ".." + line;
   Cer = cer. caller;
   }
   Return s;
   }

This article only discusses javascript in web development, especially in ajax development. It focuses on how to better use "Pure javascript ". There are many other aspects of web development, such as xml and Dom, which are actually closely related to javascript. However, this article does not cover them. Please forgive me. You are welcome to give more comments on my discussion.
--
-------------------------------------------------------------------
Dulao5