jQuery Plugin作成時の3つの注意点 - KAYAC Engineers' Blog
実家に帰ったら犬に威嚇されました。agoです。 jQuery Pluginに関しては、以前jQuery Pluginの書き方として基本的な部分をまとめたのですが、もう少し細かい部分に関して再度まとめてみようと思います。 1 $.dataの活用 以前jQuery.dataの使い方でも紹介したのですが、Pluginからelementを処理する場合対象のelementが広範囲に及ぶことが多く、Plugin内の変数の他に各element毎の変数を持ちたくなることがあります。 たとえば、「クリックする毎に順番にCSSが変わるPlugin」を考えた場合、各element毎に「今どのCSSが指定されているか」を保持できると実装が楽になると思います。 具体的には以下のような形になります。 $(function () { var colors = ['blue', 'yellow', 'red']; $('
2行でJavaScriptを高速化する方法 - rand's
id:amachangさんの 一行で IE の JavaScript を高速化する方法 - IT戦記 に対して、id:uupaaさんが http://d.hatena.ne.jp/uupaa/20081230/1230604575 でIE以外でも使える色々な方法を提案なさっています。でも、 「正直documentを_docに置き換えるの面倒＞＜」 そこで、たかがreplace(/document/g, '_doc')の手間を惜しむ皆様のために用意した、2行でJavaScriptを高速化する方法がこちら： script全体を(function(document){と})(document)で囲む これだね！ ベンチマーク uupaaさんの記事にあるB系のソースを使わせていただきました。 ブラウザ B0 B1 B2 B3 B4 B5 b6 IE 6 10281 4938 10844 4672
現在閲覧しているページをはてブしている「お気に入りユーザ」を表示するGreasemonkey - LukeSilvia’s diary
あったらいいなーって思い、作ってみました。機能概要は以下の通りです。 機能 現在閲覧しているページをはてブしている「お気に入りユーザ」を表示する ついでに、自分がはてブしているかも表示する 導入するとこんな感じに、左下にお気に入りユーザのfavicon が表示されます。 メリット なんとなくググったページを「お気に入りユーザ」がはてブしていると分かることで、有益なページを逃しにくくなる 「はてブしようとしたら以前はてブしてた」っていうあの敗北感から脱出できる インストール always_hatebu_favorites.user.js からインストールして下さい。ソースはgithub に置いてあります。 使い方 使うための条件は以下の通りです。 はてブにログインしていること はてブを公開していること お気に入りを公開していること 以下のコマンドが使えます。 update favorites
amachang の 「一行で IE の JavaScript を高速化する方法」を掘り下げてみた - latest log
2009-11-12 ナビ子記法について追記しました 本文 今日は、amachangさんの記事 http://d.hatena.ne.jp/amachang/20071010/1192012056 を 1mm だけ掘り下げ、IE 以外のブラウザでも document へのアクセスを速くする方法がないか、色々試してみます。 # 記事自体はずいぶん前に書き上げてたけど、公開するの忘れてたんだな。 C系を追加しました。C系は「ネストしたスコープからグローバル変数にアクセスするとどうなるか?」がテーマです。 試したこと 以下は様々な方法で document へのアクセス速度を計測します。 A系では、非日常的な方法で測定し、B系では実際の用法に近い形で測定します。C系では何重にもネストしたスコープから、グローバル変数にアクセスするとどうなるかを測定します。 A系 A0 は、素の document に
jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
jQueryを使うときに気をつけるべき8のポイント : tech.kayac.com - KAYAC engineers' blog
DAHONのBoardwalkを修理しようとしておもいっきり壊してしまいました。agoです。 普段はjQueryをメインで使用しているのですが、使っていていくつか注意すべき点があったのでまとめてみました。 （一部jQueryではなく、DOMの仕様上の制限も含まれています） 1 $().filterにstring以外のものを渡すとエラー 1.4系では修正されていました $().findや$().notは大丈夫ですが、$().filterの場合引数にjQuery objectや配列、html elementなどを渡すとエラーになります。 （たとえばjQuery objectを渡した場合、Firefoxでは「TypeError: t.substring is not a function」というエラーが発生します） 確認する ちなみに、$().findや$().notはstring以外も渡せるた
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
はてなブックマーク JavaScript 高速化計画 補足 - IT戦記
はじめに id:jkondo さんがブクマしてくれてるのでちょっとだけ補足 以下のつづき http://d.hatena.ne.jp/amachang/20081126/1227700830 追加修正 id:Yuichiro さんのハック 2008-11-27 - つれずれなるままに… 注意：ただ、これ appendChild 時のコストが増えていることが分かったのでちょっと要確認ですね。 id:Yuichiro さんのハックを getImage にも適用 gotImage: [], getImage: function(container) { var src = Hatena.Star.Button.getImgSrc(Hatena.Star.Star,container); if (!this.gotImage[src]) { var newimg = document.create
はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記
はじめに 「新はてなブックマーク」になったということで、とっても便利になったのですが、ブックマーク一覧ページ*1が若干 JavaScript に時間が掛かっているみたいです。 というわけで 調査してみたいと思います。調査して、改善できそうなところは後で纏めて「はてなアイデア」にでも登録しようと思います。 この日記は調査しながら、過程を書いていくつもりです。 準備 まずは、人のサイトの JavaScript を書き換えて試してみるための環境を作ります。 作業用ディレクトリを作る とりあえず、ホームに HatenaJS というディレクトリを作ります。 $ mkdir HatenaJS $ cd HatenaJS CocProxy をダウンロードしてくる 以下から CocProxy というツールをダウンロードしてきます。 http://coderepos.org/share/wiki/CocPr
シングルクォートもきちんとエスケープする - 素人がプログラミングを勉強していたブログ
追記2：2007-10-11 - hoshikuzu | star_dust の書斎を見ると、下に書いてるような対策では不十分なようだ。 追記：エスケープすべき文字は、Re: JavaScript内（文字列）にデータを出力する場合の適切なエスケープ手順｜freeml byGMOなどを参考に。 シングルクォート(')をエスケープせずXSSの原因になっているサイトをけっこう見かけたので、どういう時問題になるのか書いておく。 JavaScriptの文字列を動的に埋め込む場合。 <script> var q = 'hoge"fuga'; document.getElementById('word').appendChild(document.createTextNode(q + 'の検索結果')); </script> のように、変数に代入する文字列を動的に作っている場合、RubyのCG
配列のユニーク化、(unique) - 素人がプログラミングを勉強していたブログ
追記2：concatだと配列のなかに配列が入ってると勝手に展開されて駄目だった。Constellationさんのコメントのコードを使うとその問題も起こらない。 追記：配列の中身に文字列以外が入ってるとうまくいかない。詳しくはコメント参照。 こうするといい。 function uniq(arr) Array.reduce(arr, function(a, b) a.indexOf(b) == -1? a.concat(b): a , []); 追記ここまで 前に作ったものよりだいぶ簡潔。たぶん速いんじゃないかと思う。配列風オブジェクトにも使える。 function uniq(arr) { var o = {}; return Array.filter(arr, function(i) i in o? false: o[i] = true); } uniq([0,1,2,3,4,8,false
javascript - DOM2TextとevalDOM : 404 Blog Not Found
2008年06月03日01:00 カテゴリLightweight Languages javascript - DOM2TextとevalDOM これでコードサンプルの実行が一段と楽になります。 Demo alert( (function(n){ return n > 1 ? n * arguments.callee(n - 1) : 1 })(10) ); Source (function(){ DOM2Text = (function(){ if (document.body.textContent){ return function(e){ return e.textContent }; } else if (document.body.innerText){ return function(e){ return e.innerText }; } else { // Last Res
文字列処理の性能に関する考察 - blanket log
行数の数え方 - Days on the Moon たいへん興味深い結果。いろいろ気になったので、もう少し突っ込んで実験してみました。 実験 1Mバイトの文字列で2通り試してみました。(単位はミリ秒) (A)1000文字ごとに改行 (B)1文字ごとに改行 charAt 2167 2195 Array 1648 (469) 1674 (453) split 5 530 match 14 781 match (sentinel) 16 777 indexOf 3 979 replace 15 327 Arrayの括弧内の数値は、split後のループの時間のみを計測したもの 実行環境は spidermonkey 1.6 考察 個々の性能は、対象となる文字列によって変わってきます。 indexOf 改行が非常に多い場合(B)は、indexOfを使った実装の性能がガクッと下がります。 これは考えてみ
行数の数え方: Days on the Moon
行数を数えているのですが、コメント欄他のstr.split(/\n/).lengthはかっこいいけどoverkill 404 Blog Not Found:javascript - String.prototype.tr() released 本当でしょうか? 実際に試してみましょう。変数 s が対象文字列を指しているものとします。 // charAt var lines = 1; for (var i = 0, n = s.length; i < n; i++) if (s.charAt(i) == "\n") lines++; // Array var lines = 1; var chars = s.split(""); for (var i = 0, n = chars.length; i < n; i++) if (chars[i] == "\n") lines++; // sp
Re：zapa氏 今更ですが、jQueryにはまりました - ホームページを作る人のネタ帳
ZAPA氏の記事。 ニュータイプなJSライブラリjQueryを使ってみよう！ これを見てから3日間。 ブログもあまりかけずこればっかりいじって遊んでました。 睡眠時間も1日2時間くらいになり、今日は書こうと思います。 まずZAPA氏、きっかけをありがとう。 私はJavaScriptの知識がほぼ皆無な人間です。 そんな私でもjQueryは簡単に使える為、面白くてはまりました。 ただ、お恥ずかしい話、PHPを使ってJavaScriptをある程度制御しなければ私は使いこなせません。 ですが恐ろしく簡単にこれまでこのブログで紹介してきたようなJavaScriptアプリと同等のものを作れる為、これははまります。 JavaScriptダメダメの私でも出来ました データベース接続部や、なんやかんやは全てPHPでまかない、動作部分やFormなどはｊQueryに投げる。 こんな方法で色々試して見ましたが、A
論理演算子（&& と ||）を応用する - てっく煮ブログ
javascript, asjQuery のソースコードを見ていて面白いのがあった。 function add(a, b){ addImpl(b && a, b || a); } function addImpl(a, b){ // ... } 理解するためには、論理演算子を詳しく理解する必要がある。論理演算子詳細JavaScript（というか ECMAScript）の論理演算子は、評価結果が true/false で返される訳ではなく、結果が確定した時点で評価した値が返される。まずは、|| を試してみよう。 alert(2 || 0); // 2 alert(2 || 3); // 2 alert({} || null) // [object Object] alert(0 || 3); // 3 alert(0 || 0); // 0 alert(0 || undefined); //
JavaScriptのプライベート変数の作り方 - hogehoge @teramako
JavaScriptを書き始める時に気になるもの、オイラの場合は名前空間。特にMozilla系アプリの拡張機能を作ろうとした時、他の拡張と被っていたらどうしよう...とビクビクしている。 ということで、一つのグローバルなオブジェクトを宣言してその中にオブジェクトを連ねる。 でも、その中には他から触られたくないプライベートな変数もある。 function Hoge(){ var hoge; this.setHoge = function(str){ hoge = str; return str; } } var foo = {}; foo.hogehoge = new Hoge(); とか何とかすれば、hoge変数はプライベートな変数となるわけだが、一つしか作る予定のないものにわざわざクラスを作ってnewするのも面倒だし、グローバルな位置にHoge関数が置かれてしまう。 で、苦肉の策でやって
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Jash: JavaScript Shell
Home Features Documentation Download Screenshots A Cross-Browser Javascript Command-Line Debugging Tool Download Latest Stable Version Source code Jash.js (minified) Jash_source.js (non-minified) Jash.css Bookmarklet Jash bookmarklet - right click to copy or drag to bookmarks panel or toolbar to save. Release Notes for Latest Version Release Notes Previous Versions Browse Previous Versions
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス: Douglas Crockford (著), 水野貴明 (翻訳): 本
