你能推荐一个关于在javascript中使用对象的教程吗？ [英] Can you recommend a tutorial on using objects in javascript?

问题描述

有人可以推荐一个在javascript中使用对象的好的在线指南吗？

我买的书（DHTML Utopia）建议使用对象来保存代码

清理并停止代码的不同部分之间的命名空间冲突，但是据我所知，对象在bavascript中工作的方式非常尴尬。

我按照他们的方式工作在书中提出，它确实好了

，直到我想从另一个方法中调用一个对象方法 - 我无法找到一个

语法。我尝试按照我在网上找到的指南，并按照他们说的方式进行操作，这意味着把''这个。''实际上放在

所有的东西之前，代码仍然没有不行。我很想忘记

关于对象并将整个事情作为单独的函数来做，但我仍然不会想要这样做.B br不想这么做。 />

请帮忙！


-
http://www.niftybits.ukfsn.org/


删除''nul-l''给我发电子邮件。除非通过主题行中的[html]或[attachment]通知，否则html邮件或附件将进入垃圾邮件

bin。

解决方案

Andy Baxter写道：

有人可以推荐一个很好的在线指南来使用
javascript中的对象吗？


因为javascript中的所有东西都是对象，所以_anything_

涉及使用对象:)

我买的那本书（ DHTML乌托邦）建议使用对象来保持代码清洁并停止代码的不同部分之间的命名空间冲突，但据我所知，对象在javascript中的工作方式是相当的尴尬。


与大多数人习惯的不同 ！=尴尬。

一旦你习惯它，就很容易理解。


使用对象作为命名空间封装函数是一个好主意。


一个简单的例子：


var MyLib = {};

MyLib.funcA = function（）{...}

myLib.funcB = function（）{...}

我按照他们建议的方式工作这本书


他们建议了什么？

，直到我想从另一个方法调用一个对象
方法它才行我无法找到有效的语法。


取决于您使用的语法类型。


例如：


var MyLib2 = {};

MyLib2.funcC = function（）{MyLib.funcA（）; }

我尝试按照我在网上找到的指南，以及他们说要做的方式
这意味着在几乎所有事情之前加上''这个。''代码
仍然不行。


使用this仅适用于实例化对象。如果你只使用

对象作为命名空间，那么你就不会实例化它们并且不会有任何用于''this'的任何用途'。

我很想忘记对象并将整个事情作为单独的函数来做，但我仍然不想要这样做。

根据你正在做什么，这可能不是一件坏事。全局

函数并不邪恶，特别是如果你完全控制页面。但是，如果你要构建可重用的代码，那么将功能封装到

名称空间是一个好主意。


-

Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

Matt Kruse说：

Andy Baxter写道：

在我想调用一个对象之前一切正常
来自另一个方法 - 我无法找到有效的语法。

取决于您使用的语法类型。

var MyLib2 = {};
MyLib2.funcC = function（）{MyLib.funcA（）; }

在下面的代码中，我标记的行不起作用 - 它永远不会达到
pano.moveImages （）函数。如果我把它改成''moveImages;''

（这是我先试过的），它会给出一个错误：''moveImages不是

定义'' 。我对此感到困惑，因为引用对象属性

就像mouseDown和pan从函数内部工作正常而没有添加

''pano。''在前面，但是参考其中一个对象方法并不是。如果

你对我写这篇文章的方式有任何一般性评论，我也会感激

，因为这是我的第一个程序用javascript写的。


//全景剧本

// Andy Baxter，2006年5月


函数showMessage （str）{

var rep = document.getElementById（" message1"）;

rep.innerHTML = str;

}


函数showMessage2（str）{

var rep = document.getElementById（" message2"）;

rep.innerHTML = str ;

}

