Talking about project practice from the JavaScript language itself_javascript skills

从javascript语言本身谈项目实战
                                              dulao5  2005-1-15

       随着ajax的升温，javascript越来越得到人们的重视。重要的是，ajax在一定程度上带来了web软件架构上的变化，人们把越来越多的功能分配到客户端实现，javascript子项目规模越来越大。如何更高效的使用javascript，如何更科学的组织javascript，如何更顺利的保证项目进展？我想就我的经验谈一点浅见。

一。 开发人员需要认真学习javascript语言本身
       由于javascript是“世界上最被误解的语言”, 大部分人对javascript语法并没有全面了解过，只是凭借看起来很像c或者java的关键字按照自己的理解写javascript代码。其实 javascript是一种很独特的语言，和c++/java有非常大的区别，要想用javascript做大一些的项目，开发人员必须老老实实的学习 javascript的语法。真正掌握了语法后，我们才不会把delete看成释放内存对象，才不会为到底参数传递是值传递还是引用传递而烦恼。真正理解了javascript的基于原型的OO方式，才可能写出具有良好架构的javascript程序。
       《javascript权威指南》是一本最合适的书，郑重推荐。另外ECMA262 文档可以作为参考。网上流行的jscript手册chm版本使用起来比较方便，不过这是微软的jscript实现，和标准的javascript略有区别，使用时应该注意上面的注脚信息。关于javascript的原型和OO,网上已经有很多文章介绍了，在此不再多说。

二。 良好的代码来源于良好的设计
       只有设计优良，代码才会写的漂亮。现在的javascript子项目已经不是以前web项目中的“边角料”和散兵游勇了，在较大的ajax项目内， javascript将非常复杂，ajax的异步模型也和以前顺序执行的程序设计有所区别。所以建议做javascript前首先做好设计。推荐使用用例驱动的方式，把用例分析清楚，以便全局考虑所有可能的页面交互过程，绘出页面内一些对象之间的交互图，分析一些数据对象的状态，作出精细的 javascript设计。

三。 使用设计模式，复用其他领域的设计经验
        如果javascript非常复杂，可以考虑使用一些模式。我想大部分做javascript的开发者都不是“javascript科班”出身吧:) 掌握了javascript的语言本质，就可以复用我们在其他领域的经验了。使用javascript框架或者ajax框架，使用单例模式做一个全局的数据缓冲池，或者使用观察者模式把界面对象和数据对象分离，使用命令模式实现用户的操作队列等等。

四。 调试代码的技巧
        javascript的代码不太好调试，这是由于：

• 一般的开发人员对javascript语言本身不太精通。也就是上面提到的。
• web项目包含较多的因素，复杂性加剧。服务端脚本、模板、html、js等很多环节都可能增加调试难度。
• 浏览器存在兼容性问题。有可能在一个细节问题上IE、Mozilla、opera等浏览器都有差异。
• 工具的缺乏。虽然mozilla的jsdebugger非常好用（还有bug，比如eval时调试器有些问题），但是其他浏览器环境下调试工具就不怎么样了。ms系统自带的script debug工具调试本地代码还可以，直接调试网站js代码表现欠佳。opera除了javascript控制台外我没有找到其他调试工具。

       在此我推荐几个调试技巧：

1. Use the jsdebugger plugin for Mozilla firefox . I won’t say more about this, it’s the most classic js debugging tool. Online debugging of remote site JavaScript is great.
2. Isolate the problem, create local html files and js files, use ms script debug debugging tool to debug. If the js module is relatively independent, you can use this tool. If you are writing hta projects, this tool is of course the first choice.
3. httpWatch This is a plug-in for IE. It is very easy to use. It can monitor any http session in IE and see the original text of the http session. You can use this tool to find out whether your program has a session with the server, and what the parameters & returned data are.
   
4. Create a textarea for debugging in the webpage
   You can create a textarea in the webpage to accept the js statement you want to run, and then add a button to use the eval function of js to execute what you input code.
   This method is very suitable for online debugging. After an error occurs on the web page, write code to output the object value in the page. It is recommended to write some dump tool functions to use together for better results.
   I like this method very much. You can use the switch to open the hidden textarea in the page for debugging at any time. It feels like connecting a terminal to a server, and then using the shell to do anything:) Functions can be redefined here , you can arbitrarily operate any element in the interface, call any function of any object, and output any run-time value you need.
   
5. Use exceptions and assertions
   Using the try{}catch(e){} structure can not only shield error messages, but also make the interface more friendly. Our programs can use exceptions and throw exceptions to build a better error handling mechanism.
   There is such a story. I wrote this code casually 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"
   }
   Forget it after writing it Unexpectedly, when my colleague used firefox under linux, an exception was thrown. Then we learned that localeCompare under linux firefox returns not just 0/1/-1, but a specific value.
   This exception throw effectively detects imperfections in the code.
   
   It is very good to get more detailed call stack information after exception dump under firefox. IE's exception information is not so detailed.
   
   Exceptions and assertions can also be combined into a very effective debugging tool.
   Assertion (assert) is a very effective debugging tool in other languages. It often appears in this form:
   assert();
   When the program is in debug state, when When the condition is false, the system aborts and reports this assertion. Since the assertion is defined by ourselves, we can easily determine where the error is and find the bug.
   The JavaScript language does not provide macros, nor does it provide 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 debug mode when "impossible things" happen, and then release Ignore it in the version.
   
   You can output the call information of the current stack like this to make up for the defect that the exception object in IE does not have stack information just mentioned:
   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 the use of JavaScript in web development, especially the development of Ajax. It mainly 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, but this article does not cover them, so please forgive me. Friends are welcome to provide more opinions on my discussion.
--
------------------------------------------------ ------------------------
Yours sincerely, dulao5