Skip to content

Commit f5cc500

Browse files
dedded
committed
- rename readme and format changes
1 parent a09058b commit f5cc500

File tree

1 file changed

+100
-87
lines changed

1 file changed

+100
-87
lines changed

README.markdown renamed to README.md

Lines changed: 100 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -5,145 +5,158 @@ $script.js is an asynchronous JavaScript loader and dependency manager with an a
55

66
Browser Support
77
---------------
8-
IE 6, 7, 8, 9
9-
Opera 10, 11
10-
Safari 3, 4, 5
11-
Chrome 9, 10, beta
12-
Firefox 2, 3, beta
13-
Lynx (just kidding)
8+
* IE 6, 7, 8, 9
9+
* Opera 10, 11
10+
* Safari 3, 4, 5
11+
* Chrome 9, 10, beta
12+
* Firefox 2, 3, beta
13+
* Lynx (just kidding)
1414

1515
Examples
1616
--------
1717

1818
old school - blocks CSS, Images, AND JS!
1919

20-
<script src="jquery.js"></script>
21-
<script src="my-jquery-plugin.js"></script>
22-
<script src="my-app-that-uses-plugin.js"></script>
23-
20+
``` html
21+
<script src="jquery.js"></script>
22+
<script src="my-jquery-plugin.js"></script>
23+
<script src="my-app-that-uses-plugin.js"></script>
24+
```
2425

2526
middle school - loads as non-blocking, but has multiple dependents
2627

27-
$script('jquery.js', function() {
28-
$script('my-jquery-plugin.js', function() {
29-
$script('my-app-that-uses-plugin.js');
30-
});
31-
});
28+
``` js
29+
$script('jquery.js', function() {
30+
$script('my-jquery-plugin.js', function() {
31+
$script('my-app-that-uses-plugin.js');
32+
});
33+
});
34+
```
3235

3336
new school - loads as non-blocking, and ALL js files load asynchronously
3437

35-
// load jquery and plugin at the same time. name it 'bundle'
36-
$script(['jquery.js', 'my-jquery-plugin.js'], 'bundle');
37-
38-
// load your usage
39-
$script('my-app-that-uses-plugin.js');
38+
``` js
39+
// load jquery and plugin at the same time. name it 'bundle'
40+
$script(['jquery.js', 'my-jquery-plugin.js'], 'bundle');
4041

42+
// load your usage
43+
$script('my-app-that-uses-plugin.js');
4144

42-
/*--- in my-jquery-plugin.js ---*/
43-
$script.ready('bundle', function() {
44-
// jquery & plugin (this file) are both ready
45-
// plugin code...
46-
});
4745

46+
/*--- in my-jquery-plugin.js ---*/
47+
$script.ready('bundle', function() {
48+
// jquery & plugin (this file) are both ready
49+
// plugin code...
50+
});
4851

49-
/*--- in my-app-that-uses-plugin.js ---*/
50-
$script.ready('bundle', function() {
51-
// use your plugin :)
52-
});
5352

53+
/*--- in my-app-that-uses-plugin.js ---*/
54+
$script.ready('bundle', function() {
55+
// use your plugin :)
56+
});
57+
```
5458

5559
Exhaustive list of ways to use $script.js
5660
-----------------------------------------
57-
$script('foo.js', function() {
58-
// foo.js is ready
59-
});
6061

