モジュールは、インターフェイスを提供するが、状態と実装を隠す関数またはオブジェクトです。
一般形式: プライベート変数と関数を定義する関数。クロージャを使用してプライベート変数と関数にアクセスできる特権関数を作成し、最終的にこの特権関数を返すか、アクセスできる場所に保存します。
Function.prototype.method = function(name,func){ this.prototype[name] = func; return this; }; String.method("deentityify",function(){ var entity = { quot : '"', lt : '<', gt : '>' }; return function(){ return this.replace(/&([^&;]+);/g, function(a, b){ // 怎样知道a、b的值,了解正则表达式 var r = entity[b]; return typeof r === "string" ? r : a; }); }; }()); alert("<">".deentityify()); // 测试:<">
注: モジュール パターンは、通常、シングルトン パターンと組み合わせて使用されます。JavaScript のシングルトン パターンは、オブジェクトの属性値に数値または関数を使用できますが、属性値には使用できません。オブジェクトのライフサイクル中に存在し、変更が発生します。
カスケード (連鎖操作)
値を返さない一部のメソッドの場合、未定義の代わりにこれを返し、オブジェクトに対するカスケード (連鎖) 操作を開始できます。以下の通り:
var $ = function(id){ var obj = document.getElementById(id); obj.setColor = function(color){ this.style.color = color; return this; }; obj.setBgColor = function(color){ this.style.backgroundColor = color; return this; // 返回this对象,启动级联 }; obj.setFontSize = function(size){ this.style.fontSize = size; return this; }; return obj; }; $("test").setColor("red") .setFontSize("30px") .setBgColor("blue"); // 改进后的代码: (function(id){ var _$ = function(id){ this.element = document.getElementById(id); }; _$.prototype = { setColor : function(color){ this.element.style.color = color; return this; }, setBgColor : function(color){ this.element.style.backgroundColor = color; return this; }, setFontSize : function(size){ this.element.style.fontSize = size; return this; } }; // 添加到window原型链中 window.$ = function(id){ return new _$(id); }; })(); $("test").setColor("red") .setFontSize("30px") .setBgColor("blue");
Apply
いわゆるアプリケーションとは、関数とそれに渡されたパラメーターを組み合わせて新しい関数を生成することです。例: 次のコードは add() 関数を定義します。この関数は新しい関数を返し、パラメーター値を新しい関数に渡して連続加算操作を実現します。
// 第一种方式: var add = function(a){ return function(b){ return a + b; } }; alert(add(1)(2)); // 3 // 第二种方式:用arguments实现 var add = function(){ var arg = arguments; return function(){ var sum = 0; for(var i=0; i<arg.length; i++){ sum += arg[i]; } for(i=0; i<arguments.length; i++){ sum += arguments[i]; } return sum; } }; alert(add(1,2,3)(4,5,6)); // 21 // 第三种方式:通过一个套用方法(curry)实现 var add = function(){ var sum = 0; for(var i=0; i<arguments.length; i++){ sum += arguments[i]; } return sum; }; // 添加方法到Function的原型链上 Function.prototype.method = function(name, func){ this.prototype[name] = func; return this; }; // 套用方法 Function.method('curry', function(){ // 通过数组Array的slice方法,使得arguments也具有concat方法 var slice = Array.prototype.slice, args = slice.apply(arguments), that = this; return function(){ return that.apply(null, args.concat(slice.apply(arguments))); }; }); alert(add.curry(1,2)(3,4)); // 10
メモリ
関数はオブジェクトを使用して以前の操作の結果を記憶し、それによって不必要な操作を回避できます。この最適化は記憶と呼ばれます。
以上がJavaScript関数モジュール、カスケード、アプリケーション、メモリ使用例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。