私はjavascriptライブラリに取り組んでいます。基本的なコードは次のとおりです。
(function(){
var int,
method,
Jist = function(s){
return new Jist.fn.init(s);
};
Jist.fn = Jist.prototype ={
init : function(s){
if(!s){
return this;
}
else{
this.length = 1;
if (typeof s === "object"){
this[0] = s;
}
else if(typeof s === "string"){
var obj;
obj = document.querySelectorAll(s);
this[0] = obj;
this.elem = this[0];
}
return this;
}
},
}
Jist.fn.init.prototype = Jist.fn;
Jist.fn.init.prototype = {
print : function(txt){
for(var i=0; i<this.elem.length; i++) {
this.elem[i].innerHTML = txt;
}
return this;
},
click : function(callback){
for(var i=0; i<this.elem.length; i++) {
this.elem[i].addEventListener("click",callback,false);
}
return this;
},
fadeOut : function(ms) {
var elem = this.elem;
var opacity = 1,
interval = 50,
gap = interval / ms;
function func() {
opacity -= gap;
for(var i=0; i<elem.length; i++) {
elem[i].style.opacity = opacity;
}
if(opacity <= 0) {
window.clearInterval(fading);
for(var i=0; i<elem.length; i++){
elem[i].style.display = 'none';
}
}
}
var fading = window.setInterval(func, interval);
return this;
},
fadeIn : function(ms) {
var opacity = 0,
interval = 50,
gap = interval / ms,
elem = this.elem;
for(var i=0; i<elem.length; i++){
elem[i].style.display = 'block';
elem[i].style.opacity = opacity;
}
function func() {
opacity += gap;
for(var i=0; i<elem.length; i++){
elem[i].style.opacity = opacity;
}
if(opacity >= 1) {
window.clearInterval(fading);
}
}
var fading = window.setInterval(func, interval);
return this;
}
};
window.Jist = window.jist = window.Jis = window.jis = window.Jit = window.jit = window._ = Jist;
})();
そして、ライブラリをテストするために body セクションにあるものは次のとおりです。
<div id="fader"></div>
<input type="button" id="inpt" value="click"></input>
<script>
jist("#inpt").click(function(){
jist("#fader").print("FooBar").fadeOut(1000).fadeIn(1000).print("");
});
</script>
この行jist("#fader").print("FooBar").fadeOut(1000).fadeIn(1000).print("");
は、「FooBar」というテキストを div に配置してからフェードアウトし、次にフェードインして div からテキストを消去することになっています。
しかし、代わりに、フェードアウトが始まり、すぐにフェードインしようとします。これは、すべての関数が順番に実行されるのではなく、同時に実行されるためです。
ライブラリを変更する方法を知っている人はいますか? これは jQuery ライクなライブラリなので、クエリと同じように動作するようにしたいと考えています。
どうもありがとう!