This document provides an opinionated list of code conventions and patterns for writing classes in modern JavaScript.
The aim is to establish a contract between the Consumer, the Provider, and developers, focusing on intention. Some property types have a stronger contract than others.
There are six categories of property types that a class can have: public, private, read-only, protected, scoped, and immutable.
[!NOTE]
| <!doctype html> | |
| <html> | |
| <div> | |
| <button>click A</button> | |
| <button>click B</button> | |
| </div> | |
| <output></output> | |
| <script> | |
| let buttons = document.querySelector("div"); | |
| let output = document.querySelector("output"); |
| function RulersHighlighter2(highlighterEnv) { | |
| CanvasHighlighter.call(this, highlighterEnv); | |
| } | |
| RulersHighlighter2.prototype = extend(CanvasHighlighter.prototype, { | |
| typeName: "RulersHighlighter", | |
| textStep: 100, | |
| graduationStep: 5, | |
| stepScale: 1, |
| JPM [info] Starting jpm test on addon-sdk | |
| Creating XPI | |
| JPM [info] XPI created at /var/folders/tx/91xwh51562l5_4xcqjst9bvw0000gn/T/@addon-sdk-0.1.18.xpi (1173ms) | |
| Created XPI at /var/folders/tx/91xwh51562l5_4xcqjst9bvw0000gn/T/@addon-sdk-0.1.18.xpi | |
| JPM [info] Creating a new profile | |
| Shumway is registered | |
| Running tests on Firefox 42.0a1/Gecko 42.0a1 (Build 20150805030208) ({ec8030f7-c20a-464f-9b0e-13a3a9e97384}) under darwin/x86_64. | |
| console.error: addon-sdk: | |
| JPM [error] Message: TypeError: FakeCu is not a constructor | |
| Stack: |
| function timespan(start, end) { | |
| if (typeof end === "undefined") { | |
| end = start; | |
| start = Date.now(); | |
| } | |
| if (start !== null && typeof start === "object" && start.getTime) { | |
| start = start.getTime(); | |
| } |
| let word = "Mozilla"; | |
| // set the walker for non-empty text node | |
| let walker = document.createTreeWalker( | |
| document.body, | |
| NodeFilter.SHOW_TEXT, | |
| { acceptNode: (node) => node.nodeValue.trim().length && NodeFilter.FILTER_ACCEPT } | |
| ); | |
| // collecting the nodes |
| const { ToggleButton } = require('sdk/ui/button/toggle'); | |
| let globalToggle = ToggleButton({ | |
| id: 'my-global-toggle', | |
| label: 'global function', | |
| icon: './foo.png', | |
| onChange: function() { | |
| // delete the window state for the current window, | |
| // automatically set when the user click on the button | |
| this.state('window', null); |
| const { window: { document } } = require('sdk/addon/window'); | |
| const { getTabContentWindow, getActiveTab } = require('sdk/tabs/utils'); | |
| const { getMostRecentBrowserWindow } = require('sdk/window/utils'); | |
| const canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas'); | |
| document.documentElement.appendChild(canvas); | |
| function captureActiveTab() { | |
| let contentWindow = getTabContentWindow(getActiveTab(getMostRecentBrowserWindow())); |
| const { ActionButton } = require("sdk/ui/button/action"); | |
| const { browserWindows } = require("sdk/windows"); | |
| let button = ActionButton({ | |
| id: "reverse-tabs", | |
| label: "Reverse Tab Order", | |
| icon: { | |
| // The new APIs use "./" as shortcut for data folder, you don't need | |
| // to require `self` for that purpose. | |
| "16": "./16.png", |