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
67
Blogging Like A Hacker
jiguang
5
270
Signature Tool
jiguang
1
75
Javascript正则表达式
jiguang
3
680
虚拟机调试
jiguang
1
94
DNS缓存清除
jiguang
0
90
哈工大90周年校庆吉祥物评比
jiguang
0
150
Other Decks in Technology
See All in Technology
JAWS-UG Bedrock Claude Night
yamahiro
3
710
How to do well in consulting–Balkan Ruby 2024
irinanazarova
0
140
Max out Local LLM in Challenging Environments
sashimimochi
1
110
Amplify 🩷 Bedrock 〜生成AI入門〜
minorun365
PRO
8
590
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
4
660
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
160
DMM.com アルファ室採用案内資料
hsugita
1
230
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
800
実例で紹介するRAG導入時の知見と精度向上の勘所
yamahiro
5
1.6k
成長をサポートするピープルマネジメントのやり方
sioncojp
9
1.1k
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
150
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
3
620
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
423
63k
Visualization
eitanlees
137
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
Designing the Hi-DPI Web
ddemaree
276
33k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Docker and Python
trallard
35
2.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
How GitHub (no longer) Works
holman
305
140k
Fireside Chat
paigeccino
22
2.6k
Embracing the Ebb and Flow
colly
80
4.2k
GraphQLの誤解/rethinking-graphql
sonatard
55
9.3k
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!