JavaScriptã¢ããªã±ã¼ã·ã§ã³ç¨ã®Dependency Injection ã³ã³ãããContaienrJSãã®æ°çããªãªã¼ã¹
å¤ä¼ã¿ã®å®¿é¡ã¨ãããã¨ã§ãä½æãã¦ããé·ããã¡ã³ããã³ã¹ãã¦ããªãã£ã ContaienrJS ã®æ°çããªãªã¼ã¹ãã¾ãããå¤æ´ç¹ã¯ä»¥ä¸ã§ãã
- æ°æ©è½ : ã¢ã¸ã¥ã¼ã«ã®éåæé
延èªã¿è¾¼ã¿ã«å¯¾å¿
- require.jsã¨é£æºããã³ã³ãã¼ãã³ã(=ã³ã³ãã管çä¸ã®ãªãã¸ã§ã¯ã)ãå®éã«å¿ è¦ã¨ãããã¾ã§ããã®JavaScriptã½ã¼ã¹ã®èªã¿è¾¼ã¿ã¨è©ä¾¡ãé 延ãã¾ãã
- ã¦ã¼ã¶ã¼ããã¿ã³ãæ¼ããããã¤ã¢ãã°ã表示ãããããªã·ã¼ã³ã§ããã¿ã³ãæ¼ãããã¿ã¤ãã³ã°ã§ãã¤ã¢ãã°ã¯ã©ã¹ããã¼ããã¦ã¤ã³ã¹ã¿ã³ã¹ãä½æããã¨ãã£ãå¶å¾¡ã容æã«å®ç¾ã§ãã¾ãã
- âããã«ä¼´ãã
- ã³ã³ãã¼ãã³ãã®åå¾ãéåæã«ãªãã¾ããã Deferredãä»ãã¦ã¤ã³ã¹ã¿ã³ã¹ãå¾ãããã«ãªãã¾ãã
- éåæåã®ããå®ç¾ã§ããªããªã£ãä¸é¨ã®æ©è½(Typeæå®ã§ã®ã³ã³ãã¼ãã³ãåå¾ã¨ã)ãæ´çãã¦åé¤ãã¾ããã
ãã¦ã³ãã¼ã
ãã¦ã³ãã¼ãã¯ä»¥ä¸ããã
unageanu / container-js - GitHub
ドキュメントはここにありますãDIã³ã³ããã¨ãã¦ã®åºæ¬çãªæ©è½ã«ã¤ãã¦ã¯ãã¡ããåç §ãã ãããAspectã¨ãã«ã対å¿ãã¦ã¾ãã
ãµã³ãã«
å
·ä½çã«åããã®ãããã¤ãã
samples/ 以ä¸ã«å®å
¨ãªã½ã¼ã¹ãããã®ã§ãã¡ããåç
§ãã ããã
Hello World
ãHello Worldããåºåãããµã³ãã«ã§ãã
ãã¡ã¤ã«æ§é :
â index.html â scripts/ â main.js â require.js â container.js â app/ â â model.js â â view.js â utils/ â observable.js
scripts/app/model.js:
define(["utils/observable"], function(Observable){ "use strict"; /** * @class */ var Model = function() {}; Model.prototype = new Observable(); /** * @public */ Model.prototype.initialize = function() { this.fire( "updated", { property: "message", value :"hello world." }); }; return Model; });
scripts/app/view.js:
define(["container"], function( ContainerJS ){ "use strict"; /** * @class */ var View = function() { this.model = ContainerJS.Inject("app.Model"); }; /** * @public */ View.prototype.initialize = function() { this.model.addObserver("updated", function( ev ) { if ( ev.property != "message" ) return; var e = document.getElementById(this.elementId); e.innerHTML = ev.value; }.bind(this)); }; return View; });
scripts/app/main.js:
require.config({ baseUrl: "scripts", }); require(["container"], function( ContainerJS ) { var container = new ContainerJS.Container( function( binder ){ binder.bind("app.View").withProperties({ elementId : "console" }).onInitialize("initialize") .inScope(ContainerJS.Scope.EAGER_SINGLETON); binder.bind("app.Model"); }); window.addEventListener("load", function() { container.get("app.Model").then(function( model ){ model.initialize(); }, function( error ) { alert( error.toString() ); }); }, false); });
index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello World</title> <script type="text/javascript" data-main="scripts/main.js" src="scripts/require.js"></script> </head> <body> <div id="console"></div> </body> </html>
Lazy Loading
é
延èªã¿è¾¼ã¿ã®ãµã³ãã«ã§ãã
ãªã³ã¯ãã¯ãªãã¯ãããããcomponent.jsã®èªã¿è¾¼ã¿ã¨ã¤ã³ã¹ã¿ã³ã¹åãè¡ããã¾ãã
ãã¡ã¤ã«æ§é :
â index.html â scripts/ â main.js â require.js â container.js â app/ â component.js â owner.js
scripts/app/component.js:
define(function(){ "use strict"; /** * @class */ var Component = function() { print("component : created."); }; return Component; });
scripts/app/owner.js:
define(["container"], function( ContainerJS ){ "use strict"; /** * @class */ var Owner = function() { this.component = ContainerJS.Inject.lazily("app.Component"); print("owner : created."); }; /** * @public */ Owner.prototype.initialize = function() { print( "owner : initialize." ); this.component.then(function( component){ }, function( error ) { alert( error.toString() ); }); }; return Owner; });
scripts/main.js:
require.config({ baseUrl: "scripts" }); require(["container"], function( ContainerJS ) { window.print = function( message ) { document.getElementById("console").innerHTML += message + "<br/>"; }; var container = new ContainerJS.Container( function( binder ){ binder.bind("app.Component"); binder.bind("app.Owner"); }); window.addEventListener("load", function() { container.get("app.Owner").then(function( owner ){ document.getElementById("link").addEventListener( "click", function(){ owner.initialize(); }); }, function( error ) { alert( error.toString() ); }); }, false); });
index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Lazy Loading</title> <script type="text/javascript" data-main="scripts/main.js" src="scripts/require.js"></script> </head> <body> <div> <a id="link" href="javascript:void(0);">click.</a> </div> <div id="console"></div> </body> </html>
Method Interception
åããããæ©è½ã§ãããã³ã³ãã¼ãã³ãã®ã¡ã½ããã«ã¤ã³ã¿ã¼ã»ãã¿ãå·®ãè¾¼ãã¾ãã
ãã¡ã¤ã«æ§é :
â index.html â scripts/ â main.js â require.js â container.js â app/ â component.js
scripts/app/component.js:
define(function(){ "use strict"; /** * @class */ var Component = function() {}; Component.prototype.method1 = function( ) { print("method1 : executed."); }; Component.prototype.method2 = function( ) { print("method2 : executed."); }; return Component; });
scripts/main.js:
require.config({ baseUrl: "scripts" }); require(["container"], function( ContainerJS ) { window.print = function( message ) { document.getElementById("console").innerHTML += message + "<br/>"; }; var container = new ContainerJS.Container( function( binder ){ binder.bind("app.Component"); binder.bindInterceptor( function( jointpoint ) { print( "before : " + jointpoint.methodName ); var result = jointpoint.proceed(); print( "after : " + jointpoint.methodName ); return result; }, function(binding, component, methodName) { if (binding.name !== "app.Component" ) return false; return methodName === "method1" || methodName === "method2"; } ); }); window.addEventListener("load", function() { container.get("app.Component").then(function( component ){ document.getElementById("link1").addEventListener( "click", function(){ component.method1(); }); document.getElementById("link2").addEventListener( "click", function(){ component.method2(); }); }, function( error ) { alert( error.toString() ); }); }, false); });
index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Method Interception</title> <script type="text/javascript" data-main="scripts/main.js" src="scripts/require.js"></script> </head> <body> <div> <a id="link1" href="javascript:void(0);">click to execute method1.</a>| <a id="link2" href="javascript:void(0);">click to execute method2.</a> </div> <div id="console"></div> </body> </html>