锚点和事件响应

html锚点
为什么练葵花宝典的一定要自宫呢？
因为，纸上得来终觉浅，绝知此事要宫刑。

百度搜html锚点，搜到的都是半吊子答案，读起来不但费解，还误人子弟。读书就要彻底才行。

w3cschool说得很清楚w3cschool

1：同一页锚点：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.partA{
			width:500px;
			height:1000px;
			background-color: red;
		}
		.partB{
			width:500px;
			height:1000px;
			background-color: yellow;
		}
	</style>
</head>
<body>
<a href="#point">锚点</a> 
<div class="partA"> 
</div> 
<div>
<a name="point"></a>
<div class="partB">
</div> 
</body>
</html>

href url有3个类型：
a：绝对url
b：相对url
c:#name 锚点语法

2：跳转到新页面的锚点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.partA{
			width:500px;
			height:1000px;
			background-color: red;
		}
		.partB{
			width:500px;
			height:1000px;
			background-color: yellow;
		}
	</style>
</head>
<body>
<a href="pointB.html#pointB">锚点</a> 
<div class="partA"> 
</div> 
<div>
<a name="point"></a>
<div class="partB">
</div> 
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>pointB.html</title>
	<style>
		.partA{
			width:500px;
			height:1000px;
			background-color: red;
		}
		.partB{
			width:500px;
			height:1000px;
			background-color: yellow;
		}
	</style>
</head>
<body>
<div class="partA"> 
</div> 
<div>
<a name="pointB"></a>
<div class="partB">
</div> 
</body>
</html>

href = url + # name

今天遇到的一个超级大bug
在给Revit-three.js做lod性能优化的时候我遇到一个问题：用什么条件来判断需要调用lod函数？
最早期的想法是查找three.js有没有api提供标记前后2帧发生了变化，用标记做判断条件。遗憾读了几天
object3D、scene、camera、render类几天，没发现自带api提供此功能，自己一时又不知道怎么造轮子，惨！
换个角度看问题，帧发生变化的原因是什么？是用户操作了平移（pan）旋转（rotate）缩放（sacle），而操作又是由事件响应完成的，包括鼠标事件和键盘事件。
细分事件，鼠标事件最常用：左键旋转，滚轮缩放，右键平移。
只要以事件响应作为判断标准即可。
写了个事件响应demo如下,chrome ok,不考虑兼容性问题：

1
2
3
4
5
6
7
8
9
10
11
12
var mousewheel = document.all ? "mousewheel" : "DOMMouseScroll"; 
$(window).bind('mousewheel', function(){
	console.log('mousewheel1');
 });

window.addEventListener( 'mousewheel', mouseWHeelHandler, false);

function  mouseWHeelHandler(){
	console.log('mousewheel2');
}

window.mousewheel = mouseWHeelHandler;

3种方法随意用！

但是迁移到Revit-three.js中失败了。
想了n中可能，走了n个玩路子，最终锁定在：自己写的事件响应被覆盖了。
找到一条引用的js文件：
<script type="text/javascript" src="source-file/OrbitControls.js"></script>
查找源代码发现：

学C++和java的时候经常听到函数覆盖，重载。今天在js里遇到竟然要想了半天，逻辑思维有待提高。
OrbitControls.js没有提供标记的api，于是自己增加了一条api：

1
2
3
4
5
6
7
8
9
this.flag = false;
每个eventHander函数里增加一句：
this.flag = true;
判断逻辑如下：
if（flag）
    {
        flag = false；
        do lod；
    }

至此，毕业设计lod算法已经完成了。至于老陈说用四叉树优化性能，不想去尝试了。现在搞three.js和十几二十年前老前辈们学vb，c一样，没有现成的资料，只有源码，segmentfault，stackoverflow，技术群问问题基本上都没有人回答。

ps，canvas事件响应：
不能通过addEventListener给canvas内部对象绑定事件，因为无论内部多么复杂，canvas都是作为一个整体以帧为时间单位渲染的。

不过想想还挺有趣的。