Blogブログ

Backbone.jsでAPIに渡すときのメモ。 Backbone.sync とは Backbone.sync とはBackboneがモデルからデータを取得したり保存したりする際に使う関数。 デフォルトでは、jQUery.ajaxを使ってRESTful JSON リクエストを送信し、jqXHRを受け取る。 また、オーバーライドも可能。 —————————- RESTful とは ウェブサービスのひとつの形 ・明示的に HTTP メソッドを使う ・ステートレスにする ・ディレクトリー構造に似た URI を公開する ・XML、JSON (JavaScript Object Notation) のいずれか、またはその両方を転送する jqXHR とは XMLHttpRequestオブジェクトを一般化し、クロスブラウザ対応を行ったjQuery独自のオブジェクト。 —————————- sync()の基本形 sync(method, model, [options]) method – the CRUD method ("create", "read", "update", or "delete") model – the model to be saved (or collection to be read) […]

スマホコーディングなど、「軽量化！軽量化！」と叫ばれる中でNo jQueryが求められる事がある。 そんなときには要素の高さをそろえる位は、jquery を使わずにやってしまいたい。   １．javascriptで、getElementsByClassNameが必要。 function myGetElementsByClassName (_class , _tag , _id) { var targetId , elementList , classList , i , j , nodes = []; targetId = document.getElementById(_id); elementList = targetId.getElementsByTagName(_tag); for (i=0; i < elementList.length ; i++ ) { classList = elementList[i].className.split(" "); for (j=0; j < classList.length ; j++ ) […]

とても便利なjsライブラリを見つけました。 https://github.com/ded/bonzo クラスの判定をjQueryでやりたくない時、でもやっちゃう時結構あった。 これからはこれを使おう。 使い方も超簡単。 classie.has( elem, ‘my-class’ ) -> true/false classie.add( elem, ‘my-new-class’ ) classie.remove( elem, ‘my-unwanted-class’ ) classie.toggle( elem, ‘my-class’ )

Backbone.jsのテンプレートにHandlebarを使います。 ただ、Handlebarで問題となるのがコンパイル前の遅さ。 それを補うために、Gruntを使ってプリコンパイルする手法があります。 そのためには.hbsという拡張子でテンプレートファイルを作成して、この内容をgrantを使いtemplate.jsに随時反映させるのが便利です。 先ずはGruntの設定。 Gruntについてはこちら。 Grunt.js コマンドを開き、作業ディレクトリまで進みます。 cd /yourapps/dir/ イニシャライズを行います。 npm init これでpackage.jsonが生成されました。 次にgruntをインストールします。 npm install grunt –save-dev これでnode_modulesというフォルダが生成されました。 次に、プラグインを入れてみます。 package.jsonを編集します。 プラグインはgrunt-contribを使ってみます。 grunt-contribについての詳しい説明はこちら。 grunt-contrib 今回はhandlebarの自動プリコンパイルが目的ですが、それ以外にもcssやjsの圧縮など、便利な機能がたくさんあります。 少し時間がかかるかも知れませんが、一気に入れるには以下のコマンドを実行します。 npm install grunt-contrib –save-dev 個別に入れる場合は、 npm install grunt-contrib-handlebars –save-dev や、 npm install grunt-contrib-watch –save-dev このようにします。 使いなれて、好きなものだけ入れるためには、package.jsonを使うのが便利です。 一度、node_modulesのフォルダを削除します。 そして、devDependencies の項目に、 “devDependencies”: { “grunt”: “~0.4.1”, “grunt-contrib-watch”: “~0.3.1”, “grunt-contrib-cssmin”: “~0.4.2” } […]

Underscore.jsでは、Array, Object関連の関数にも凄く便利なものがあります。 first initial last rest flatten without union intersection difference uniq zip object indexOf lastIndexOf sortedIndex range first _.first(array, [n]) 配列の最初の値を返します。 (function() {   var list = [1, 2, 5, 6, 2];   var x = _.first(list);   console.log(x); // => 1 })(); initial _.initial(array, [n]) 配列の最後の要素以外を返します。 (function() {   var list = [1, 2, 5, 6, 2]; […]

bind bindAll partial memoize delay defer throttle debounce once after wrap compose bind function をobjectに束縛する。 (function() { var func = function(greeting){ return greeting + this.title }; func = _.bind(func, { title: ‘アンダースコア’ }, ‘titleは’); console.log(func()); })(); bindAll イベントハンドラとして使う予定の関数を、オブジェクトに束縛する partial 引数の部分適用を行う。関数をオブジェクトとして受け渡す時に便利。 (function() { var add = function(a, b) { return a + b; }; var already_added_25 […]

jsonpのリクエスト先URLがダウンしていた時があった。 予めURLのステータスをチェックするための関数。 function _chk_url_status(url){     var request = new XMLHttpRequest;     request.open('GET', url, true);     request.send();     request.onreadystatechange = function(){         if(request.status == 200){             return true;         }else{             return false;         }   […]

さて、ナビが出てくる所の動きは理解出来た。 後googleナビに近づけるためには、ナビの上下の動きがどうもカクカクした感じがあるので、何とかならんかと本家を見てみた。 google のソースでは、ナビ内をスライドすると、 transition　: -moz-transform 0ms ease-in-out 0s がついて、 transform　の値が　translate3d(0px, -109px, 0px)　のようになる。 これを再現するには。。 touchstart、touchmove, touchendの部分をちょっと変えます。 $(settings.menu_list).bind({ ‘touchstart’: function(e) { menu_list_height = $(settings.menu_list).height(); sfY = event.touches[0].screenY; }, ‘touchmove’: function(e) { mfY = event.changedTouches[0].screenY; var moveY = smY + mfY – sfY; // moving $(this).css({ “-webkit-transition”: “all “+timer+”ms cubic-bezier(0.075, 0.82, 0.165, 1)”, ‘-webkit-transform’:’translate3d(0px,’+ moveY +’px,0px)’, }); […]

http://qiita.com/items/64e4589e37944bf032d9 こちらで紹介されてるスライドメニューの縦板をテストしてみた。 普通にスマホでjQueryとかでアニメーションをやろうとすると、かなりもっさりしてしまう。 そこで、スマホだからこそcss3を使って実装する視点、確かにそうだよねと脱帽。 処理はシンプルで、touchイベントを使ってtouch.start, touch.endでの挙動をそれぞれ制御し、 スライドすべき時にクラスをつけている、って感じだ。 しかしCSS３の-webkit-transition，あなどれない、、、これはいけるやんか。 サンプル：http://shnr.net/samples/m.slide/ これで良い感じの縦スライドが実装できる。

jQuery deffered について ajaxでスクリプトを書くときに、ajaxで取った値を基に別のリクエストを送って、返り値を一回目のリクエストと合わせて表示、 なんてことをやる必要があった。 最初recursiveだけで組んでみたが、良い機会なのでdefeerdと組み合わせて使ってみる。かなり見通しが良くなった（と思う） 下の例では、jsonで受け取った結果をflagでrecursive_one, recursive_twoに分けて操作している。 また、json内には順不同でflag = true, false が混在するものとし、true のものから順に展開する。 $(function(){ $.ajax({ type:”GET”, url:jsonfile, dataType: “json”, success:function(data){ GetResults.getContents_first(data).done(function(data) { GetResults.getContents_second(data).done(function() { GetResults.finalFunction(); }); }); }, error :function(XMLHttpRequest,textStatus){ console.log(textStatus); } }); }); var GetResults = { getContents_first: function(data) { var defer = $.Deferred(); var total = data.somearticle.length; var num = 0; var […]