Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 164 lines (122 sloc) 4.75 kB
481b363 @ded updated readme with markdown syntax
authored
1 $script.js - Asynchronous JavaScript loader and dependency manager
2 ------------------------------------------------------------------
3
e44139b @ded make note of script.path in readme
authored
4 $script.js is an asynchronous JavaScript loader and dependency manager with an astonishingly impressive lightweight footprint (currently 800 bytes! (min + gzip)). Like many other script loaders, $script.js allows you to load script resources on-demand from any URL and not block other resources from loading (like CSS and images). Furthermore, it's unique interface allows developers to work easily with even the most complicated dependencies, which can often be the case for large, complex web applications.
481b363 @ded updated readme with markdown syntax
authored
5
6 Browser Support
7 ---------------
f5cc500 @ded - rename readme and format changes
authored
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)
481b363 @ded updated readme with markdown syntax
authored
14
15 Examples
16 --------
17
18 old school - blocks CSS, Images, AND JS!
19
f5cc500 @ded - rename readme and format changes
authored
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 ```
481b363 @ded updated readme with markdown syntax
authored
25
26 middle school - loads as non-blocking, but has multiple dependents
27
f5cc500 @ded - rename readme and format changes
authored
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 ```
481b363 @ded updated readme with markdown syntax
authored
35
36 new school - loads as non-blocking, and ALL js files load asynchronously
37
f5cc500 @ded - rename readme and format changes
authored
38 ``` js
39 // load jquery and plugin at the same time. name it 'bundle'
40 $script(['jquery.js', 'my-jquery-plugin.js'], 'bundle');
481b363 @ded updated readme with markdown syntax
authored
41
f5cc500 @ded - rename readme and format changes
authored
42 // load your usage
43 $script('my-app-that-uses-plugin.js');
351e3a7 @ded update readme with correct examples and updated copyright
authored
44
481b363 @ded updated readme with markdown syntax
authored
45
f5cc500 @ded - rename readme and format changes
authored
46 /*--- in my-jquery-plugin.js ---*/
47 $script.ready('bundle', function() {
48 // jquery & plugin (this file) are both ready
49 // plugin code...
50 });
351e3a7 @ded update readme with correct examples and updated copyright
authored
51
481b363 @ded updated readme with markdown syntax
authored
52
f5cc500 @ded - rename readme and format changes
authored
53 /*--- in my-app-that-uses-plugin.js ---*/
54 $script.ready('bundle', function() {
55 // use your plugin :)
56 });
57 ```
481b363 @ded updated readme with markdown syntax
authored
58
59 Exhaustive list of ways to use $script.js
60 -----------------------------------------
61
f5cc500 @ded - rename readme and format changes
authored
62 ``` js
63 $script('foo.js', function() {
64 // foo.js is ready
65 });
481b363 @ded updated readme with markdown syntax
authored
66
67
f5cc500 @ded - rename readme and format changes
authored
68 $script(['foo.js', 'bar.js'], function() {
69 // foo.js & bar.js is ready
70 });
481b363 @ded updated readme with markdown syntax
authored
71
72
f5cc500 @ded - rename readme and format changes
authored
73 $script(['foo.js', 'bar.js'], 'bundle');
74 $script.ready('bundle', function() {
75 // foo.js & bar.js is ready
76 });
481b363 @ded updated readme with markdown syntax
authored
77
f5cc500 @ded - rename readme and format changes
authored
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 ```
481b363 @ded updated readme with markdown syntax
authored
111
aa5a716 @ded - change the path() method
authored
112 $script.path()
e44139b @ded make note of script.path in readme
authored
113 ------------
114 Optionally to make working with large projects easier, there is a path variable you can set to set as a base.
115
f5cc500 @ded - rename readme and format changes
authored
116 ``` js
aa5a716 @ded - change the path() method
authored
117 $script.path('/js/modules/')
f5cc500 @ded - rename readme and format changes
authored
118 $script(['dom', 'event'], function () {
119 // use dom & event
120 });
121 ```
e44139b @ded make note of script.path in readme
authored
122
123 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>
124
f5cc500 @ded - rename readme and format changes
authored
125 ``` js
126 $script.path = '/js/modules/';
127 $script(['dom', 'event'], function () {
128 // use dom & event
129 });
e44139b @ded make note of script.path in readme
authored
130
f5cc500 @ded - rename readme and format changes
authored
131 $script.get('http://example.com/base.js', function () {
e44139b @ded make note of script.path in readme
authored
132
f5cc500 @ded - rename readme and format changes
authored
133 });
134 ```
e44139b @ded make note of script.path in readme
authored
135
ea1ee64 @fat Update readme for markdown.js + fix some othe formatting
fat authored
136 Building $script.js
137 -------------------
f5cc500 @ded - rename readme and format changes
authored
138 Building $script.js requires Node. To build, just run:
ea1ee64 @fat Update readme for markdown.js + fix some othe formatting
fat authored
139
f5cc500 @ded - rename readme and format changes
authored
140 $ make
ea1ee64 @fat Update readme for markdown.js + fix some othe formatting
fat authored
141
142 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").
143
144 *Note: you must init the UglifyJS submodule before running the makefile. To do this run:*
145
f5cc500 @ded - rename readme and format changes
authored
146 $ git submodule update --init
de8a8e6 @ded common jsssssssupport
authored
147
24afce1 @ded readme clarity
authored
148 Common JS Support - added in v1.2
de8a8e6 @ded common jsssssssupport
authored
149 -----------------
150
151 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.
152
f5cc500 @ded - rename readme and format changes
authored
153 ``` js
154 var $S = require('script');
de8a8e6 @ded common jsssssssupport
authored
155
f5cc500 @ded - rename readme and format changes
authored
156 $S('/foo.js', function () {
157 // foo is ready
158 });
159 ```
0369ccb @ded update contributors list in readme
authored
160
161 Contributors
162 ------------
6a4f35c @ded fix readme with proper reference to commit history
authored
163 * [Dustin Diaz](https://github.com/ded/script.js/commits/master?author=ded)
7c34318 @ded readme blurb
authored
164 * [Jacob Thornton](https://github.com/ded/script.js/commits/master?author=fat)
Something went wrong with that request. Please try again.