两矩形区域相交

在写随机展示的一个模块时,需要判断随机生成的区域与原有区域是否相交

最初想到的方法是：

算法一：如果一个区域有一点在另一区域中，那么两个区域一定相交

js实现代码：

// 判断点在矩形内
function _inRegion(point, region) {

    return point[0] < region.right && point[0] > region.left
        && point[1] < region.top && point[1] > region.bottom;

}
// 判断矩形1是否有点在矩形2中
function _isCross(region1, region2) {

    return  _inRegion([region1.left,region1.top], region2) ||
        _inRegion([region1.right,region1.top], region2) ||
        _inRegion([region1.right,region1.bottom], region2) ||
        _inRegion([region1.left,region1.bottom], region2);

}

function isCross(region1, region2) {

    return _isCross(region1, region2) || _isCross(region2, region1);

}

看到上面的代码觉得实现太麻烦了吧，再来看一种算法：

算法二：如果两个矩形相交，则必然存在线条交叉，而能交叉的线条只有横线和竖线，两根横线或两根竖线都不可能交叉。所以，这个问题就转化成寻找是否存在交叉的横线与竖线。

实现代码：

// 判断横线1是否与竖线2相交
function _crossLine(line1, line2) {
    return line1.from[1] < line2.from[1] && line1.to[1] > line2.to[1] &&
        line1.from[0] < line2.from[0] && line1.to[0] > line2.to[0];
}
//判断矩形1横线是否与矩形2竖线相交
function _isCross(r1, r2) {
    return _crossLine({from:[r1.left,r1.top],to:[r1.right,r1.top]},
        {from:[r2.left,r2.top],to:[r2.left,r2.bottom]}) ||
        _crossLine({from:[r1.left,r1.bottom],to:[r1.right,r1.bottom]},
            {from:[r2.left,r2.top],to:[r2.left,r2.bottom]}) ||
        _crossLine({from:[r1.left,r1.top],to:[r1.right,r1.top]},
            {from:[r2.right,r2.top],to:[r2.right,r2.bottom]}) ||
        _crossLine({from:[r1.left,r1.bottom],to:[r1.right,r1.bottom]},
            {from:[r2.right,r2.top],to:[r2.right,r2.bottom]});
}
function isCross(region1, region2) {
    return _isCross(region1, region2) || _isCross(region2, region1);
}

这种看起来也不简单，但至少是一种思路，还有其他算法吗？有

算法三：如果两个矩形相交，相交区域一定是个点或者矩形

实现代码：

function isCross(region1, region2) {
    var left = Math.max(region1.left, region2.left),
        right = Math.min(region1.right, region2.right),
        top = Math.min(region1.top, region2.top),
        bottom = Math.max(region.bottom, region.bottom);
    return left < right && bottom < top;
}

我靠，代码瞬间减少了很多，再看一种算法：

算法四：如果矩形1的一边距离到矩形2对应边的距离小于等于矩形1的宽度或高度 =>两矩形相交

实现代码：

function isCross(region1, region2) {
    return (region2.left > region1.left &&
            region2.left - region1.left < region1.right - reigon1.left) ||
        (region2.top > region1.top &&
            region2.top - region1.top < region2.top - region2.bottom) ||
        (region1.left > region2.left &&
            region1.left - region2.left < region2.right - reigon2.left) ||
        (region1.top > region2.top &&
            region1.top - region2.top < region1.top - region1.bottom);
}

貌似代码有优化的空间，先不管，考虑还有没有更简练的算法？

算法五：如果一个矩形在另一矩形所形成的四个区间外 <=> 两个矩形不想交

实现代码：

function isCross(region1, region2) {
    return !(region1.left > region2.right || region1.right<region2.left||
        region1.bottom > region2.top || region1.top < region2.bottom);
}

看到这种算法时，我震惊了，无论从代码量还是性能上都优于上面的算法，当然如果需要获取相交区域，算法3更好。

