Detaillierte Erläuterung von Javascript-Funktionsmodulen, Kaskadierungs-, Anwendungs- und Speichernutzungsbeispielen

Ein Modul ist eine Funktion oder ein Objekt, das eine Schnittstelle bereitstellt, aber Status und Implementierung verbirgt.
Allgemeine Form: Eine Funktion, die private Variablen und Funktionen definiert, verwendet Schließungen, um privilegierte Funktionen zu erstellen, die auf private Variablen und Funktionen zugreifen können, und gibt diese privilegierten Funktionen schließlich zurück oder speichert sie an einem Ort, an dem auf sie zugegriffen werden kann.

Function.prototype.method = function(name,func){
    this.prototype[name] = func;
    return this;
};
String.method("deentityify",function(){
    var entity = {
        quot : '"',
        lt   : &#39;<&#39;,
        gt   : &#39;>&#39;
    };
    return function(){
        return this.replace(/&([^&;]+);/g, function(a, b){ // 怎样知道a、b的值，了解正则表达式
            var r = entity[b];
            return typeof r === "string" ? r : a;
        });
    };
}());
alert("<">".deentityify()); // 测试：<">

Hinweis: Der Modulmodus wird normalerweise in Kombination mit dem Singleton-Modus von JavaScript verwendet. Der Attributwert des Objekts kann ein numerischer Wert oder ein sein Funktion, und der Attributwert befindet sich im Objekt. Während der Lebensdauer des Objekts treten keine Änderungen auf.

Kaskadierung (Kettenoperation)
Bei einigen Methoden, die keinen Wert zurückgeben, geben wir diesen anstelle von undefiniert zurück, dann können wir mit der Kaskadierung (Kettenoperation) beginnen, um das Objekt zu bedienen. Wie folgt:

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");

Anwenden
Die sogenannte Anwendung besteht darin, die Funktion mit den ihr übergebenen Parametern zu kombinieren, um eine neue Funktion zu generieren. Beispiel: Der folgende Code definiert eine Funktion add (), die eine neue Funktion zurückgeben und den Parameterwert an die neue Funktion übergeben kann, um kontinuierliche Additionsoperationen zu erreichen.

// 第一种方式：
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(&#39;curry&#39;, 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

Speicher
Funktionen können Objekte verwenden, um sich die Ergebnisse früherer Vorgänge zu merken und so unnötige Vorgänge zu vermeiden. Diese Optimierung wird als Auswendiglernen bezeichnet.

var fibonacci = function(){
    var mome = [0,1]; // 存放计算后的数据
    var fib = function(n){
        var result = mome[n];
        // 如果不存在被计算过的数据，则直接计算。然后在将计算结果缓存
        if(typeof result !== 'number'){
            result = fib(n-1) + fib(n-2);
            mome[n] = result;
        }
        return result;
    };
    return fib;
}();
for(var i=0; i<=10; i++){
    document.writeln("// " + i + ": " + fibonacci(i) + "<br/>");
}
//==========================
// 创建一个具有记忆的函数
//==========================
var memoizer = function(memo, fundamental){
    var shell = function(n){
        var result = memo[n];
        if(typeof result !== "number"){
            result = fundamental(shell, n);
            memo[n] = result;
        }
        return result;
    };
    return shell;
};
// 通过记忆函数memoizer完成斐波那契数列
var fibonacci = memoizer([0,1], function(shell, n){
    return shell(n-1) + shell(n-2);
});
// 通过记忆函数memoizer完成阶乘
var factorial = memoizer([1,1], function(shell, n){
    return n * shell(n-1);
});
for(var i=0; i<=15; i++){
    document.writeln("// " + i + ": " + factorial(i) + "<br/>");
}

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Javascript-Funktionsmodulen, Kaskadierungs-, Anwendungs- und Speichernutzungsbeispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!