[英]Convert an ES5 IIFE in ES6, OOP Javascript programming
I Need to refactor an IIFE in ES6. 我需要在ES6中重构IIFE。 In ES6 let and const have a block scope, so I really need an IIFE in ES6? 在ES6中,let和const具有块作用域,因此我真的需要ES6中的IIFE吗? This is the ES5 version of the code: 这是代码的ES5版本:
var oojs = (function(oojs) { var createToolbarItems = function(itemElements) { var items = []; [].forEach.call(itemElements, function(el, index, array) { var item = { toggleActiveState: function() { this.activated = !this.activated; } }; Object.defineProperties(item, { el: { value: el }, enabled: { get: function() { return !this.el.classList.contains('disabled'); }, set: function(value) { if (value) { this.el.classList.remove('disabled'); } else { this.el.classList.add('disabled'); } } }, activated: { get: function() { return this.el.classList.contains('active'); }, set: function(value) { if (value) { this.el.classList.add('active'); } else { this.el.classList.remove('active'); } } } }); items.push(item); }); return items; }; oojs.createToolbar = function(elementId) { var element = document.getElementById(elementId); var items = element.querySelectorAll('.toolbar-item'); return { items: createToolbarItems(items) } }; return oojs; }(oojs || {}));
What is the best way to translate this code in ES6? 在ES6中翻译此代码的最佳方法是什么? I tried many solution but I miss something, and I get an error: oojs is not defined
. 我尝试了许多解决方案,但我错过了一些东西,但出现错误: oojs is not defined
。
Maybe I can use a Class instead? 也许我可以改用Class? As you can see from the code I'm writing a Toolbar API in a OOP way (I think...) 从代码中可以看到,我正在以OOP方式编写工具栏API(我认为...)
Thanks for any help 谢谢你的帮助
EDIT: Thanks to georg, I try to refactor my code using classes. 编辑:感谢georg,我尝试使用类来重构我的代码。 This is the new ES6 version: 这是新的ES6版本:
class Toolbar { constructor(elementId) { this.elementId = elementId; } get items() { const element = document.getElementById(this.elementId); return element.querySelectorAll(".toolbar-item"); } createToolbarItems() { return [...this.items].map(el => new ToolbarItem(el)); } } class ToolbarItem { constructor(el) { this.el = el; } get enabled() { return !this.el.classList.contains('disabled'); } set enabled(value) { if (value) { this.el.classList.remove('disabled'); } else { this.el.classList.add('disabled'); } } get activated() { return this.el.classList.contains('active'); } set activated(value) { if (value) { this.el.classList.add('active'); } else { this.el.classList.remove('active'); } } toggleActiveState() { this.activated = !this.activated; } } // const toolbar = new Toolbar('myToolbar'); // const toolbarItems = toolbar.createToolbarItems();
EDIT: please check if is the right way to write this code, I'm pretty new to ES6 编辑:请检查是否是编写此代码的正确方法,我是ES6的新手
Thanks again 再次感谢
You can start by factoring out the toolbar item code ( var item
and below): 您可以从分解工具栏项目代码( var item
及以下)开始:
class ToolbarItem
{
constructor(element) {
....
}
}
Now, decide if you want to keep enabled
and activated
as properties or refactor them to explicit methods like isEnabled
and setEnabled
. 现在,确定是否要保持enabled
和activated
为属性,或将它们重构为显式方法,例如isEnabled
和setEnabled
。 In the former case it would be, 在前一种情况下,
class ToolbarItem {
get enabled() {
...
}
set enabled(value) {
...
}
}
while ordinary methods can be defined like this: 普通方法可以这样定义:
class ToolbarItem {
isEnabled() {
...
}
setEnabled(value) {
...
}
}
Once you get this sorted out, replace your item initialization code with items.push(new ToolbarItem(el))
and test. 解决后,将您的商品初始化代码替换为items.push(new ToolbarItem(el))
并进行测试。
Hope this helps you getting started, good luck! 希望这可以帮助您入门,祝您好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.