你能推荐一个关于在javascript中使用对象的教程吗？

本文介绍了你能推荐一个关于在javascript中使用对象的教程吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 有人可以推荐一个在javascript中使用对象的好的在线指南吗？ 我买的书（DHTML Utopia）建议使用对象来保存代码 清理并停止代码的不同部分之间的命名空间冲突，但是据我所知，对象在bavascript中工作的方式非常尴尬。 我按照他们的方式工作在书中提出，它确实好了 ，直到我想从另一个方法中调用一个对象方法 - 我无法找到一个 语法。我尝试按照我在网上找到的指南，并按照他们说的方式进行操作，这意味着把''这个。''实际上放在 所有的东西之前，代码仍然没有不行。我很想忘记 关于对象并将整个事情作为单独的函数来做，但我仍然不会想要这样做.B br不想这么做。 /> 请帮忙！ - http://www.niftybits.ukfsn.org/ 删除''nul-l''给我发电子邮件。除非通过主题行中的[html]或[attachment]通知，否则html邮件或附件将进入垃圾邮件 bin。 解决方案 根据你正在做什么，这可能不是一件坏事。全局 函数并不邪恶，特别是如果你完全控制页面。但是，如果你要构建可重用的代码，那么将功能封装到 名称空间是一个好主意。 - Matt Kruse http://www.JavascriptToolbox.com http://www.AjaxToolbox.com 取决于您使用的语法类型。 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邮件或附件将包含在垃圾邮件中。 Andy Baxter写道： 在下面的代码中，我标记的行不起作用 - 它永远不会到达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（）; 以上行只返回一个引用该函数并且什么都不做 。在功能 声明之后发出呼叫会更有意义。 [...] - 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 codeclean and stop namespace clashes between different parts of the code, butas 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 OKuntil I wanted to call one object method from another - I couldn''t find asyntax for this that worked. I tried following a guide I found online, andthe way they say to do it means putting ''this.'' before practicallyeverything, and the code still doesn''t work. I''m tempted just to forgetabout objects and do the whole thing as separate functions, but I stilldon''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 spambin unless notified with [html] or [attachment] in the subject line. 解决方案Depending on exactly what you''re doing, this may not be a bad thing. Globalfunctions are not evil, especially if you have full control of the page. Ifyou are building reusable code, however, encapsulating functionality into anamespace is a good idea.--Matt Kruse http://www.JavascriptToolbox.com http://www.AjaxToolbox.com 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 reachesthe pano.moveImages() function. If I change it to just ''moveImages;''(which is what I tried first), it gives an error: ''moveImages is notdefined''. I''m confused about this, because referring to object propertieslike mouseDown and pan from inside the functions works fine without adding''pano.'' in front, but referring to one of the object methods doesn''t. Ifyou have any general comments on the way I''ve written this, I''d appreciatethat too, as this is the first program I''ve written in javascript.// Panorama script// By Andy Baxter, May 2006function 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.01Transitional//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> <scripttype="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 spambin unless notified with [html] or [attachment] in the subject line. 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. Perhapsthey 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 itwould be good, particularly inside an init function. If it''s notsupported, 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 nothingwith it. It would make more sense to place the call after the functiondeclaration.[...]--RobGroup FAQ: <URL:http://www.jibbering.com/faq/> 这篇关于你能推荐一个关于在javascript中使用对象的教程吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！