Zepto使用中の注意点(回転)

この間、会社の製品のHTML 5タッチスクリーン版が完成し、開発ではZeptoという有名なDOMオペレーティングライブラリを使用しました.どうしてjQueryじゃないの?jQueryの目標はすべての主流ブラウザと互換性があるため、これはその大量のコードがモバイル側のブラウザに役に立たないか、低効率であることを意味します.Zeptoはモバイルブラウザのみに対して作成されるため、体積が小さく、効率が高く、さらに重要なのは、APIがjQueryを完全に模倣しているため、学習コストも低いことです.
しかし、開発の過程で、私はZeptoがまだ成熟していないことを発見して、その中にいくつかあるいは大きいあるいは小さい“穴”が含まれて、jQueryとの差はやはり明らかで、だから文章の記録の下で書いて、後者に注意することを望んで、本文が書く時Zeptoバージョンは1.0正式版です
どこからZeptoをダウンロードします
この問題はバカに見えますが、公式サイトからダウンロードすればいいのではないでしょうか.しかし、ダウンロードリンクに行の小さな字があることに気づきましたか?
There are more modules; a list of all modules is available in the README.
このREADMEでは、Zeptoソースコードには14のモジュールがあり、公式サイトで提供されている標準版には7つのモジュールしかありません.しかもモバイル開発に重要なtouchモジュール(タッチイベントのサポートを提供)が含まれていないなんて!だから私の提案は、公式サイトからダウンロードするのではなく、Githubからソースコードをダウンロードした後、自分でBuildのバージョンをダウンロードすることで、自分で適切なモジュールを選ぶことができます.例えば、私が選んだモジュールはいくつかあります.

polyfill,zepto,detect,event,ajax,form,fxの7つが標準版に含まれるモジュール

である.

fx_methodsはこのモジュールを持ってから、show() .hide()などいくつかの方法でアニメーションをサポートできます.例えば、.show('fast')

です.

data提供対.data()メソッドの完全なサポート、jQueryのようにメモリオブジェクトで

を格納

assets img要素を除去した後、メモリ

をクリーンアップするための特殊な処理を行います.

selectorのより多くのセレクタのサポートは、

に後述します.

touchタッチイベントのサポート、例えばtapイベント

もしあなたがNodeに対してどのようにBuildを知らないならば、私のバージョンをダウンロードすることができます
clickイベントではなくtapで代用
この推定は広く知られているが,clickイベントには200~300 msの遅延があるため,より迅速な応答のためにZeptoが提供するtapイベントが信用できない場合は,以下のコードでテストすることが望ましい.

var t1,t2;$('#id').tap(function () {
    t1 = Date.now();
});$('#id').click(function () {
    t2 = Date.now();
    alert(t2 - t1);
});

ZeptoによるCSSセレクタのサポート
丁寧に注意して、:text :checkbox :firstなどjQueryでよく使われるセレクタは、Zeptoではサポートされていません!理由は簡単で、jQueryは自分で作成したsizzleエンジンを通じてCSSセレクタをサポートし、Zeptoはブラウザを通じて直接提供されるdocument.querySelectorAllインタフェースである.このインタフェースは標準的なCSSセレクタのみをサポートしていますが、上記のものはjQueryセレクタ拡張に属していますので、このページをよく見て、これらのセレクタに注意してください.
もちろん良いニュースもありますが、上記のselectorモジュールですが、このモジュールがあれば、部分的なjQueryセレクタ拡張をサポートできるのは、以下のように列挙されています.

:visible :hidden

:selected :checked

:parent

:first :last :eq

:contains :has

要素の寸法計算
まずZeptoはいません.innerHeight() .次の4つの方法がありますheight()/.width()の方法も完備していないが、display:noneの要素については、計算されたアスペクトが0であり、これはjQueryでは問題ない.jQueryはこのような要素に対して、まずcssスタイルをposition: "absolute", visibility: "hidden", display: "block"に設定し、アスペクトを計算してから回復するからである.https://github.com/jquery/jquery/blob/master/src/css.js#L460このような特殊な状況に遭遇した場合、jQueryを参照して同様の方法を書くことができます.
.prop()メソッドのトラップ
ある时、私は1つのテキストボックスを読み取り専用にして、このような行$('#text').prop('readonly', true)を书いて、结局死んで仕事をしないで半日探してやっと発见して、正しい书き方はこのように$('#text').prop('readOnly', true)で、もしあなたは意外にも両者の差が见えないならば、それではそっとあなたにヒントを与えます:大きさに注意して书きます!関連ドキュメントをめくってみると、読み取り専用属性の正しいスペルは確かにreadOnlyだったが、jQueryの前のコードは正常に動作していたので、jQueryのソースコードを探してみると、こんな部分があった.https://github.com/jquery/jquery/blob/master/src/attributes.js#L466

jQuery.each([    "tabIndex",    "readOnly",    "maxLength",    "cellSpacing",    "cellPadding",    "rowSpan",    "colSpan",    "useMap",    "frameBorder",    "contentEditable"], function() {
    jQuery.propFix[ this.toLowerCase() ] = this;
});

ここからも分かるように、jQueryの成熟度は本当に超えられない.彼は私たちを甘やかしているからだ......このコードが簡単だと考えて、私は厚かましくパクリしてZeptoにpull requestを提出した.もしあなたたちがこのような無脳な使い方が好きなら、コメントして支持を表すことができる(英語を覚えている)
2013-11-25このPRはすでにMergeによって
.show()のアニメーション効果
fx_がなければmehodsモジュールなら、.show()メソッドはアニメーションをサポートしていませんが、このモジュールがあれば、アニメーションのサポートには小さな問題があります.例えば、このようなHTML

<div style="background:black;opacity:0.7;display:none">
    test</div>

$('div').show('fast')を呼び出すと、アニメーションが完了すると半透明の要素ではなく、Zeptoのために真っ黒で不透明になります.show()アニメーションは簡単に実現され、アスペクトの変化はなく、透明度を0から1に徐々に変化させるため、要素に設定されていた透明度が置き換えられます.この場合、用いることができる.代わりにfadeIn()法を用いる.show()