回头看看上面5种算法，从不同的角度出发得到不同的算法：算法1从点的角度触发，算法2从线的角度，
算法3从区域的角度，算法4从一维距离角度，算法5从区间的角度；思量一下，前4种算法都是正向思维，第5种逆向思维；
逆向思维，也许自己太多过程式编程脑子秀逗了，好的算法醍醐灌顶。

结束，下一篇关于如何判断两个线段是否相交，你如何实现？

1.selection.clear file表单 导致form 无法 submit

demo

第一次点击提交按钮无法提交表单
说明：ie浏览器不允许直接通过value=“”方式情空文件控件，所以尝试使用selection.clear清除，就会引发这个问题

解决方法：使用form的原生reset清空

2.selection.emtpy 触发 window.blur

demo

选择一段文字后，在空白处点击，浏览器默认清除选择，触发window blur

说明：ie8-以下才会这样，ie9其他标准浏览器都不触发；显示调用 selection.empty方法，及浏览器默认改变选择都触发

解决方法：mousedown中延时注册blur，因为是在mousedown 之后触发的，通过延时注册，让其先触发

要实现拖放，基本思路就是：鼠标点下时监听移动，抬起时停止监听。

        var x,y;
        function move(e) {
            el.style.left = e.clientX - x + 'px';
            el.style.top =  e.clientY - y + 'px';
        }

        function stop() {
            E.detach(document, 'mousemove', move);
            E.detach(document, 'mouseup', stop);
        }
        E.on(el, 'mousedown', function(e) {

            x = e.clientX - el.offsetLeft;
            y = e.clientY - el.offsetTop;
            E.on(document, 'mousemove', move);
            E.on(document, 'mouseup', stop);

        });

这样拖放就实现了，当然还有一些问题：

拖放禁止

1.当第一次拖放后，再次拖放元素就会发现会出现拖放禁止图标，是因为第一次拖放时点击拖放元素，拖放元素被选择，第二次拖放时使用了浏览器默认拖放。浏览器对于 image，link，selection默认是可以拖放的。

2.拖放过程中移动到其他元素时，其他元素被选择，再次拖放也会出现拖放禁止图标，原因同上。

解决这个问题:

方法一：preventDefault

问题1，在mousedown中阻止默认动作，防止元素被选择；问题2，在mousemove中阻止默认动作，防止其他元素被选择(opera貌似无效)。

这个方法有点体验不足：在ie9，ff等现代浏览器将 “清除之前选择”的默认动作也阻止了，如果之前有选择内容，拖放时原选择不会被清除。

方法二：清空 selection

mousedown,mousemove的时候清空一下selection即可解决上面两个问题

有的程序也通过setCapture来阻止默认事件，并且扩大捕获，兼容性不好不考虑；

综合考虑，采用清空selection比较好。

异常终止问题

1.窗口失去焦点时（如：alt+tab切换，alert等），无法触发mouseup（chrome 可以触发），导致拖放不终止，回到窗口时继续拖放，体验不好

2.页面中存在iframe时，鼠标移动到iframe中事件传递到iframe的document中，无法到达原来的document导致无法触发mouseup，mousemove等

解决第一个问题，可以监听下window blur事件，终止拖放；但这里有个问题：ie通过document.selection.empty()方法清除selection，当selection有内容时，导致window触发blur事件，拖放终止。这个触发是在mousedown处理完之后触发的，即window blur注册之后再触发，解决可以考虑setTimeout延时注册下。

解决第二个问题，考虑将事件仍传递到本页面document，可以建个遮罩层将iframe遮挡(为了简洁，这里不实现)。

这样简单的拖放程序就出来了，demo，code：

function Drag(el) {
    this.el = el;
    this._initEvents();
}

