博客园_JKisJK

备忘：递归callee.caller导致死循环

2012-06-01T08:38:00Z

今天网友 Baobao包子反映QWrap里的QW.EventH.getEvent有可能会产生死循环。
代码如下：

/**
* 获得event对象
* @method getEvent
* @param {event} event (Optional)event对象默认为调用位置所在宿主的event
* @param {element} element (Optional)任意element对象 element对象所在宿主的event
* @return {event} event对象
*/
getEvent: function(event, element) {
if (event) {
return event;
} else if (element) {
if (element.document) {return element.document.parentWindow.event; }
if (element.parentWindow) {return element.parentWindow.event; }
}

if (window.event) {
return window.event;
} else {
var f = arguments.callee;
do {
if (/Event/.test(f.arguments[0])) {return f.arguments[0]; }
} while (f = f.caller);
}
},

网友集鹄也曾在2011-12-07以一个例子来说过这个死循环的问题：

造成死循环的原因：caller链中有时会有闭环。例如：一个function的caller有可能等于本身。

另：QW.EventH.getEvent 方法并不直接对业务编码的同学开放，目前还没有人踩坑，暂无必要更改实现方法。

本文链接

随机问题之--洗牌算法

2012-04-23T13:23:00Z

洗牌算法是我们常见的随机问题，在玩游戏、随机排序时经常会碰到。它可以抽象成这样：得到一个M以内的所有自然数的随机顺序数组。
在百度搜“洗牌算法”，第一个结果是《百度文库-洗牌算法》：http://wenku.baidu.com/view/c4fea82658fb770bf78a55b7.html
扫了一下里面的内容，很多内容都容易误导别人走上歧途，包括最后用链表代替数组，也只是一个有限的优化（链表也引入了读取效率的损失）。

该文里的第一种方法，可以简单描述成：随机抽牌，放在另一组；再次抽取，抽到空牌则重复抽。
“抽到空牌则重复抽”这会导致后面抽到空牌的机会越来越大，显然是不合理的。
可以优化一步成：牌抽走后，原牌变少。（而不是留下空牌）
代码如下：

这个也明显有问题，因为数组如果很大的话，删除中间的某个元素，会导致后面的排队向前走一步，这是一个很耗时的动作。
回想一下“我们为什么要删除那个元素？”目的就是为了不产生空牌。
除了删除那个元素之外，我们是不是还有其它方式来去除空牌？
----有的，我们把最后一张未抽的牌放在那个抽走的位置上就可以了。
所以，这个思路我们可以优化成这样：

除了抽牌思路，我们还可以用换牌思路。
《百度文库-洗牌算法》提到一种换牌思路：“随机交换两个位置，共交换n次，n越大，越接近随机”。
这个做法是不对的，就算n很大（例如10张牌，进行10次调换），也还存在很大可能“有的牌根本没换位置”。
顺着这个思路，做一点小调整就可以了：第i张与任意一张牌换位子，换完一轮即可。
代码如下：

除了抽牌与换牌的思路，我们还可以用插牌的思路：先有一张牌，第二张牌有两个位置可随机插入（第一张牌前，或后），第三张牌有三个位置可随机插入（放在后面，或插在第一位，或插在第二位），依此类推
代码如下：

function shuffle_insert_1(m) //洗牌 //插牌法
{
//每次生成一张最大的牌，插在随机的某张牌前。因为要在数组里插入元素，把后面的所有元素向后挤一位，所以很耗时。
var arr = [0];
for (var i=1; i<m; i++) {
arr.splice(Math.floor(Math.random()*(i+1)),0,i);
}
return arr;
}

以上的代码也会有一些问题：就是随着牌数的增多，插牌变得越来越困难，因为插牌会导致后面的很多牌都往后推一步。
当然，我们也可以适当的优化一下：先有n-1张牌，第n张牌放在最后，然后与任意一张牌互换位置。
代码如下：

function shuffle_insert(m) //洗牌 //插牌法优化版，可以用数学归纳法证明，这种洗牌是均匀的。
{
//每次生成一张最大的牌，与随机的某张牌换位子
var arr = new Array(m);
arr[0] = 0;
for (var i=1; i<m; i++) {
var rnd = Math.floor(Math.random()*(i+1));
arr[i] = arr[rnd];
arr[rnd] = i;
}
return arr;
}

好的，全部的代码如下，有兴趣的同学可以在自己的机器上试下，看下他们各自的执行效率、以及最后的结果是否是理论随机。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK：javascript 洗牌算法 </title>

