Focus:ajax、as3、Front-end performance、C++...
在看到actionscript 3.0中有关函数表达式定义的函数与函数语句定义的函数在使用apply调用时和直接调用时,它们的this指向不一致!
函数表达式定义的函数:
var funcB:Function = function ():void {}
函数语句定义的函数:
function funcA():void {}
我见过的as3代码中,最常见的是直接使用函数语句直接定义函数,而不是使用函数表达式定的义函数。
他们到底有什么区别呢?
我在书上看到的是说:函数语句定义的函数,函数内的this始终指向当前域。
eg:
var num:int = 3;
function testThisA(){
trace (num);
trace (this.num);//牢牢指向当前域
trace (this);
}
testThisA();
3
3
[object MainTimeline]
var obj:Object = {num:300};
obj.testA = testThisA;
obj.testA();//函数语句定义法会牢牢指向当前域
3
3
[object MainTimeline]
testThisA.call(obj);//函数语句定义法会牢牢指向当前域
3
3
[object MainTimeline]
testThisA();
3
3
[object MainTimeline]
不错,这个例子在flash cs3中可以很正常很好的运行。
但最初运行这个例子的时候,我是在FlashDevelop 3.0.6中运行的。 我得到的结果与我预期是一致的(与javascript的表现一致)。
我使用的代
有人已经提了疑问:
传送门在这里 ---> 在chrome中砸百度网页上的彩蛋,网页就崩溃,这是谁的责任
我记得我以前也遇到过这个问题,而且是在老板的笔记本上演示flash整蛊的时候崩溃了(百试不爽)!
曾经在一次首页改版中遇到过这个问题,当时JS代码不是我写的,而且只在Chrome下出问题。因为使用chrome的人当时并不多,而且那个时候还是beta测试版。后来开发闲下来的时候,我把代码一行一行的排查,最终定位在一行代码上:flashEl.parentNode.innerHTML = "xxxx"; 似乎想使用这种方式来“销毁flash”。
前前后后参与或主导开发Javascript与flash、Javascript与activeX相关开发,差不多二年的时间了。这中间遇到过很多不可思意的事情,也很奇怪,我无法找到原因。只清楚的记得当时它们之前相互调用的时候很多时候都需要用到延时,而且延时一般在300ms+,为何是300ms?我也不知道,只知道这么做能解决绝大多数的问题。
而在平常使用Chrome浏览网页的时候,也经常能遇到因为flash的问题导致Chrome占用系统的内存和CPU居高不下,尔后就是无响应,直至Chrome崩溃。
同样的,百度彩蛋导致Chrome崩溃的原因,也是因为对flash父元素直接使用了innerHTML,试图从DOM节点上移除flash,销毁flash占用网页的
设置鼠标为手形:
SWFUpload.js中有方法:setButtonCursor
// Public: setButtonCursor changes the mouse cursor displayed when hovering over the button
SWFUpload.prototype.setButtonCursor = function (cursor) {
this.settings.button_cursor = cursor;
this.callFlash("SetButtonCursor", [cursor]);
};
但问题是,这个值传为多少呢?
SWFUpload.as中有方法:SetButtonCursor
private function SetButtonCursor(button_cursor:Number):void {
this.buttonCursor = button_cursor;
this.buttonCursorSprite.useHandCursor = (button_cursor === this.BUTTON_CURSOR_HAND);
}
而BUTTON_CURSOR_HAND的值为-2,所以推测出只需要调用fu.setButtonCursor并设置参数为 (-2) (fu为创建的SWFUpload对象) 便可使文本的鼠标样式变为手形。
有时候需要在获取某些参数的时候动态改变上传地址,如之前上传地址为abc.php,现在要改为kk.php
可以使用setUploadURL重新进行设置便可,参数为String(url地址)
文档中提及post_params,可以设置一些上传参数。但需要调用setUseQueryString并传入true才会生效。
我以为我理解错误,但查看swfupload.js源码第865行发现:
/* This is a chance to do something before the browse window opens */
SWFUpload.prototype.fileDialogStart = function () {
this.queueEvent("file_dialog_start_handler");
};
理解没有问题,可事件却是在关闭选择文件对话框的时候关闭的!(IE下是这么表现的)
我使用Chrome、FF进行测试却发现可以正常表现,所以如果在项目中用到了这个事件就需要注意了。
其实我觉得这个事件一般也没什么用,用fileDialogComplete就好了。
SWFUpload.prototype.fileDialogComplete = function (numFilesSelected, numFilesQueued, numFilesInQueue) {
this.queueEvent("file_dialog_complete_handler", [numFilesSelected, numFilesQueued, numFilesInQueue]);
};
初始化时参数file_dialog_complete_handler:fn
fn在关闭文件选择对话框时,会得到三个参数,一般只需要用到第一个参数:numFilesSelected(已选文件数量,一个也没选择将得到0)
而swfupload.js回调中传入的file对象,包含如下的属性:
{
* id: "SWFUpload_0_0"
* type: ".jpg"
* size: 145014
* modificat
遇到一个需求:点击EditorGridPanel中的某一列时,需要根据点击的那一行的其它列的数据进行判断,出现何种表单控件。
例如:
头像类型 头像ID
xxx yyy
点击yyy时需要根据头像类型选择的值进行判断,是出现combox控件还是textfield控件。
解决方案:使用Extjs预留的getCellEditor进行扩展。
部分代码:
var _cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), {//行号
width:xx,
editor:new Ext.form.Numberfield(),
header:"xx",
sortable:true,
dataIndex:"xx",
allowBlank:false
}
]);
var _sm = new Ext.grid.CheckboxSelectionModel({singleSelect : false });//不允许
布局很多时候体现的是CSS的功底,包含了页面制作者的设计思想。良好的设计思路在一定程度上可以避免过多的使用hack,也能让维护变得没那么困难了。
40种布局全部使用相同的结构:
<div id="container">
<div id="header"><h1>Header</h1></div>
<div id="wrapper">
<div id="content">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
这次试验同样的也说明IETester与系统自带的IE浏览器的差异
页面代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>getBoundingClientRect测试例子</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
body {margin:0; padding:0;}
#demo {border:1px solid #f00; width:300px;margin:30px 10px 0 10px; padding:10px;}
</style>
</head>
<body>
<div id='demo'>xxxx</div>
<script type="text/javascript">
(此症状只能重现于IE6中) 在切一个页面的时候发现,我使用padding居然也会出问题,有点纳闷.....
页面的结构和样式是比较简单的:
结构:
<div id='wrapper'>
<div id='header'></div>
<div id='main'>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
<div id='footer'></div>
</div>
样式:
<style type="text/css">
* {margin:0; padding:0;}
#wrapper {position:absolute; width:300px; margin:100px; }
#
唯一让人觉得有些遗憾的是,IE6下须要触发容器的hasLayout 而IE7使用overflow就已经触发了,想兼容IE6我就加了zoom(不然就是真正的无hack了....)
FF下还是通过了校验
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无Hack的三列等高</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content='text/html;charset=utf-8' />
<style type="text/css">
* {margin:0; padding:0;}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block