var pano = {

//全景图初始化。

//移动像素当鼠标处于完全左/右时。

比例：0，

//鼠标状态。

mouseDown：0，

mouseX：0，

mouseY：0，

//全景平移到左边的比率。

pan：0，

//全景图像的大小[宽度，高度]

imgSize：0，

scaledImgSize：0，

//引用DOM对象。

panoDiv：0，

panoPic1：0，

init：function（）{

//初始化变量;

scale = 30;

mouseDown = 0;

mouseX = 0;

mouseY = 0;

pan = 0;

panoDiv = document.getElementById（" panoDiv"）;

panoPic1 = document.getElementById（" panoImage1"）;

panoPic2 = document.getElementById（" panoImage2"）;

imgSize = new Array（2）;

imgSize [0] = 3996;

imgSize [1] = 500;

var imgScale = parseInt（panoDiv.style.height）/ imgSize [ 1];

scaledImgSize = new Array（2）;

scaledImgSize [0] = imgScale * imgSize [0];

scaledImgSize [1 ] = imgScale * imgSize [1];

panoPic1.style.width = scaledImgSize [0] +" px";

panoPic1.style.height = scaledImgSize [1 ] +" px";

panoPic2.style.width = scaledImgSize [0] +" px";

panoPic2.style.height = scaledImgSize [1] +" px";

//连接事件。

dojo.event.connect（panoDiv，" onmousedown"，pano，" onMouseDown"）;

dojo.event.connect（panoDiv，" onmouseup"，pano，" onMouseUp"）;

dojo.event.connect（panoDiv，" onmousemove"，pano， " onMouseMove"）;

dojo.event.connect（panoPic1，" onmousemove"，pano，" stopdefault"）;

dojo.event.connect（panoPic1 ，onmousedown，pano，stopdefault）;

dojo.event.connect（panoPic1，onmouseup"，pano，stopdefault）;

dojo.event.connect（panoPic1，" onmouseclick"，pano，" stopdefault"）;

setInterval（pano.mover，100）;

}，

mover：function（）{

var d = new Date（）;

showMessage（" mouseX：" + mouseX +" mouseY：+ mouseY +鼠标按下：" +鼠标按下+ QUOT; secs：" + d.getSeconds（））;

//经常调用以移动全景图。

如果（！mouseDown）返回;

var width = parseInt（panoDiv.style.width）;

//根据视口中的位置计算移动量。

var offset = -Math.round（scale * 2 *（（mouseX-width / 2）/ width））;

pan - = offset / scaledImgSize [0];

if（ pan< 0）{

pan + = 1;

}

else if（pan> 1）{

pan - = 1;

}

****下一行无效*****

pano .moveImages;

//panoPic1.style.left="-"+(pan * scaledImgSize [0]）+" px";

// panoPic2 .style.left =（（ - pan * scaledImgSize [0]）+ scaledImgSize [0]）+" px";

}，

clipImage：function（img ）{

//剪辑图像以使其适合视口。

var pos = parseInt（img.style.left）;

var width = parseInt（img.style.width）;

var divWidth = parseInt（panoDiv.style.w宽度）;

var leftClip，rightClip;

//如果图像穿过视口的左边缘，则剪掉左侧。

leftClip =（pos< 0）？ - pos：0;

//和右边相同。

rightClip =（pos + width> divWidth）？pos + divWidth：width;

img.style.clip =" rect（0px，" + rightClip +" px，" + panoDiv .style.height +"，" + leftClip +" px）" ;;

}，

moveImages：function（）{

//将图片移动到某个位置，具体取决于pan值。

alert（这里）;

showMessage2（" offset：" + offset +" pic x：" + panoPic1.style.left +" pan：" + pan）;

panoPic1.style.left =" - " +（pan * scaledImgSize [0]）+" px";

panoPic2.style.left =（（ - pan * scaledImgSize [0]）+ scaledImgSize [0]）+" px";

//根据图像在视口中的位置剪切图像。

//this.clipImage(panoPic1),

//this.clipImage(panoPic2),

}，

stopDefault：function（evt）{

evt.preventDefault;

}，

onMouseDown：function（evt）{

mouseDown = -1;

evt.stopPropagation;

evt.preventDefault;

}，

onMouseUp：function（evt）{

mouseDown = 0;

evt.stopPropagation;

evt.preventDefault;

}，

onMouseMove：function（evt）{

//更新鼠标坐标。

mouseX = evt.clientX-dojo。 style.getTotalOffset（panoDiv，" left"，0）;

mouseY = evt.clientY-dojo.style.getTotalOffset（panoDiv，" top"，0）;

evt.stopPropaga ;
evt.preventDefault;


}

}