</head>
<body>
<script type="text/javascript">

function shuffle_pick_1(m) //洗牌 //抽牌法
{
//生成m张牌
var arr = new Array(m);
for (var i=0; i<m; i++) {
arr[i] = i;
}

//每次抽出一张牌，放在另一堆。因为要在数组里抽出元素，把后面的所有元素向前拉一位，所以很耗时。
var arr2 = new Array();
for (var i=m; i>0; i--) {
var rnd = Math.floor(Math.random()*i);
arr2.push(arr[rnd]);
arr.splice(rnd,1);
}
return arr2;
}

function shuffle_pick(m) //洗牌 //抽牌法优化牌
{
//生成m张牌
var arr = new Array(m);
for (var i=0; i<m; i++) {
arr[i] = i;
}

//每次抽出一张牌，放在另一堆。把最后一张未抽的牌放在空位子上。
var arr2 = new Array();
for (var i=m; i>0;) {
var rnd = Math.floor(Math.random()*i);
arr2.push(arr[rnd]);
arr[rnd] = arr[--i];
}
return arr2;
}

function shuffle_swap(m) //洗牌 //换牌法
{
//生成m张牌
var arr = new Array(m);
for (var i=0; i<m; i++) {
arr[i] = i;
}

//第i张与任意一张牌换位子，换完一轮即可
for (var i=0; i<m; i++) {
var rnd = Math.floor(Math.random()*(i+1)),
temp = arr[rnd];
arr[rnd] = arr[i];
arr[i]=temp;
}
return arr;
}

function shuffle_insert_1(m) //洗牌 //插牌法
{
//每次生成一张最大的牌，插在随机的某张牌前。因为要在数组里插入元素，把后面的所有元素向后挤一位，所以很耗时。
var arr = [0];
for (var i=1; i<m; i++) {
arr.splice(Math.floor(Math.random()*(i+1)),0,i);
}
return arr;
}

function shuffle_insert(m) //洗牌 //插牌法优化版，可以用数学归纳法证明，这种洗牌是均匀的。
{
//每次生成一张最大的牌，与随机的某张牌换位子
var arr = new Array(m);
arr[0] = 0;
for (var i=1; i<m; i++) {
var rnd = Math.floor(Math.random()*(i+1));
arr[i] = arr[rnd];
arr[rnd] = i;
}
return arr;
}

//alert(shuffle_pick(10))

var funcs = [shuffle_pick_1, shuffle_pick, shuffle_swap, shuffle_insert_1, shuffle_insert],
funcNames = ["抽牌", "抽牌优化", "换牌", "插牌", "插牌优化"]
m = 10000,
times=[];
for(var i = 0; i < funcs.length; i++){
var d0= new Date();
funcs[i](m);
funcNames[i] = (new Date() - d0) + '\t' + funcNames[i];
}

alert(funcNames.join('\n'));

</script>

</body>

</html>

本文链接

onclick与listeners的执行先后问题

2012-04-08T06:19:00Z

以下代码，会先执行onclick，然后再执行事件监控：

<HTML>
<HEAD>
<TITLE>JK Test</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<script src="http://s0.qhimg.com/lib/qwrap/110.js" type="text/javascript"></script>
<style>
div{border:1px solid balck;padding:5px;margin:2px;}
</style>
</HEAD>
<body>
<div id="div1" onclick="alert(1);" >div1 原生的fireEvent，是先运行onclick，再运行listeners
</div>
</body>
<script type="text/javascript">
var fun=function(e){
alert('hello');
};
W('#div1').addEventListener('click',fun).fire('click'); //QW里调用的是原生方法
</script>
</HTML>

JQuery的执行顺序恰恰相反：

<HTML>
<HEAD>
<TITLE>JK Test</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<script src="http://s0.qhimg.com/lib/jquery/172.js" type="text/javascript"></script>
<style>
div{border:1px solid balck;padding:5px;margin:2px;}
</style>
</HEAD>
<body>
<div id="div2" onclick="alert(2);" >div2 JQuery，先运行listeners，再运行onclick
</div>
</body>
<script type="text/javascript">
var fun=function(e){
alert('hello');
};
$('#div2').bind('click',fun).trigger('click');
</script>
</HTML>

扫了一下jq的trigger的实现，也没弄明白颠倒的目的是什么。

本文链接

Textarea与懒惰渲染

2011-12-31T13:12:00Z

2008年有啊第一次性能优化时，我们曾用textarea来存贮需要懒惰渲染的节点。代码如下。

