从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控制台外我没有找到其他调试工具。
在此我推荐几个调试技巧：
-
Mozilla Firefox용 jsdebugger 플러그인을 사용하세요 . 이에 대해서는 더 이상 말하지 않겠습니다. 가장 고전적인 js 디버깅 도구입니다. 원격 사이트 JavaScript의 온라인 디버깅은 훌륭합니다.
- 문제를 파악하고, 로컬 html 파일과 js 파일을 생성하고, ms 스크립트 디버그 디버깅 도구를 사용하여 디버깅합니다. js 모듈이 상대적으로 독립적인 경우 이 도구를 사용할 수 있습니다. hta 프로젝트를 작성하는 경우 당연히 이 도구가 첫 번째 선택입니다.
- httpWatch 이것은 IE용 플러그인으로, IE의 모든 http 세션을 모니터링하고 http 세션의 원본 텍스트를 볼 수 있습니다. 이 도구를 사용하여 프로그램에 서버 세션이 있는지 여부와 매개변수 및 반환된 데이터가 무엇인지 확인할 수 있습니다.
-
웹페이지에서 디버깅을 위한 텍스트 영역 생성
웹페이지에서 실행하려는 js 문을 허용하는 텍스트 영역을 생성한 다음 js의 평가 기능을 사용하기 위한 버튼을 추가할 수 있습니다. 입력한 코드를 실행합니다.
이 방법은 웹 페이지에서 오류가 발생한 후 페이지에 개체 값을 출력하는 코드를 작성하는 데 매우 적합합니다. 더 나은 결과를 위해 함께 사용할 일부 덤프 도구 기능을 작성하는 것이 좋습니다.
이 방법은 언제든지 페이지의 숨겨진 텍스트 영역을 열어서 디버깅할 수 있다는 점에서 매우 마음에 듭니다. 마치 터미널을 서버에 연결한 다음 셸을 사용하여 무엇이든 하는 것과 같은 느낌입니다. 여기에서 재정의할 수 있으므로 인터페이스의 모든 요소를 임의로 조작하고, 모든 개체의 모든 기능을 호출하고, 필요한 런타임 값을 출력할 수 있습니다.
-
예외 및 어설션 사용
try{}catch(e){} 구조를 사용하면 오류 메시지를 숨길 수 있을 뿐만 아니라 인터페이스를 더욱 친숙하게 만들 수 있습니다. 우리 프로그램은 더 나은 오류 처리 메커니즘을 구축하기 위해 예외를 사용하고 예외를 발생시킬 수 있습니다.
그런 이야기가 있습니다. string.localeCompare 함수를 사용할 때 다음 코드를 무심코 작성했습니다.
var iRe = str1.localeCompare(str2);
switch(iRe){
0: return . ...
1: return ....
-1:return ....
defalut:throw "error:localeCompare return other value"
}
작성 후 잊어버림 예기치 않게 내 동료가 Linux에서 Firefox를 사용할 때 예외가 발생했습니다. 그런 다음 Linux Firefox의 localeCompare가 0/1/-1뿐만 아니라 특정 값을 반환한다는 것을 알게 되었습니다.
이 예외 발생은 코드의 불완전성을 효과적으로 감지합니다. .
firefox에서 예외 덤프를 수행한 후 더 자세한 호출 스택 정보를 얻을 수 있어 매우 좋습니다. IE의 예외 정보는 그다지 자세하지 않습니다.
예외와 어설션을 매우 효과적인 디버깅 도구로 결합할 수도 있습니다.
어설션(assert)은 다른 언어에서 매우 효과적인 디버깅 도구입니다.
assert();
프로그램이 디버그 상태에 있을 때, 조건이 충족될 때 false인 경우 시스템은 이 주장을 중단하고 보고합니다. Assertion은 스스로 정의하기 때문에 어디에서 오류가 발생했는지 쉽게 파악하고 버그를 찾을 수 있습니다.
JavaScript 언어는 매크로도 제공하지도 않고 Assert도 제공하지 않습니다.
if(_is_debug)ert = function(expression, strLable){
if(!expression) throw Error( strLable);
}
else 주장 = function(){};//_is_debug는 전역 변수입니다
이를 통해 프로그램은 "불가능한 일"이 발생할 때 디버그 모드에서 예외를 발생시킨 후 해제할 수 있습니다. 버전에서는 무시하세요.
IE의 예외 객체에 방금 언급한 스택 정보가 없다는 단점을 보완하기 위해 현재 스택의 호출 정보를 이와 같이 출력할 수 있습니다.
함수 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;
}
이 기사에서는 웹 개발, 특히 Ajax 개발에서 JavaScript 사용에 대해서만 설명하며 주로 "순수한 JavaScript"를 더 잘 사용하는 방법에 중점을 둡니다. 웹 개발에는 xml, Dom 등 실제로 자바스크립트와 밀접한 관련이 있는 부분이 많이 있지만, 이 글에서는 다루지 않기 때문에 양해해 주시기 바랍니다. 친구들은 내 토론에 대해 더 많은 의견을 제공할 수 있습니다.
--
-------------------------------------------- ------ -----------
진심으로 dulao5
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