Drag.prototype = {
    moveTo : function(x, y) {
        var el = this.el;
        el.style.left = x + 'px';
        el.style.top = y + 'px';
    },
    _initEvents : function() {

        var x,y,self = this,el = this.el;

        function move(e) {
            // 防止移动过程中选择其他元素，保证体验一致
            util.clearSelection();
            self.moveTo(e.clientX - x, e.clientY - y);
        }

        function stop() {
            E.detach(document, 'mousemove', move);
            E.detach(document, 'mouseup', stop);
            E.detach(window, 'blur', stop);
        }

        E.on(this.el, 'mousedown', function(e) {

            // 清除之前选择，防止拖拽时禁止
            util.clearSelection();

            var style = util.getComputeStyle(el);
            x = e.clientX - el.offsetLeft + (parseInt(style.marginLeft) || 0);
            y = e.clientY - el.offsetTop + (parseInt(style.marginTop) || 0);

            E.on(document, 'mousemove', move);
            E.on(document, 'mouseup', stop);
            // 失去焦点时终止   document.selection.empty() 会触发blur，延时注册
            setTimeout(function(){E.on(window, 'blur', stop);},0);
        });
    }
};

如果要做成组件，当然还需要考虑全面一些，如：iframe情况，移动范围，非绝对定位元素，移动元素和控制元素不同，相关事件支持等等。现在回头看看实现不复杂，只是遇到问题时自己跑偏了，之前看过《JavaScript 拖放效果》这篇文章，觉得很多问题需要处理，然后写的时候遇到问题就去看文中的介绍，而并没真正从问题本身和解决方法上入手，结果严重影响了效率，而且弄的晕头转向，不知在为了解决什么问题而加代码。有参考固然是好的，但是需要更多的独立思考，理清思路，关注本质，这样程序才能得心应手，才是自己的程序。

var a =1;
function fn(){alert(a);}
var b = a++ + fn();

alert出的值是是怎么呢？

按照我之前的认识应该是 1,()优先级最高最先被执行此时a=1，可事实在各个浏览器都是 2

不得不怀疑之前的认识

又测试了下其他语言， php，java也都一样的结果：2，c和c++输出：1

参考了下犀牛书还有语言的官方，基本都表述：运算符优先级决定被运算的顺序，像MDN：“Operator precedence determines the order in which operators are evaluated”，但 PHP ：“The precedence of an operator specifies how “tightly” it binds two expressions together”。

按php的说法就很好理解上面的问题了，优先级表示着运算符结合能力的强弱

但是真是那些说 “evaluate order”的错了？？？咨询了好几个同事，终于算是有个自己满意的解释

表达式的运算顺序和运算符优先级根本是两个概念：运算符的优先级只表示着对于运算时哪个运算符先被结合（也可以说执行），至于怎么个顺序运算和它无关，而表达式的运算顺序和各个语言的规范有关，比如java中就明确定义evaluate order：Left To Right，看了下JS的ECAM规范，虽然没用像java那么明确说明运算顺序，但是跟据各个运算符的运算顺序可以看出也是 从左向右 运算的（包括函数调用，参数计算）。

上面 b = a++ + fn()运算过程：

1.运算b是个ref
2.运算=右边部分，a++，此时a=2
3.运算fn()

具体过程可以这样理解：

1.扫描到=操作符，先运算b
2.扫描到++(尽可能多的结合)，后面是+，++的优先级高于+，运算a++，此时a++会产生副作用（a+=1）,js会先算完子表达式再执行，a=2
3.接着扫描到()执行函数运算

C语言又怎吗输出1呢？

C语言可能为了编译器可以灵活的优化程序，并没用明确确定运算顺序以及副作用处理，所以不同编译器运算结果也可能不同，比如：

int i =1;
int m = (i++) +(i++)+(i++)

有的编译器是6，有的编译器(MSC,TurboC)编译出来是3；还有函数实参运算顺序的问题也一样。

总之：

表达式的运算顺序由语言规范定义和运算符的优先级“无关”，运算符的优先级及结合性只在运算时判断那个运算符先被运算（这样说，MDN的解释也没错只是自己理解错了），更好理解些优先级结合性表示运算符谁先被结合使用;Javascript中 跟据ECAM中对各个操作符的运算顺序的规范，Javascript的运算顺序应该是：从左到右，副作用运算先执行再继续表达式运算(不知有没有特例，没看到明确说明,-_-)

相关的讨论：

JavaEye关于java和c运算顺序的问答：http://www.iteye.com/problems/20258
StackOverflow Javascript运算顺序的讨论： http://stackoverflow.com/questions/5944593/javascript-evaluation-order
一篇讨论c#，java,c运算顺序的blog：http://rednaxelafx.iteye.com/blog/132187 //added 2011-07-13

