从明天开始，正式成为北漂一员，希望能顺利点。
明天9点到12点之间在天上飞，不能接电话。

Rosy的目的很明确，她提供一整套高精度的、高定制化的、可以快速和设计师的设计相吻合的UI组件库。

• Rosy和已有的其他UI库有什么最大的区别？

首先，Rosy的应用范围，定位于精美设计的UI实现。通常这种设计都来自知名设计师，或者该UI风格在整个项目中传达了很重要的企业形象，比如专业的ERP界面，专业的企业管理系统界面，一个网站的宣传入口页面，或者独立的前端外包项目中出现的精美UI等等，当这种前端实现不允许针对低级浏览器做优雅降级处理的时候，Rosy就发挥作用了。

其次，Rosy有个愿景，让前端开发工程师和UI设计师通过紧密的配合，将各自能力发挥到极致。很多JS库都有UI组件，但大多数都缺少整套的精美的皮肤，或者没有提供方便的标签结构可以让使用者顺利的安装自己的皮肤。原因在于很多前端开发工程师不懂设计，心有余而力不足。而Rosy会将开发和设计并行推进，让前端开发工程师更懂UI，让UI设计师更了解前端，让两种角色通过紧密的配合，将各自能力发挥到极致。

最后，Rosy只追求分享与进步，不带有任何宣传和推广的压力。Rosy最初的出现，只是个人用来学习原生js和对面向对象编程的实验品，希望在长期的改进、积累、交流和分享以后，能够最终成为自己沉淀前端技术的一个载体。后来随着组件的逐渐增多，就希望她能成为更多前端开发工程师和UI设计师沉淀技术的载体，希望通过这个载体，找到更多喜欢UI组件开发和前端开发同学一起加入进来，彼此分享，共同收获！最终进入良性循环，稳定进步。除此之外的名气啊，使用量啊，宣传推广啊，争夺用户啊，一定要和谁谁谁比个高下啊，口水战啊什么的都不考虑，都是浮云！

• Rosy继承了前辈级UI库的诸多优点，也借鉴了很多优秀JS库的骨架设计。

下面就谈谈Rosy借鉴的其他优秀JS库的一些优点，以及代码设计过程中考虑到的一些细节。

Tangram的静态方法

早在设计Rosy的代码骨架的时候，百度的Tangram刚刚开源不久。Tangram除了极小的拆分粒度之外，还有一个亮点在于把所有的方法都写成静态的，于是代码的耦合度降低，利于拆分，可以根据业务逻辑来充分地自由定制所需要的代码，真的很敬佩百度前端团队在带宽流量、加载性能和渲染效率方面追求极致精神。

Rosy借鉴了Tangram，也把所有底层方法静态化，但有两点不同。

首先，Rosy没有追求如此小的可拆分粒度（Tangram是一个方法一个文件），所以在堆砌静态方法的写法上，Rosy可以一路狂飙逗号，生产变量，同时为每个方法都生成一个主文件作用域下的快捷键，这样所有发生在内部的调用，都可以使用快捷键，不仅书写方便，而且大大减少因逐级查找对象而产生的消耗 ( 相关知识可以参见《高性能javascript编程》 第二章 数据访问 )，最后还可以提高压缩率。

其次，Rosy的Dom静态方法的第一个参数不支持传入ID字符串，希望通过更严格的参数减少Rosy内部的无效调用。比如在Tangram中，baidu.dom.setAttrs(your-id, {三个键值对})会在内部有三次对baidu.dom.g函数的无效调用。而R.setAttrs方法的第一个参数必须是元素。从代码量来看，把第一个参数严格化以后，每个dom静态函数都节省了一行代码。

下面的代码是Rosy堆砌静态方法的一个缩影。注意带有表情的注释。

