Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 4e74f9d

Browse files
chuanxshichuanxshi
committed
added menu and updated pattern list
1 parent bd23627 commit 4e74f9d

File tree

2 files changed

+64
-6
lines changed

2 files changed

+64
-6
lines changed

‎css/style.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,34 @@ li {
264264
margin-bottom:0.5em;
265265
}
266266

267+
268+
269+
.sticky {
270+
position: fixed;
271+
left: 0;
272+
top: 91px;
273+
z-index: 2;
274+
margin: 0;
275+
276+
}
277+
278+
nav {
279+
text-align: left;
280+
background: #324A69;
281+
background: -o-linear-gradient(rgba(50, 74, 105, 0.8), rgba(50, 74, 105, 1));
282+
background: -webkit-linear-gradient(rgba(50, 74, 105, 0.8), rgba(50, 74, 105, 1));
283+
background: -moz-linear-gradient(rgba(50, 74, 105, 0.8), rgba(50, 74, 105, 1));
284+
background: -ms-linear-gradient(rgba(50, 74, 105, 0.8), rgba(50, 74, 105, 1));
285+
width: 200px;
286+
287+
}
288+
nav li a{ color:white;}
289+
290+
nav li a:visited { color: white; }
291+
nav li a:hover { color: #ccc; }
292+
293+
nav ul {margin-top:10px;}
294+
267295
footer {
268296
text-align:center;
269297
margin-top:2em;

‎index.html

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,13 +43,25 @@ <h1>JavaScript Pattern Collection</h1>
4343
</div>
4444
</div>
4545
<img src="img/js-patterns.png" alt="JS Patterns" title="JS Patterns" />
46+
<nav id="toc" class="sticky">
47+
<ul>
48+
<li><a href="#function-patterns">Function Patterns</a></li>
49+
<li><a href="#jquery-patterns">jQuery Patterns</a></li>
50+
<li><a href="#design-patterns">Design Patterns</a></li>
51+
<li><a href="#general-patterns">General Patterns</a></li>
52+
<li><a href="#literals-and-constructor">Literals and Constructor Patterns</a></li>
53+
<li>
54+
<a href="#object-creation-patterns">Object Creation Patterns</a></li>
55+
</li>
56+
</ul>
57+
</nav>
4658
</header>
4759
<div role="main">
4860
<section id="intro">
49-
<p>A JavaScript pattern and antipattern code collection that covers function patterns, jQuery patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns (<em>upcoming</em>), code reuse patterns (<em>upcoming</em>), DOM and browser patterns (<em>upcoming</em>).</p>
61+
<p>A JavaScript pattern and antipattern code collection that covers function patterns, jQuery patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns (<em>upcoming</em>), DOM and browser patterns (<em>upcoming</em>).</p>
5062
<p><a href="http://www.blog.highub.com/tag/jsPatternRoundUp/" target="_blank">Weekly roundups</a> (pattern updates) will be regularly <a href="http://twitter.com/shichuan" target="_blank">tweeted</a>.</p>
5163
</section>
52-
<section>
64+
<section id="function-patterns">
5365
<h2>Function Patterns</h2>
5466
<h3>API Patterns</h3>
5567
<ul>
@@ -73,7 +85,7 @@ <h3>Performance patterns</h3>
7385
</ul>
7486
</section>
7587

76-
<section>
88+
<section id="jquery-patterns">
7789
<h2>jQuery Patterns</h2>
7890
<ul>
7991
<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/jquery-patterns/requery.html" target="_blank">requery</a> - avoid requery by using jQuery chaining</li>
@@ -94,7 +106,7 @@ <h3>Selector</h3>
94106
</ul>
95107
</section>
96108

97-
<section id="literals-and-constructors">
109+
<section id="literals-and-constructor">
98110
<h2>Literals and Constructors Patterns</h2>
99111
<ul>
100112
<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/literals-and-constructors/object-literal.html" target="_blank">Object literal</a> - use the simpler and reliable object literal instead of new Object();</li>
@@ -106,7 +118,7 @@ <h2>Literals and Constructors Patterns</h2>
106118
</ul>
107119
</section>
108120

109-
<section>
121+
<section id="design-patterns">
110122
<h2>Design Patterns</h2>
111123
<h3>Creational</h3>
112124
<ul>
@@ -131,7 +143,7 @@ <h3>Behavioral</h3>
131143
</ul>
132144
</section>
133145

134-
<section>
146+
<section id="general-patterns">
135147
<h2>General Patterns</h2>
136148
<ul>
137149
<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/general-patterns/minimizing-globals.html" target="_blank">Minimizing Globals</a> - create and access a global variable in a browser environment</li>
@@ -150,6 +162,24 @@ <h2>General Patterns</h2>
150162
</ul>
151163
</section>
152164

165+
<section id="object-creation-patterns">
166+
<h2>Object Creation Patterns</h2>
167+
<ul>
168+
<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/object-creation-patterns/namespace.html" target="_blank">Namespace</a> - namespaces help reduce the number of globals required and avoid naming collisions or excessive name prefixing</li>
169+
<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/object-creation-patterns/declaring-dependencies.html" target="_blank">Declaring Dependencies</a> - it's good to declare the modules your code relies on at the top</li>
170+
<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/object-creation-patterns/private-properties-and-methods.html" target="_blank">Private Properties and Methods</a> - JavaScript doesn't have special syntax for private members, you can implement them using a closure</li>
171+
<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/object-creation-patterns/revelation.html" target="_blank">Revelation Pattern</a> - it is about having private methods, which you also expose as public methods</li>
172+
<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/object-creation-patterns/revealing-module.html" target="_blank">Revealing Module</a> - all the methods are kept private and you only expose those that you decide at the end</li>
173+
<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/object-creation-patterns/constructor-creation-module.html" target="_blank">Modules That Create Constructors</a> - the immediate function that wraps the module will return a function at the end</li>
174+
<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/object-creation-patterns/sandbox.html" target="_blank">Sandbox</a> - it provides an environment for the modules to work without affecting other modules and their personal sandboxes</li>
175+
<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/object-creation-patterns/public-static-members.html" target="_blank">Public Static Members</a> - accessible outside the constructor</li>
176+
<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/object-creation-patterns/private-static-members.html" target="_blank">Private Static Members</a> - shared by all the objects with the same constructor function and not accessible outside the constructor</li>
177+
<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/object-creation-patterns/object-constants.html" target="_blank">Object Constants</a> - an implementation of a contant object provides set, inDefined and get methods</li>
178+
<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/object-creation-patterns/chaining.html" target="_blank">Chaining Pattern</a> - it enables you to call methods on an object one after the other</li>
179+
<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/object-creation-patterns/sugar-method.html" target="_blank">method() Method</a> - adding convenient funcationality to a language</li>
180+
</ul>
181+
</section>
182+
153183
<section>
154184
<h2><em>References</em></h2>
155185
<ol>

0 commit comments

Comments
 (0)