applyとcallの使い方を丁寧に説明してみる - あと味
JavaScriptに、applyとcallというメソッドが用意されていますが、自分なりにapplyとcallの丁寧に説明をしてみようと思ってこのエントリーを書くなどをしてみます。 applyとcallは非常に似たメソッドなので、まずはcallから説明します。 callメソッドとは？ callメソッドは以下のように呼び出します。 methodA.call(thisArg, [, arg1 [, arg2, ...]]); methodAには任意の関数（メソッド）を指定します。 callの引数は第一引数にmethodAのthisとしたいオブジェクトを指定して、第二引数以降はmethodAに渡したい引数があれば、カンマ区切りでそれぞれ指定します。 callメソッドは、すべての関数が共通して持っているメソッドです。すべての関数はFunctionクラスのオブジェクトで、callはFunction.
2015年に向けたJavaScriptアプリケーションアーキテクチャ Part 1 | POSTD
私はかつて自分はアーキテクトだと名乗ったことがあります。これを裏付けるため、今やウソだらけの複雑な話を設計しなくてはならなくなっているので、ある意味これは本当のことですね。冗談はさておき、2015年を目前としてJavaScriptコミュニティのアプリケーションアーキテクチャの状況について目を向けてみるのは有益なことだと思います。合成、関数型の境界、モジュラリティ、不変データ構造、CSPのチャネルと、その他に関連するいくつかのトピックについて書いてみたいと思います。 合成 アーキテクチャのレベルでは、JavaScriptで大規模なアプリケーションを作成する方法に関してここ数年で少なくとも一つの根本的な変更がありました。機械の細かい違いにより生み出される単一指向性の データバインディング、不変データ構造と、仮想DOM （どれも興味深い問題ですね）などを除けば、多くの開発者が一つのキーコンセプト
client-side javascript - ✘╹◡╹✘
JavaScriptのすごく初歩的なことでよくわからないので整理する。よくわかってなくてすごい恥ずかしい感じがするけど書いたら誰か何か教えてくれそうだし書く。client-sideのJavaScriptは、未だあまりよく分からずにもやもやしながら適当に書いてる。もやもや感が説明したいけどなかなか説明しづらい。 例 こういうタブをJavaScriptを使って実装する例を考える。タブをクリックすると、そのタブに切り替わるというやつ。 HTML CSS JavaScript Pattern 1 深く考えずに素朴に実装すると、こういう感じになる。clickイベントに与える無名functionの中に全部詰め込む。こういう風に書いてるJSのコードはよく見る。こういうの大量に書くのはすごい簡単だけど大量にこういうのが書かれてたら読むの辛い感じがする。 懸念 例えばこれまでRubyでコードを書いていたとき
狭義のVirtualDOMと広義のVirtualDOM - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? TL;DR VirtualDOMを狭義と広義に分けて定義すると、 狭義のVirtualDOMとは、実際のDOMを表象する構造体 広義のVirtualDOMとは、狭義のVirtualDOMに加えてdiff, patchメカニズム とすることができ、React.js（及びVirtualDOM実装と呼ばれるMatt-Esch/virtual-domやsegmentio/deku）がシンプルなのは後者を実装しているからである。 Ractive.jsとReact.jsはどう違うか、という話 なるほどRactive.jsのリポジトリにはvirtua
ステートフルJavaScript 2章 | jekylog
2.1 イベントの監視 イベントリスナを削除するにはremoveEventListener()を使います。ここには以下のように、addEventListenerで指定したのと同じ引数を指定します。リスナが匿名関数であるなどの理由でリスナへの参照が存在しない場合は、要素ごと破棄しない限りリスナを削除することはできません。 まあ当たり前の事ですね。 ちなみに非標準だけど第4引数はaWantsUntrustedで、信頼されないコンテンツによって引き起こされるイベントを許可する、なる項目もあるらしい。 element.addEventListener - MDN 2.2 イベントの発生順序 ある要素とその祖先に同じ種類のイベントを指定している場合、下記ブラウザによって挙動が違う。 Netscape4はイベントキャプチャリング（event capturing）に対応しています。ここでは、最も上位（外
Reactive Programming in JavaScript - Frontrend Final Conference 資料
Reactive Programming in JavaScript ( 今回のスライド: HTML版 ) このスライド自体が Bacon.js で書かれた ahomu/Talkie で作られています。Rx系のライブラリに興味を持たれた方は、ぜひコードのほうもご覧いただければ。 アジェンダ What is Reactive Programming ? Reactive in Frontend JavaScript FRP with Reactive Extensions Reactive Programming について紹介しました。今回も懲りずに新ネタでしゃべった次第。Reactive も Functional も若干こわいひとたちが生息しているイメージ（個人の感想です）があるので、遅延評価で飛んでくる斧だけがこわい :P ノイズ避け 率直な感想として、RP/FRP を学ぼうとすると情報
vue.jsでInfinite Scrollを実装する - GeekFactory
ページを下端までスクロールしたら次のページが読み込まれるInfinite Scroll（無限スクロール）をvue.jsで実装する方法を調べてみました． 一般的なInfinite Scrollの実装方法 スクロール可能な要素の scroll イベントを捕捉して，表示領域の位置を計算します．もし，要素の高さに達している場合は，下端までスクロールされたことになります． <div class="items"></div> .items { position: fixed; top: 0; bottom: 0; overflow-y: auto; } $('.items').on('scroll', function (e) { // jQueryを使う場合 var target = $(e.target); if ((target.scrollTop() + target.outerHeight(
Jquery element+class selector performance
I was hoping $('#childDiv2 .txtClass') or $('#childDiv2 input.txtClass') perform better when selecting <input type="text" id="txtID" class="txtClass"/> element. But according to this performance analysis $('.txtClass'); is the best selector among this. I'm using JQuery 1.7.2 Does anybody have explanation for this? HTML <div class="childDiv2"> <input type="text" id="txtID" class="txtClass"/> <p cla
Vue.js が辛くなってきた | status code 51
Vue.js が辛くなってきた。 ひとまず現状の辛さをダンプ 今日チームで改めて話し合って辛さがハッキリしてきたので、それをつらつらと書いてく。 (今のチームは僕を含めて Rails プログラマが多くて、フロントエンドを専門にやってる人はいない。) グローバル変数大量問題(もしくはイベント地獄問題) たくさんの状態(変数)が必要 && 複数 DOM にまたがるレンダリングがしたい。 今は、左ペインで選択して右ペインに出す、みたいな事をしている。 左ペインはタブで様々な種類の項目を選べて、選択したものを右側でリスト化して表示している。 これをやろうとするにあたって、方向性が２つあると思っていて 左ペインと右ペインでコンポーネントを分けて、親玉 ViewModel に変更を通知して親玉がレンダリング制御する -> イベント地獄 左ペインと右ペインの上位の親玉 ViewModel をつくって全て
リアルな DOM はなぜ遅いのか - steps to phantasien
これは VirtualDOM Advent Calendar 2014 に勝手に参加する記事です。 あたたかい春の昼下がりのこと、あるブラウザベンダの社内を不穏な噂が駆け巡った。 「React.js なるライブラリ、どうも仮想 DOM というやつのせいで速いらしいぞ」 もうリアルな DOM はお役御免、ブラウザも商売上がったりか・・・。雇用に不安を覚える人(私)がいる一方、 そのアイデアをとりこんでブラウザの DOM を速く出来ないかと考える人たちもいた。 仮想 DOM はなぜ速いのか。誰かのつてを辿って React.js チームにおいでいただき、速さの秘密をテックトークしてもらう。 イミュータブルなデータ構造による単純化、非同期適用による処理のバッチ化、差分アルゴリズムによる副作用の最小化… いくつかのアイデアはブラウザからはどうにもならないが、たとえば非同期化なんかは形は違えどブラウザ
ぼくのかんがえたさいきょうのES6プロジェクトテンプレート - Qiita
というのを考えたので紹介します。 2015.09.04 内容が古くなっていたので修正 リンティングツールを jshint から eslint に変更 テストでの power-assert 用のオプション指定方法の変更 概要 基本的にはこの記事 ライブラリをES6で書いて公開する所から始めよう (必読) と同じで、それにいくつかのタスクを追加しています。やることと使用しているライブラリは以下の通りです。 ES6のコードをES5ベースに変換する / babel ブラウザ用コードを生成する / browserify ミニファイする / UglifyJS テストする / mocha, power-assert カバレッジレポートを作る / isparta リンティング / eslint ディレクトリ構成 build: ブラウザ用にビルドされたコード bower install されたときに読み込ま
React Tips and Best Practices - ÆFLASH
I've spent a good deal of the past year working with React. I've written, refactored, and re-written many components in that time, and I've seen some best practices and anti-patterns emerge. I'm not going to get into what React is or why you should use it — there are plenty of articles about React floating around the internet. I'm also going to assume you know the basics of working with React and
最近の行儀のよい JavaScript の書き方 - Qiita
JavaScriptは移り変わりの早い言語です。 もう1年以上経っていますし、記事のメンテもちゃんとできていないので、消し線を入れることにしました。 参考程度のために記事は一応残しますが、より新しい情報を読まれることをお勧めいたします。 はじめに --- 最近では JavaScript の実行環境はブラウザに限りません。（node.js, Web Workers） また、旧来のような <script> 経由でのロードもとうに古くなっています。今は CommonJS スタイルで、require を用いたモジュールのロードを行なうことがより良いとされています。 ですから、次のようなことは改める必要があります。 ~~- var YourModule = {}; などとして、外部から YourModule.hoge(); などと呼び出す書き方 this === window だと思うこと~~ 今回
Ajax 誕生から 10 年とこれから - Block Rockin’ Codes
Intro 誕生と言うのが正しいか微妙だけど、多分誕生でいいと思います。 というのも、「Ajax」という名前の出典は以下の記事で、この記事が書かれたのが今日からちょうど 10 年前でした。 Ajax: A New Approach to Web Applications (当時から、 URL が一回変わっている) Web 初めてまだ 10 年たって無いんで、全部見てきたってわけではないですが、個人的にはちょっと思い出深い記事だったりするので、ちょっと振り返ってみます。 Ajax: A New Approach to Web Applications 筆者の Jesse James Garrett 氏は UX のコンサルティング会社である Adaptive Path の創立メンバーの一人で、 UX エンジニアです。 この記事の趣旨は、当時既にあった Google Maps や Gmail、G
CoffeeScript でクラスベースのオブジェクト指向プログラミングをするための基礎知識 - わからん
CoffeeScript にはクラスを定義するための枠組みが言語自身にあります。この記事では、CoffeeScript でのクラス、継承といった基本的な概念を「使う」ための知識と、「理解する」ための解説を書きました。JavaScript をある程度しっており、CoffeeScript をみようみまねでなんとなく使っている人を想定した内容です。念の為申し添えておきますが、JavaScript でのクラスベースのプログラミングの是非は論じていません。 クラス周辺の言語の機能、ひとめぐり class Dog を JS に展開してみます。大きく括るとコンストラクタ関数でクラスを模倣するタイプだとわかります。 class Dog # (function() { # var Dog; # Dog = (function() { # function Dog() {} # return Dog; # }
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dataset vs jquery.data() · jsPerf
pubsub.js vs jQuery events · jsPerf
配列の要素を展開して関数の引数にする - Qiita
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
jQueryでテキストボックスの変更を監視/検知する - Qiita