//对象相关静态函数
var Obj = R.Obj = {}, //定义二级名称空间Obj，同时生成快捷键Obj， 
    /**
     * 查找构造对象的名称
     * @name R.Obj.getConstructorName
     */
    getConstructorName = Obj.getConstructorName = function(o) { //添加方法同时生成快捷键 
        return o != null && toString.call(o).slice(8, -1);
    },
    /**
     * 判断是不是函数
     * @name R.Obj.isFunction
     */
    isFunction = Obj.isFunction = function(o) {
        return getConstructorName(o) == 'Function'; //直接使用了快捷键getConstructorName 
    },
    /**
     * 判断是不是数组
     * @name R.Obj.isArray
     */
    isArray = Obj.isArray = function(o) {
        return getConstructorName(o) == 'Array';
    },
    /**
     * 是不是new Object的对象或对象字面量{}
     * @name R.Obj.isPlainObject
     */
    isPlainObject = Obj.isPlainObject = function(o) {
        return !! o && o !== TRUE && o.constructor === Object;
    },
    /**
     * 判断是不是一个元素
     * @name R.Obj.isElement
     */
    isElement = Obj.isElement = function(o) {
        return !! o && o !== TRUE && !isPlainObject(o)
                 && !!o.nodeName && (o.nodeType == 1 || o.nodeType == 9);
    },
    /**
     * 判断是不是dom集合
     * 主流浏览器对 nodelist 执行 toString 方法的值如下
     *     [object NodeList]           -> opera, chrome, safari
     *     [object HTMLCollection]  -> firefox, ie9
     *     [object Object]             -> ie6/7/8
    */
    isNodeList = Obj.isNodeList = function(o) {
        var s = getConstructorName(o);
        return s === 'NodeList' || s === 'HTMLCollection' ||
               (s === 'Object' && !isPlainObject(o) && !isElement(o) && !isArray(o)); //三个快捷键 
    },

    //省略的Obj的静态函数

    /**
     * 将R.Obj名称空间下的所有方法都上提一级到R上, 方便调用
     */
    for (var i in Obj) { R[i] = Obj[i]; }

//函数相关静态函数
var Fun = R.Fun = {},
    /**
     * 根据fn(el, key, value)函数创建fn(el, { key1:value1, key2:value2, ...})函数
     * @name R.Fun.hash
     * 比如根据setAttr函数创建setAttrs函数: var setAttrs = hash(setAttr)
     */
    hash = Fun.hash = function(fn) {
        return function(el, hash) {
            for (var i in hash) fn(el, i, hash[i]);
            return el;
        };
    },
    //继续一路逗号狂飙，一个函数，一个快捷键...

借鉴QWrap的函数变换

在Tangram开源不久，QWrap也相继开源，其Helper + Wrap + Retouch + Apps设计主线，又让人眼前一亮，其中最把这四个层次紧密链接起来的关键，在于有啊团队对函数变换的巧妙应用。QWrap设计的具体细节可以查看官方博客。

如果思考角度上升到设计层面，函数变换的强大之处在于，它可以让一个类库组织代码的方式变得清晰，简单、容易扩展和维护，这不正是前端工程师所追求的东东嘛！学以致用，Rosy的静态方法也需要经过如此的变换，突破静态的束缚。

在QWrap中，Dom的静态方法和包裹器分别位于QW.NodeH和QW.NodeW两个不同的名称空间下，在Rosy中，将二者合为一体，将Dom的静态方法存放于Dom包裹器构造函数的静态属性 (也叫类方法) 上，代码片段如下，注意带有表情的注释。