<div>
立即渲染内容
<ul>
<li>张三<img src="p01.jpg"/></li>
<li>张四<img src="p02.jpg"/></li>
</ul>
</div>

<div>
<textarea id="lazyRender01" style="display:none">
懒惰渲染内容
<ul>
<li>李三<img src="p11.jpg"/></li>
<li>李四<img src="p12.jpg"/></li>
</ul>
</textarea>
</div>
<script>
setTimeout(function(){//懒惰渲染
var el =document.getElementById('lazyRender01');
el.parentNode.innerHTML = el.value;
},1000);
</script>

代码的好处是：让李三李四对应的内容，在懒惰渲染之前，不形成dom节点，不请求图片。

但有的同学会问：“Textarea里的内容，对搜索引擎不友好。”
没问题，这个也很好解决的：

<div>
立即渲染内容
<ul>
<li>张三<img src="p01.jpg"/></li>
<li>张四<img src="p02.jpg"/></li>
</ul>
</div>

<div>
<script>document.write('<textarea id="lazyRender01" style="display:none">');</script>
懒惰渲染内容
<ul>
<li>李三<img src="p11.jpg"/></li>
<li>李四<img src="p12.jpg"/></li>
</ul>
</textarea>
</div>
<script>
setTimeout(function(){//懒惰渲染
var el =document.getElementById('lazyRender01');
el.parentNode.innerHTML = el.value;
},1000);

</script>

代码的区别很简单，只是把'<textarea id="lazyRender01">'这一段通过js的document.write输出来。

但结果却有了很大的不同：就算浏览器不支持js，一切内容也还是能原样显示出来。

本文链接

QWrap Selector之W3C版

2011-11-27T11:06:00Z

之前也曾经有过一系列《QWrap Selector解密》文章，讲到过QWrap里的dom/selector.js里的大多数要点。今天又整了一个完全依赖浏览器的querySelectorAll的slector版本：selector_w3c.js。与之前的selector.js的接口名称相同。

我们自己写一个selector.js，这样我们就有弥补标准的不足的自由。例如，就算最新的浏览器，也依然没有人严格实现matchesSelector。而我们的selector.js里早就有了filter与test方法来实现matchesSelector的功能。
从另一个角度看，我们有时需要为某些特定场景定制一些代码，以些来节约网络流量。selector_w3c.js就是假设浏览器已支持querySelectorAll方法。典型的例子就是：基于移动终端做的web js开发。
selector_w3c.js与selector.js对外提供的所有方法名称都一样，只是有w3c版里对参数的要求与对应的处理，更依赖于浏览器。
例如：

差别1：原来的selector.js中的Selector.query(document.body,'body div')不会反回结果。因为它为了易用性的考虑，把后面的selector字符串默认加上了“:scope ”，相当于selector_w3c.js里的Selector.query(document.body,':scope body div')，尽管现在Chrome也没有实现:scope伪类。这种差别在这篇《认识selector写法》的文章中也讲过，是一个严谨性与易用性冲突的典型例子。
差别2：seletor_w3c.js里的test方法里的selector参数现在也支持各种关系符了。例如，可以这样写：Selector.test(document.body,'html body')。同时它也产生了一个副作用，即：如果被测试的元素没有父元素（例如新建的、还未插入到dom树里去的节点），则测试结果为假。
差别3：seletor_w3c.js里的filter(els, sSelector, pEl)在未传pEl时，会忽略游离在dom树之外的节点。

很可惜，因为chrome也没有实现matchesSelector，所以test、filter两个方法我只能去山寨的去实现一下，所以有了上面的差别2与差别3里的瑕玼。----这说明，“标准”总走跑不赢我们的期望，现实的浏览器又跑不赢标准。----管他呢，反正那“标准”是“草案”还是“建议”还是其他的什么，都不是我能左右的。

代码具体代码在这里： https://github.com/wedteam/qwrap/blob/master/resource/js/dom/selector_w3c.js
其实很简单，如下：

/*
Copyright (c) Baidu Youa Wed QWrap
version: $version$ $release$ released
author: JK
*/

