说, 一个程序员的成长

说, 有一天，一个小白开始coding...

很开心写出了一个功能：

<script>

var whoIsStupid = function (){
alert("你是笨蛋!");
};
</script>
<div onclick="whoIsStupid()">谁是笨蛋</div>

有一天,html和js分离来了...

<script>
var whoIsStupid = function (){
alert("你是笨蛋!");
};

window.onload = function (){
document.getElementById("stupid").onclick = whoIsStupid;
}
</script>
<div id="stupid">谁是笨蛋</div>

需求跑过来了说，点击的时候说对方是笨蛋的同时还要说对方长得像小猪（变态的需求。。。）

var whoIsStupid = function (){
alert("你是笨蛋!");
};

var whoIsPig = function (){
alert("你长得像小猪!");
};

window.onload = function (){
document.getElementById("stupid").onclick = whoIsStupid;
document.getElementById("stupid").onclick = whoIsPig;
}

小白发现原来的“你是笨蛋”被干掉了，并没有达到需求，于是他又写了一套

var whoIsStupid = function (){
alert("你是笨蛋!");
};

var whoIsPig = function (){
alert("你长得像小猪!");
};

window.onload = function (){
var stupid = document.getElementById("stupid");
stupid.attachEvent("onclick", whoIsStupid);
stupid.attachEvent("onclick", whoIsPig);
};

终于搞定了。。。

又有一天，测试说，你这个有兼容问题。。。小白开始修改代码，改改改...

<script>
var whoIsStupid = function (){
alert("你是笨蛋!");
};

var whoIsPig = function (){
alert("你长得像小猪!");
};

window.onload = function (){
var stupid = document.getElementById("stupid");
if(stupid.attachEvent){
stupid.attachEvent("onclick", whoIsStupid);
stupid.attachEvent("onclick", whoIsPig);
}else{
stupid.addEventListener("click", whoIsStupid, false);
stupid.addEventListener("click", whoIsPig, false);
}
};
</script>
<div id="stupid">谁是笨蛋</div>

小白终于解决了这个兼容问题...

小白终会在成长,看到之前写的好low，又封装了一下。。。

<script>
var whoIsStupid = function (){
alert("你是笨蛋!");
};

var whoIsPig = function (){
alert("你长得像小猪!");
};

var addEvent = function(obj, eType, fn , useCapture){
useCapture = useCapture || false;
if(obj.attachEvent){
obj.attachEvent('on'+eType, fn);
}else{
obj.addEventListener(eType, fn, useCapture);
};
};
window.onload = function (){
var stupid = document.getElementById("stupid");
addEvent(stupid, 'click', whoIsStupid);
addEvent(stupid, 'click', whoIsPig);
};
</script>
<div id="stupid">谁是笨蛋</div>

又过了一个月,业务需要，又扩展了一下。。。

<script>
var Funny = function (options){
this.options = options;
};
Funny.prototype.data = {};
Funny.prototype.set_data = function (key, val){
this.data[key] = val;
};
Funny.prototype.get_data = function (key){
return this.data[key];
};
Funny.prototype.popSomething = function (mes){
var options = this.get_data('options');
alert(options[mes]);
};
Funny.prototype.whoIsStupid = function (){
Funny.prototype.popSomething("stupid")
};
Funny.prototype.whoIsPig = function (){
Funny.prototype.popSomething("pig")
};
Funny.prototype.addEvent = function(obj, eType, fn, useCapture){
useCapture = useCapture || false;
if(obj.attachEvent){
obj.attachEvent('on'+eType, fn);
}else{
obj.addEventListener(eType, fn, useCapture);
};
};
window.onload = function (){
var stupid = document.getElementById("stupid");
var options = {
stupid:"你是笨蛋!",
pig:"你长得像小猪!",
};
var kidding = new Funny();
kidding.set_data('options' , options);
kidding.addEvent(stupid, 'click', kidding.whoIsStupid);
kidding.addEvent(stupid, 'click',kidding.whoIsPig);
};
</script>
<div id="stupid">谁是笨蛋</div>

 

代码继续优化中,欢迎贴码。。。

又过了一个月,业务需要，又扩展了一下。。。