//元素包裹器构造函数 
var Dom = R.Dom = function() {
    //包裹器初始化代码
},
    /**
     * @name R.Dom.setAttr
     */
    setAttr = Dom.setAttr = function(el, k, v) {
        k === 'style' ? el.style.cssText = v: el.setAttribute(_attrFixer[k] || k, v);
        return el;
    },
    /**
     * @name R.Dom.setAttrs
     */
    setAttrs = Dom.setAttrs = hash(setAttr),

    //省略N行代码............

    /**
     * Dom包裹器的原型对象, R.Dom名称空间下的所有"规范"的静态函数都将扩展到该原型对象上
     * 以支持链式调用
     * @name R.Dom.protos
     */
    protos = Dom.prototype = {}; //包裹器的原型出现啦  
    /**
     * 添加Dom的原型方法, 即将R.Dom名称空间下的所有"规范"的静态函数都扩展到R.Dom.prototype上
     */
    var protosMethods = 'setAttr,setAttrs,hasClass,addClass,removeClass/* ... */'.split(','),
        method,
        i = protosMethods.length;
    while (i--) {
        method = protosMethods[i];
        protos[method] = methodize(Dom[method], 'nodes');  //函数变换出现啦  
    }
    /**
     * 将R.Dom名称空间下的方法上提一级到R上, 方便调用
     * @note Dom.prototype是不会被枚举的, 所以不会被加到R上
     */
    for (var i in Dom) { i[0] !== '_' && (R[i] = Dom[i]); }

借鉴YUI的异步加载

这个没什么说的，Y.use()和Y.add()早已风靡前端世界了。Rosy中实现了R.use()和R.add()。

借鉴YUI式的类的继承

类的继承是Rosy在UI方向的努力，包括组合对象类R.Fieldset，抽象类R.BaseField，这部分还在改进中。

因为目前Rosy还在前期开发中，所以更多详细内容等过一阶段再续。

转载声明：原创文章，转载必须以链接形式注明原文作者和原文地址，谢谢合作。
原文地址：http://www.joy-studio.com/frontend-develop/rosy-intro.html

做前端也快三年了，习惯的学，如何去学，在哪里学，在哪里问，在哪里交流，都好像存在一种惯性思维在潜移默化的安排着。学习的每个过程都有收获，随之带来更强烈的求知欲，于是这三年中，就在求知、迷惑、解惑，总结和分享的相互转化中不断进步着。一切都是那么自然的状态。

但在电话面试中，想把这个问题用语言有条理的描述出来，的确不是我的长项。 听到问题后，脑海里第一个出现的就是很多学习中的场景，而不是思路、词汇或句子。

无论如何，电话面试中，脑海中一切场景都要归于语言，结果说了很多，自己都感觉表达的条理不清，真是辛苦了面试官，感谢如此耐心的CTO。面试过后，静下心来，必须总结一下了。

未完待续…

可以先瞄一眼测试页面。

浏览器差异：

• Firefox的滚轮事件是DOMMouseScroll，其他浏览器使用的是mousewheel
• Firefox事件的event对象使用detail值表示滚轮方向，负3表示向上(前)，正3表示向下(后)。其他浏览器使用wheelDelta值表示滚轮方向，正120表示向上(前)，负120表示向下(后)。Opera 11.11即有detail值(同FF)也有wheelDelta值。
• 不要和正负3或正负120做等值比较来滚轮判断方向，应该和零比较。比如wheelDelta值大于0表示向上(前)。这么做的原因是有些用户的鼠标是基于厂家自己的驱动运行的，有更高级的灵敏度识别，在用户快速滚动滑轮的时候，event对象的detail或wheelDelta会出现其他值得情况。
• 经典得基本已成为废话，IE678使用attachEvent/detachEvent，其他浏览器使用addEventListener/removeEventListener。

封装后的代码，加入统一的方向标识和一些常用的功能：

• 为event对象加入wheel值表示滚轮方向，正1表示向上(前)，负1表示向下(后)。
• 为event对象加入wheelDir值表示滚轮方向，up表示向上(前)，down表示向下(后)。
• 纠正了IE678下事件函数内部的this值，指向绑定事件的DOM元素。
• 为IE678下事件函数传染event对象。
• 可以通过第三个参数决定是否阻止滚轮的默认行为，即触发整个网页的滚动事件。默认为true，阻止滚轮的默认行为。
• 同一个DOM元素可以绑定多个滚轮事件但不允许绑定重复的事件。

实现代码：

