This repository has been archived by the owner on Dec 20, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #18 from CapMousse/dev
Version 3.0.1
- Loading branch information
Showing
5 changed files
with
112 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| # Include.js [](https://travis-ci.org/CapMousse/include.js) | ||
|
|
||
| **Include.js** is a tiny (1,2ko minified and gziped) Javascript loader. It can load normal javascript files or css but is more efficient with **web modules**. | ||
| **Include.js** is a tiny (1,3ko minified and gziped) Javascript loader. It can load normal javascript files or css but is more efficient with **web modules**. | ||
|
|
||
| When it's possible, it will use async loading to speed up you page and will ensure the good executions of your script. It support **nested dependencies**, a useful feature to create clean and flexible javascript application. | ||
|
|
||
|
|
@@ -12,70 +12,77 @@ Include.js was tested on : | |
| - Safari √ | ||
| - IE (> 6) √ | ||
|
|
||
| ## How to use | ||
| ## Define modules | ||
|
|
||
| To create a module, create a new javascript file and use `include()` as a wrapper : | ||
| In the old javascript days, to create a module, you would add a simple wrapper on your code, like a auto-called anonymous functiom. | ||
|
|
||
| ```javascript | ||
| include(function(){ | ||
| return { | ||
| name : "Mars Curiosity" | ||
| } | ||
| }) | ||
| (function(env){ | ||
| //your code here | ||
| })(window); | ||
| ``` | ||
|
|
||
| You can name your module with the first argument of `include()`. Name are like `PHP` namespace : `Dir/FileName.js` -> `Dir.FileName` | ||
| Now, to define a module meeting the [AMD standard](http://requirejs.org/docs/whyamd.<html id="definition"></html>), just use `include()` as the wrapper of your code. | ||
|
|
||
| With AMD definition, you can create module having dependencies realy easily, executing code only when the dependencies are available. | ||
|
|
||
| ```javascript | ||
| include('App.Planet', function(){ | ||
| return { | ||
| name : "Mars", | ||
| gravity : 0.376, | ||
| saletties : 2 | ||
| } | ||
| }) | ||
| //define a new module with include | ||
| include(['dep1', 'dep2'], function (dep1, dep2) { | ||
|
|
||
| //define the module value with return | ||
| return dep2({ | ||
| name: dep1('Mars Curiosity') | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| Modules can have dependencies to work, as an array on second argument off `include()` : | ||
| ## Named modules | ||
|
|
||
| Modules without a name are automatically named with their file name. This is what makes modules very portable and easily usable in others projetcs. | ||
|
|
||
| Naming module manually must be avoided to prevent conflicts or loading missing module. Only use module naming in controlled cases or for better performances. | ||
|
|
||
| ```javascript | ||
| include('App.Nasa', ['App/Rover.js', 'App.Planet'], function(Rover, Planet){ | ||
| return { | ||
| rover : Rover.name, | ||
| planet : Planet.name, | ||
| success : true | ||
| } | ||
| //define a named module with dependencies | ||
| include('name', ['dep1', 'dep2'], function (dep1, dep2) { | ||
| return dep2({ | ||
| name: dep1('Mars Curiosity') | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| Modules can also be loaded from other url, and named : | ||
| ## External dependencies | ||
|
|
||
| You can also load external dependencies, useful to speed up website loading time and prevent parsing to be blocked. | ||
|
|
||
| External dependencies can be AMD module or normal javascripts. If no module is found, argument send to the callback will be the index of the script in the dependencies array instead of the module function. | ||
|
|
||
| ```javascript | ||
| include('App.Nasa', [['Rover', 'http://your/url/here/script/rover/'], 'App.Planet'], function(Rover, Planet){ | ||
| return { | ||
| rover : Rover.name, | ||
| planet : Planet.name, | ||
| success : true | ||
| } | ||
| include(['//website/jquery.js', '//website/amd-module.js'], function (indexOfJquery, amdModule) { | ||
| $('#block').text(amdModule()); | ||
| }); | ||
| ``` | ||
|
|
||
| And you can load CSS | ||
| ## Load CSS | ||
|
|
||
| You can also load css like any other module. The callback will be called when the browser will have parsed the style. | ||
|
|
||
| ```javascript | ||
| include('path/to/css.css', function(){ | ||
| //do something when style is apply | ||
| }) | ||
| include(['/styles/alternative.css', '//website/external-css.js'], function (css1, css2) { | ||
| //css1 and css2 will be null | ||
| }); | ||
| ``` | ||
|
|
||
|
|
||
| ## Already using a script loader ? | ||
|
|
||
| If you already use a script loader you can replace it with **Include.js** without problemes and without rewriting code. `define()` and `require()` are supported by **Include.js**. Let's be light ! | ||
| If you already use a script loader you can replace it with Include.js without problemes and without rewriting code. `define()` and `require()` are supported by Include.js. Let's be light ! | ||
|
|
||
|
|
||
| ## Developed by | ||
|
|
||
| - Jérémy Barbe | ||
| - [email protected] | ||
| - [jeremy.sh](http://jeremy.sh) | ||
| - [@capitainemousse](https://twitter.com/capitainemousse) | ||
|
|
||
|
|
||
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters