jQuery框架实例代码分析(2)

在jQuery中使用了一个工厂方法来创建一个实例，这个方法位于jQuery.prototype中, 现在我们重新来定义Shaka.prototype, 给它添加一个init方法用于返回一个Shaka的实例, 并且把Shaka的构造函数稍稍改变一下：

OK，现在我们的小宝宝变成大一点的宝宝了，打个招呼先：

运行代码框
<script type="text/javascript"> var Shaka = function(age) { return new Shaka.fn.init(age); }; Shaka.fn = Shaka.prototype = { init: function(age) { this.age = age; return this; }, sayHello: function() { alert('I am a little big baby, my age is ' + this.age + ' years old.'); } }; Shaka.fn.init.prototype = Shaka.fn; Shaka(2).sayHello(); </script>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

嗯，好象有点样子了，但是光这样还不行，来点实际的, 我们在新框架中实现jquery里val()方法的部分功能，这个方法不加参数调用时返回指定ID的input的值，加参数时为设定这个input的值，与jQery一样，我们约定使用id来查找对象时使用"#"符号。把要查找的目标ID作为构造函数的参数传进去，我们给Shaka.prototype添加一个val()方法, 给Shaka添加一个selector的属性用于存储我们要查找的目标。

Shaka.fn = Shaka.prototype = {
       init: function(selector) { this.selector = selector; return this; },
       val: function(newValue) { //方法实现代码 }
};
var Shaka = function(selector) { return new Shaka.fn.init(selector); };

运行代码框
<form method="post" action="" name="myform"> 我几岁了? <br /> <input id="myInput" type="text" value="Hello world!" size="50" /> </form> <script type="text/javascript"> var Shaka = function(selector) { return new Shaka.fn.init(selector); }; Shaka.fn = Shaka.prototype = { init: function(selector) { if(selector) this.selector = selector; return this; }, val: function(newValue) { //start val function body if(!(this.selector && this.selector.indexOf('#') == 0 && this.selector.length != 1)) return; //简单地判断传入值非法, 最好使用正则 var id = this.selector.substring(1); var obj = document.getElementById(id); if(obj)//如果对象存在 { if(newValue == undefined) return obj.value;//获取目标对象的值. obj.value = newValue;// 将目标对象的value属性设置为newValue. return this; //为了使方法可以连续调用。 } //end val function body } }; Shaka.fn.init.prototype = Shaka.fn; alert('object old value is '+Shaka('#myInput').val()); alert(Shaka('#myInput').val('I am 3 years old now!').val()); </script>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]