AngularとDOJOの違い比べてみた。

みなさん、おはよーございます。

今日は、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は使いすぎると重くなってしまいますので、きをつけましょう！！！

 

あぁ、今日は月曜日。。。気が重い。

でもがんばるでぇ～！！！

 

ねこでした。