{"id":16978774,"url":"https://github.com/srph/klass","last_synced_at":"2025-03-21T22:42:49.061Z","repository":{"id":32152872,"uuid":"35725905","full_name":"srph/klass","owner":"srph","description":":black_nib: Create ES5 JavaScript classes declaratively","archived":false,"fork":false,"pushed_at":"2015-05-17T16:25:24.000Z","size":144,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-26T17:15:49.608Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/srph.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-16T14:03:51.000Z","updated_at":"2021-11-08T00:29:12.000Z","dependencies_parsed_at":"2022-09-03T22:50:17.520Z","dependency_job_id":null,"html_url":"https://github.com/srph/klass","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srph%2Fklass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srph%2Fklass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srph%2Fklass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srph%2Fklass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/srph","download_url":"https://codeload.github.com/srph/klass/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244880550,"owners_count":20525511,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T01:44:10.802Z","updated_at":"2025-03-21T22:42:49.036Z","avatar_url":"https://github.com/srph.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Klass\n\u003e Create ES5 JavaScript classes *declaratively*\n\nIt's painful when you have to write code that's not declarative enough. Well, that's how ES5 is. This library creates an abstraction so you can write classes like in most known OOP languages; no need to deal with prototype pains.\n\nThis is, nothing more or less, a proof of concept; also a *work in progress*.\n\n## What, Why, How?\n\nWe want to create a class named `SessionManager`, an abstraction above a native (or whatevah) session implementaton.\n\n```js\n/**\n * @param {Session} session Session implementation\n */\nfunction SessionManager(options) {\n  // this.options ....\n}\n\nSessionManager.prototype.bag = [];\nSessionManager.prototype.put = function(k, v) { /* .. */ }\nSessionManager.prototype.get = function(k) { /* .. */ }\nSessionManager.prototype.forget = function(k) { /* .. */ }\nSessionManager.prototype.clear = function() { /* .. */ }\n\nvar session = new SessionManager(..);\n```\n\nBut, I think, this is a little more declarative and closer to the ES6 syntax:\n\n```js\nKlass('SessionManager', {\n  bag: [],\n\n  constructor: function(options) {\n  \t// ...\n  },\n\n  put: function(k, v) { },\n  get: function(k) { },\n  forget: function(k) { },\n  clear: function() { },\n});\n\nvar session = new SessionManager(..);\n```\n\n## What about constants and statics?\n\nWell, they're here, too!\n\n```js\nKlass('SomeClass', {\n  constants: {\n    API_PUB_KEY: '...',\n    API_SECRET_KEY: '..'\n  },\n\n  statics: {\n    fn: function() { /* .. */ }\n  }\n});\n\nvar some = new SomeClass(..);\nconsole.log(typeof SomeClass.fn) // =\u003e \"function\"\nconsole.log(typeof some.fn) // =\u003e \"undefined\"\nsome.API_PUB_KEY = 'whatever';\nconsole.log(some.API_PUB_KEY); // =\u003e \"...\"\n```\n\n# But.. wait, where do you hoist the classes?\n\nThey are automatically added to the `this` context (normally, `window`). However, you can set it yourself.\n```js\nKlass('SomeClass', {\n  ..\n}, someObj);\n```\n\nIt's a good practice to set the root to `window` in cases when the class is a public API.\n```js\nKlass('SomeClass', {\n  ..\n}, window);\n```\n\nOr if you would prefer not to hoist the class:\n```js\nvar SomeKlass = Klass('SomeClass', {\n  ..\n}, {});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrph%2Fklass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsrph%2Fklass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrph%2Fklass/lists"}