/**
* @class Selector Css Selector相关的几个方法
* @singleton
* @namespace QW
*/
(function() {
var Selector = {
/**
* 把一个selector字符串转化成一个过滤函数.
* @method selector2Filter
* @static
* @param {string} sSelector 过滤selector
* @returns {function} : 返回过滤函数。
* @example:
var fun=selector2Filter("input.aaa");alert(fun);
*/
selector2Filter: function(sSelector) {
return s2f(sSelector);
},
/**
* 判断一个元素是否符合某selector.
* @method test
* @static
* @param {HTMLElement} el: 被考察参数
* @param {string} sSelector: 过滤selector
* @returns {function} : 返回过滤函数。
*/
test: function(el, sSelector) {
return s2f(sSelector)(el);
},
/**
* 用一个css selector来过滤一个数组.
* @method filter
* @static
* @param {Array|Collection} els: 元素数组
* @param {string} sSelector: 过滤selector。
* @param {Element} pEl: 父节点。默认是document
* @returns {Array} : 返回满足过滤条件的元素组成的数组。
*/
filter: function(els, sSelector, pEl) {
var allEls = (pEl || document).querySelectorAll(sSelector);
return Array.filter(els, function(el){
return Array.indexOf(allEls,el) > -1;
});
},
/**
* 以refEl为参考，得到符合过滤条件的HTML Elements. refEl可以是element或者是document
* @method query
* @static
* @param {HTMLElement} refEl: 参考对象
* @param {string} sSelector: 过滤selector,
* @returns {array} : 返回elements数组。
* @example:
var els=query(document,"li input.aaa");
for(var i=0;i<els.length;i++ )els[i].style.backgroundColor='red';
*/
query: function(refEl, sSelector) {
return toArray((refEl || document).querySelectorAll(sSelector));
},
/**
* 以refEl为参考，得到符合过滤条件的一个元素. refEl可以是element或者是document
* @method one
* @static
* @param {HTMLElement} refEl: 参考对象
* @param {string} sSelector: 过滤selector,
* @returns {HTMLElement} : 返回element，如果获取不到，则反回null。
* @example:
var els=query(document,"li input.aaa");
for(var i=0;i<els.length;i++ )els[i].style.backgroundColor='red';
*/
one: function(refEl, sSelector) {
return (refEl || document).querySelector(sSelector);
}
};

/*
* s2f(sSelector): 由一个selector得到一个过滤函数filter
*/
var filterCache = {};
filterCache[''] = function(){
return true;
};
filterCache['*'] = function(el){
return !!el.tagName;
};
function s2f(sSelector) {
if (!filterCache[sSelector]) {
filterCache[sSelector] = function (el) {
return el.parentNode && Array.indexOf(el.parentNode.querySelectorAll(sSelector), el) > -1;
}

}
return filterCache[sSelector];
}
function toArray(arr){
for (var i=arr.length-1, ret = []; i>-1; i--) {
ret[i] = arr[i];
}
return ret;
}
QW.Selector = Selector;
}());

另：由于QWrap有灵活的apps机制，所以我们可以订制一个apps/qwrap_webkit.js的应用，用selector_w3c.js来取代selector.js。而其他地方的代码不用任何改变。

附：
QWrap博客网址：http://www.qwrap.com
Selector速度比赛：http://dev.qwrap.com/resource/js/_tools/speedmatch/_examples/SelectorSpeed.html

本文链接

原来window.event快达到全浏览器支持了

2011-11-25T06:25:00Z

在Tangram群里讨论到<a href="#" onclick="baidu.event.preventDefault(event);">的写法时，以为标准浏览器只能用arguments[0]来获取到event，结果nodiseal同学说已经可以这么用了，于是做了以下测试。。。

看下以下代码在各浏览器下的结果：

IE8: object,object,undefined
FF8.0: undefined,MouseEvent,undefined
Cr16: MouseEvent,MouseEvent,undefined
Opera: MouseEvent,MouseEvent,undefined
Safira: MouseEvent,MouseEvent,undefined

除FF8外，其它浏览器都已经支持window.event了

ff8似乎在调用事件时with了一个{event:new Event(...)}；所以在onclick里也可以直接用“event”来获取事件句柄。

另：好奇同学在QWrap的Event里供了一个QW.EventH.getEvent的静态方法，用来在各种情况下获取当前的事件对象，代码如下：

所以，使用QW的页面，可以直接这样写：

即：调用preventDefault时，不必传入event实例。

本文链接

JSS----另一种节点与JS数据的关系模式

2011-11-17T08:37:00Z

节点JS数据的用途
一个简单的例子，我们的页面需要一个日期输入框，用html5可以简写为：<input name="birthday" type="date"/>
但是，只有type="date"这一个设置，远远不能满足交互需求。
看一下wagang的valid组件（http://dev.qwrap.com/resource/js/wagang/valid/_examples/Valid-BaseDemo.htm ）里，与日期输入框交互有关的信息还有哪些：
    minValue 最小日期
    maxValue 最大日期
    d_format 用户日期格式错误
    d_upper 日期太晚时的提示
    d_lower 日期太早时的提示
