HTML5 Boilerplate with RequireJS (持续更新)
HTML5 Boilerplate with RequireJS
Table of contents
Code base: HTML5 Boilerplate
Download html5-boilerplate_v5.0.0.zip from HTML5 Boilerplate. And put files in your public folder.
You will see files:
user@host:public$ tree
.
├── 404.html
├── apple-touch-icon.png
├── browserconfig.xml
├── crossdomain.xml
├── css
│ ├── main.css
│ └── normalize.css
├── doc
│ ├── css.md
│ ├── extend.md
│ ├── faq.md
│ ├── html.md
│ ├── js.md
│ ├── misc.md
│ ├── TOC.md
│ └── usage.md
├── favicon.ico
├── humans.txt
├── img
├── index.html
├── js
│ ├── main.js
│ ├── plugins.js
│ └── vendor
│ ├── jquery-1.11.2.min.js
│ └── modernizr-2.8.3.min.js
├── robots.txt
├── tile.png
└── tile-wide.png
5 directories, 24 files
Code Base in Browser
Open your favorite HTML5 browser and access code base. Mine is http://centos.xiaoqiang.loc/.
+ RequireJS
We already have a code base which HTML5 Boilerplate. In the code base, we have only One page index.html with entrance js/main.js. We are using the same code structure to support RequireJS.
Now let’s add require.js in.
Install
Download require.js (v2.1.16) and locate it besides js/main.js as js/require.js.
Then change <script src="js/main.js"></script>
to <script src="js/require.js" data-main="js/main"></script>
in index.html web page.
<script>window.jQuery || document.write(‘<script src="js/vendor/jquery-1.11.2.min.js"><\/script>‘)</script>
<script src="js/plugins.js"></script>
<!-- <script src="js/main.js"></script> -->
<script src="js/require.js" data-main="js/main.js"></script>
Configure
For single page support, we just insert requirejs.config( configs ) in entrance code js/main.js.
/* file: js/main.js */
/**
* RequireJS configuration
**/
requirejs.config({
baseUrl: ‘js‘
});
/**
* Entrance
**/
require([], function(){
alert( "Hello, world." );
});
Then browser your site and you will get “Hello, world.” as alert message.
Multiple pages
When there are more than one web page is going to develop. We need some configures.
- Extract
requirejs.config()
- More pageXXXX.html which based on copy of index.html
- Entrance code in js/pageXXXX folder as js/pageXXXX/main.js.
- This appointment helps to identify: which page uses which entrance code and modules belongs to it
+ js/common.js
Put RequireJS configuration in js/common.js file.
/* file: js/common.js */
requirejs.config({
baseUrl: ‘js‘
});
/****************** SAMPLE ******************
requirejs.config({
baseUrl: ‘js‘,
shim: {
jquery: {
exports: ‘jQuery‘
},
underscore: {
exports: ‘_‘
},
backbone: {
deps: [ ‘underscore‘, ‘jquery‘ ],
exports: ‘Backbone‘
},
backboneLocalstorage: {
deps: [ ‘backbone‘ ],
exports: ‘Store‘
}
},
paths: {
modernizr: ‘vendor/modernizr-2.8.3.min‘,
jquery: ‘vendor/jquery-1.11.2.min‘,
underscore: ‘vendor/underscore‘,
backbone: ‘vendor/backbone-min‘,
backboneLocalstorage: ‘vendor/backbone.localStorage-min‘,
text: ‘vendor/text‘
},
map: {
‘*‘: {
‘loadCSS‘: ‘helpers/loadCSS/wrapper‘
}
},
config: {
‘i18n‘: { locale: ‘zh-cn‘ }
}
});
****************** /SAMPLE ******************/
Update js/main.js for index.html
/* file: js/main.js */
/**
* load js/common.js in each web page is required.
*/
require([ ‘common‘ ], function(){
require([], function(){
alert( "Hello, world." );
});
}); // js/common.js loader
+ page1.html
- Now create page1.html by copying from index.html.
- change
data-main="js/page1/main.js"
- change
- Now create js/page1/main.js by copying from js/main.js.
- change
require([ ‘../common‘ ], ...
- change
Actually, dependencies or other shared configures in js/common.js can work in pageXXXX.html well, by loading it before main logic.
+ i18n (RequireJS Plugin)
See RequireJS i18n bundle API can help more.
Install
Download i18n.js and put besides js/main.js as js/i18n.js.
Configure
It is suggest that nls folder should locate besides page entrance codes, for example js/nls/.
Usage
Update js/main.js
/* file: js/main.js */
/**
* load js/common.js in each web page is required.
*/
require([ ‘common‘ ], function(){
require([
‘i18n!nls/main‘ /* Use ./i18n.js to load `nls/main` locale files */
], function( main){
alert( main.helloworld );
});
}); // js/common.js loader
Then, create the following sample files.
+ js/nls/main.js
/* file: js/nls/main.js */
define({
"root": {
"helloworld": "Hello, world."
},
"zh-cn": true
});
+ js/nls/zh-cn/main.js
/* file: js/nls/zh-cn/main.js */
define({
"helloworld": "你好,世界。"
});
Update js/common.js
/* file: js/common.js */
requirejs.config({
baseUrl: ‘js‘,
config: {
‘i18n‘: { locale: ‘zh-cn‘ }
}
});
Browser Home page
“你好,世界!” will be in alert message as js/common.js configures locale is “zh-cn”.
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。