/*
 * mousewheel.js (c) Doomin|Joy-Studio
 * @example
 *     mouseWheel.on(el, callback)
 *     mouseWheel.on(el, callback, false) do NOT prevent default event
 *     mouseWheel.un(el, callback)
*/
var mouseWheel = (function() {
    var doc = document,
    types = ['DOMMouseScroll', 'mousewheel'],
    fixedEvent = function(e) {
        e.wheel = (e.wheelDelta ? e.wheelDelta: -e.detail) > 0 ? 1 : -1;
        e.wheelDir = e.wheel > 0 ? 'up': 'down';
        return e;
    };

    //return the api method
    return {
        on: function(el, fn, preventDefault) {
            if (typeof preventDefault !== 'boolean') {
                preventDefault = true;
            }

            var fixedFn = function(e) {
                e = fixedEvent(e || window.event);
                if (preventDefault) {
                    if (e.preventDefault) {
                        e.preventDefault()
                    } else {
                        e.returnValue = false;
                    }
                }
                fn.call(el, e);
            },
            wheelHash = el.wheelHash;

            if (!wheelHash) {
                wheelHash = {};
                wheelHash[fn] = fixedFn;
                el.wheelHash = wheelHash;
            } else {
                //ignore the repeat event
                if (wheelHash[fn]) return;
                wheelHash[fn] = fixedFn;
            }

            if (doc.addEventListener) {
                var i = types.length;
                while (i--) {
                    el.addEventListener(types[i], fixedFn, false);
                }
            } else {
                el.attachEvent('onmousewheel', fixedFn);
            }
        },
        un: function(el, fn) {
            if (!el.wheelHash) return;
            var wheelHash = el.wheelHash;
            if (doc.removeEventListener) {
                var i = types.length;
                while (i--) {
                    el.removeEventListener(types[i], wheelHash[fn], false);
                }
            } else {
                el.detachEvent('onmousewheel', wheelHash[fn]);
            }
            delete wheelHash[fn];
        }
    };
})();

如何使用：

//定义滚轮事件
var myWheel = function(e){
    console.log(e.wheelDir);
}
//添加滚轮事件
mouseWheel.on(element, myWheel);
//删除滚轮事件
mouseWheel.un(element, myWheel);

鼠标滚轮事件的几个经典应用：

• 地图，比如Google Map，百度地图。
• 表单Spinner控件。
• 自定义滚动条。
• 控制字体大小。
• 其他，有待同学们自己发现，创新和应用。

相关资源：

http://www.adomas.org/javascript-mouse-wheel/

转载声明：原创文章，转载必须以链接形式注明原文作者和原文地址，谢谢合作。
原文地址：http://www.joy-studio.com/frontend-develop/cross-browser-mousewheel-and-demo.html

var elements = document.getElementsByTagName('div');
console.log( toString.call(elements ) ); //[object HTMLCollection]

2. 函数内部arguments对象

(function(){
    var args = arguments;
    console.log( toString.call(args) ); //[object Arguments]
})();

3. DOM元素attributes值

var attrs = document.getElementById('your-id').attributes;
console.log( toString.call(attrs) ); //[object NamedNodeMap]

4. DOM元素classList值(FF 3.6+, Chrome 8+)

var cls = document.body.classList;
console.log( toString.call(cls) ); //[object DOMTokenList]

如果哪位同学知道还有其他的情况，请留言。我会及时更新。

转载声明：原创文章，转载必须以链接形式注明原文作者和原文地址，谢谢合作。
原文地址：http://www.joy-studio.com/frontend-develop/javascript-array-like-object-collection.html

console.log('transform' in document.documentElement.style)

如果在控制台中运行上面的代码，那么目前几乎所有的浏览器都打印的结果都是false，这当然不是真实情况。因为在一个css规则正式成为w3c草案之前，如果该浏览器支持该规则，则会在该规则前面加入表示该厂商浏览器的”前缀标识”，比如：”-moz-”(Firefox), “-webkit-”(Chrome, Safari)，”-o-”(Opera)， “-ms-”(IE)，所以，无论是在写css，还是写javascript，都要考虑到这一点差异，才能让代码正确的工作。

