前端杂谈

JS

1.对于原型而言,只要构造函数才有prototype属性,而构造函数的实例是没有该属性的,也就是说console.log(a1.prototype)输出的是undefined.

2.每一个函数的prototype属性指向的对象都包含唯一一个不可枚举属性constructor,constructor又指向了它所在的构造函数。每一个构造函数的实例都会继承这个constructor。

3.新定义prototype对象的话,该prototype对象中的constructor就会指向别的构造函数(如下),此时的constructor指向的就是object

                                          A.prototype={

                                               getName:function(){return this.name}

                                           }

修改这个问题的方法就是,再给这个prototype显示的添加上constructor:A

4.js的解析过程分为两个阶段:预编译期和执行期

        预编译的时候,会先将声明式函数进行处理,同时也进行变量的声明,将其赋为undefined。按照代码块(<script>)从上到下分别进行编译,所以下面的代码块可以引用上面代码块的变量。

若代码块出现错误,则会跳过该代码块剩下的代码,进入下一个代码块。

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{_100px;}     //IE6

                         .header{*+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时  '
' 也会算作一个文本节点

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;
原文地址:https://www.cnblogs.com/yexiangwang/p/4973219.html