みなさん、おはよーございます。
今日は、AngularとDOJOの違い比べてみました。こちら、四枚のねこの写真をスライドショウさせるだけのプログラム
こちらDOJO
http://jsfiddle.net/treasonx/FB3zs/6/
そして、こちらAngularJS
http://jsfiddle.net/treasonx/Ukf39/9/
[CSS両方とも]
.image img {
display: block;
}
[DOJO HTML]
<h1>Show Time</h1>
<div data-dojo-type="kittenShow" data-dojo-props="slideCount: 5, delayTime: 3"></div>
[AngularJS HTML]
<div ng-app="meow">
<h1>Show Time</h1>
<kitten-show kt-slides="5" kt-delay="3"></kitten-show>
</div>
--------------------------------------------------------------------------------------------------------------------------------------
[DOJOコード]
require([
'dojo/parser',
'dojo/_base/lang',
'dojo/_base/declare',
'dijit/_WidgetBase',
'dijit/_TemplatedMixin',
'dojo/domReady!'
], function(
parser,
lang,
declare,
_WidgetBase,
_TemplatedMixin) {
declare('kittenShow', [_WidgetBase, _TemplatedMixin], {//ここで_WidgetBase, _TemplatedMixinをつかって’kittenShow’という、ウィジットをあたらしくつくってますね。これで直接HTMLを書いてそこに反映させるようです。
slideCount: 0,
delayTime: 0,
_currentSlide: 0,
_imageSizes: [],
templateString: '<div class="frame"><div class="image"><strong data-dojo-attach-point="titleEle"></strong><img data-dojo-attach-point="imgEle"></div></div>',
startup: function() {
this._imageSizes = generateImageSizes(this.slideCount);
this._updateShow();
setInterval(lang.hitch(this, function() {
this._updateShow();
}), this.delayTime*1000);
},
_updateShow: function() {
var size;
this._currentSlide = ++this._currentSlide >= this._imageSizes.length ? 0 : this._currentSlide;
size = this._imageSizes[this._currentSlide];
this.titleEle.innerHTML = 'kitten '+ this._currentSlide;
this.imgEle.src = 'http://placekitten.com/'+size.width+'/'+size.height;
}
});
parser.parse();//ここでパースさせてウィジットを完成させてます。
//utility functions
function randomSize() {//generateImageSizesにつかうサイズをランダムに計算させるプロパティを作成
return Math.floor(Math.random()*15) * 50;
}
function generateImageSizes(count) {//this._imageSizesでつかうプロパティを作成
var out = [];
var width;
var height;
while(count--) {
width = randomSize();
height = randomSize();
if(width > height) {
height = width / 0.5;
} else {
width = height / 0.5;
}
out.push({
width: width,
height: height
});
}
return out;
}
});
--------------------------------------------------------------------------------------------------------------------------------------
[AngularJSコード]
(function(angular) {
var module = angular.module('meow', []);//meowのモジュールを定義してディレクティブの受け皿を作る。この中のものはangularですべて料理できる。
//kittenshowのディレクティブを着くる。やっぱｒ、テンプレートは直でHTML
module.directive('kittenShow', function() {
return {
restrict: 'E',
replace: true,
template: '<div class="frame"><div class="image"><strong>kitten {{name}}</strong><img src="http://placekitten.com/{{width}}/{{height}}"></div></div>',
link: function(scope, ele, attrs){
var slideCount = parseInt(attrs.ktSlides, 10) || 4;
var delay = parseInt(attrs.ktDelay, 10) || 3;
var sizes = generateImageSizes(slideCount);
var currentSlide = 0;
function rotateImage() {
currentSlide = ++currentSlide >= sizes.length ? 0 : currentSlide;
scope.width = sizes[currentSlide].width;
scope.height = sizes[currentSlide].height;
scope.name = currentSlide;
}
rotateImage();
setInterval(function() {
scope.$apply(rotateImage);
}, delay*1000);
}
};
});
// utility functions
function randomSize() {
return Math.floor(Math.random()*15) * 50;
}
function generateImageSizes(count) {
var out = [];
var width;
var height;
while(count--) {
width = randomSize();
height = randomSize();
if(width > height) {
height = width / 0.5;
} else {
width = height / 0.5;
}
out.push({
width: width,
height: height
});
}
return out;
}
}(this.angular));
--------------------------------------------------------------------------------------------------------------------------------------
実際ねこが使ってみて最初に思ったのは、動いてるレベルが完全にちがうので、それぞれつかいわけてみてもいいんじゃないか、ということです。
たとえば、メインの『request』や『ウィジット』なんかはDOJOでかいて、その他の動的ページアクションは影響されずに直である吐き出され済みのHTMLを操作できるangularでやるみたいな。データがあってもなくてもangularならそのまま箇所箇所で動いてくれるんで、DOJOのバグに左右されないという利点があります。
たとえば、こんなコード
var app = angular.module('myApp', []);
app.controller('sessionController', function($scope, $http) {
$scope.session1 = false;
$scope.toggle_session1 = function(){$scope.session1 = !$scope.session1;};
$scope.session2 = false;
$scope.toggle_session2 = function() {$scope.session2 = !$scope.session2;};
});
session1とsession２が個々にshow/hideしてくれます。のこりはこの中にDOJOつかって書き込んだらいいですよね。
もちろん、両方ともjavascriptなんで約束変数の名前衝突なんかはきをつけないとね。おぉ、あとangularは使いすぎると重くなってしまいますので、きをつけましょう！！！
あぁ、今日は月曜日。。。気が重い。
でもがんばるでぇ～！！！
ねこでした。
