手書きJQueryのフレームワークの実現
10058 ワード
JQueryのメリットクイックハンド(学習コストが低い) 開発効率が高い(セレクタ、一括操作DOM、チェーン型操作…) 一連のパッケージ(アニメーション、ajax) ブラウザ互換(1.xバージョン互換IE 6、7、8) JQuery 1.11.3.js(1.xクラシックバージョン) 性能が悪い(ソースファイルがやや大きい) JQuery 2.2.4(2.xクラシックバージョン) 性能がやや良い(ソースファイルがやや小さい) HTML 5の実装ではない 2.xバージョンは1.xバージョンでは、APIは下向きに互換性があります 2.xバージョン比1.xバージョンのパフォーマンスは IE 8および以下のバージョンではHTML 5はサポートされていないため、2.xバージョン放棄互換
自分のjQueryを実現
ステップ1:分析
ステップ2:コンストラクタ関数と一般関数およびプロトタイプ(forサイクルが多すぎて効率が低下)
スタック(最小)
ヒープ(最大)
プール
Proxy
function(コンストラクタ関数)
0-9、a-z、A-Z、各種記号
X(なし)
function(一般関数)
ステップ3:改善プログラミングの最も基本的な考え方:コード多重
ステップ4:継続的な改善
ステップ5:継続的な改善
そうですか.何か足りないものがあるのか.
注意してください.次の書き方はあなたの観点を覆す可能性があります.
div.animate({left: 200}, 1000)バージョン2.2.4以降のコンパイルではエラーは報告されませんが、アニメーション効果はありません(すなわち、APIが下に互換性があります)自分のjQueryを実現
ステップ1:分析
this is span
this is first div
this is second div// ： ？
$(".my-div")
// ， ？
$(".my-div").css("color","red")
$(".my-div").html("--------------")//
//
// ID
document.getElementById()
//
.getElementsByTagName()
// name
.getElementsByName()
// selector （ 、 、HTML5 ）
.querySelectorAll()// mineJQuery
var $ = function(selector){
// $
return document.querySelectorAll(selector)
// return [div.my-div, div.my-div]
// ， .css ？
// for ， 。
for (var i = 0; i < $(".my-div").length; i++) {
$(".my-div")[i].style.color = "red";
}
// jQuery
}ステップ2:コンストラクタ関数と一般関数およびプロトタイプ(forサイクルが多すぎて効率が低下)
// new （ ）
// Proxy
// function
var Proxy = function(selector){
// this ？ ， ！
// dom this.doms
this.doms = document.querySelectorAll(selector)
};
//
Proxy.prototype = {
css: function(style, value){
for(var i = 0;i < this.doms.length;i++){
this.doms[i].style[style] = value;
}
// ？ 。
// ， Proxy.prototype （ a.b.c.d）
return this;
},
html:function(html){
for(var i = 0;i < this.doms.length;i++){
this.doms[i].innerHTML = html;
}
return this;
}
};
//
// new ， （Proxy） ， prototype
var p = new Proxy();
var $ = function(selector){
return new Proxy(selector);
}
// ， ！
// ， for ， ？ //PS.----------------------------------------
//
// function（ ， ）
// （ ）
var func = function(){
var a;
var b = 10;
a = 20;
}
//
func();スタック(最小)
ヒープ(最大)
プール
Proxy
function(コンストラクタ関数)
0-9、a-z、A-Z、各種記号
X(なし)
function(一般関数)
ステップ3:改善
Proxy.prototype = {
// ： ， each，
each: function(callback){
for(var i = 0;i < this.doms.length;i++){
// call ： Proxy
// i => index, this.doms[i] => object
callback.call(this, i, this.doms[i]);
}
},
css: function(style, value){
this.each(function(index, object){
object.style[style] = value;
})
// ， Proxy.prototype （ a.b.c.d）
return this;
},
html:function(html){
this.each(function(index, object){
object.innerHTML = html;
})
return this;
}
};
// ： js ，var Proxy = function(){}
// jQuery
// ： jQuery Proxy
// ？ステップ4:継続的な改善
//
var $ = jQuery = (function(){
var Proxy = function(selector){
this.doms = document.querySelectorAll(selector)
};
Proxy.prototype = {
// ： ， each，
each: function(callback){
for(var i = 0;i < this.doms.length;i++){
// call ： Proxy
callback.call(this, i, this.doms[i]);
}
},
css: function(style, value){
this.each(function(index, object){
object.style[style] = value;
})
// ，mu'di'shi Proxy.prototype （ a.b.c.d）
return this;
},
html:function(html){
this.each(function(index, object){
object.innerHTML = html;
})
return this;
}
};
// return
return function(selector){
return new Proxy(selector);
}
})();
// ？
// ：console.log($(..)) ==> Proxy {doms: NodeList[..]} ， ， jQuery 。
// ？
// $(..).length ， jQuery ， 。
// ？ステップ5:継続的な改善
// Proxy length
var Proxy = function(selector){
this.doms = document.querySelectorAll(selector);
this.length = this.doms.length;
};
// ， ， 。
// ，jQuery ， length ， ， ， 。
// var $ = JQuery = (function(){
//
function markArray(selector) {
var arr = document.querySelectorAll(selector);
return arr;
// ， ， jQuery ？
}
return function(selector) {
return markArray(selector);
}
})()
そうですか.何か足りないものがあるのか.
var $ = JQuery = (function(){
//
function markArray(selector) {
var arr = document.querySelectorAll(selector);
// console.log(arr.constructor)
// native code native code ？
// ， C ， java JNI C
// ， NodeList ，
// NodeList.prototype.html = function(html){alert(html)}
// arr ， ！
// ，
return arr;
}
NodeList.prototype.each = function(callback) {
// this.length， ？
for (var i = 0; i < this.length; i++) {
callback.call(this, i ,this[i])
}
}
NodeList.prototype.html = function(html) {
this.each(function(index, object) {
object.innerHTML = html;
})
}
return function(selector) {
return markArray(selector);
}
})()
// ， ， ， ， // ， ！
var $ = JQuery = (function(){
//
function markArray(selector) {
var arr = document.querySelectorAll(selector);
return arr;
}
NodeList.prototype = {
each: function(callback) {
for (var i = 0; i < this.length; i++) {
callback.call(this, i ,this[i])
}
},
html: function(callback) {
this.each(function(index, object) {
object.innerHTML = html;
})
}
}
return function(selector) {
return markArray(selector);
}
})()
// ， ， NodeList native code ，native code ， NodeList ， 。
// ？注意してください.次の書き方はあなたの観点を覆す可能性があります.
//
var $ = JQuery = (function(){
function markArray(selector) {
var arr = document.querySelectorAll(selector);
return arr;
}
// ：
var $ = function (selector) {
return markArray(selector)
}
//
$.extend = function(target) {
// ？
// for
// 1 ？
// arguments ， arguments ， ， NodeList ，
for (var i = 1; i < arguments.length; i++) {
//
for(var prop in arguments[i]) {
//
target[prop] = arguments[i][prop]
}
}
// ruturn $.fn
return target;
}
// ： NodeList ， ，
// ， ， ， ， ，
// (target,exd1,exd2,exd3) exd1,exd2,exd3 target
// target return ， target NodeList
// $.fn
$.fn = $.extend(NodeList.prototype, {
each: function(callback) {
for (var i = 0; i < this.length; i++) {
callback.call(this, i ,this[i])
}
// ， return this， each return ， return
return this;
},
html: function(callback) {
return this.each(function(index, object) {
object.innerHTML = html;
})
}
})
return $;
})()// jQuery ， $.fn jQuery ， jQuery
// jQuery ：
$.fn.altr = function(){
alert(1);
}
$(".my-div").altr();
// ， ， ？
// $.fn NodeList.prototype ， 。
// console.log($.fn === NodeList.prototype)
// $(function(){}) ， ，
var $ = function (selector) {
if (typeof selector === "function") {
window.onload = selector
} else {
return markArray(selector);
}
}