道场。 addOnLoad（pano.init）;


**** HTML文件如下****


<！DOCTYPE html PUBLIC" - // W3C // DTD HTML 4.01

Transitional // EN"> < html>

< head>

< meta content =" text / html; charset = ISO-8859-1"

http-equiv =" content-type">

< title> Panorama-test< / title>

< script type =" text / javascript" SRC =" JS /道场/的dojo.js">< /脚本> < script

type =" text / javascript" src =" js / pano.js">< / script>

< / head>

< body>

< h1 id =" heading">全景测试

< / h1>

< p id =" message1">& nbsp;< ; / p>

< p id =" message2">& nbsp;< / p>

< div style =" position：relative ;顶部：0px; left：0px;"> < div id =" panoDiv"

style =" position：absolute;顶部：0px;左：30px;宽度：700px;身高：

400px; clip：rect（0px，700px，400px，0px）;">< img id =" panoImage1"

style =" position：absolute;宽度：自动;身高：400px; left：0px;

z-index：10;" ALT ="" src =" pano2.jpg">< img id =" panoImage2"

style =" position：absolute;宽度：自动;身高：400px; left：0px;

z-index：9;" ALT ="" src =" pano2.jpg">< / div>

< / div>

< p>& nbsp;< / p>

< / body>

< / html>


-
http://www.niftybits.ukfsn.org/


删除''nul-l''给我发电子邮件。除非通过主题行中的[html]或[attachment]通知，否则HTML邮件或附件将包含在垃圾邮件中。

< blockquote> Andy Baxter写道：

Matt Kruse说：

Andy Baxter写道：

直到我想要它才行从另一个方法调用一个对象
方法 - 我无法找到有效的语法。取决于你正在使用什么样的语法。

例如：

var MyLib2 = {};
MyLib2.funcC = function（）{MyLib。 FuncA的行（）; }

在下面的代码中，我标记的行不起作用 - 它永远不会到达pano.moveImages（）函数。如果我把它改成''moveImages;''
（这是我先试过的），它会给出一个错误：''moveImages没有被定义''。我对此感到困惑，因为引用对象属性像mouseDown和pan从函数内部工作正常而不添加
''pano。''在前面，但引用其中一个对象方法那并不。如果你对我写这篇文章的方式有任何一般性评论，我也会感激
，因为这是我用javascript编写的第一个程序。

//全景脚本
// Andy Baxter，2006年5月

函数showMessage（str）{
var rep = document.getElementById（" message1"） ;
rep.innerHTML = str;
}

不要使用标签发布代码，使用2或4个空格进行缩进。


[...]