62+
``` js
63+
$script('foo.js', function() {
64+
// foo.js is ready
65+
});
6166

62-
$script(['foo.js', 'bar.js'], function() {
63-
// foo.js & bar.js is ready
64-
});
6567

68+
$script(['foo.js', 'bar.js'], function() {
69+
// foo.js & bar.js is ready
70+
});
6671

67-
$script(['foo.js', 'bar.js'], 'bundle');
68-
$script.ready('bundle', function() {
69-
// foo.js & bar.js is ready
70-
});
7172

73+
$script(['foo.js', 'bar.js'], 'bundle');
74+
$script.ready('bundle', function() {
75+
// foo.js & bar.js is ready
76+
});
7277

73-
$script('foo.js', 'foo');
74-
$script('bar.js', 'bar');
75-
$script
76-
.ready('foo', function() {
77-
// foo.js is ready
78-
})
79-
.ready('bar', function() {
80-
// bar.js is ready
81-
});
82-
83-
84-
var dependencyList = {
85-
foo: 'foo.js',
86-
bar: 'bar.js',
87-
thunk: ['thunkor.js', 'thunky.js']
88-
};
89-
90-
$script('foo.js', 'foo');
91-
$script('bar.js', 'bar');
92-
93-
// wait for multiple depdendencies!
94-
$script.ready(['foo', 'bar', 'thunk'], function() {
95-
// foo.js & bar.js & thunkor.js & thunky.js is ready
96-
}, function(depsNotFound) {
97-
// foo.js & bar.js may have downloaded
98-
// but ['thunk'] dependency was never found
99-
// so lazy load it now
100-
depsNotFound.forEach(function(dep) {
101-
$script(dependencyList[dep], dep);
102-
});
103-
});
78+
79+
$script('foo.js', 'foo');
80+
$script('bar.js', 'bar');
81+
$script
82+
.ready('foo', function() {
83+
// foo.js is ready
84+
})
85+
.ready('bar', function() {
86+
// bar.js is ready
87+
});
88+
89+
90+
var dependencyList = {
91+
foo: 'foo.js',
92+
bar: 'bar.js',
93+
thunk: ['thunkor.js', 'thunky.js']
94+
};
95+
96+
$script('foo.js', 'foo');
97+
$script('bar.js', 'bar');
98+
99+
// wait for multiple depdendencies!
100+
$script.ready(['foo', 'bar', 'thunk'], function() {
101+
// foo.js & bar.js & thunkor.js & thunky.js is ready
102+
}, function(depsNotFound) {
103+
// foo.js & bar.js may have downloaded
104+
// but ['thunk'] dependency was never found
105+
// so lazy load it now
106+
depsNotFound.forEach(function(dep) {
107+
$script(dependencyList[dep], dep);
108+
});
109+
});
110+
```
104111

105112
$script.path
106113
------------
107114
Optionally to make working with large projects easier, there is a path variable you can set to set as a base.
108115

109-
$script.path = '/js/modules/';
110-
$script(['dom', 'event'], function () {
111-
// use dom & event
112-
});
116+
``` js
117+
$script.path = '/js/modules/';
118+
$script(['dom', 'event'], function () {
119+
// use dom & event
120+
});
121+
```
113122

114123
Note that this will include all scripts from here on out with the base path. If you wish to circumvent this for any single script, you can simply call <code>$script.get()</code>
115124

116-
$script.path = '/js/modules/';
117-
$script(['dom', 'event'], function () {
118-
// use dom & event
119-
});
125+
``` js
126+
$script.path = '/js/modules/';
127+
$script(['dom', 'event'], function () {
128+
// use dom & event
129+
});
120130

121-
$script.get('http://example.com/base.js', function () {
131+
$script.get('http://example.com/base.js', function () {
122132

123-
});
133+
});
134+
```
124135

125136
Building $script.js
126137
-------------------
127-
Building $script.js requires NodeJS to be installed. To build, just run:
138+
Building $script.js requires Node. To build, just run:
128139

129-
make
140+
$ make
130141

131142
The copies of $script.js & $script.min.js that are in the dist folder will be overwritten with the newly built copies. The minified version of $script is compressed with [UglifyJS](https://github.com/mishoo/UglifyJS "UglifyJS").
132143

133144
*Note: you must init the UglifyJS submodule before running the makefile. To do this run:*
134145

135-
git submodule update --init
146+
$ git submodule update --init
136147

137148
Common JS Support - added in v1.2
138149
-----------------
139150

140151
Several folks have asked about [Common JS Module](http://commonjs.org) support. It's a bit unclear why this support is needed since $script itself can load files, and more than likely you're already loading your dependencies with something like [RequireJS](http://requirejs.org/). However it's also unknown what any given developer can be doing with $script, like for example injecting it into their existing headless unit testing framework -- therefore as of v1.2, $script will export itself as a module rather than exposing itself to the browser _window_ object.
141152

142-
var $S = require('script');
153+
``` js
154+
var $S = require('script');
143155

144-
$S('/foo.js', function () {
145-
// foo is ready
146-
});
156+
$S('/foo.js', function () {
157+
// foo is ready
158+
});
159+
```
147160

148161
Contributors
149162
------------

0 commit comments

Comments
 (0)