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
いま注目のAIエージェントを作ってみよう
supermarimobros
0
360
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
460
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
160
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
180
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
350
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
160
LLMを搭載したプロダクトの品質保証の模索と学び
qa
1
1.1k
メルカリIBISの紹介
0gm
0
400
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
400
IoT x エッジAI - リアルタイ ムAI活用のPoCを今すぐ始め る方法 -
niizawat
0
120
会社紹介資料 / Sansan Company Profile
sansan33
PRO
7
380k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Designing for humans not robots
tammielis
253
25k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
A Modern Web Designer's Workflow
chriscoyier
696
190k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Docker and Python
trallard
46
3.6k
Why Our Code Smells
bkeepers
PRO
339
57k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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!