前端筆記雜談

JScss

1.對於原型而言,只要構造函數纔有prototype屬性,而構造函數的實例是沒有該屬性的,也就是說console.log(a1.prototype)輸出的是undefined.html

2.每個函數的prototype屬性指向的對象都包含惟一一個不可枚舉屬性constructor,constructor又指向了它所在的構造函數。每個構造函數的實例都會繼承這個constructor。json

3.新定義prototype對象的話,該prototype對象中的constructor就會指向別的構造函數(以下),此時的constructor指向的就是objectcanvas

                                          A.prototype={數組

                                               getName:function(){return this.name}閉包

                                           }函數

修改這個問題的方法就是,再給這個prototype顯示的添加上constructor:A性能

4.js的解析過程分爲兩個階段:預編譯期和執行期this

        預編譯的時候,會先將聲明式函數進行處理,同時也進行變量的聲明,將其賦爲undefined。按照代碼塊(<script>)從上到下分別進行編譯,因此下面的代碼塊能夠引用上面代碼塊的變量。spa

若代碼塊出現錯誤,則會跳過該代碼塊剩下的代碼,進入下一個代碼塊。

5.由於全局變量會在做用域鏈的最後獲得訪問,效率較慢,同時又容易產生污染,因此儘可能避免使用全局變量。

6.對於canvas而言,畫布中的圖形不會超過canvas的範圍。

7.閉包:A函數能夠訪問B函數中的變量。但閉包使用過多,B函數中的變量會一直保存不會釋放回收,會嚴重消耗內存,影響性能。

8.js中沒有塊級做用域的概念。因此

                    for(var i=0;i<10;i++){

                     alert(i);

                    }

                   alert(i);      //11

以後,i仍是存在的。

9.alert(p1 instanceof Person)                    //判斷p1是不是Person的實例

   delete p1.name                                    //刪除p1的name屬性

   alert('name' in p1)                               //判斷name屬性是否在p1中

   var arr=Object.keys(p1)                      //獲得對象的全部屬性,返回一個數組

CSS

1.css hack主要針對於IE6/7,

       選擇器hack:   *html .selector{}     //IE6

                          *+html .selector{}   //IE 7

       屬性hack:     .header{_width:100px;}     //IE6

                         .header{*+width:100px;}   //IE7

2.clientHeight=topPadding+bottomPadding+height(可看到的區域)-scrollbar.height

  offsetHeight=clientHeight+滾動條+邊框

  scrollHeight=topPadding+bottomPadding+內容的高度(內容的實際高度)

3.clientTop:borderTop的厚度 

   scrollTop:被捲起的高度

   offsetTop:相對於第一個使用了position的父元素上邊框的距離

兼容性問題

1.textarea文本自適應

   IE:textarea.onpropertychange=function(){

              this.style.posHeight=this.scrollHeight;

         }

  FF: textarea.oninput=function(){

              this.style.height=this.scrollHeight+'px';

        }

2.事件問題

                   function addEventListener(obj,type,handle){

                          if(obj.attachEvent){              //IE

                             obj.attachEvent('on'+type,handle);

                             obj.attachEvent('on'+type,stopEvent);

                          }else{                               //FF

                             obj.addEventListener(type,handle,false);

                             obj.addEventListener(type,stopEvent,false);

                          }

                    }

                   function stopEvent(Event){

                      var e=event||window.event;             //FF||IE

                      var srcEle=e.target||e.srcElement;    //FF||IE

                      var mx=e.pageX||e.x;                     //FF||IE

                      if(e.stopPropagation){                    //FF

                            e.stopPropagation();

                      }else{                                          //IE

                           e.cancelBubble=true;   

                     }

                }

3.父元素:

          IE:ele.parentElement

          IE,FF:ele.parentNode和parent.childNodes

4.在打開的子窗口刷新父窗口  window.opener.location.reload();

       IE:ele.innerText

       FF:ele.textContext

5.建立XMLHTTPRequest

      if(window.XMLHTTPRequest){

         req=new XMLHTTPRequest();

      }else if(window.ActiveXObject){

         req=new ActiveXObject('Microsoft.XMLHTTP');

      }

8.使用parent.childNodes時  '\n' 也會算做一個文本節點

9.圖片預加載

     function preLoadImg(src.callback){

           var img=new Image();

           img.src=src;

           if(!!window.ActiveXObject){

                img.onreadystatechange=function(){

                     if(this.readyState=='complete'){

                            callback();

                      }

                }

           }else{

                    img.onload=function(){

                              callback();

                    }

           }

     }

10.IE6沒有position:fixed這一屬性值

11.HTML5  localStorage

          localStorage.clear();                 //清除localStorage的數據

          for(var i=0;i<localStorage.length;i++){

               var key=localStorage.key(i);

               var value=localStorage.getItem(key);

          }

   將json文本做爲鍵值存儲在localStorage中,存儲的信息量將大大提升

12.    HTML5 讀取文件

        var file=document.getElementById('file').files[0];

        var reader=new FileReader();

        reader.readAsDataURL(file);                            //readAsBinaryString,readAsText

        reader.onload=function(){

             result.innerHTML=this.result;

        }

13.圖片浮動時,下放會產生空隙,解決方案:對圖片的屬性設置 vertical-align:top;

相關文章
相關標籤/搜索