另外，还有一点要特别注意的是，如果一个css规则存在”前缀标识”，则该规则在javascript中的写法是不同的：

• Firefox：Moz + 词法意义上首字母大写的原规则。（看下面的demo比较直接，要特别注意带标识的boxsizing写法。
• Opera：O + 词法意义上首字母大写的原规则。如：OBoxSizing
• Chrome/Safari：webkit + 词法意义上首字母大写的原规则。如：webkitBoxSizing

用Firefox来举例，代码如下

//原transform规则, 全部小写
console.log('transform' in document.documentElement.style); //false in Firefox 4.0.1
//带前缀标识的transform规则正确写法 'M'和'T'大写
console.log('MozTransform' in document.documentElement.style); //true in Firefox 4.0.1
//原boxsizing规则, 全部小写
console.log('boxsizing' in document.documentElement.style);  //false in Firefox 4.0.1
//带前缀标识的boxsizing规则正确写法 'M', 'B'和'S'大写
console.log('MozBoxSizing' in document.documentElement.style); //true in Firefox 4.0.1

欢迎各位前端同僚指出文中错误或补充更多细节，大家共同进步！

转载声明：原创文章，转载必须以链接形式注明原文作者和原文地址，谢谢合作。
原文地址：http://www.joy-studio.com/frontend-develop/whether-the-browser-to-support-a-css-rules.html
地址拷贝：<a href=”http://www.joy-studio.com/frontend-develop/whether-the-browser-to-support-a-css-rules.html”>javascript如何判断浏览器是否支持指定的css规则|Doomin|Joy-Studio</a>

• 由js动态创建的iframe在被插入到页面之前，它的window对象是不存在的。@2011.03.23

示例代码：在父页面中调用js创建并插入一个iframe元素，这个iframe的src指向一个同域下的空白页面，并在此iframe中插入一个p元素。

//创建一个iframe，
var iframe = document.createElement('iframe');
//设定iframe的地址，注意，应该是同源的！
iframe.setAttribute('src', 'your-test-iframe.html');

//将插入到iframe的body中的测试元素
var p = document.createElement('p').appendChild(document.createTextNode('这里是由父页面插入的文字'));

//插入页面的操作一定要先执行，否则iframe的window对象无法获取，即下面代码中iframe.contentWindow值为null  
document.body.appendChild(iframe);

//在iframe加载完成时插入测试元素
iframe.contentWindow.onload = function(){
    iframe.contentWindow.document.body.appendChild(p);
};

• 将函数的arguments对象转为数组。@2011.03.24

function fnName(){
    var arr = Array.prototype.slice.call(arguments);  
    //do something...
}

• 禁止移动端设备将数字文本格式化。@2011.03.24

默认情况下，移动端会把所有数字当做手机号，并加上蓝色样式，但实际上页面中的很多数字并不是手机号，比如产品售价，邮政编码，合同编号等。所以应该关闭移动端的这个默认行为。插入下面一行meta标签即可。

<!DOCTYPE html>
<html>
<head>
  <meta name="format-detection" content="telephone=no">  
...

• Google使用的等宽英文字体。@2011.04.03

常用于pre，code等标签的等宽英文字体，美观又便于阅读。鬼才能记住呢，需要的时候直接考。配置IDE字体时也可以参考。

font-family:Monaco,'DejaVu Sans Mono','Bitstream Vera Sans Mono','Lucida Console',monospace;

• 不要试图对file域进行克隆操作。@2011.05.03 @Rosy

在对file域进行克隆操作时，在IE下和较新版的标准浏览器中，value值都不会被克隆，而且在opera中甚至会报错。可以到这里运行测试代码。

• 获取表单域的可用状态和只读状态，不要使用getAttribute方法。@2011.05.03 @Rosy Project

