Posts Tagged javascript

JSProfiler v0.2 更新

JSProfiler v0.2 更新,改善了分析界面,增加了使用实例,打包了新的Chrome插件:
下载地址:JSProfiler v0.2

可二次开发

除了通过Chrome浏览器插件方式使用JSProfiler外,新增加了另一种使用方式:直接引入Profiler.js和Profiler.css到自己的网页中,类似下面的代码:

<!-- include profiler.js and profiler.css -->
<script type="text/javascript" src="../jsprofiler/Profiler.js"></script><script type="text/javascript">// <![CDATA[
window.addEventListener("load", function(){
//init js profiler ------ 1
var profiler = Profiler.init(window);

//start js profiler ----- 2
profiler.start();

//do some thing --------- 3
doTest();

//stop js profiler ------ 4
setTimeout(function(){
profiler.stop();
});
}, false);

// ]]></script>

JSProfiler API

这里简单介绍一下JSProfiler的API使用
Profiler.init: function(window) – 初始化分析器,并创建一个分析面板,并得到一个Profiler类的实例对象,用于后面使用,这里的传入参数是需要调试的window对象,默认是当前window,如果被测试window与当前window不同(比如在网页a.html中分析页面b.html中函数调用情况),则需要传入此参数。
Profiler#start: function() – 开始分析
Profiler#stop: function() – 停止分析,如果有分析面板,则会自动显示分析报表。

分析面板 – Profiler.Panel
调用Profiler.init()会自动创建一个分析面板实例,界面呈现如下:

完整实例

下面的例子演示了如何使用JSProfiler来分析自己的web项目,比如分析某次处理过程,通常的步骤是:
1、初始化Profiler对象
2、开始分析
3、测试用例,用户处理过程
4、定制分析,生成报表

sample.html
<!DOCTYPE html>
<html>
<head>
    <title>JSProfiler Sample</title>
    <style>
    body{
        margin:0;
        color: #333;
        font-family: verdana, helvetica, arial, sans-serif;
        font-size: 8pt;
    }
    h2{
        text-align: center;
    }
    .Panel{
        color: #DDD;
        -khtml-user-select : none;
        -webkit-user-select : none;
        -moz-user-select : none;
        width: 500px;
        height: 260px;
        background-color: black;
        margin: 20px auto;
        border: solid 16px #EEEEEE;
        box-shadow: 0 0 16px #000000;
        border-radius: 8px;
        position : relative;
        overflow: auto;
    }
    .Node{
        cursor: default;
        padding: 3px;
        border-radius: 2px;
        background-color: #EEEEEE;
        position: absolute;
    }
    </style>
    <script type="text/javascript" src="sample.js"></script>
    <script type="text/javascript">
    function doTest(){
        var sample = new yCoder.ProfilerSample(document.getElementById("canvas"));
        sample.loadNodes(100);
    }
    </script>
    
    <!-- include profiler.js and profiler.css -->
    <link rel="stylesheet"  href="../jsprofiler/Profiler.css" />
    <script type="text/javascript" src="../jsprofiler/Profiler.js"></script>
    <script type="text/javascript">
    window.addEventListener("load", function(){
        //init js profiler ------ 1
        var profiler = Profiler.init(window);
        
        //start js profiler ----- 2
        profiler.start();
        
        //do some thing --------- 3
        doTest();
        
        //stop js profiler ------ 4
        setTimeout(function(){
            profiler.stop();
        });
    }, false);
    </script>
</head>
<body>
<h2>JSProfiler Sample</h2>
<div id='canvas' class="Panel" ></div>
</body>
</html>

sample.js

var yCoder = {
__index: 0,
createNodes : function(parent, w, h, count, backgroundColor){
var i = 0;
while(i++ < count){
var x = Math.floor(Math.random()*w);
var y = Math.floor(Math.random()*h);
var div = document.createElement("div");
div.id = yCoder.__index++;
div.setAttribute("class", "Node");
div.style.backgroundColor = backgroundColor;
div.innerHTML = "" + x + " - " + y;
var tx = div.clientWidth / 2;
var ty = div.clientWidth / 2;
div.style.left = (x - tx) + "px";
div.style.top = (y - ty) + "px";
parent.appendChild(div);
}
}
};
yCoder.ProfilerSample = function(canvas){
this.init(canvas);
}
yCoder.ProfilerSample.prototype = {
init : function(canvas){
this.canvas = canvas;
var _this = this;
this.canvas.addEventListener("mousemove", function(evt){
_this.onmousemove.call(_this, evt);
}, false);
},
onmousemove : function(evt){
var target = evt.target;
if(!target || target.getAttribute("class") != "Node"){
return;
}
this.unhighlight();
this.highlight(target);
},
highlight: function(target){
this.currentElement = target;
this.currentElement.style.zIndex = "10";
this.currentElement.style.border = "2px solid";
},
unhighlight: function(){
if(this.currentElement){
this.currentElement.style.border = "";
this.currentElement.style.zIndex = "0";
}
},
loadNodes: function(){
var w = this.canvas.clientWidth;
var h = this.canvas.clientHeight;
yCoder.createNodes(this.canvas, w, h, 100, "green");
yCoder.createNodes(this.canvas, w, h, 100, "red");
yCoder.createNodes(this.canvas, w, h, 100, "blue");
this.deleteNodes("green");
},
deleteNodes: function(backgroundColor){
var childNodes = this.canvas.childNodes;
for(var i = 0, length = childNodes.length; i < length; i++){
var div = childNodes.item(i);
if(div && div.nodeType == 1 && div.style.backgroundColor == backgroundColor){
this.canvas.removeChild(div);
}
}
}
}

运行界面:

javascript中的比较操作符与类型转换

JavaScript中的比较操作符Equality(==)和Identity(===),以及类型间的转换是让人头疼的问题,虽然很多情况下都不需要,但多了解些,备特殊之需:

一道有名的javascript题目,其中有一处判断语句如下:

[javascript]alert([] == ![])[/javascript]

简单解答

1、”![]”结果是什么?

[]转换成boolean,按ToBoolean规则,object转换成boolean,返回true,然后取反,所以“![]”的结果是false

2、”[] == ![]”结果是什么?

看等号的左右两边,一个类型是object,一个是boolean,按不同类型对象间比较的规则:

[]” 转化成number ,结果是0

false,转换成number,结果是0

所以[] == ![] 结果为true,问题的关键是object和boolean比较,先转换成number(ToNumber())然后比较。

3、”[] == ![]”始终为真吗?

答案是否定,上面的结论是默认的情况,如果重写Array.prototype.valueOf方法,定制array转换成 number的过程,可以得到不同的结果,如:

[javascript]
Array.prototype.valueOf = function(){
return 1;
}
//结果是false
alert([] == ![]);
[/javascript]

Firefox上的两个SVG Bug

SVG Use 标签bug
一个是use类型引用image第一次不显示的问题,究其根源是image load后,不会派发事件告诉use节点刷新,这个问题困扰我们很久,后来给firefox提交了 bug(https://bugzilla.mozilla.org/show_bug.cgi?id=575210),

问题表现是,第一打开图片不显示,刷新一次就可以了

firefox很快回复了bug,与bug548795相同,而Bug 548795 depends on bug 558663