一段偶合,拜老张为师。
老张说,我带了很多徙弟,没有一个出师的,不管是男的还是女的,老的还是少的 。
我心里想着我会出师的,当然也是我觉得我至少要突破给自己定下的标准。
老张说,javascript比较复杂,记得要坚持。
最后,老张说,我每次教徙弟,第一课作业都是让徙弟实现一个高宽都为100px 的div 的拖动,不能抄网上的。
于是我开始动工了,但我是一头雾水的,只能网上找例子。
在我搞清楚大量函数方法,变量之后,我凭着自己的记忆跟少少理解照班了例子,其实不算是我自己写的吧。
<script type="text/jscript">
var dragger = document.getElementById('drag');
dragger.onmousedown = function(a){
if(!a)a=window.event;//浏览器事件对象兼容
var ax = a.layerX?a.layerX:a.offsetX;//如果 bbb.layerX 没有值,就取a.offsetX;的位置
var ay = a.layerY?a.layerY:a.offsetY;
dragger.onmousemove= function(b){
if(!b)b=window.event;
dragger.style.left = b.clientX - ax + 'px';
dragger.style.top = b.clientY - ay + 'px';
}
dragger.onmouseup = function(){
dragger.onmousemove = null;
}
}
//onMouseover当鼠标经过的时候,触发 = 后面的脚本函数
//onMouseout 当鼠标离开 。。
//onMouseUP 当鼠标 按下又抬起。。。
//onmousemove 当鼠标移动。。
//onmousedown 当鼠标按下时。。
</script>
忐忑的发给老张,他竟然说就要这么简单的,然后修改了让我分析出来说会有很大的提高。
onload = function(){
var d=document,g="getElementById";
var drag = d[g]("drag");
var me = this;
drag.onmousedown = function(event){
event = event || me.event;
var ax = event.layerX?event.layerX:event.offsetX;
var ay = event.layerY?event.layerY:event.offsetY;
d.onmousemove = function(event){
event = event || me.event;
var dx = event.clientX;
var dy = event.clientY;
drag.style.left = dx - ax + 'px';
drag.style.top = dy - ay + 'px';
}
d.onmouseup = function(){
this.onmousemove = null;
this.onmouseup = null;
}
}
}
解释:
1:其实js 基于window 也就是说大家都是基于window 那好办了 。window 省掉不写了 比如你alert,其实是window.alert 。
2:在一个页面就只一次定义window.onload,多次定义呢 会不会覆盖前面的 ?会 所以可以写一个这样的方法
var a = window.onload;
window.onload = funciton(){
if(typeof a == "function"){a();}
3:函数式编程有一个等值公设,也就是说把标准的变量名,变成一个简短的;
4:|| 是python 语法 aa && bb || cc 如果aa 为真 则执行bb 否则执行cc , 跟三元运算符不同,?:一定要三个一起;
5:var me = this; this多用于函数内部,它永远指向调用他的那个对象;
6:drag.onmousedown这个事件要包含着里边2个事件呢
这个事件的作用域,然后鼠标放开后要把事件全放掉 ,这样的话做大项目标就不会有偶合了。
老张问我懂了没,其实我头还是晕晕的,经过一轮知识的轰炸,我要慢慢消化.....
老张后来说,javascript 核心的就是二个链表,作用域链表,和原型链表,在这二个链表的基础上,产生了,闭包,函数式 其实没什么高深的东西 。
我期待着,有一天我回过头来看我学习javascript的过程,也跟其他人说:其实没什么高深的东西!
感谢师傅老张, 加油哇 lilili ~