<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    轉(zhuǎn)貼javascript心得(二)

    1,不要認(rèn)為Struts已經(jīng)過時(shí)了,也不要盲目的去追隨JSF以及更新的MVC框架,在目前Struts仍舊是最為優(yōu)秀的MVC框架,尤其是后來與Spring、Hibernate(或者Ibatis)的結(jié)合,使得Struts的應(yīng)用得到了進(jìn)一步的發(fā)展,也許你認(rèn)為Webwork2、SpringMVC或者JSF更為優(yōu)秀和實(shí)用,那么也沒有關(guān)系,其實(shí)只要對(duì)你或你的公司適用,那么就可以了。

    2,你知道Javascript中的typeof和instanceof操作嗎,如果不知道,勸你還是看看這方面的知識(shí)吧,typeof返回的是對(duì)象的類型,例如string、number、object等等,而instanceof判斷的是一個(gè)對(duì)象是否是某個(gè)類的實(shí)例,例如:
      var arr=new Array();
      var type=typeof(arr);//返回object
      var flag=arr instanceof Array;//返回true
      var flag2=arr instanceof Object;//返回true;
      在實(shí)際使用過程中,你會(huì)發(fā)現(xiàn)instanceof是更為強(qiáng)大的,當(dāng)然了許多時(shí)候typeof用起來很方便,但是對(duì)于復(fù)雜的場(chǎng)合typeof就不太適用了,尤其是對(duì)于自定義對(duì)象以及對(duì)象之間有著復(fù)雜的繼承關(guān)系時(shí),使用instanceof可以方便的對(duì)這些進(jìn)行判斷。

    3,雖然你可能知道javascript中typeof的用法,但是如果你不能做對(duì)下面的題,說明你對(duì)typeof的理解還是不夠的,例如:
      var a;
      var rs=typeof(a);//請(qǐng)問rs的值是什么?
      (A)object (B)variable (C)undefined (D) string (E)null (F)以上答案全不正確
      如果你選擇A還算對(duì)JS有一些了解,如果選擇B則基本上是亂猜的,如果選擇D什么也說明不了,如果選擇E則說明你對(duì)于Java和Javascript有些東西還沒有分清楚,選擇F也是不正確的。答案是C,記住在Javascript之中,如果一個(gè)變量沒有初始化,那么該變量的類型為undefined。

    4,也許你一直在抱怨Javascript之中沒有列表、哈西表以及堆棧、隊(duì)列等數(shù)據(jù)結(jié)構(gòu),如果真的在抱怨,那么也不是你的錯(cuò),畢竟包括我自己在內(nèi),我們對(duì)JS的了解太少了,其實(shí)在JS之中,數(shù)組對(duì)象自身完全支持上面的那些數(shù)據(jù)結(jié)構(gòu),例如:
      var list=new Array();//列表
      list[0]="a";
      list[100]="b";
      var map=new Array();//哈西表
      map["001"]="a";
      map["username"]="zhangsan";
      var stack=new Array();//堆棧,即后進(jìn)先出
      stack.push("a");
      stack.pop();
      var queue=new Array();//隊(duì)列,即先進(jìn)先出
      queue.unshift("a");
      queue.shift();
      可見JS是非常強(qiáng)大的,關(guān)鍵是我們知道的太少了,關(guān)于Javascript對(duì)于數(shù)組的操作,你也可以參考《Javascript對(duì)數(shù)組的操作》。

    5,作為一個(gè)web開發(fā)人員,我們不能指望美工在完成漂亮的效果圖之后,還要為我們將圖切分,最后生成html文件后再給我們,然后我們對(duì)這些html文件,再修改轉(zhuǎn)換為jsp、asp或者php文件。我一直認(rèn)為效果圖的切分應(yīng)該或者最好由我們程序員自己來做,因?yàn)槊拦ぷ龅男Ч麍D實(shí)際上是要應(yīng)用到我們的產(chǎn)品或者項(xiàng)目中的,而具體的產(chǎn)品和項(xiàng)目,對(duì)效果圖中哪些部分是需要輸入文字的,哪些地方是需要背景的,哪些地方是需要可以自動(dòng)伸縮的,而哪些地方又是必須保證大小的,是有很嚴(yán)格的要求的,尤其是我們的產(chǎn)品或項(xiàng)目中如果使用了類似sitemesh等的模板技術(shù),那么切圖的工作就更要由我們自己來做了。這樣并不是說美工不需要懂得html、css等技術(shù),也不是說美工切出的圖,會(huì)不符合我們的要求,我們知道,一張效果圖,可以有n種切法,但是要能夠滿足實(shí)際的需求,往往只有一種最合適的切法,而這個(gè)切法一般來說美工是不太清楚的,開發(fā)人員也是不清楚的,只有既是開發(fā)人員,又懂得美工切圖的人,才能夠找到最為合適的切分方法,而這樣的人才是非常奇缺的!

    6,不要過于癡迷Ajax技術(shù),也不要過于追捧web2.0這個(gè)時(shí)髦的詞匯,并不是說什么東西粘上ajax或者web2.0,就能夠火起來或者對(duì)我們的實(shí)際發(fā)展有利的,如果你是做公網(wǎng)網(wǎng)站的,那么要注意,不合適的ajax使用,會(huì)使得網(wǎng)站被搜索引擎收錄的信息大幅度減少,但是ajax或者Flex2等技術(shù)對(duì)于用戶體驗(yàn)而言,還是相當(dāng)不錯(cuò)的,因此是否使用ajax等技術(shù),一要看對(duì)你們的解決方案宣傳是否有作用,另外一點(diǎn)就是要看,它是否真正的改進(jìn)了我們的應(yīng)用。

    7,對(duì)于ajax的post提交方式,可能你有些問題要問,例如post的方式是不是只要在open時(shí)指定method就可以了,為什么我將大數(shù)據(jù)放到url后面,而沒有被完全傳遞過去,為什么我后臺(tái)使用類似jsp中的request.getParamter方法接收不到數(shù)據(jù),我們通過一個(gè)例子看一下ajax發(fā)送/接受大數(shù)據(jù)的方式:

      1)send.jsp:(我舉的例子使用的是Javascript開源框架JsJava的ajax類庫,該類庫對(duì)IE和Firefox等的XMLHttpRequest等對(duì)象進(jìn)行了易用性的封裝,不像prototype.js默認(rèn)對(duì)傳遞的數(shù)據(jù)進(jìn)行urlencode編碼)

     var ajaxRequest=new AjaxRequest();
     ajaxRequest.setRequestMethod("post");
     ajaxRequest.setRequestURL("ajaxresponse.jsp");
     ajaxRequest.setAsync(true);
     ajaxRequest.setMethodOnSuccess(onSuccess,[ajaxRequest]);
     ajaxRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
     ajaxRequest.send("content=這是一篇幾千字的文檔...在此省略");

      要注意設(shè)置發(fā)送方式為post,設(shè)置頭信息的內(nèi)容類型為application/x-www-form-urlencoded,charset是否設(shè)置要看內(nèi)容的編碼情況,另外大數(shù)據(jù)就放到send之中,記住大數(shù)據(jù)不是放在url的參數(shù)之中的。

      2)receive.jsp

        InputStream stream=request.getInputStream();
        InputStreamReader isr=new InputStreamReader(stream);
        BufferedReader br=new BufferedReader(isr);
        String str=br.readLine();   
        System.out.println(str);
        br.close();

      要知道,對(duì)于ajax post方式提交的數(shù)據(jù),在服務(wù)器端如果是jsp不是簡(jiǎn)單使用getParameter就能取得到的,需要從輸入流中去取,這和附件上傳有些類似的地方。當(dāng)然要注意編碼和解碼的問題。

    8,我們?cè)诮缑嬷薪?jīng)常會(huì)通過setTimeout方法來實(shí)現(xiàn)定時(shí)或者異步操作,例如:
      setTimeout(myfunc,2000);//兩秒后執(zhí)行myfunc函數(shù)
      但是要注意setTimeout方法并不能阻止后面js代碼邏輯的執(zhí)行,例如:
      <script>
        var a =8;
        setTimeout(myfunc,3000);
        document.write("wait...");
      </script>
      上面的代碼中,document.write("wait...");邏輯并不會(huì)等到3秒后才執(zhí)行,而是立即執(zhí)行的,其實(shí)這一點(diǎn)可能大部分開發(fā)人員都知道,但是如果不注意,就很容易犯下面的錯(cuò)誤,如下面代碼所示:
      var ajax2HasExecuted=false;
      var ajaxRequest1;
      function ajax1Func(){
        if(!ajax2HasExecuted){
          setTimeout(ajax1Func,200);
       }
       var text=ajaxRequest1.getResponseText();
       ...
      }
      var ajaxRequest2;
      function ajax2Func(){
       var text=ajaxRequest2.getResponseText();
       ...
       ajax2HasExecuted=true;
      }
      上面的代碼是一個(gè)頁面中同時(shí)發(fā)送了兩個(gè)ajax異步請(qǐng)求,分別有兩個(gè)對(duì)應(yīng)的接收操作,而業(yè)務(wù)邏輯要求,這兩個(gè)操作是要有先后順序的,其中第一個(gè)接收操作,需要等待第二個(gè)接收操作完成之后,才能進(jìn)行處理,于是第一個(gè)操作中就采用setTimeout的方式,本意是在執(zhí)行第一個(gè)操作的開始的地方,先判斷第二個(gè)操作是否已經(jīng)執(zhí)行完畢,如果沒有執(zhí)行完畢,則等待200毫秒后,重新執(zhí)行第二個(gè)操作,然后由于setTimeout并不能組織后續(xù)的邏輯繼續(xù)執(zhí)行,所以實(shí)際上不管第二個(gè)操作是否完成,第一個(gè)操作都會(huì)一直往下執(zhí)行下去,從而導(dǎo)致業(yè)務(wù)上的錯(cuò)誤。解決方法要么是在if后面加上else,或者在setTimeout之后直接return,例如:
      if(!ajax2HasExecuted){
          setTimeout(ajax1Func,200);
          return;
       }

    9,window.open和window.showModalDialog方法相信你已經(jīng)用到過許多次了,但是總是出現(xiàn)這樣或那樣的問題,問題主要是以下幾個(gè)方面:
    1)showModalDialog這個(gè)函數(shù)名經(jīng)常被寫錯(cuò),例如經(jīng)常被寫成showModelDialog,使得不能執(zhí)行打開窗口的操作。
    2)控制打開窗口的屬性,例如尺寸、滾動(dòng)條、菜單、狀態(tài)欄等,是我們經(jīng)常會(huì)碰到的情況,但是我們經(jīng)常會(huì)將這兩種打開方式的屬性名稱以及屬性之間的分隔符混用,使得屬性執(zhí)行不正確,例如我舉下面的例子,要求彈出一個(gè)寬200高300的窗口,你看哪些方式是對(duì)的?
    (A)  window.open("about:blank","","width=200,height=300");
    (B)  window.open("about:blank","","width:200,height:300");
    (C)  window.open("about:blank","","width=200;height=300");
    (D)  window.open("about:blank","","width:200;height:300");
    (E) window.showModalDialog("about:blank","","dialogWidth:200px;dialogHeight:300px");
    (F) window.showModalDialog("about:blank","","dialogWidth=200px;dialogHeight=300px");
    (G) window.showModalDialog("about:blank","","dialogWidth:200;dialogHeight:300");
    再多的選項(xiàng)就不寫了,正確答案是A和E,通過上面的問題我們需要記住一下幾點(diǎn):

    • window.open控制屬性之間的分隔符是逗號(hào)“,”,屬性和值之間用等于號(hào)"="連接
    • window.showModalDialog控制屬性之間的分隔符是分號(hào)“;”,屬性之間的用冒號(hào)“:”連接
    • window.open控制屬性中長(zhǎng)度和寬度尺寸可以直接寫數(shù)字,也可以加上度量,例如px,但是對(duì)于window.showModalDialog的長(zhǎng)度和寬度則必須帶上px,否則尺寸無效,這一點(diǎn)是很重要的。

    10,對(duì)于數(shù)據(jù)庫中的varchar型字段,是有長(zhǎng)度限制的,例如oracle10g中varchar2字段的最大長(zhǎng)度為4000字符,在mysql中varchar最長(zhǎng)為255字符,要注意這里面的限制值是單字節(jié)字符值,而漢字屬于雙字節(jié)字符,因此對(duì)于漢字存儲(chǔ)而言,varchar2字段最多可以存儲(chǔ)2000個(gè)漢字,由此引申出來的一個(gè)問題,就是web開發(fā)過程中的表單提交驗(yàn)證問題,因?yàn)閷?duì)于中國(guó)用戶而言,輸入的內(nèi)容有可能是漢字和英文字符的組合,因此判斷輸入字符串的長(zhǎng)度需要注意,Javascript中判斷一個(gè)字符串的長(zhǎng)度的方法為:
      var str="abcdef";
      var length=str.length;
    但是字符串的這個(gè)屬性,計(jì)算的是獨(dú)立字符的長(zhǎng)度,例如一個(gè)中文字符按長(zhǎng)度1計(jì)算,因此如下:
      var str="你好";
      var length=str.length;
    其長(zhǎng)度的值為2,而不是4,那么如何計(jì)算含有漢字或者說是雙字節(jié)字符的真實(shí)長(zhǎng)度呢?通過搜索可以很快找到方法,就是先將雙子節(jié)字符替換為兩個(gè)單字節(jié)字符,然后計(jì)算替換后的字符的長(zhǎng)度,當(dāng)然了JsJava中提供了對(duì)于雙字節(jié)字符串真實(shí)長(zhǎng)度的計(jì)算支持,你可以查看其中的StringUtils類。

    11,如果你不能默寫出常用顏色的英文表示值和16進(jìn)制表示值,那么說明你的HTML基本功還是需要練的,例如白色是white,十六進(jìn)制是FFFFFF,紅色是red,十六進(jìn)制是FF0000,藍(lán)色是blue,十六進(jìn)制是0000FF,紫色是purple,橙色是orange,網(wǎng)頁中常用的灰色一般都是EEEEE,或者再淺一些EFEFEF,當(dāng)然說這些并不是讓你去背大量的顏色和十六進(jìn)制值,但掌握一些常用的,還是很有必要的。

    12,Javascript支持多維數(shù)組,但是沒有構(gòu)造函數(shù)可以直接生成多維數(shù)組,例如一維數(shù)組可以通過Array生成,例如:
      var arr=new Array(12);
    生成多維數(shù)組,雖然沒有構(gòu)造函數(shù)支持,但是可以通過另外一種方式實(shí)現(xiàn),例如實(shí)現(xiàn)一個(gè)12x5的二維數(shù)組:
      var arr=new Array(12);
      for(var i=0;i<arr.length;i++){
        arr[i]=new Array(5);
      }
    另外,你可以直接使用JsJava的標(biāo)準(zhǔn)類MultiDimensionArrayUtils,支持生成二維和三維數(shù)組。

    13,對(duì)于img標(biāo)簽,我們知道它有一個(gè)align屬性,這個(gè)align是控制該圖片與臨近文本的位置關(guān)系,按照MSDN的說法,該屬性的默認(rèn)值是left,但是從實(shí)際的顯示效果來看,好像并非如此,我們可以一起來比較一下不寫align屬性和將align賦值為left的情況,如果默認(rèn)就是left,那么不寫align和將align賦值left,其效果應(yīng)該是一樣的,那我們來一下:
    <img src="http://jsjava.sourceforge.net/images/logo.gif">JsJava是最優(yōu)秀的Javascript類庫解決方案和界面應(yīng)用開發(fā)支撐框架!
    效果如下:

    再看加入align=left的情況:
    <img src=http://jsjava.sourceforge.net/images/logo.gif" _fcksavedurl="http://jsjava.sourceforge.net/images/logo.gif"" _fcksavedurl="http://jsjava.sourceforge.net/images/logo.gif"" _fcksavedurl="http://jsjava.sourceforge.net/images/logo.gif"" _fcksavedurl="http://jsjava.sourceforge.net/images/logo.gif"" align="left">JsJava是最優(yōu)秀的Javascript類庫解決方案和界面應(yīng)用開發(fā)支撐框架!
    效果圖如下:

    從實(shí)際效果來看,img的默認(rèn)align并非是left,好像應(yīng)該是bottom,而且上面的情況在IE6.0和Firefox2.0上都試驗(yàn)過,看來MSDN的說法是不太可信的,或者是自己理解錯(cuò)了?你可以看一下MSDN中的描述:http://msdn2.microsoft.com/en-us/library/ms533066.aspx

    14,在界面中添加事件的方式主要有如下幾種,例如當(dāng)頁面加載之后,執(zhí)行函數(shù)myfunc,幾種定義方式如下:
    1)在<body/>標(biāo)簽中加入onload事件,即:
    <body onload="myfunc()"...>
    2)在任何一個(gè)可以執(zhí)行Javascript的地方定義window.onload,即:
    window.onload=myfunc;
    3)在<script/>標(biāo)簽中定義,即:
    <script for=window event=onload>
      myfunc();
    </script>
    4)將事件加入到事件隊(duì)列中,即:
    IE中 window.attachEvent("onload",myfunc)
    Firefox中 window.addEventListener("load",myfunc,false)
    建議大家使用第四種方式,因?yàn)橹挥械谒姆N方式,可以避免將其它的同類事件覆蓋,第四種方式是將該事件加入到同類的事件的隊(duì)列之中,不會(huì)覆蓋其它的同類事件,這在web開發(fā)過程種,是需要特別注意的,尤其我們自己定義一些界面框架或者組建的時(shí)候,經(jīng)常需要定義onload事件,這個(gè)時(shí)候最好是使用第四種方式,因?yàn)橐媒缑婵蚣芎徒M建的用戶,可能在頁面上也想使用onload邏輯,當(dāng)然用戶自己使用第四種方式也不會(huì)有問題,但是做為一個(gè)負(fù)責(zé)任的界面高手,是不應(yīng)該這樣想得,我們應(yīng)該嚴(yán)于律己,而寬以待人。

    15,并不只是body(或者說window)有onload事件,<iframe/>中也可以定義onload事件,還有<img/>也可以定義onload事件,例如當(dāng)圖片加載完畢后,在window的狀態(tài)欄種顯示加載成功的字樣:
    <img src=http://jsjava.sourceforge.net/images/logo.gif" onload="window.status='加載完畢!'">
    當(dāng)然了對(duì)于img,你最好深入研究一下其各個(gè)事件和屬性的用法,你會(huì)發(fā)現(xiàn)原來不知道的東西還有那么多,當(dāng)然肯定有不少開發(fā)人員,已經(jīng)對(duì)這一點(diǎn)有所研究了,但是大多數(shù)開發(fā)人員還是缺乏對(duì)這方面知識(shí)的了解。

    16,如何在HTML種加入一段保留格式化的文本,相信你會(huì)想到<pre></pre>標(biāo)簽,例如:
    <pre>
      這是一段格式化文本,
    里面的文字直接將格式輸出
    </pre>
    顯示結(jié)果為:
      這是一段格式化文本,
    里面的文字直接將格式輸出

    對(duì)于一般情況而言,pre標(biāo)簽就夠用了,但是pre標(biāo)簽的不足之處,在于它不能將其中的html標(biāo)簽也原樣輸出,而是進(jìn)行了解析,例如:
    <pre>
      這是一段格式化文本,<font color="red">里面的文字</font>直接將<br>格式輸出
    </pre>
    顯示結(jié)果為:
      這是一段格式化文本,里面的文字直接將
    格式輸出

    那么如何才能將含有HTML的內(nèi)容也原樣輸出呢?實(shí)際上在HTML規(guī)范種有<xmp/>標(biāo)簽,可以實(shí)現(xiàn)這種效果,例如:
    <xmp>
      這是一段格式化文本,<font color="red">里面的文字</font>直接將<br>格式輸出
    </xmp>
    顯示結(jié)果為:
      這是一段格式化文本,<font color="red">里面的文字</font>直接將<br>格式輸出

    17,如何獲取某個(gè)對(duì)象區(qū)域的尺寸以及坐標(biāo),是我們界面開發(fā)過程種經(jīng)常會(huì)遇到的一個(gè)問題,一般我們都采用getBoundingClientRect方法來獲取對(duì)象的區(qū)域,進(jìn)而得到該區(qū)域的尺寸和坐標(biāo),但是該方法只能在IE中使用,當(dāng)然Firefox也有類似的方法,相信大多數(shù)開發(fā)人員不知道,該方法就是getBoxObjectFor,為了不想為跨瀏覽器而操心,你可以直接下載JsJava,使用其中的DocumentUtils類的getElementRectangle靜態(tài)方法,例如:
    <script src="jsjava.js"></script>
    <script>
      var elemObj=document.getElementById("div1");//div1是一個(gè)div的id
      var rect=DocumentUtils.getElementRectangle(elemObj);//返回的rect是JsJava中的Rectangle對(duì)象
      var x=rect.getX();
      var y=rect.getY();
      var width=rect.getWidth();
      var height=rect.getHeight();
    </script>
    JsJava的類和方法都是經(jīng)過IE和Firefox測(cè)試的,使用起來很方便。

    18,在界面中對(duì)象的位置的計(jì)算與理解是比較麻煩的一件事情,例如clientHeight、clientTop、scrollHeight、scrollTop、offsetHeight、offsetTop,這些該怎么區(qū)分,又分別代表什么意思,對(duì)位置屬性的深入理解,非常有助于對(duì)HTML界面布局本質(zhì)的理解,是成為高手的必由之路,下面就簡(jiǎn)單介紹一下:
    1)clientHeight,代表對(duì)象區(qū)域的屏幕高度,不包含區(qū)域的border尺寸,但包含padding的尺寸
    2)clientTop,對(duì)象區(qū)域offsetHeight與clientHeight的差的一半
    3)scrollHeight,代表對(duì)象區(qū)域內(nèi)容的底部距區(qū)域最上邊的距離
    4)scrollTop,代表對(duì)象區(qū)域滾動(dòng)部分的高度,即區(qū)域的最上邊距離該區(qū)域可見部分的最上邊的距離
    5)offsetHeight,代表對(duì)象區(qū)域的屏幕高度,包含border和padding尺寸
    6)offsetTop,代表對(duì)象區(qū)域距離上一個(gè)對(duì)象高度
    上面的解釋如果沒有實(shí)際的經(jīng)驗(yàn),多少會(huì)有些迷糊,沒有關(guān)系,我給你一個(gè)示意圖:

    因此,scrollHeight并非總是大于或等于clientHeight,實(shí)際上確實(shí)有一些開發(fā)人員認(rèn)為一個(gè)區(qū)域沒有滾動(dòng)時(shí)scrollHeight和clientHeight相等,有滾動(dòng)時(shí)scrollHeight=clientHeight+scrollTop,這種認(rèn)識(shí)是不對(duì)的或者說是不準(zhǔn)確的。
    上面的圖的html源碼為:
    <script>
      function pos(){
        debug(test1.clientHeight);
        debug(test1.clientTop);
        debug(test1.scrollHeight);
        debug(test1.scrollTop);
        debug(test1.offsetHeight);
        debug(test1.offsetTop);
        debug("--------------");
        debug(test2.clientHeight);
        debug(test2.clientTop);
        debug(test2.scrollHeight);
        debug(test2.scrollTop);
        debug(test2.offsetHeight);
        debug(test2.offsetTop);
        debug("--------------");
      }
      function debug(str){
        info.value+=str+"\n";
      }
    </script>
    <body onclick="pos()">
      <div id="test1" style="padding:5;border-width:15;border-color:black;border-

    style:solid;background-color:red;height:100;width:200">區(qū)域1,高100</div>
      <span id="test2" style="background-color:blue;height:50;width:200">區(qū)域2,高50</span>
      <div id="test4" style="height:100;width:200;background-color:green">區(qū)域4,高100</div>
      <textarea id="info" cols="50" rows="20"></textarea>
    <body>
    顯示結(jié)果為:
    70
    15
    28
    0
    100
    15
    --------------
    50
    0
    18
    0
    50
    115
    --------------

    19,網(wǎng)上許多人都問,如何將一個(gè)RGB顏色轉(zhuǎn)換為HTML中的十六進(jìn)制顏色,我看到了一些網(wǎng)友的實(shí)現(xiàn),例如定義一個(gè)長(zhǎng)度為256的數(shù)組,并按照十六進(jìn)制的規(guī)律將其全部初始化,還有的利用了HTML標(biāo)簽的一些特點(diǎn),不過有一定的局限性,其實(shí)我們只要理解了RGB顏色的基本知識(shí),轉(zhuǎn)換起來是很方便的,RGB分別代表紅(Red)、綠(Green)、藍(lán)(Blue)三種基色,其中每一種基色從淺到深又可以定義256色,這樣RGB總共可以表示256x256x256種顏色,而對(duì)于十六進(jìn)制顏色來說,其實(shí)就是用十六進(jìn)制數(shù)字來表示RGB,例如FFFFFF代表rgb(256,256,256),換算起來也很簡(jiǎn)單,就是十進(jìn)制與十六進(jìn)制之間的表示方法的轉(zhuǎn)換,例如對(duì)于RGB顏色rgb(132,216,12),用十六進(jìn)制顏色表示的計(jì)算方式為:
    132轉(zhuǎn)換為十六進(jìn)制數(shù)字為84
    216轉(zhuǎn)換為十六進(jìn)制數(shù)字為D8
    12轉(zhuǎn)換為十六進(jìn)制數(shù)字為0C
    因此rgb(132,216,12)的十六進(jìn)制顏色就是84D80C,我們可以看一下兩者的效果:
    <div style="background-color:rgb(132,216,12);width:50;height:50"></div>
    <br>
    <div style="background-color:#84D80C;width:50;height:50"></div>
    顯示為:

    那么Javascript之中是否提供了十進(jìn)制數(shù)與十六進(jìn)制數(shù)的轉(zhuǎn)換呢,Javascript沒有提供內(nèi)置的函數(shù)來進(jìn)行這種轉(zhuǎn)換,不過你可以下載JsJava,使用其中Integer類的靜態(tài)方法:toHexString方法,例如
    <script src="jsjava.js"></script>
    <script>
      var hex=Integer.toHexString(253);
      document.write("<br>"+hex);//顯示為FD
    </script>
    或者你直接使用JsJava種的Color對(duì)象:
    var color=new Color(132,216,12);
    var hex=color.toHexValue();//hex的值為84d80c

    20,web開發(fā)過程中,經(jīng)常會(huì)遇到原頁面與彈出頁面之間進(jìn)行交互的問題,如果只是簡(jiǎn)單的變量傳遞,還是不難的,而我們經(jīng)常遇到的一個(gè)實(shí)際場(chǎng)景是:例如有一個(gè)用戶列表頁面,點(diǎn)擊“新建”按鈕,彈出一個(gè)創(chuàng)建用戶的頁面,填寫完信息后要提交表單并關(guān)閉窗口,同時(shí)列表頁面中要列出新建的用戶,這個(gè)時(shí)候我們一些開發(fā)人員喜歡使用的方式為:
    userForm.submit();
    opener.location.reload();//或者有些開發(fā)人員喜歡用opener.location=列表頁面的請(qǐng)求url
    window.close();
    上面的代碼有一個(gè)很明顯的問題,就是如果表單提交給后臺(tái),后臺(tái)還在處理,而此時(shí)原頁面已經(jīng)執(zhí)行了重載,那么等新用戶在后臺(tái)存儲(chǔ)后了,也不會(huì)反映到列表頁面中了,當(dāng)然刷新一個(gè)就有了,但是就達(dá)不到我們所要的效果了。下面給你介紹一種比較穩(wěn)妥的方式(ajax方式就不介紹了):
    先讓表單提交,提交后還是回到彈出的那個(gè)頁面,或者一個(gè)其它的頁面,然后在該頁面中做判斷,如果后臺(tái)信息處理成功,那么就執(zhí)行原頁面的重載,然后關(guān)閉窗口。
    當(dāng)然有些開發(fā)人員說,前面的那種方式,一直在項(xiàng)目中使用沒有發(fā)現(xiàn)什么問題,那我告訴你,那是因?yàn)槟惚容^幸運(yùn),后臺(tái)處理速度很快,列表重載的時(shí)候,后臺(tái)已經(jīng)處理完了,但是一旦后臺(tái)處理慢了,客戶就該找麻煩了。

    21,界面問題是當(dāng)前web開發(fā)領(lǐng)域(不要認(rèn)為只是asp、jsp和或者php等的開發(fā),大的說可以包括ASP.NET以及J2EE等)最為棘手的問題之一,而且大部分開發(fā)人員,不懂得該如何去解決界面問題,而且經(jīng)常會(huì)遇到一些不可思議的問題。其實(shí)我告訴你,界面問題的確有一些是非常奇怪的,但是不要因?yàn)檫@樣,就不去深究問題的原因所在,我在這些年的開發(fā)中,遇到了不少的離奇的界面問題,包括自己碰到的和別人讓我去解決的,不過我發(fā)現(xiàn),在這些離奇的問題背后,體現(xiàn)的卻是我們大部分開發(fā)人員,在界面能力和素養(yǎng)方面的一些問題,例如有些人就是太粗心,而有些人則是缺乏界面基礎(chǔ)知識(shí)等等。成為界面高手不是目的,培養(yǎng)解決界面問題的能力和素養(yǎng)才是最關(guān)鍵的。

    22,在連接標(biāo)簽中加入onclick操作是很常用的一種方式,例如:
    <a href="#" onclick="window.open('yoururl')">人員管理</a>
    一般情況,這種方式是沒有問題,但是如果頁面內(nèi)容比較長(zhǎng),出現(xiàn)了上下滾動(dòng)條的時(shí)候,這種方式就會(huì)出一些問題,主要是由于href的#造成的,我們知道錨的作用就是讓頁面定位并移動(dòng)到錨處,上面的代碼開發(fā)人員的意圖主要是想點(diǎn)擊的時(shí)候不要執(zhí)行鏈接href,所以寫一個(gè)#,但是#對(duì)于滾動(dòng)的頁面,會(huì)在執(zhí)行onclick的同時(shí),頁面出現(xiàn)移動(dòng)定位行為,這樣的用戶體驗(yàn)是很不好,解決方式有如下幾種:
    <a href="javascript:void 0" onclick="window.open('yoururl')">人員管理</a>
    <a href="javascript:return" onclick="window.open('yoururl')">人員管理</a>
    建議使用void 0方式,因?yàn)閞eturn方式,有時(shí)會(huì)影響click事件的傳播,尤其是return false的時(shí)候。

    23,在Window XP系統(tǒng)中,我們經(jīng)常奇怪為什么我們使用的Javascript控制窗口尺寸和位置的一些操作,而IE竟然沒有全部支持呢,例如下面的代碼:
    <script>
      window.open("about:blank","","width=10000,height=15000");
    </script>
    按道理應(yīng)該彈出一個(gè)10000x15000的大窗口,然后實(shí)際上IE給我們彈出的不過是一個(gè)和瀏覽器尺寸大小一致的窗口,為什么會(huì)這樣呢?其實(shí)我們理解微軟,如果不這樣限制,系統(tǒng)可能會(huì)因?yàn)榇罅康倪@種代碼而最終崩潰,當(dāng)然微軟的IE也提供了配置入口,配置是否進(jìn)行限制,具體入口為:

    對(duì)一般站點(diǎn)類說,默認(rèn)都是禁用的,只要打開就可以了。

    24,我們頁面中經(jīng)常會(huì)以post方式提交表單數(shù)據(jù),提交之后,如果我們刷新頁面,IE中一般都會(huì)提示如下圖所示的信息:

    如果避免這種提示出現(xiàn),一種是編程上去解決,即表單提交后,不要從其它窗口對(duì)該窗口繼續(xù)執(zhí)行l(wèi)ocation的reload方法等等,最好是使用location的href屬性或者assign、replace等方法),在IE的高級(jí)選項(xiàng)中,也有一個(gè)條目可以設(shè)置重定向表單提交時(shí)是否給出提示信息,但是設(shè)置了之后,沒有什么效果,因此也就不過多介紹了。

    25,現(xiàn)在很流行div+css方式的布局,的確這樣做界面框架的靈活性大為增加,可以說什么布局都能出的來,而且目前的ajax方式的輕量級(jí)portal框架基本上都采用的是div+css的布局方式,但是也不要過度的使用,或者什么場(chǎng)合下都使用,例如對(duì)于一個(gè)中大型的項(xiàng)目而言,要考慮的不僅僅是布局這樣的事情,還要考慮界面框架的許多東西,在這種情況下,還是使用模板的方式比較好,事實(shí)上div+css是一種布局,而模板是一種“框架”,兩者可以結(jié)合使用,至于能結(jié)合到什么程度,就看你的實(shí)際本領(lǐng)了。

    26,做為一個(gè)項(xiàng)目經(jīng)理、產(chǎn)品經(jīng)理或者是技術(shù)總監(jiān),你應(yīng)該要重視界面方面的問題了,想想吧我們現(xiàn)在的開發(fā)人員,大都能很快的完成后臺(tái)邏輯的開發(fā),但是到了界面展現(xiàn)卻是捉襟見肘,界面效果和易用性做的都不到位,界面方面都調(diào)整好了,需要的時(shí)間往往并不比后臺(tái)邏輯開發(fā)用的時(shí)間少多少,相信你見到過吧,為了調(diào)試一個(gè)界面中的奇怪的問題,往往會(huì)用掉一個(gè)人一兩天的時(shí)間,如果再不重視界面技術(shù)的學(xué)習(xí)和素養(yǎng)的培養(yǎng),我們的路還能走多遠(yuǎn)。

      又七七八八的為大家總結(jié)了一下我在web開發(fā)尤其是界面開發(fā)上的一些經(jīng)驗(yàn),這些都是摸爬滾打出來的,可以算作是經(jīng)驗(yàn),但不一定就特別的正確,許多東西還需要你自己去實(shí)踐、檢驗(yàn)和再總結(jié),如果我寫的這些東西,對(duì)你而言哪怕只是有一點(diǎn)的用處,我都是很欣慰的,另外一點(diǎn)我需要說的,就是我們應(yīng)該逐步走出大師崇拜的陰影,不要再津津樂道于敏捷開發(fā)、極限編程等等,面對(duì)那些國(guó)外的大師,我們更為重要的是學(xué)習(xí)他們身上的精神和品質(zhì),而不是做一個(gè)忠實(shí)的傳道士,對(duì)于這些精神和品質(zhì),我們中華民族實(shí)際上很早就有了,只是到現(xiàn)在已經(jīng)少的可憐的,但并不是說我們就沒有希望了,看看當(dāng)今科學(xué)界和各個(gè)行業(yè)的民族精英們,看看他們骨子里面的那種精神,是很值得我們崇敬和學(xué)習(xí)的。

    posted on 2007-10-15 17:34 劉錚 閱讀(647) 評(píng)論(0)  編輯  收藏 所屬分類: JavaScript

    <2025年5月>
    27282930123
    45678910
    11121314151617
    18192021222324
    25262728293031
    1234567

    導(dǎo)航

    統(tǒng)計(jì)

    留言簿(1)

    文章分類(141)

    文章檔案(147)

    搜索

    最新評(píng)論

    主站蜘蛛池模板: 国产在线a免费观看| 亚洲毛片基地日韩毛片基地| 无人在线观看免费高清视频| 亚洲免费一区二区| 亚洲中文字幕久久精品无码A| 久久亚洲高清观看| 免费a级毛片18以上观看精品| 69式国产真人免费视频| 免费人成网站在线观看不卡| 一级女性全黄生活片免费看| 亚洲午夜一区二区三区| 中文字幕亚洲综合久久2| 亚洲午夜未满十八勿入网站2| 国产区卡一卡二卡三乱码免费| 永久免费av无码不卡在线观看| 色猫咪免费人成网站在线观看| 国产JIZZ中国JIZZ免费看| 日本系列1页亚洲系列| 亚洲a级在线观看| 67pao强力打造67194在线午夜亚洲| 中文字幕亚洲日本岛国片| 四虎影视在线永久免费观看| 全免费a级毛片免费**视频| 亚洲免费网站观看视频| 99视频全部免费精品全部四虎| 在线观看的免费网站无遮挡| 国产成人一区二区三区视频免费| 中文字幕免费在线看电影大全| 成年网站免费入口在线观看| 边摸边脱吃奶边高潮视频免费 | 99精品视频在线观看免费专区 | xvideos亚洲永久网址| 国产猛烈高潮尖叫视频免费| 午夜男人一级毛片免费| 免费无遮挡无码视频网站| 成人免费毛片视频| 日韩在线免费电影| 国产一区二区视频免费| 亚洲AⅤ无码一区二区三区在线 | 欧洲 亚洲 国产图片综合| 久久精品国产亚洲AV忘忧草18|