Extjsを通してJavaScriptを勉強します.
9579 ワード
目次
一、
前言
二、
基礎解説
三、
知識の応用
四、
締め括りをつける
五、
よくある問題
はじめに
JavaScriptの設計が最も優れているのは、その関数の実現であり、ほぼ完璧に近いです.その機能の一つである「クローズド」を紹介します.クローズド「変数ライフサイクルの保存」と「変数の遮断」の特性を利用して、いくつかの強力な機能を優雅に完成できます.また、ExtJSではどのようにこの特性を使うかを紹介します.
二、基礎解説
「クローズド」機能を利用して、オブジェクトを非表示または公開する変数と方法を実現できます.
テストコードは以下の通りです
三、知識の応用
前节の初歩的な说明は闭锁の书き方と机能を说明しました.ExtJsはどのようにクローズド機能を使っているかを見てみます.これもJSという言語を勉強する上で興味があるところです.簡単な知識点をいろいろな種類に書きます.
以下のコードは、extjsの「Ext.Function」類の「createBuffered」方法で、主な機能は「遅延機能付き関数」を生成することです.私は「Ext.Function」類の文脈を簡略化するために、コードの表記の中国語を説明しやすいです.
Ext.Function コードは以下の通りです
コードには三つの知識点があります.
1. 15行の「Aray.prototype.slice.cal(argments,0)」という意味は、argmentsパラメータの種類を配列のタイプに変えて、23行目の「apply」を呼び出しやすくするという意味です.(argmentsがどういう意味なのか分からない人は自分で壁に向かって考えてみましょう.ハハハ.)
2. 16行の中で「me=scope𞓜this」は、if判定の巧妙な書き方です.「scope」が「空」または「偽」の場合は「this」を「me」変数に返します.
3. 18行の中の「timerId」変数はクローズドされているため、彼の「ライフタイム」は延長されています.戻り関数の運転が終了するにつれて終わることはありません.したがって、戻り関数を呼び出すたびに、以前の「timervid」の値を保留することができます.
使用コードは以下の通りです
四、まとめ筆者の判例コードはExtJsから取ったもので、少し分かりにくいかもしれませんが、読めば、JSという言葉の巧みさを感じられます. テキストはクローズドの方法を紹介するだけで、ExtJsのソースコードを紹介して、コードレベルを向上させます. 五、よくある問題の質問:遅延関数の作成には何が必要ですか?実際には使えないと思いますか? 筆者はそうは思いませんが、プロジェクトをするときにはよくこの方法を使います.入力ボックスの内容を変更するときは、AJAXクエリを行います.しかし、入力するたびに検索を行いたくないです.このようにサーバーの資源を消耗します.より良い解決策は入力バッファ期間を設定しています.この入力バッファ期間に文字を入力して検索しません.バッファ期間が過ぎたら、以前に入力したすべての文字を調べますので、遅延バッファ機能付きの関数が必要です. は質問します.これは一体何ですか? はい、詳細はhttp://www.w3school.com.cn/js/pro_jsfunctionsアーグメンントobject.aspにアクセスしてください.アーグメンツは特殊なオブジェクトで、配列に似ていますが、完全に配列ではないので、「アーラy.prototype.slice.cal(argments,0)」という方法で通常の配列に変わります.
一、
前言
二、
基礎解説
三、
知識の応用
四、
締め括りをつける
五、
よくある問題
はじめに
JavaScriptの設計が最も優れているのは、その関数の実現であり、ほぼ完璧に近いです.その機能の一つである「クローズド」を紹介します.クローズド「変数ライフサイクルの保存」と「変数の遮断」の特性を利用して、いくつかの強力な機能を優雅に完成できます.また、ExtJSではどのようにこの特性を使うかを紹介します.
二、基礎解説
「クローズド」機能を利用して、オブジェクトを非表示または公開する変数と方法を実現できます.
テストコードは以下の通りです
1 var bufferObj = (function createFun(fn, interval, scope) {
2 var isExec = 1;// ,
3 return {// set， exec
4 set : function(data) {
5 isExec = data;
6 },
7 exec : function(fn) {
8 if (isExec) {//
9 console.log(" ");
10 fn();
11 } else {
12 console.log(" ");
13 }
14 }
15 };
16 })();三、知識の応用
前节の初歩的な说明は闭锁の书き方と机能を说明しました.ExtJsはどのようにクローズド機能を使っているかを見てみます.これもJSという言語を勉強する上で興味があるところです.簡単な知識点をいろいろな種類に書きます.
以下のコードは、extjsの「Ext.Function」類の「createBuffered」方法で、主な機能は「遅延機能付き関数」を生成することです.私は「Ext.Function」類の文脈を簡略化するために、コードの表記の中国語を説明しやすいです.
Ext.Function コードは以下の通りです
1 var Ext = {};
2 Ext.Function = {
3 /**
4 * ， ，
5 * @param {Function} fn
6 * @param {Number} buffer ( )
7 * @param {Object} [scope=this]
8 * @param {Array} [args]
9 * @return {Function}
10 */
11 createBuffered: function(fn, buffer, scope, args) {
12 var timerId;// ID
13
14 return function() {
15 var callArgs = args || Array.prototype.slice.call(arguments, 0),// “arguments”
16 me = scope || this;// “scope” "this"
17
18 if (timerId) {// ，
19 clearTimeout(timerId);
20 }
21
22 timerId = setTimeout(function(){//
23 fn.apply(me, callArgs);//
24 }, buffer);
25 };
26 }
27 };コードには三つの知識点があります.
1. 15行の「Aray.prototype.slice.cal(argments,0)」という意味は、argmentsパラメータの種類を配列のタイプに変えて、23行目の「apply」を呼び出しやすくするという意味です.(argmentsがどういう意味なのか分からない人は自分で壁に向かって考えてみましょう.ハハハ.)
2. 16行の中で「me=scope𞓜this」は、if判定の巧妙な書き方です.「scope」が「空」または「偽」の場合は「this」を「me」変数に返します.
3. 18行の中の「timerId」変数はクローズドされているため、彼の「ライフタイム」は延長されています.戻り関数の運転が終了するにつれて終わることはありません.したがって、戻り関数を呼び出すたびに、以前の「timervid」の値を保留することができます.
使用コードは以下の通りです
1 var run = function(data) {
2 alert(" ");
3 alert(" :" + data);
4 };
5 var bufferFn = Ext.Function.createBuffered(run, 3000);
6 bufferFn("JavaScript1");// ， 3 ，
7 bufferFn("JavaScript2");// ， 3 ，
8 bufferFn("JavaScript3");// ， 3 ，
9
10 setTimeout(function() {// 4
11 bufferFn("JavaScript4");// ，
12 }, 4000);四、まとめ