以下、Node.jsがインストールされていて、npmコマンドが使える前提です。
まず、BOWER、Flight、RequireJSをインストールしてGitの初期化をしました。
$ sudo npm install -g bower
$ mkdir -p xxx/flight-sample # 適当な場所
$ cd xxx/flight-sample
# https://github.com/twitter/flight#installation の内容そのままで作成
$ vim component.json
$ bower install
$ tree
.
├── component.json
└── components
├── es5-shim
│ ├── CHANGES
│ ├── CONTRIBUTORS.md
│ ├── LICENSE
│ ├── README.md
│ ├── component.json
│ ├── es5-sham.js
│ ├── es5-sham.min.js
│ ├── es5-shim.js
│ ├── es5-shim.min.js
│ ├── package.json
│ └── tests
│ ├── helpers
│ │ ├── h-kill.js
│ │ ├── h-matchers.js
│ │ └── h.js
│ ├── index.html
│ ├── lib
│ │ ├── jasmine-html.js
│ │ ├── jasmine.css
│ │ ├── jasmine.js
│ │ ├── jasmine_favicon.png
│ │ └── json2.js
│ └── spec
│ ├── s-array.js
│ ├── s-date.js
│ ├── s-function.js
│ ├── s-object.js
│ └── s-string.js
├── flight
│ ├── CHANGELOG.md
│ ├── CONTRIBUTING.md
│ ├── LICENSE
│ ├── Makefile
│ ├── README.md
│ ├── component.json
│ ├── lib
│ │ ├── advice.js
│ │ ├── component.js
│ │ ├── compose.js
│ │ ├── index.js
│ │ ├── logger.js
│ │ ├── registry.js
│ │ ├── standalone
│ │ │ ├── amd-shim.min.js
│ │ │ └── build.js
│ │ └── utils.js
│ ├── package.json
│ ├── test
│ │ ├── assets
│ │ │ ├── es5-sham.js
│ │ │ ├── es5-shim.js
│ │ │ ├── jquery.js
│ │ │ ├── loadrunner.js
│ │ │ ├── loadrunner_plugins
│ │ │ │ └── amd.js
│ │ │ └── require.js
│ │ ├── jasmine
│ │ │ ├── jasmine-bootstrap.css
│ │ │ ├── jasmine-bootstrap.js
│ │ │ ├── jasmine.js
│ │ │ └── lib
│ │ │ └── bootstrap.css
│ │ ├── phantom-jasmine
│ │ │ ├── console-runner.js
│ │ │ └── run_jasmine_test.coffee
│ │ ├── run
│ │ │ ├── jasmine_test.html
│ │ │ └── unit_test_files.js
│ │ ├── run_tests.js
│ │ └── tests
│ │ ├── advice_spec.js
│ │ ├── constructor_spec.js
│ │ ├── events_spec.js
│ │ ├── fn_spec.js
│ │ ├── instance_spec.js
│ │ ├── mixin_spec.js
│ │ ├── registry_spec.js
│ │ ├── standalone_spec.js
│ │ └── utils_spec.js
│ └── tools
│ └── debug
│ └── debug.js
└── jquery
├── component.json
├── composer.json
├── jquery.js
└── jquery.min.js
$ mkdir components/requirejs
$ wget http://requirejs.org/docs/release/2.1.5/minified/require.js -O components/requirejs/require.js
$ git init .
Initialized empty Git repository in xxx/flight-sample/.git/
$ git add .
$ git commit -m "initial commit"
次に https://github.com/twitter/flight/tree/gh-pages/demo を参考にサンプルを作成しました。-- requireMain.js --
* 上記のdemoそのまま。
requirejs.config({
// baseUrl: ''
});
-- app/components/myComponent.js --
* 後述のindex.htmlでattachToされることにより、this.before、this.afterの順で処理が行われる。
'use strict';
define(
[
'components/flight/lib/component'
],
function(defineComponent) {
return defineComponent(myComponent);
function myComponent() {
this.before('initialize', function() {
this.$node.html('test');
console.log('myComponent before.');
});
this.after('initialize', function() {
console.log('myComponent after.');
});
}
}
);
-- index.html --
* urlArgsは、RequireJSのキャッシング対策。試験環境以外では出力しないようにすべき。とのこと。
* #my_componentに前述のmyComponentをattachToしている。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="my_component"></div>
<script src="components/jquery/jquery.js"></script>
<script src="components/es5-shim/es5-shim.js"></script>
<script src="components/es5-shim/es5-sham.js"></script>
<script data-main="requireMain.js" src="components/requirejs/require.js"></script>
<script>
// http://requirejs.org/docs/api.html#config-urlArgs
// http://stackoverflow.com/questions/8315088/prevent-requirejs-from-caching-required-scripts
requirejs.config({
urlArgs: 'bust=' + (new Date()).getTime()
});
</script>
<script>
require(
[
'app/components/myComponent'
],
function(myComponent) {
myComponent.attachTo('#my_component');
}
);
</script>
</body>
</html>
上記のGitのdiffを https://gist.github.com/mp-php/5263863 に置いておきました。
まだわからないことだらけですが、いろいろ探っていきたいなー。
No comments:
Post a Comment