Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Basic JavaScript Coding Patterns
Search
Ji Guang
November 09, 2012
Technology
4
640
Basic JavaScript Coding Patterns
no
Ji Guang
November 09, 2012
Tweet
Share
More Decks by Ji Guang
See All by Ji Guang
Adobe Edge Preview
jiguang
0
73
Blogging Like A Hacker
jiguang
5
280
Signature Tool
jiguang
1
79
Javascript正则表达式
jiguang
3
690
虚拟机调试
jiguang
1
110
DNS缓存清除
jiguang
0
110
哈工大90周年校庆吉祥物评比
jiguang
0
170
Other Decks in Technology
See All in Technology
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
450
[RSJ25] Feasible RAG: Hierarchical Multimodal Retrieval with Feasibility-Aware Embodied Memory for Mobile Manipulation
keio_smilab
PRO
0
100
AIエージェントの活用に重要な「MCP (Model Context Protocol)」とは何か
masayamoriofficial
0
290
Vault meets Kubernetes
mochizuki875
0
270
ヒューリスティック評価を用いたゲームQA実践事例
gree_tech
PRO
0
540
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
150
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.3k
シークレット管理だけじゃない!HashiCorp Vault でデータ暗号化をしよう / Beyond Secret Management! Let's Encrypt Data with HashiCorp Vault
nnstt1
3
220
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
3
1.1k
異業種出身エンジニアが気づいた、転向して十数年経っても変わらない自分の武器とは
macnekoayu
0
280
ライブサービスゲームQAのパフォーマンス検証による品質改善の取り組み
gree_tech
PRO
0
540
DDD集約とサービスコンテキスト境界との関係性
pandayumi
2
260
Featured
See All Featured
BBQ
matthewcrist
89
9.8k
Making Projects Easy
brettharned
117
6.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Into the Great Unknown - MozCon
thekraken
40
2k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Designing for humans not robots
tammielis
253
25k
Six Lessons from altMBA
skipperchong
28
4k
A better future with KSS
kneath
239
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
Basic JavaScript Coding Patterns @laserji 2012-05-16
Variable Definition var a = 0, b=1, c=“xxx”; //
shorter var obj = {}; // faster var arr = []; var regex = /something/;
Default Value arg = arg || „default‟; // fallback
e || e = window.event; return a || „default‟
Condition answer = obj && obj.xx && obj.xx. property
if( obj.xx ){ … } // don‟t: if(obj != null){} if( a === b){ … } // always if(document.getElementById){ … } // ability detect
Ternary check ? value1 : value2; var foo
= (condition) ? value1 : value2; return (condition) ? value1 : value2; foo = predicate ? ”one” : predicate ? ”two” : ”default”;
Iteration var name = value[i]; i++ var
name = values[i++];
DOM Operation el.style.display = „none‟; // offline //
operation el.style.display = „block‟; var fragment = document.createDocumentFragment(); innerHTML // Be careful with NodeList var imges = document.getElementsByTagName(„img‟);
Event Agent attach event at a higher level
<div id=“highLevelElement”> <div><ul><li> … </li></ul></div> </div> $(„#id‟).click(function(evt){ … });
Object as a Namespace var MYAPP = {};
MYAPP.namespace(„event‟);
Chaining var obj = new MYAPP.dom.Element(„span‟); obj.setText(„hello‟)
.setStyle(„color‟, „red‟) .serStyle(„font‟, „Verdana‟); document.body.appendChild(obj); // return this
Function (function(){ … })(); // block scope (function($){
… }(jQuery);
Configure Obj function foo( conf ){ … }
foo ({ key1 : 1, key2 : 2 })
Type Conversion +‟010‟ === 10 Number(„010‟) === 10
parseInt(„010‟, 10) === 10 10 + “” === “10”
Prototype Array.prototype.forEach = function(){ … } // only
for forward compatible
Loop for ( var I = 0, j =
xx.length; i<j; i++){ … } // cache var I = 0, j = xx.lenght; for (;i<j; i++){ … } // hoisting for ( var I in foo ){ if( foo.hasOwnProperty(i) ){ // required console.log(i) } }
New Feature Array.forEach() // use it when possible
getElementsByClassName() querySlectorAll()
Lazy Definition function lazyDef(){ if(condition1){ lazyDef =
function(){ … }; }else if(condition2){ lazyDef = function(){ … }; } return lazyDef(); }
Private Functions as Public Methods var MYAPP = {};
MYAPP.dom = (function(){ var _setStyle = function(el, prop, value){ console.log(„setStyle‟); }; return { setStyle: _setStyle }; })(); // MYAPP.dom.setStyle = otherFunc
Design Patterns Singleton Factory Decorator Observer
……
Thank You!