var pano = {
//全景图初始化。
//鼠标移动时的像素完全向左/向右。
比例：0，
//鼠标状态。
mouseDown：0，
mouseX：0，
mouseY：0，
//将全景平移到左边的比率。
pan：0，
//全景图像的大小[宽度，高度]
imgSize：0，
scaledImgSize：0 ，
//引用DOM对象。
panoDiv：0，
panoPic1：0，
init：function（）{


你mi ght使用以下方法更容易添加方法：


pano.init = function（）

{

//函数体

}

//初始化变量;
scale = 30;
mouseDown = 0;
mouseX = 0;
mouseY = 0;
pan = 0;



你必须非常小心这样创建变量。省略

''var''意味着在调用pano.init（）之前，它们都是未定义的。

调用pano.init（）之后，它们都是全局变量。也许

它们应该是pano的属性？


panoDiv = document.getElementById（" panoDiv"）;
panoPic1 = document.getElementById（ panoImage1;;
panoPic2 = document.getElementById（" panoImage2"）;


尝试使用它之前对getElementById进行一些功能检测

会很好，特别是在init函数中。如果它不支持
，请在继续之前处理它。


imgSize = new Array（2）;
imgSize [ 0] = 3996;
imgSize [1] = 500;


您可以将数组初始化为：


imgSize = [3996,500];

[.. 。] //连接事件。
dojo.event.connect（panoDiv，" onmousedown"，pano，" onMouseDown"）;
[...] dojo.event.connect（panoPic1，" onmouseclick"，pano，" stopdefault"）;


你没有包含dojo库，所以这里抛出了很多错误...


[...]

} ****下一行不起作用*****
pano.moveImages;

如果你想要调用pano.moveImages，使用''（）''：


pano.moveImages（）;


以上行只返回一个引用该函数并且什么都不做

。在功能

声明之后发出呼叫会更有意义。


[...]

- < br $>
Rob

小组常见问题：<网址：http：//www.jibbering.com/faq/>

Can anyone recommend a good online guide to using objects in javascript?
The book I bought (DHTML Utopia) suggests using objects to keep the code
clean and stop namespace clashes between different parts of the code, but
as far as I can see, the way objects work in javascript is quite awkward.
I had it working the way they suggest in the book, and it was going OK
until I wanted to call one object method from another - I couldn''t find a
syntax for this that worked. I tried following a guide I found online, and
the way they say to do it means putting ''this.'' before practically
everything, and the code still doesn''t work. I''m tempted just to forget
about objects and do the whole thing as separate functions, but I still
don''t quite want to do this.

please help!

--
http://www.niftybits.ukfsn.org/

remove ''n-u-l-l'' to email me. html mail or attachments will go in the spam
bin unless notified with [html] or [attachment] in the subject line.

解决方案

Andy Baxter wrote:

Can anyone recommend a good online guide to using objects in
javascript?
Since everything in javascript is an object, pretty much doing _anything_
involves using objects :)
The book I bought (DHTML Utopia) suggests using objects
to keep the code clean and stop namespace clashes between different
parts of the code, but as far as I can see, the way objects work in
javascript is quite awkward.
"Different than most people are used to" != awkward.
Once you get used to it, it''s easily understood.

Using objects as a "namespace" to encapsulate functions is a good idea.

A simple example:

var MyLib = {};
MyLib.funcA = function() { ... }
myLib.funcB = function() { ... }
I had it working the way they suggest in
the book
What did they suggest?
and it was going OK until I wanted to call one object
method from another - I couldn''t find a syntax for this that worked.
Depends on exactly what kind of syntax you were using.

For example:

var MyLib2 = {};
MyLib2.funcC = function() { MyLib.funcA(); }
I tried following a guide I found online, and the way they say to do
it means putting ''this.'' before practically everything, and the code
still doesn''t work.
Using "this" only applies to instantiated objects. If you''re only using
objects as a namespace, then you won''t be instantiating them and won''t have
any use for ''this''.
I''m tempted just to forget about objects and do
the whole thing as separate functions, but I still don''t quite want
to do this.

Depending on exactly what you''re doing, this may not be a bad thing. Global
functions are not evil, especially if you have full control of the page. If
you are building reusable code, however, encapsulating functionality into a
namespace is a good idea.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

Matt Kruse said:

Andy Baxter wrote:

and it was going OK until I wanted to call one object
method from another - I couldn''t find a syntax for this that worked.

Depends on exactly what kind of syntax you were using.

For example:

var MyLib2 = {};
MyLib2.funcC = function() { MyLib.funcA(); }

In the code below, the line I''ve marked doesn''t work - it never reaches
the pano.moveImages() function. If I change it to just ''moveImages;''
(which is what I tried first), it gives an error: ''moveImages is not
defined''. I''m confused about this, because referring to object properties
like mouseDown and pan from inside the functions works fine without adding
''pano.'' in front, but referring to one of the object methods doesn''t. If
you have any general comments on the way I''ve written this, I''d appreciate
that too, as this is the first program I''ve written in javascript.

// Panorama script
// By Andy Baxter, May 2006

function showMessage(str) {
var rep=document.getElementById("message1");
rep.innerHTML=str;
}

