ES6 Model
How do I make an es6 model?
The javascript gods have pulled the rug out from under me. Object.observe is now deprecated, and I need a simple model that will dispatch change events. This is it.. What is a es6 model? How do you make a es6 model? This script and codes were developed by Josh Beckwith on 29 August 2022, Monday.
ES6 Model - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ES6 Model</title>
</head>
<body> <h1>Nothing to see here... check out the js!</h1> <script src='https://cdn.rawgit.com/Olical/EventEmitter/master/EventEmitter.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
ES6 Model - Script Codes JS Codes
'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/* Simple model that supports shallow property change watchers
*/
var Model = function (_EventEmitter) { _inherits(Model, _EventEmitter); function Model(obj) { _classCallCheck(this, Model); var _this = _possibleConstructorReturn(this, _EventEmitter.call(this)); _this._properties = Object.assign({}, obj); // clone just to be safe Object.keys(_this._properties).forEach(function (key) { _this.define(key, _this._properties[key]); }); return _this; } Model.prototype.toJSON = function toJSON() { return this._properties; }; Model.prototype.define = function define(key, defaultValue) { this._properties[key] = defaultValue; Object.defineProperty(this, key, { get: function get() { return this._properties[key]; }, set: function set(newValue) { // ignore if value is unchanged // only works for primitives if (newValue === this._properties[key]) return; var oldValue = this._properties[key]; this._properties[key] = newValue; model.emit(key, newValue, oldValue, key); }, enumerable: true }); }; return Model;
}(EventEmitter);
/* usage
*/
var model = new Model({ str: 'hello', obj: { a: 'a' // NOTE: unwatchable }, subModel: new Model({ a: 'a' // watchable }), bool: true, num: 123.4567, arr: [1, 2, 3, 4, 5]
});
console.log(model);
var onChange = function onChange(newval, oldval, key) { console.log(key, 'newval: ' + newval + ', oldval: ' + oldval);
};
model.on('str', onChange);
model.str = 'asdf';
model.str += 'asdf';
model.subModel.on('a', onChange);
model.subModel.a = 'A';
model.on('arr', onChange);
model.arr = model.arr.concat('extra');
Developer | Josh Beckwith |
Username | positlabs |
Uploaded | August 29, 2022 |
Rating | 3 |
Size | 3,244 Kb |
Views | 28,336 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
JPG SMASH | 575,800 Kb |
Time Dilation | 3,166 Kb |
JitterSCSS | 4,712 Kb |
HammerJS Test | 1,767 Kb |
Three orbiter | 3,490 Kb |
Temporalis | 1,842 Kb |
Joystick Spinner | 1,788 Kb |
Youtube 360 player sandbox | 2,195 Kb |
Youtube iframe player sandbox | 2,171 Kb |
A Pen by Josh Beckwith | 2,313 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Twitch.tv API | Ryzokuken | 2,618 Kb |
A Pen by Shidhin | Shidhincr | 5,015 Kb |
Css3 slide | Nakome | 3,190 Kb |
A Pen by Alex Bergin | Abergin | 3,347 Kb |
Simple jQuery Slider | Jurbank | 2,874 Kb |
WRENCH - STAFF | Lolita-adams | 1,608 Kb |
Jquery 2d character movement | Drewtadams | 4,291 Kb |
Slim Grid SASS SCSS v3.2 | Thesturs | 4,709 Kb |
JQuery exercise | Brian-baum | 3,780 Kb |
Video mute | Leon9208 | 2,131 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!