Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Make a more complete boilerplate for modules

  • Loading branch information...
commit f17008c4e6a1f773714e7e0760f4221e951a2658 1 parent 370836d
@kriszyp authored
Showing with 77 additions and 13 deletions.
  1. +61 −0 component.js
  2. +0 −7 demo.js
  3. +5 −6 package.json
  4. +11 −0 test/test.html
View
61 component.js
@@ -0,0 +1,61 @@
+// Define the module with AMD with dependencies. Always try to use the smallest/most granular
+// dependencies possible
+define(["dojo/_base/declare", "dojo/on", "dijit/_Widget"],
+ function(declare, on, Widget){ // dependency variables
+
+ // modules have their own closure'd scope, we can create functions that are
+ // private to the module
+ function myPrivateFunction(){
+ // Use private functions when you do not want the function accessible outside
+ // the component. This is particularly valuable to utilize because it ensures that you can
+ // alter your component's implementation, including how this function is used (or not used)
+ // without breaking user code when they upgrade.
+ }
+
+ // return the component class we are creating, use anonymous declare (don't
+ // specify the class name)
+ return declare([Widget /*any base classes*/], {
+ content: 'content',
+ postCreate: function(){
+ // a normal public function, this one is overriding a function from the base class
+ this.domNode.innerHTML = this.content;
+ on(this.domNode, 'click', function(){
+ // For event listeners, you should normally use an inlined anonymous function
+ // to maximize the clarity of your code (those that review your don't need
+ // to track down the event listener, it is immediately present in the event
+ // registration call). However, if a single function will be used for separate
+ // events, you can use a private function, or a bound method (bound method
+ // only if the event handler really exactly matches the functionality provided by
+ // an existing method, or needs to be shared with other modules).
+
+ // For best performance and size characteristics, use direct DOM manipulation
+ // for simple tasks to avoid pulling in unnecessary dependencies. Use libraries
+ // for more complex DOM manipulation
+ // Note that we namespace DOM classes.
+ this.domNode.className = 'template-clicked';
+ });
+ },
+ _protectedFunction: function(){
+ // We use an underscore to mark methods and properties that should not be used by users.
+ // These may be used for methods that other modules in your package will
+ // be using. This also allows users to override the method.
+ // However, be aware that even with an underscore, users may utilize these
+ // methods, and changing the signature in future versions could break user
+ // code, so use with caution as it may not achieve the internalization of
+ // implementation effect desired.
+
+ // For events originating from this component, we can use on's emit function.
+ // Note that we namespace our events
+ if(on.emit(this.domNode, "template-something", {
+ bubbles: true,
+ cancelable: true,
+ foo: "bar"
+ })){
+ // You may emit events that can be cancelled. If they aren't cancelled, a
+ // default action can be performed.
+ myPrivateFunction();
+ }
+ }
+
+ });
+});
View
7 demo.js
@@ -1,7 +0,0 @@
-define(["dojo"], function(dojo){
- setTimeout(function(){
- var helloDiv = dojo.create("div", {
- innerHTML: "Hello World"
- }, document.body);
- }, 500);
-});
View
11 package.json
@@ -1,7 +1,8 @@
{
"name": "commonjs-package-template",
"mappings": {
- "dojo": "https://github.com/dojo/dojo/zipball/v1.6.0alpha2"
+ "dojo": "https://github.com/dojo/dojo/zipball/1.7.0",
+ "dijit": "https://github.com/dojo/dijit/zipball/1.7.0"
},
"description": "Template for CommonJS packages",
"licenses": [
@@ -18,11 +19,9 @@
"keywords": ["Template"],
"homepage": "http://dojotoolkit.org/",
"dependencies": {
- "dojo": "1.7.0b3"
+ "dojo": "1.7.0",
+ "dijit": "1.7.0"
},
- "directories": {
- "lib": "."
- },
- "main": "./demo",
+ "main": "./component",
"icon": "http://dojofoundation.org/images/icons/5.png"
}
View
11 test/test.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <script src="../../dojo/dojo.js" data-dojo-config="async: true"></script>
+ <script>
+ require(["commonjs-package-template/test/some-test"]);
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.