├── test ├── some-test.js └── test.html ├── doc └── usage.md ├── README.md ├── package.json └── component.js /test/some-test.js: -------------------------------------------------------------------------------- 1 | // some tests -------------------------------------------------------------------------------- /doc/usage.md: -------------------------------------------------------------------------------- 1 | # Usage 2 | Explain how to use your library -------------------------------------------------------------------------------- /test/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # commons-package-template 2 | This package is designed to be a template for creating packages for the 3 | [Dojo foundation package repository](http://packages.dojofoundation.org/list.html). 4 | This includes a basic package.json file that you can fill out and a skeleton directory structure. 5 | 6 | # License 7 | AFL or BSD license -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "commonjs-package-template", 3 | "mappings": { 4 | "dojo": "https://github.com/dojo/dojo/zipball/1.7.0", 5 | "dijit": "https://github.com/dojo/dijit/zipball/1.7.0" 6 | }, 7 | "description": "Template for CommonJS packages", 8 | "licenses": [ 9 | { 10 | "type": "AFLv2.1", 11 | "url": "http://trac.dojotoolkit.org/browser/dojo/trunk/LICENSE#L43" 12 | }, 13 | { 14 | "type": "BSD", 15 | "url": "http://trac.dojotoolkit.org/browser/dojo/trunk/LICENSE#L13" 16 | } 17 | ], 18 | "bugs": "http://bugs.dojotoolkit.org/", 19 | "keywords": ["Template"], 20 | "homepage": "http://dojotoolkit.org/", 21 | "dependencies": { 22 | "dojo": "1.7.0", 23 | "dijit": "1.7.0" 24 | }, 25 | "main": "./component", 26 | "icon": "http://dojofoundation.org/images/icons/5.png" 27 | } -------------------------------------------------------------------------------- /component.js: -------------------------------------------------------------------------------- 1 | // Define the module with AMD with dependencies. Always try to use the smallest/most granular 2 | // dependencies possible 3 | define(["dojo/_base/declare", "dojo/on", "dijit/_Widget"], 4 | function(declare, on, Widget){ // dependency variables 5 | 6 | // modules have their own closure'd scope, we can create functions that are 7 | // private to the module 8 | function myPrivateFunction(){ 9 | // Use private functions when you do not want the function accessible outside 10 | // the component. This is particularly valuable to utilize because it ensures that you can 11 | // alter your component's implementation, including how this function is used (or not used) 12 | // without breaking user code when they upgrade. 13 | } 14 | 15 | // return the component class we are creating, use anonymous declare (don't 16 | // specify the class name) 17 | return declare([Widget /*any base classes*/], { 18 | content: 'content', 19 | postCreate: function(){ 20 | // a normal public function, this one is overriding a function from the base class 21 | this.domNode.innerHTML = this.content; 22 | on(this.domNode, 'click', function(){ 23 | // For event listeners, you should normally use an inlined anonymous function 24 | // to maximize the clarity of your code (those that review your don't need 25 | // to track down the event listener, it is immediately present in the event 26 | // registration call). However, if a single function will be used for separate 27 | // events, you can use a private function, or a bound method (bound method 28 | // only if the event handler really exactly matches the functionality provided by 29 | // an existing method, or needs to be shared with other modules). 30 | 31 | // For best performance and size characteristics, use direct DOM manipulation 32 | // for simple tasks to avoid pulling in unnecessary dependencies. Use libraries 33 | // for more complex DOM manipulation 34 | // Note that we namespace DOM classes. 35 | this.domNode.className = 'template-clicked'; 36 | }); 37 | }, 38 | _protectedFunction: function(){ 39 | // We use an underscore to mark methods and properties that should not be used by users. 40 | // These may be used for methods that other modules in your package will 41 | // be using. This also allows users to override the method. 42 | // However, be aware that even with an underscore, users may utilize these 43 | // methods, and changing the signature in future versions could break user 44 | // code, so use with caution as it may not achieve the internalization of 45 | // implementation effect desired. 46 | 47 | // For events originating from this component, we can use on's emit function. 48 | // Note that we namespace our events 49 | if(on.emit(this.domNode, "template-something", { 50 | bubbles: true, 51 | cancelable: true, 52 | foo: "bar" 53 | })){ 54 | // You may emit events that can be cancelled. If they aren't cancelled, a 55 | // default action can be performed. 56 | myPrivateFunction(); 57 | } 58 | } 59 | 60 | }); 61 | }); --------------------------------------------------------------------------------