var a = function() {},
    b = new a();
Function.prototype.isPrototypeOf(a);
Object.prototype.isPrototypeOf(a);
Object.prototype.isPrototypeOf(b);
Function.prototype.isPrototypeOf(b);
Object.prototype.isPrototypeOf(Function);
Function.prototype.isPrototypeOf(Object);
Object.constructor === Function;
Function.constructor === Function;

上面3-10行各返回的是true还是false？答案

如果你都想对了，就别浪费时间继续看了-_-

理解上面的问题，就要搞清谁是原型链的顶级及继承关系,参考ECMA5规范：

“The value of the [[Prototype]] internal property of the Object prototype object is null, the value of the [[Class]]internal property is “Object”, and the initial value of the [[Extensible]] internal property is true.”

“The Function prototype object is itself a Function object (its [[Class]] is  “Function”) that, when invoked,accepts any arguments and returns undefined.The value of the [[Prototype]] internal property of the Function prototype object is the standard built-in Object prototype object (15.2.4). The initial value of the [[Extensible]] internal property of the Function prototype object is true.”

Object prototype object 标准内置对象（这里简称OPO） 是所有原型链的鼻祖，再向上就是null了
Function prototype object 标准内置对象（这里简成FPO） 是函数的原型对象，其__proto__为OPO

Function prototype及__proto__都指向FPO
所有其他内置构造函数其__proto__为FPO，prototype指向OPO，如：Object 构造函数 __proto__指向内置FPO，prototype指向OPO

函数实例也是一个实例对象（通过 new Function而来），和Object一样，内部prototype指向构造函数的protype属性，即FPO，prototype属性是创建时被添加（为OPO）用来作为构造函数而创建的 。

说的比较乱，画张图：

Function 用于实例函数对象，其prototype 为FPO，这样保证所有其他函数的继承FPO的属性方法
其他函数 用于实例普通对象，其prototype为OPO，保证每个对象实现都继承OPO的属性方法。

再来看看代码中用到的isPrototypeOf方法：

isPrototypeOf方法

O.isPrototypeOf(V)方法用于检查V的构造函数的原型是不是O，根据ECMA5规范

Object.prototype.isPrototypeOf (V)
When the isPrototypeOf method is called with argument V, the following steps are taken:
1.  If V is not an object, return false.
2.  Let O be the result of calling ToObject passing the this value as the argument.
3.  Repeat
    a.  Let V be the value of the [[Prototype]] internal property of V.
    b.  if V is null, return false
    c.  If O and V refer to the same object, return true.

在检查时会有个向上遍历的过程，即：检测V的构造函数的原型是不是O，如果不是，接着检查V的构造函数的原型 的 构造函数原型 是不是O，直至原型为null，返回false。

理解了上面，再来看看开始的那段代码：

var a = function() {},
    b = new a();
Function.prototype.isPrototypeOf(a); // a的__proto__为 FPO，返回true
Object.prototype.isPrototypeOf(a); // a的__proto__为 FPO，向上查找，FPO的 __proto__ === Object.prototype,返回true
Object.prototype.isPrototypeOf(b); // b的__proto__为OPO，返回true
Function.prototype.isPrototypeOf(b); // b的__proto__为OPO，向上查找，OPO的__proto__为null，返回false
Function.prototype.isPrototypeOf(Object); // F的__proto__为FPO,返回true
Object.prototype.isPrototypeOf(Function); // F的__proto__为FPO，向上查找，FPO的 __proto__ === Object.prototype,返回true
Object.constructor === Function; // true
Function.constructor === Function; // true

讨论之前，首先需要理解的是js的单线程机制，即在同一时刻js只能执行一个任务，另外实际上浏览器的渲染也和js共用同一线程，这就意味着js在处理代码时浏览器会停止解析，如图所示：

当遇到js代码时js引擎会解析执行代码，此时浏览器渲染停止，直到脚本解析完毕才继续。当脚本执行耗时过长，尤其当引入外部脚本时加上脚本的加载时间，对ui渲染的阻塞更为严重，这是性能优化的一个方面，也是这篇文章为什么讨论脚本加载执行顺序的主要原因。

