代码之家 › 专栏 › 技术社区 › CuriousDeveloper

将静态函数(IIFE)包装到原型中

iife class javascript

CuriousDeveloper · 技术社区 · 7 年前

var Helper = (function () {
    return {
        el: null
        init: function(el) {
            this.el = el;
        }
        doStuff: function(){
            // Modify this.el in someway
        }
    };
}());

那么我就这么做 Helper.init(el) 页面加载后运行 Helper.doStuff() 当我需要它的时候。

我的第一个想法就是让它成功 Helper.init([el1,el2,el3]) 让它在一系列元素上工作,但我可能想分别处理每个元素。

我在想,我可以直接获取函数,而不是立即执行它,然后以某种方式将该函数存储到原型函数中,并以这种方式使用它。

寻找如何以最少的代码更改来最好地实现这一点的想法。

3 回复 | 直到 7 年前

T.J. Crowder 7 年前

我认为最好的方法可能是把助手IILife变成一个带有原型的“类”,但我有点时间紧迫。。。

我在想,我可以直接获取函数,而不是立即执行它,然后以某种方式将该函数存储到原型函数中,并以这种方式使用它。

寻找如何以最少的代码更改来最好地实现这一点的想法。

类模式只是JavaScript中的一种模式,您可以使用它 Helper 就像它是其他对象的原型一样,它符合您的“最小更改”需求。只需使用 Object.create

var helper1 = Object.create(Helper);
helper1.init(el);
var helper2 = Object.create(Helper);
helper2.init(el2);
var helper3 = Object.create(Helper);
helper3.init(el3);

// ...
helper1.doStuff();
helper2.doStuff();
helper3.doStuff();

如果您添加 return this; init ,可以更简洁:

var helper1 = Object.create(Helper).init(el);
var helper2 = Object.create(Helper).init(el2);
var helper3 = Object.create(Helper).init(el3);

// ...
helper1.doStuff();
helper2.doStuff();
helper3.doStuff();

实例:

var Helper = (function () {
    return {
        el: null,
        init: function(el) {
            this.el = el;
            return this;
        },
        doStuff: function(){
            this.el.style.color = "green";
            this.el.style.fontWeight = "bold";
        }
    };
}());
var helper1 = Object.create(Helper).init(document.getElementById("el1"));
var helper2 = Object.create(Helper).init(document.getElementById("el2"));
var helper3 = Object.create(Helper).init(document.getElementById("el3"));

// ...
setTimeout(function() {
  helper1.doStuff();
}, 400);
setTimeout(function() {
  helper2.doStuff();
}, 800);
setTimeout(function() {
  helper3.doStuff();
}, 1200);

<div id="el1">el1</div>
<div id="el2">el2</div>
<div id="el3">el3</div>

帮手 直接在第一个 el ,进一步减少代码更改,尽管我不建议这样做。

或者,将其包装在一个返回它的函数中(在这里,我还包括了对 初始化

function getHelper() {
    var Helper = (function () {
        return {
            el: null,
            init: function(el) {
                this.el = el;
                return this; // <============== Added
            },
            doStuff: function(){
                // Modify this.el in someway
            }
        };
    }());
    return Helper;
}

然后,在你的三个地方,你需要它:

var helper1 = getHelper().init(el);
var helper2 = getHelper().init(el2);
var helper3 = getHelper().init(el2);

// ...
helper1.doStuff();
helper2.doStuff();
helper3.doStuff();

旁注:无论如何,你不需要IILife,除非你有一些东西在对象初始值设定项之外没有显示出来。。。

-1

MysterX 7 年前

function Helper (el) {
    this.el = el;
}
Helper.prototype = {        
    doStuff: function(){
            // Modify this.el in someway
    }
};

var helper1 = new Helper(el1);
var helper2 = new Helper(el2);
var helper3 = new Helper(el3);

helper1.doStaff();
helper2.doStaff();
helper3.doStaff();

-1

Fefux 7 年前

另一种方法是从 arguments 对象:

var Helper = (function () {
    return {
        el: null
        init: function() {
            this.el = Array.from(arguments)
        }
        doStuff: function(){
            this.el.forEach(el => {
                // Modify el in someway
            });
        }
    };
}());