function showMessage2(str) {
var rep=document.getElementById("message2");
rep.innerHTML=str;
}
var pano = {
// initialisation for the panorama.
// pixels to move when mouse is at full left / right.
scale: 0,
// mouse status.
mouseDown: 0,
mouseX: 0,
mouseY: 0,
// ratio that panorama is panned to left.
pan: 0,
// size of pano image [width,height]
imgSize: 0,
scaledImgSize: 0,
// references to DOM objects.
panoDiv: 0,
panoPic1: 0,
init: function() {
// initialise variables;
scale=30;
mouseDown=0;
mouseX=0;
mouseY=0;
pan=0;
panoDiv = document.getElementById("panoDiv");
panoPic1 = document.getElementById("panoImage1");
panoPic2 = document.getElementById("panoImage2");
imgSize=new Array(2);
imgSize[0]=3996;
imgSize[1]=500;
var imgScale=parseInt(panoDiv.style.height)/imgSize[1];
scaledImgSize=new Array(2);
scaledImgSize[0]=imgScale*imgSize[0];
scaledImgSize[1]=imgScale*imgSize[1];
panoPic1.style.width=scaledImgSize[0]+"px";
panoPic1.style.height=scaledImgSize[1]+"px";
panoPic2.style.width=scaledImgSize[0]+"px";
panoPic2.style.height=scaledImgSize[1]+"px";
// connect events.
dojo.event.connect(panoDiv, "onmousedown", pano, "onMouseDown");
dojo.event.connect(panoDiv, "onmouseup", pano, "onMouseUp");
dojo.event.connect(panoDiv, "onmousemove", pano, "onMouseMove");
dojo.event.connect(panoPic1, "onmousemove", pano, "stopdefault");
dojo.event.connect(panoPic1, "onmousedown", pano, "stopdefault");
dojo.event.connect(panoPic1, "onmouseup", pano, "stopdefault");
dojo.event.connect(panoPic1, "onmouseclick", pano, "stopdefault");
setInterval( pano.mover ,100);
},
mover: function() {
var d=new Date();
showMessage("mouseX: "+mouseX+" mouseY: "+mouseY+" mousedown:"+mouseDown+" secs:"+d.getSeconds());
// called every so often to move the panorama.
if (! mouseDown) return;
var width=parseInt(panoDiv.style.width);
// work out how much to move based on position in the viewport.
var offset=-Math.round(scale*2*((mouseX-width/2)/width));
pan -= offset/scaledImgSize[0];
if (pan <0) {
pan +=1;
}
else if (pan >1) {
pan -=1;
}
**** next line doesn''t work *****
pano.moveImages;
//panoPic1.style.left="-"+(pan * scaledImgSize[0])+"px";
//panoPic2.style.left=((-pan*scaledImgSize[0])+scaledImgSize[0])+"px";
},
clipImage: function(img) {
// clip an image to make it fit in the viewport.
var pos=parseInt(img.style.left);
var width=parseInt(img.style.width);
var divWidth=parseInt(panoDiv.style.width);
var leftClip, rightClip;
// clip off the left side if the image crosses the left edge of the viewport.
leftClip=(pos<0)?-pos:0;
// and the same for the right side.
rightClip=(pos+width>divWidth)?pos+divWidth:width;
img.style.clip="rect(0px,"+rightClip+"px,"+panoDiv .style.height+","+leftClip+"px)";
},
moveImages: function() {
// move images to a position depending on the pan value.
alert(here);
showMessage2("offset: "+offset+" pic x:"+panoPic1.style.left+" pan:"+pan);
panoPic1.style.left="-"+(pan * scaledImgSize[0])+"px";
panoPic2.style.left=((-pan*scaledImgSize[0])+scaledImgSize[0])+"px";
// clip the images according to where they are in the viewport.
//this.clipImage(panoPic1);
//this.clipImage(panoPic2);
},
stopDefault: function(evt) {
evt.preventDefault;
},
onMouseDown: function(evt) {
mouseDown=-1;
evt.stopPropagation;
evt.preventDefault;
},
onMouseUp: function(evt) {
mouseDown=0;
evt.stopPropagation;
evt.preventDefault;
},
onMouseMove: function(evt) {
// update the mouse coords.
mouseX=evt.clientX-dojo.style.getTotalOffset(panoDiv,"left",0);
mouseY=evt.clientY-dojo.style.getTotalOffset(panoDiv,"top",0);
evt.stopPropagation;
evt.preventDefault;

}
}