两种嵌入方式

解析嵌入（Parser-inserted）

指在html源代码中通过<script src=”XXX”>等方式引入（术语上这类脚本成为 Parser-inserted script），这种方式下浏览器会以<script>标签在页面中出现的顺序加载和执行，即同步加载执行。正如前面讨论的，这种方式会阻塞页面其他元素的加载，及页面渲染。

脚本嵌入（script-inserted）

通过脚本动态载入方式（术语上这类脚本成为Parser-inserted script），动态载入脚本的方式有很多中如：document.write,xhr eval,script document Element等^[1]，其中通过动态创建script标签是被广泛应用推荐的一种，这里只讨论这种情况。

通过动态创建script元素可以实现无阻塞加载，但这意味着什么？一个脚本阻塞是从开始加载到执行完毕才结束，大体有三个步骤：

1. 加载脚本
2. 解析
3. 执行

在这个过程中通常#1耗时最长，通过这种方式意味着不必等待脚本的#1(也许还有#2)过程，浏览器ui线程可以不受干扰继续执行，但是由于js单线程机制对于#3过程无可避免的会对ui线程阻塞。当然，浏览器解析通常很快的（尤其是新的js引擎），通常这部分影响几乎察觉的到，但是如果脚本性能不好，执行需要较长时间这也会产成性能瓶颈。

总之，无阻塞加载使浏览器不必等待脚本加载而继续渲染，两者异步执行，但脚本执行仍会阻塞渲染。

并行加载

根据上面的无阻塞方式加载多个脚本文件，这些文件是并行加载的，这样相对传统方式带来的好处是，使浏览器更快更早的请求文件并且不会阻塞浏览器渲染，但是这里仅仅是并行“加载”，并不意味着会并行执行，还是那个原因js是单线程的，同一时间只有一个js会被执行！另外带来的一个问题是，脚本并行加载其执行顺序又是怎样的呢？

对于脚本的执行顺序，目前各个浏览器执行情况还有些差异：

1.opera and firefox3.6-

执行的顺序会按照脚本被动态插入的顺序执行

2.ie，Safari，chorme and firefox4^[2]

脚本加载完毕即会执行，不会保持他们被插入的顺序

浏览器的努力：defer & async

对于无阻塞脚本加载，浏览器也给出了一定的方案，包括早期ie实现（后来被firefox3.1引入）的defer属性以及HTML5定义的async属性

defer

脚本下载不会阻塞浏览器渲染，直到文档解析完成时才会执行，DOMContentLoaded触发之前（兼容性不好）。

async

这个属性由html5新引入的标准属性，这是个布尔属性，当被定义时，脚本会无阻塞加载，脚本文件加载完成立即执行（不顾及脚本出现的先后顺序），如果需要脚本保持引入的先后顺序需要显示的设置.async = false(对于script-created 脚本默认为true，目前仅firefox4支持false)。

开发者的努力：LABjs

labjs项目主要特性能够实现脚本并行加载和顺序执行，已经被多个大型网站采用，看个例子：

   $LAB
   .script("a1.js").wait()
   .script("a2.js")
   .script("a3.js").wait()
   .script("a4.js");

这样,a1a2a3a4脚本会被并行加载，但是执行顺序还是会按照a1->a2a3||a3a2->a4的顺序执行。由于前面提到的对于动态创建script元素，不同浏览器两种不同的执行顺序，其实现进行了browser sniff：opera and old firefox直接动态插入即可保证执行顺序；对于IE chrome sarfari方面通过一个trick： 预加载script文件（通过设置script type为不能识别的值，保证浏览器只加载不执行），然后按照需要的顺序插入正确的script元素，这些元素就会立刻执行并且保持顺序：

当然，还有许多其他项目的实现如 requireJS 的order pluigin，HeadJS ，ControlJS…

总结