在表单域的标签中，只要出现disabled属性，该表单域就是不可用的，即使设置了false值，它也是不可用状态。所以，获取表单域真实的可用状态，应该使用该node节点的disabled属性，而不是通过getAttribute(‘disabled’)方法。避免不正确的标签写法导致javascript的误判断。
同理，标签中只要出现readonly属性，该域就是只读的。获取真实的只读状态，应该使用该node节点的readOnly(O要大写)属性。可以到这里运行测试代码。

<input id="test-1" name="name" type="text" disabled /><!--不可用状态-->
<input id="test-2" name="name" type="text" disabled="false" /><!--错误的标签写法，仍然是不可用状态-->
<input id="test-3" name="name" type="text" disabled="" /><!--错误的标签写法，仍然是不可用状态-->

//对上面第二个text域使用getAttribute方法，得到字符串 'false' 虽然转为布尔值后是true 但使用起来令人费解
document.getElementById('test-2').getAttribute('disabled') //'false'
//针对上面的第三个text域使用getAttribute方法，得到空字符串 转为布尔值后是false 但真实的状态应该是true
document.getElementById('test-3').getAttribute('disabled') //''

/*
 * 结论，如果使用getAttribute方法，则错误的标签写法可能直接导致javascript的判断错误，
 * 而使用disabled/readOnly属性则永远得到正确的结果。
 */

• 操作元素样式的float属性时, 推荐cssFloat的写法, 既是标准, 又是好习惯。@2011.07.03 @Rosy

虽然大多类库在方法内部都已作兼容化处理，既可以使用float，也可以使用cssFloat，但还是建议使用cssFloat(标准)，以简化类库内部的fixed过程。另外，绝对不要使用styleFloat，IE678专用！

• 主动为样式的长度值加入单位标记，让代码更加明确和严谨。@2011.07.03 @Rosy

当动态设置的样式需要传入长度值时，如果没有设置单位，IE678回默认加入像素单位px而执行设置，而IE9和其他标准浏览器则会忽略该次设置。如果加入单位标记，则所有浏览器都会执行设置。

注意，jQeruy的css方法不设置单位标记也有效，是因为其内部有fixed过程，但这样容易给使用者养成不好的，不严谨的习惯，所以不管怎样， 主动地为样式的长度值加入单位标记都是一个好习惯，让代码更明确和严谨。

相比之下，Rosy没有妥协，以setStyle方法举例说明如下：

//缺少单位标记的样式值
R.setStyle(el, top, 100); //w3c浏览器无效, 只有ie678(默认加入'px')有效
R.setStyle(el, top, '100'); //w3c浏览器无效, 只有ie678(默认加入'px')有效
//有单位标记的样式值
R.setStyle(el, top, '100px'); //所以浏览器都有效

• 设置无效的样式值，浏览器默认行为不同。@2011.07.03 @Rosy

w3c浏览器直接忽略该次设置，在IE678中, 将报参数无效错误。

• 随时继续…

转载声明：原创文章，转载必须以链接形式注明原文作者和原文地址，谢谢合作。
原文地址：http://www.joy-studio.com/frontend-develop/no-money-here-but-coding.html

在上海时我们是住在一起的室友，在一个50平左右的两室一厅里，我们相识，成为朋友。

那段时间大家都在为梦想奋斗着，现在想起来真的很怀念！

每天下班后大家一起买菜做饭，平时也搞过几次小活，但几本都没搞成，哈哈。

大杰，来自武汉，在日企上班，天天要挤公交车，会做很多菜，做鱼很拿手，郁闷时候喝点小酒，还失恋了不知道几次！

小杰，89年的小孩，来自杭州，当时还蒙在php的鼓里，有js的问题总是缠我，很爱吃我做的番茄炒鸡蛋，偶尔会发泄一下小脾气！

小强，来自长沙，每天往地上一坐就是几小时，便开始搞他的“我爱小语种”网站。有时候也装模作样的学一点点php。做的青椒回锅肉很好吃！

