我的第一个（相对）大型Javascript项目 [英] My First (Relatively) large Javascript Project
问题描述
虽然我已经完成了javascript工作，只要我记得（因为
Netscape首次发布它），我只是用它来琐碎
的东西，在这里改变颜色，在那里验证一个文本元素，等等等等等等。
等等。使用Ajax（实际上，揭示了XmlHTTPRequest
对象）我绝对看到了将更多UI工作移动到客户端的好处，而不是进行页面刷新。
我知道那里有很多库（原型，DOJO，
等）但是我想编写一个专门处理Ajax的库
请求和处理响应（即解析
XML响应的DOM树或JSON响应的对象实例化，
等）。随着我的进步，我在这里和那里添加了日志记录功能和一些接触
。
挑战的最大部分是试图将自己包裹在
javascript中的对象与原型样式。我仍然只知道我需要的1/100
，但我似乎能够写一个相对
自包含的小包，只暴露我想要的东西和
没有暴露100％内部的东西。编写类（或对象或
无论JS社区称之为什么）对我来说都是完全陌生的。我用
只用于编写一些内联函数，这些函数由
调用页面上的各种元素。
所以... 。我在 http://www.lamatek.com/Ajax上张贴了一个愚蠢的小测试页面。 /
并且正在寻找建设性的批评。不是测试页面，而是javascript代码的
。我的封装是否可以......那种东西。
这一切似乎都按照我的意图工作，但由于我缺乏
knowedge&很高兴得到你的意见。
提前致谢。
While I''ve done javascript work for as long as I can remember (since
Netscape first released it), I''ve only ever used it for trivial
things, change a color here, validate a text element there, blah blah
blah. With Ajax (actually, the uncovering of the XmlHTTPRequest
object) I absolutely see the benefit of moving more of the UI work to
the client, rather than doing page refreshes.
I know there are a bunch of libraries out there (prototype, DOJO,
etc.) but I wanted to write one that specifically dealt just with Ajax
requests, and handling the responses (i.e. parsing the DOM tree of an
XML response or the instantiation of an object for a JSON response,
etc.). As I progressed I added logging capabilities and a few touches
here and there.
The biggest part of the challenge was trying to wrap myself around the
Object vs Prototype style in javascript. I still only know 1/100th of
what I need to, but I seem to have been able to write a relatively
self contained little package that only exposes what I wanted to and
not expose what was 100% internal. Writing classes (or objects or
whatever the JS community calls them) is completely foreign to me. I
am only use to writing some inline functions that are called by
various elements on the page.
So...I put up a dumb little test page at http://www.lamatek.com/Ajax/
and was looking for constructive criticism. Not of the test page, but
of the javascript code. Is my encapsulation okay...that sort of thing.
It all appears to work as I intended, but because of my lack of
knowedge & experience it would be nice to get your opinions.
Thanks in advance.
推荐答案
汤姆科尔 < tc **** @ gmail.com写信息
news：11 ********************** @ t69g2000cwt.googlegr oups.com ...
"Tom Cole" <tc****@gmail.comwrote in message
news:11**********************@t69g2000cwt.googlegr oups.com...
虽然我已经完成了javascript工作，但我记得（因为
Netscape首次发布它），我只是用它来琐碎
的东西，在这里换一种颜色，在那里验证一个文本元素，等等等等等等。
blah。使用Ajax（实际上，揭示了XmlHTTPRequest
对象）我绝对看到了将更多UI工作移动到客户端的好处，而不是进行页面刷新。
我知道那里有很多库（原型，DOJO，
等）但是我想编写一个专门处理Ajax的库
请求和处理响应（即解析
XML响应的DOM树或JSON响应的对象实例化，
等）。随着我的进步，我在这里和那里添加了日志记录功能和一些接触
。
挑战的最大部分是试图将自己包裹在
javascript中的对象与原型样式。我仍然只知道我需要的1/100
，但我似乎能够写一个相对
自包含的小包，只暴露我想要的东西和
没有暴露100％内部的东西。编写类（或对象或
无论JS社区称之为什么）对我来说都是完全陌生的。我用
只用于编写一些内联函数，这些函数由
调用页面上的各种元素。
所以... 。我在 http://www.lamatek.com/Ajax上张贴了一个愚蠢的小测试页面。 /
并且正在寻找建设性的批评。不是测试页面，而是javascript代码的
。我的封装是否可以......那种东西。
这一切似乎都按照我的意图工作，但由于我缺乏
knowedge&获得你的意见会很高兴。
While I''ve done javascript work for as long as I can remember (since
Netscape first released it), I''ve only ever used it for trivial
things, change a color here, validate a text element there, blah blah
blah. With Ajax (actually, the uncovering of the XmlHTTPRequest
object) I absolutely see the benefit of moving more of the UI work to
the client, rather than doing page refreshes.
I know there are a bunch of libraries out there (prototype, DOJO,
etc.) but I wanted to write one that specifically dealt just with Ajax
requests, and handling the responses (i.e. parsing the DOM tree of an
XML response or the instantiation of an object for a JSON response,
etc.). As I progressed I added logging capabilities and a few touches
here and there.
The biggest part of the challenge was trying to wrap myself around the
Object vs Prototype style in javascript. I still only know 1/100th of
what I need to, but I seem to have been able to write a relatively
self contained little package that only exposes what I wanted to and
not expose what was 100% internal. Writing classes (or objects or
whatever the JS community calls them) is completely foreign to me. I
am only use to writing some inline functions that are called by
various elements on the page.
So...I put up a dumb little test page at http://www.lamatek.com/Ajax/
and was looking for constructive criticism. Not of the test page, but
of the javascript code. Is my encapsulation okay...that sort of thing.
It all appears to work as I intended, but because of my lack of
knowedge & experience it would be nice to get your opinions.
好吧，至少你没有使用
Well, at least you are not using
（）作为getElementById（）的包装。
总而言之，它看起来相当干净。 （虽然我不是专家。）乍一看，除了你的奇怪的评论标记样式，我认为它看起来类似于Kruse的
AjaxRequest （AjaxToolbox）。
另外，只是出于简单的愚蠢，你能宣传test.do的内容吗？
-Lost
() as a wrapper for getElementById().
All in all though, it looks fairly clean. (I am no expert though.) At first glance,
aside from your strange markup-in-comments style, I thought it looked similar to Kruse''s
AjaxRequest (AjaxToolbox).
Also, just out of plain nosiness, are you able to publicize the contents of "test.do?"
-Lost
2月27日上午7:40，Tom Cole < tco ... @ gmail.comwrote：
On Feb 27, 7:40 am, "Tom Cole" <tco...@gmail.comwrote:
虽然我已经完成了javascript工作，但是我记得（因为
Netscape首次发布它），我只是用它来琐碎
的东西，在这里改变一种颜色，在那里验证一个文本元素，等等等等等等。
blah 。使用Ajax（实际上，揭示了XmlHTTPRequest
对象）我绝对看到了将更多UI工作移动到客户端的好处，而不是进行页面刷新。
我知道那里有很多库（原型，DOJO，
等）但是我想编写一个专门处理Ajax的库
请求和处理响应（即解析
XML响应的DOM树或JSON响应的对象实例化，
等）。随着我的进步，我在这里和那里添加了日志记录功能和一些接触
。
挑战的最大部分是试图将自己包裹在
javascript中的对象与原型样式。我仍然只知道我需要的1/100
，但我似乎能够写一个相对
自包含的小包，只暴露我想要的东西和
没有暴露100％内部的东西。编写类（或对象或
无论JS社区称之为什么）对我来说都是完全陌生的。我用
只用于编写一些内联函数，这些函数由
调用页面上的各种元素。
所以...我在http://www.lamatek.com/Ajax/
上张贴了一个愚蠢的小测试页面，并且正在寻找建设性的批评。不是测试页面，而是javascript代码的
。我的封装是否可以......那种东西。
这一切似乎都按照我的意图工作，但由于我缺乏
knowedge&获得你的意见会很高兴。
提前致谢。
While I''ve done javascript work for as long as I can remember (since
Netscape first released it), I''ve only ever used it for trivial
things, change a color here, validate a text element there, blah blah
blah. With Ajax (actually, the uncovering of the XmlHTTPRequest
object) I absolutely see the benefit of moving more of the UI work to
the client, rather than doing page refreshes.
I know there are a bunch of libraries out there (prototype, DOJO,
etc.) but I wanted to write one that specifically dealt just with Ajax
requests, and handling the responses (i.e. parsing the DOM tree of an
XML response or the instantiation of an object for a JSON response,
etc.). As I progressed I added logging capabilities and a few touches
here and there.
The biggest part of the challenge was trying to wrap myself around the
Object vs Prototype style in javascript. I still only know 1/100th of
what I need to, but I seem to have been able to write a relatively
self contained little package that only exposes what I wanted to and
not expose what was 100% internal. Writing classes (or objects or
whatever the JS community calls them) is completely foreign to me. I
am only use to writing some inline functions that are called by
various elements on the page.
So...I put up a dumb little test page athttp://www.lamatek.com/Ajax/
and was looking for constructive criticism. Not of the test page, but
of the javascript code. Is my encapsulation okay...that sort of thing.
It all appears to work as I intended, but because of my lack of
knowedge & experience it would be nice to get your opinions.
Thanks in advance.
第一个项目的好工作。
几点：
105行：
/ **尝试保持浏览器类型。仅在AjaxRequest创建了
之后才有效。* /
var browser =（navigator.appName.indexOf（''Microsoft''）> = 0）;
这让我很困惑;你显然使用了一个名为browser的变量
表示你是否在IE环境中。这很神秘;我不能从给定的上下文告诉变量浏览器是什么。意味着
而不在这里查找它的定义。此外，这个变量，如你在这里定义的那样，只能在你的AjaxRequest函数的上下文内部工作，所以说只有在和之后才能工作。
AjaxRequest一直在创建是没有实际意义的 - 它仍然不在你的AjaxRequest函数之外的范围内
。
Line 119ff ：
你对style.top和style.bottom的使用有点奇怪。对于
Drag&放下你应该只需要使用顶部和左边;底部和右边
是隐含的。使用style.height和
style.width设置高度和宽度;使用offsetHeight检索它。
第142-144行：
分配虚函数没有意义;将这些留空或分配
将它们归零。
行241ff：
这里不需要try / catch块;你所做的一切都不会产生
错误。此外，尝试/捕获所有地方可能是灾难性的
调试。
265ff：
使用var用于声明以下函数名称的关键字。
365ff：
啊，getRequest"功能。首先，你不应该在这里或任何地方使用
特定于IE的条件评论。
所需要的只是：
var xml;
var _factories = [function（）{return new XMLHttprequest（）; }，
function（）{return new ActiveXObject（" Msxml2.XMLHTTP"）; }，
function（）{return new ActiveXObject（" Microsoft.XMLHTTP"）;
for（var i = 0; i< factories.length; i ++）{
try {
xml = _factories [i]（）;
休息;
} catch（e）{
继续;
}
}
370ff：
您的parseResponse函数都非常相似，你应该尝试从它们重用功能。类似于：
函数makeResponseHandler（fn）{
返回函数（）{
if（xmlhttp.readyState ！= 4）返回;
if（xmlhttp.status == 200）{
try {
value = fn（xmlhttp）;
} catch（ex）{// log errors
}
}
}
}
var parseJSONResponse = makeResponseHandler（函数（响应）
{return eval（response.responseText）;}）;
var parseTextResponse = makeResponseHandler（function（response）
{return response.responseText;}）;
var parseXMLResponse = makeResponseHandler（function（response）{return
response.responseXML;}）;
等
另外，作为一般规则，我不是喜欢使用JS设置任何element.style
属性，除了top，left，height和width;所有
其他应该在样式表中指定并使用CSS切换
类名。帮助保持你的风格与你的行为分开。
无论如何，只是我的2c。其他人可能有不同的偏好。干得好
虽然！
-David
Nice work for a first project.
Couple of points:
Line 105:
/**Attempts to hold browser type. Only works after an AjaxRequest has
been created.*/
var browser = (navigator.appName.indexOf(''Microsoft'') >= 0);
This puzzles me; you''re apparently using a variable named "browser" to
indicate whether you''re in an IE environment. This is cryptic; I
can''t tell from a given context what the variable "browser" means
without looking up its definition here. Also, this variable, as
you''re defining it here, will only work internally within the context
of your AjaxRequest function, so saying it will only work after and
AjaxRequest has been creating is moot - it still isn''t in scope
outside your AjaxRequest function.
Line 119ff:
Your use of both style.top and style.bottom is a little strange. For
Drag & Drop you should only need to use top and left; bottom and right
are implicit. Set the height and width using style.height and
style.width; retrieve it using offsetHeight.
Lines 142-144:
No point in assigning dummy functions; leave these blank or assign
them to null.
Lines 241ff:
No need for a try/catch block here; nothing you''re doing will throw an
error. Also, try/catch all over the place can be disastrous for
debugging.
265ff:
Use "var" keyword to declare names for the following functions.
365ff:
Ah, the "getRequest" function. First off, you shouldn''t be using the
IE-specific conditional comments here or anywhere, for that matter.
All you need is:
var xml;
var _factories = [function() { return new XMLHttprequest(); },
function() { return new ActiveXObject("Msxml2.XMLHTTP"); },
function() { return new ActiveXObject("Microsoft.XMLHTTP"); }];
for (var i=0; i<factories.length; i++) {
try {
xml = _factories[i]();
break;
} catch(e) {
continue;
}
}
370ff:
Your "parseResponse" functions are all so similar, you should try to
reuse functionality from them. Something along the lines of:
function makeResponseHandler(fn) {
return function() {
if (xmlhttp.readyState != 4) return;
if (xmlhttp.status == 200) {
try {
value = fn(xmlhttp);
} catch (ex) { // log errors
}
}
}
}
var parseJSONResponse = makeResponseHandler(function(response)
{ return eval(response.responseText); });
var parseTextResponse = makeResponseHandler(function(response)
{ return response.responseText; });
var parseXMLResponse = makeResponseHandler(function(response) { return
response.responseXML; });
etc.
Also, as a general rule, I don''t like to set any element.style
properties using JS except for top, left, height, and width; all
others should be specified in a stylesheet and toggled using CSS
classnames. Helps keep your style separate from your behavior.
Anyway, just my 2c. Others may have different preferences. Good job
though!
-David
这篇关于我的第一个（相对）大型Javascript项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