这些信息没有标准的dom属性与之对应，我们需要js来根据些信息来完成一些交互需求。
同时，这些信息又跟某具体的元素相关。
那么，如何将这些信息（数据）与元素对应起来呢？

节点JS数据的描述方式
我们看一下有哪些方式来实现这种关联。
1. 自定义属性描述

2. JS偷加属性

<input id="fromDate"/>
<script>g('fromDate').dataType='d'; g('fromDate').minValue:'2011-11-12';</script>

3. JQuery的data方法

<input id="fromDate"/>
<script>$('#fromDate').data({dataType:'d',minValue:'2011-11-12'});</script>

4. ECUI 格式（百度欧阳等同学开发，http://tangram.baidu.com/other/ecui/）

5. JSS 格式

6. 其它，批量定义节点JS数据的描述方式—批量

//JQuery的data方法
$('input.d').data('dataType', 'd');
$('input.birthday').data('maxValue','2011-11-12');
//QWrap的jss方法
W('input.d').jss('dataType', 'd');
W('input.birthday').jss('maxValue','2011-11-12');

7. 还有一种，节点JS数据的描述方式—JSS规则

规则的优点：
在元素产生之前，就可以定规则。
在获取数据时，再去配合规则。
回头看一下JSS的三种描述节点数据的方式: JSS规则、inline JSS、QW.NodeW所提供的jss方法

这三种描述形成一个小的体系。这个体系与CSS很相似：CSS规则、inline Style、js里更改style。
这也是JSS的得名由来：JSS是仿照CSS的一套"HTML元素"与"JS数据"之间的关联机制。
即：
CSS是"HTML元素"与"style数据"之间的关联机制，
而JSS是"HTML元素"与"JS数据"之间的关联机制。

感谢屈屈（http://www.imququ.com/）同学为这一种机制命名为JSS.

JS的原生代码其实很简单：参见：https://github.com/wedteam/qwrap/blob/master/resource/js/dom/jss.js
重点方法：getJss

/**
* 获取元素的jss属性，优先度为：inlineJssAttribute > #id > @name > .className > tagName
* @method getJss
* @param {element} el 元素
* @return {any} 获取到的jss attribute
*/
getJss: function(el, attributeName) { //为提高性能，本方法代码有点长。
var data = getOwnJssData(el);
if (data && (attributeName in data)) {
return data[attributeName];
}
var getRuleData = Jss.getRuleData,
id = el.id;
if (id && (data = getRuleData('#' + id)) && (attributeName in data)) {
return data[attributeName];
}
var name = el.name;
if (name && (data = getRuleData('@' + name)) && (attributeName in data)) {
return data[attributeName];
}
var className = el.className;
if (className) {
var classNames = className.split(' ');
for (var i = 0; i < classNames.length; i++) {
if ((data = getRuleData('.' + classNames[i])) && (attributeName in data)) {
return data[attributeName];
}
}
}
var tagName = el.tagName;
if (tagName && (data = getRuleData(tagName)) && (attributeName in data)) {
return data[attributeName];
}
return undefined;
}

其中,平时会使用到的jss方法，是getJss与setJss方法的gsetter合体。
参见：http://dev.qwrap.com/resource/js/_docs/_youa/?content=http://dev.qwrap.com/resource/js/_docs/_youa/qw/nodew/w.jss_.htm

JSS的一些应用场景：
1. Valid验证规则的前后端统一配置：前端验证，前端效果渲染（日期输入框后会加日期按钮）、后端验证，三者可以统一用一套规则：

rules:
{
'@goDate':{
dataType:'d',
errMsg:'请检查您的出发日期',
reqMsg:'出发日期必填'
}
'@backDate':{
dataType:'d',
errMsg:'请检查您的返程日期',
reqMsg:'返程日期必填'
}
}

2. Css与Jss的配合：通过class，定义css展现，与jss代表的js交互

3. 新的组件初始化方式：组件调用三部曲：

<div id="picslide_1">...</div>
<script type="text/javascript">
W('#picslide_1').switchable({
tabSelector : '>.switch-nav>li',
viewSelector : '>.switch-content>li',
autoPlay: true,
supportMouseenter: true,
mouseenterSwitchTime: 300
});
</script>