我呢，来自本溪（辽宁的一个小山沟，不写的话谁都不知道本溪在哪），上班要换乘两段轻轨加走路30分钟，每天早上要从上海的东北角赶到西南角，下班后再原路返回，很多次在轻轨上困得睡了，直接坐到终点站。在同济大学做兼职的时候要早上5点钟起床，坐两个小时的公交车到才学校。

如今，2011年：

现在大家已经分开两年多了，每个人都有很大的变化。

大杰，2010年末跳槽到杭州淘宝公司做产品经理。N个站的站长，网站每天的访问量以万来记录。一天忙的不亦乐乎。代表作：万鱼网

小杰，现在就职于游外游公司做游戏开发，在实力型团队中享受着，进步着。每天的工作就是：玩游戏-找BUG-再玩游戏-再找BUG。把Python、Flex玩得团团转，前途一片光明。

小强，每天工作3小时，网站日访问量也是以万来记录，悠哉悠哉，收入不菲。代表作：我爱小语种

我呢，这两年最大的收获就是成功转型，从做设计改做前端。但恐怕是室友中发展得最慢的，目前在成都做着孤独的小前端，工作中不时的还得分心去搞搞设计。做梦都想有一天能够加入一个实力型团队，专专专专注于前端，与大家交流，共同进步。所以目前还是在充电阶段，被上面的室友远远抛在后面，正在向前追赶中。

室友们，加油啊！

onbeforeunload事件会在onunload事件之前触发，它在用户离开页面之前弹出一个确认框，问用户是否要真正的离开本页面。如果用户点击了“确认”按钮，页面将会跳转或刷新。如果点击了“取消”，用户会停留在当前页面，onunload事件不会被触发。假设页面中有一个表单，用户填写了数据但却没有保存提交，他直接点击了刷新按钮，这时候就可以使用onbeforeunload事件来提示用户“数据没有保存”，这样就给哪些忘记提交或不小心点击到页面其他链接的用户一个取消的机会。

如果只想弹出确认框询问用户是否要离开，则只需在onbeforeunload的回调函数返回空字符串即可。代码如下：

window.onbeforeunload = function(){ return ''; }//有些资料中只写的return; 但在我的浏览器上根本没有弹出。

但如果没有有价值的提示的信息，像上面的代码那样，最好还是不要弹出确认框，以免给用户带来反感。大多数使用onbeforeunload事件的情况，都会提供给用户有价值的提示，比如使用wordpress后台修改文章，如果没有保存表单而直接点击了刷新，就会弹出如下图中的提示。

想在确认对话框中加入自定义的信息，实现起来也很简单，在回调函数中返回要插入的字符串即可。如果想插入多行提示，则使用’\n’换行。

window.onbeforeunload = function(){ return '提示信息';}

上面的代码在每次跳转或刷新页面都要弹出，这当然不是想要的结果。理想的情况是只有符合假设条件（比如表单没有保存）时才弹出确认，否则用户可以不必确认而直接跳转页面。所以应该在代码里加入触发条件，比如，假设页面中有正在等待的ajax提交（以变量busy为true表示），则提示用户“信息正在处理中…”。

window.onbeforeunload = function(){
    if(busy){
        return '信息正在处理中...';
    }
}

注意，如果onbeforeunload事件的回调函数没有使用return语句返回，则确认框不会弹出，所以上面的代码中当busy为false时，不会进行确认。

嗯，今天的笔记就写到这里。

转载声明：原创文章，转载必须以链接形式注明原文作者和原文地址，谢谢合作。
原文地址：http://www.joy-studio.com/frontend-develop/how-to-use-javascript-onbeforeunload-event.html
地址拷贝：<a href=”http://www.joy-studio.com/frontend-develop/how-to-use-javascript-onbeforeunload-event.html”>使用javascript的onbeforeunload事件|Doomin|Joy-Studio</a>