知识分享

1.gazira修改的几个地方:

(1)修复了拖动元素的父元素的position为fixed时候的bug


        js/util/dom/dnd.js

        js/util/dom/sortable.js

        例子:demo/lib/util/dom/sortale

        增加了一个proxyParent属性
		

(2)增加了几个常用的正则表达式


        js/lib/util/regexp.js
		

(3)swfupload中增加了检测浏览器没有安装flash和其他错误的接口


        js/lib/util/dom/upload/upload-swfupload.js

        例子:demo/lib/util/dom/upload/swfupload.js

         new Upload().on('flashUnsupport',function(){
               //处理浏览器没有安装flash或者安装的flash版本不支持swfupload

         }).on('flashLoadFailed',function(){
               //其他程序错误

         });	

2.项目中遇到的一些兼容性问题:

(1)IE下在input内回车的问题


       在ie中,在input敲回车的时候,ie会自动寻找第一个button标签并且触发。也就是被第一个button标签劫持。

       [这样设置没有效果,回车仍然会触发button1]
       <p><button style="display:none;visibility:hidden">禁止input回车触发的button</button></p>

       [这样才有用,回车不会触发button1了]
       <div style="display:block; width:0; height:0; overflow:hidden;">
           <button>禁止input回车触发的button</button>
       </div>

       <p><button onclick="console.log('from button click1');">button1</button></p>
       <p><button onclick="console.log('from button click2');">button2</button></p>
       <p><input type="text" value="在这里回车就触发提交按钮" style="width:300px;" /></p>


        *尽量不要使用button标签,会引发很多意外情况。设计按钮可以使用a标签或者input[type=button]*

(2)IE7,firefox下表格边框问题


        table{border-collapse:collapse;border:1px solid #000;}
        table td,table th{border:1px solide #000}

        IE下,表格的下边框会被截断
        firefox下的表格的左边框会多出一个像素

        最终解决方案:

        *在table上定义下边框和左边框;
        *在td上定义上边框和右边框;

        table{
        border-collapse:collapse;
        border:1px solid #000;
        border-top:none;
        border-right:none;
        }

        table td,table th{
        border:1px solid #000;
        border-bottom:none;
        border-left:none;
        }

(3)margin-left,margin-right,width


          #####1.0个auto的情况是,marign-right会被强制为auto
          #####2.1个auto的情况是,计算之后得到值
          #####3.2个auto的情况是:

          **如果margin-left,margin-right设为auto的话,会被设置成左右相等,就会把该元素居中,这个居中是指元素本身,text-align只是应用于块级元素
          中的内容

          **如果是margin-left|margin-right,width设为auto的话,margin-left|margin-right都会被设置成0,width尽可能的宽

          #####4.3个auto的情况是,margin-left和margin-right都会被设置成0,width尽可能宽
          ####5.正常流中的一个块级元素的margin-top和margin-bottom为auto的话,都会被计算成0,所以高度设为auto是不会居中的

(4)auto高度



          var s=$('<div style="height:auto;"><p style="margin:20px 0;background-color:red">ddddddd</p></div>');
          父div高度只有“dddd”文字的高度,父div有margin值,值就是p的margin值

          var s1=$('<div style="height:auto;border:1px solid #000;padding:1px"><p style="margin:20px 0;background-color:red">ddddddd</p></div>');
          加了边框或者内边距的话,父div的高度包含了“dddd”文字的高度和p的margin,父div没有margin值

3.几个关键字的应用和区分:

(1)typeof


**undefined,string,number,object,function,boolean**

         var arr=[1,2,3];

         (1)typeof arr======>'object';

         (2)toString=Object.prototype.toString;
            toString.call(arr)=====>'[object Array]'

(2)instanceof

判断某个对象是否是某个构造函数的实例

1. A instancof B,只要函数B在A的原型链中能找到,就返回true。

2. 每个函数都默认有个prototype属性

3. 通过new构造函数生成的对象都有一个属性__proto__属性,这个属性保存了创建它的构造函数的prototype属性的引用

4. 构造函数都是函数的实例,函数,原型是对象



         1.
         function Student(){

         }
         var s=new Student();
         s.__proto__=Student.prototype;
         Student.prototype.__proto__=Function.prototype;
         Function.prototype.__proto__=Object.protoytpe;
         Object.protoytype.__proto__=null;


         2.  Object instancof Function
           Object.__proto__=Function.prototype;
           Function.prototype.__proto__=Object.prototype;
           Object.prototype.__proto__=null;


         3. Function instanceof Object

            Function.__proto__=Object.prototype;
            Object.prototype__proto__=null;

(3)constructor

实例的constructor指向的是构造函数的prototye的constructor,构造函数的prototype的constructor默认指向构造函数本身


         function Student(){

         }

         var s=new Student();
         (1) s.contructor==Student=====>true;

         (2) Student.prototype={};
             s.constructor==Student=====>false;
             s.constructor==Object=====>true;

         (3)Student.protoype={
                             constructor:Student;
                             };
             s.constructor==Student=====>true;

          *在做继承的时候,一定要保证【构造函数的prototype的constructor属性指向正确】*
		  

(4)hasOwnProperty

检查属性是否是实例本身的,不是原型上的


         function Obj(name){
           this.name=name;
         }
         Obj.prototype.say='hello';
         var s=new Obj('张三');
         s.hasOwnProperty('name')=====>true;
         s.hasOwnProperty('say')======>false;