可以简化成这样：（因为组件代码已为".picslide"作好了jss定制）

<div id="picslide_1" class="picslide">...</div>
<script type="text/javascript">
W('#picslide_1').switchable();
</script>

可以进一步简化成什么代码都没有了：（因为组件代码里已有Dom.ready(function(){W('div.switchable').switchable();});）

参见例子：http://dev.qwrap.com/resource/js/wagang/switch/_examples/switch_retouched_demo.html

我自己很看好JSS在以后的应用，尤其是在组件的开发中，有了JSS，再也不必用类继承来实现参数特别化，并且还可以作参数特别化的按优先级自动揉合（因为selector有优先度）
更多信息，可以查看这个ppt，这是11月12日webrebuild年会上作分享的ppt：

《QWrap中的JSS》

http://dev.qwrap.com/resource/js/_docs/QWrap-Jss-20111106.ppt

本文链接

html结构错误小记

2011-11-11T06:17:00Z

这段代码，IE下报错：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>test</title>
</head>
<body >
hello
</body>
<script>
document.body.innerHTML='<p><pre>ddd<br></pre></p>';
</script>
</html>

原因（感谢网友貘给出解答）：

The P element represents a paragraph. It cannot contain block-level elements (including P itself).
http://www.w3.org/TR/html401/struct/text.html#edef-P

更多内空（感谢网友GrayZhang提供）：

这里有对应的各元素，点进去能看到元素的具体额外内容模型

http://dev.w3.org/html5/markup/elements.html
这个是general的内容模型
http://dev.w3.org/html5/markup/common-models.html

本文链接

右键集成JS文件压缩 YUI Compressor

2011-09-30T05:02:00Z

几年前，国忠同学转发过一篇右键集成的YUI压缩的邮件，最近发现对不少同学还是有用，就把它成整成这一篇随笔吧。

在网上看过也有一些类似的文章，不过大多是很长的代码，而本做法由于用到了filemenutools工具，代码相对来说少一些。

内容如下：

-----------------------------------------------------

可以把YUICompressor集成到右键，可以通过压缩来自查代码。如以下。

需要 :

YUI Compressor : http://developer.yahoo.com/yui/compressor/

filemenutools : http://www.baidu.com/s?wd=filemenutools

Step1 :

将http://yuilibrary.com/downloads/#yuicompressor 中的yuicompressor-2.4.6.zip 解压缩到d盘某处，如D:\JKTools

Step2:

在D:\JKTools 新建一个yuicom.bat 文件。内容如下：

java -jar D:\JKTools\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar %1 -v -o %1_com.%2

pause

Step 3:

安装 filemenutools

在filemenu tools 命令中添加一个 YUIcompressor 命令，属性如下

设置完成。

Step4:

右键点击要压缩的css 或js 文件，选择YUIcompressor，将在目录下生成*_com.*.*文件，如果文件有语法错误会提示。

------

另，命cmd窗口里的压缩报告很值得细读。。。

本文链接

关于window.external

2011-09-05T07:43:00Z

由于工作中有很多时候需要用到window.external，以前一直稀里糊涂的，今天又被人问到，于是突击学习了一下，记下备忘。

--------------------------------------
我们在js中可以通过window.external.aaaa()来调用浏览器提供的外部方法aaaa。

IE的已默认实现了一些外部方法，可以参见
1:某中文文章：http://www.it118.org/Specials/2e876829-483a-4216-a6ef-08a472c94297/8f8d0507-b4c8-4d92-8e35-3c88dade3a17.htm
2:官方文档里有更多： http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/external.asp

在嵌入了浏览器的工程中，除了IE默认提供的外部方法之外，需要网页的脚本中能调用C++代码，要实现这种交互，就必须实现脚本扩展。实现脚本扩展就是在程序中实现一个IDispatch接口，通过CHtmlView类的OnGetExternal虚函数返回此接口指针,这样就可以在脚本中通过window.external.XXX(关键字window可以省略)来引用接口暴露的方法或属性(XXX为方法或属性名)。
参考《实现脚本扩展》http://topic.csdn.net/u/20080116/17/5fbac468-1188-4c9c-9339-ad48edd8a4d3.html

Firefox与Chrome也提供了external对象，例如，他们都默认的实现了opensearch的两个外部方法：
AddSearchProvider IsSearchProviderInstalled
Chrome下，可以在控制台输入window.external看到。
Firefox默认提供的外部方法稍稍多一些，也可以可以通过firebug看到。

本文链接