dojo.addOnLoad(pano.init);

**** HTML file follows ****

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"> <html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Panorama-test</title>
<script type="text/javascript" src="js/dojo/dojo.js"></script> <script
type="text/javascript" src="js/pano.js"></script>
</head>
<body>
<h1 id="heading">Panorama Test
</h1>
<p id="message1">&nbsp;</p>
<p id="message2">&nbsp;</p>
<div style="position: relative; top: 0px; left: 0px;"> <div id="panoDiv"
style="position: absolute; top: 0px; left: 30px; width: 700px; height:
400px; clip: rect(0px, 700px, 400px, 0px);"><img id="panoImage1"
style="position: absolute; width: auto; height: 400px; left: 0px;
z-index: 10;" alt="" src="pano2.jpg"><img id="panoImage2"
style="position: absolute; width: auto; height: 400px; left: 0px;
z-index: 9;" alt="" src="pano2.jpg"></div>
</div>
<p>&nbsp;</p>
</body>
</html>


--
http://www.niftybits.ukfsn.org/

remove ''n-u-l-l'' to email me. html mail or attachments will go in the spam
bin unless notified with [html] or [attachment] in the subject line.

Andy Baxter wrote:

Matt Kruse said:

Andy Baxter wrote:

and it was going OK until I wanted to call one object
method from another - I couldn''t find a syntax for this that worked. Depends on exactly what kind of syntax you were using.

For example:

var MyLib2 = {};
MyLib2.funcC = function() { MyLib.funcA(); }

In the code below, the line I''ve marked doesn''t work - it never reaches
the pano.moveImages() function. If I change it to just ''moveImages;''
(which is what I tried first), it gives an error: ''moveImages is not
defined''. I''m confused about this, because referring to object properties
like mouseDown and pan from inside the functions works fine without adding
''pano.'' in front, but referring to one of the object methods doesn''t. If
you have any general comments on the way I''ve written this, I''d appreciate
that too, as this is the first program I''ve written in javascript.

// Panorama script
// By Andy Baxter, May 2006

function showMessage(str) {
var rep=document.getElementById("message1");
rep.innerHTML=str;
}

Don''t post code with tabs, use 2 or 4 spaces for indentation.

[...]
var pano = {
// initialisation for the panorama.
// pixels to move when mouse is at full left / right.
scale: 0,
// mouse status.
mouseDown: 0,
mouseX: 0,
mouseY: 0,
// ratio that panorama is panned to left.
pan: 0,
// size of pano image [width,height]
imgSize: 0,
scaledImgSize: 0,
// references to DOM objects.
panoDiv: 0,
panoPic1: 0,
init: function() {
You might find it easier to add methods using:

pano.init = function()
{
// function body
}
// initialise variables;
scale=30;
mouseDown=0;
mouseX=0;
mouseY=0;
pan=0;

You must be very careful with creating variables this way. Omitting
''var'' means that before pano.init() is called, they are all undefined.
After pano.init() is called, they are all global variables. Perhaps
they should be properties of pano?

panoDiv = document.getElementById("panoDiv");
panoPic1 = document.getElementById("panoImage1");
panoPic2 = document.getElementById("panoImage2");
Some feature detection for getElementById before attempting to use it
would be good, particularly inside an init function. If it''s not
supported, deal with it before going any further.

imgSize=new Array(2);
imgSize[0]=3996;
imgSize[1]=500;
You can initialise the array as:

imgSize = [3996, 500];
[...] // connect events.
dojo.event.connect(panoDiv, "onmousedown", pano, "onMouseDown"); [...] dojo.event.connect(panoPic1, "onmouseclick", pano, "stopdefault");
You didn''t inlcude the dojo library, so lots of errors thrown here...

[...]
} **** next line doesn''t work *****
pano.moveImages;

If you want to call pano.moveImages, use ''()'':

pano.moveImages();

The above line just returns a reference to the function and does nothing
with it. It would make more sense to place the call after the function
declaration.

[...]
--
Rob
Group FAQ: <URL:http://www.jibbering.com/faq/>

这篇关于你能推荐一个关于在javascript中使用对象的教程吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！