说, 一个程序员的成长

Posted 2022-12-13 XiaoHuBeiPlus

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

很开心写出了一个功能：

<script>

var whoIsStupid = function ()
alert("你是笨蛋!");
;
</script>
<div οnclick="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>

 

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

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