• 前端杂谈


    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;
  • 相关阅读:
    Kubernetes之(四)kubeadm部署集群
    Kubernetes之(三)核心组件ETCD介绍
    Kubernetes之(二)核⼼技术概念和API对象
    Kubetnetes之(一)基础介绍
    docker入门基础(六)
    docker入门基础(八)
    docker入门基础(七)
    docker入门基础(五)
    docker入门基础(四)
    docker入门基础(三)
  • 原文地址:https://www.cnblogs.com/yexiangwang/p/4973219.html
Copyright © 2020-2023  润新知