-
リスト要素の生成 初期位置を記録 => $.data
-
イベントリスナ スクロールに応じてリストを動かす
縦の位置 = 初期位置 + ( スクロール量 * 補正値(z-index) );
$(element).attr('data-defaultTop', positionY);
// <div data-defaultTop="100"> ...- メリット
- CSS が効く
- HTMLからJSにデータを渡せる ( SNSウィジェットとか、JS本体に触れない時 )
- デメリット
- 文字列しか保存できない。
- 開発ツールで見ると邪魔
var position = [];
//保存
for(i=0;;){
positionTop[i] = ...
}
//読み込み
$.each(lists, function (i, element) {
defaultTop = positionTop[i];
});- メリット
- 普通
- コードを追いやすい
- デメリット
- 変数が増えまくる
- スコープの問題 保存と読み込みを同じ場所に書かなければいけない
- メリット
- DOM要素に付けるので、どこからでも呼び出せる (別のプラグイン間でデータを受け渡しできる)
- デメリット
- 中に何が入っているのか見え辛い
$.each(element, function ... )
$('element').each( function ...)
// 配列に順番に処理
var arr = [1,2,3,4,5];
$.each(arr, function ...)
// ループでも一緒
for(key in arr){
arr[key] ...
}処理の内容を関数で渡すので、 each の方が見やすいかもしれない。
- for (i=0; i<n; i++) 決まった回数のループ
- for (key in obj) 連想配列を走査
-
$.each ... jQery っぽい。 ループの中で $ (this) とか使える - forEach IE爆発しろ
map とか filter とかも便利だよ。 JavaScript の配列と連想配列の違い Amachangの記事がかなりわかりやすい。
関数内で関数を生成して返す
function hoge(){}
var hoge = function () {};
var hoge = (function (){
return function () {}
}());ここまでは全部一緒
変数のスコープを分けたい時
// 呼び出すたびにカウントアップとか
var countup = (function (){
var i = 0;
return function () {
return i++;
}
}());
countup(); => 0
countup(); => 1
countup(); => 2引数がやたら多い時とか
function joinFour(a, b, c, d) {
return a + b + c + d;
}
joinFour('my ', 'name ', 'is ', 'bob');
joinFour('my ', 'name ', 'is ', 'tom');
joinFour('my ', 'name ', 'is ', 'john');いつも同じようなパラメータで呼び出しているのを
function joinFour(a, b, c, d) {
return a + b + c + d;
}
function builder(a, b, c) {
return function (d) {
return joinFour(a, b, c, d);
}
}
// 前半の引数(a, b, c)を固定して、新しい関数を作る
sayMyName = builder('my ', 'name ', 'is ');
sayMyName('bob');
sayMyName('tom');
sayMyName('john');その他
builder('my ', 'name ', 'is ')('who');
builder()()()()()();のようにも使えるが、くどいから使い過ぎに注意。