由于javascript及ui render的单线程机制，采用无阻塞加载脚本来提高页面性能，同时看到浏览器及开发者对于这方面的努力及实现，但请注意无阻塞加载仅仅是“加载”而已，执行过程仍然会阻塞渲染，进一步的优化需要我们回归到代码本身，减少其执行时间，以获得更快的响应。

注：

1. Steve提出了各种实现方式 loading scripts without blocking
2. firefox4 pre7之前仍是按照原来的方式顺序执行，为了符合html5的规范改为无序执行，这里还有labjs的作者和火狐开发者的一个故事，最终firefox4通过设置async=false来保持这种执行顺序。

参考：

• http://www.whatwg.org/specs/web-apps/current-work/#the-script-element
• http://www.nczonline.net/blog/2010/08/10/what-is-a-non-blocking-script/
• https://developer.mozilla.org/En/HTML/Element/Script

Update：

1. 添加defer脚本执行的确切时间 2011-05-24

1. IE dom方法赋值变量调用错误
2. IE 的<html>元素border问题

IE dom方法赋值变量调用错误

如下代码：

    var s = document.getElementById;
    alert(typeof s);
    var el = s.call(document, 'test');
    el.innerHTML = "ok";

应该alert出什么？el里的文字是？

按道理应该alert出 function，文字是ok，但在ie下却alert 出 object，IE7/8下文字是ok，ie6下却报错

“object doesn’s support this property or method”

test demo

因此应避免将dom方法直接付给变量，再来看看另一问题

IE 的<html>元素border问题

在计算元素offset时经常用到docuementElement.offsetHeight,documentElement.scrollTop

比如要实现一个元素固定居于浏览器右下角，ie6下通过脚本实现：

    var el = document.getElementById('test'),
        htmlEl = document.documentElement;
    function rb() {
        el.style.top = htmlEl.scrollTop + (window.innerHeight||htmlEl.offsetHeight) - 50+'px';
    }
    window.onscroll=rb;
    window.onresize=rb;

offsetHeight是指整个元素的高度(border box)，在ie下html元素错误的box模型，offsetHeight返回的也是窗的高度

test demo

看下测试demo发现ie无限向下滚动，原因在ie下html元素有2px的border，而元素定位是相对body的这样每次计算都多出2px

将offsetHeight改为clientHeight ok！clientheight是元素内容区域的高度（padding box）

以后处理基于<html>元素定位问题时需要留意这2px的box

最后看看jquery offset方法的实现也是对这个问题进行了处理，offset.js

<html>
<body>
<script>
window.a={};
<script src="test.js"></script>
</body>
</html>

test.js代码如下：

alert(a);
var a=window.a||{};

测试Demo：window属性方式定义变量IE Bug

在IE下会alert出undefined，这个bug出现的情况是：一个文件中通过window属性定义变量，另一文件中通过var方式定义同名变量。这样原来定义的变量在另一文件中就会未定义。看来通过var的方式定义最为稳妥，像使用KISSY.app(“YIGLE”)这种方式，还是在前面加个var 定义以免带来一些不必要的麻烦：

var YIGLE=KISSY.app("YIGLE");

—————————————————–
update: 2011-04-11
hax 一篇比较深入说明此问题的文章：http://hax.iteye.com/blog/349569

改变页面呈现，很容易想到，可以直接改变本页面然后打印“后”再复原，（这是网上随处可见的方法），也可以在iframe中隐式打印，或者新打开个窗口来打印，下面是我实际测试这几种方法的问题：

[测试：win7/ opera 11.00,firefox 3.6.13, ie8,chrome7.0,sarfari5.0.3 ]
直接操作页面:
1.闪烁
2.firefox有问题，未等提取信息就会执行接下来的语句

iframe 方式:
1.ie,opera 打印的是原页面的

window.open 方式:
1.opeara 不打印,绑定onload可打印，但立即关闭页面会造成opera崩溃

测试demo

相对而言，比较中意打开新页面的方式，就像提供了一种打印预览的功能，我们也可以在新页面中加载相应的打印样式，遗憾的opera下就让用户手动关闭或者用其他方法吧。

注：

1.ie下有onbeforeprint,onafterprint事件，其他浏览器均不支持