HTML5 boilerplate with Requirejs (continuous update)

Source: Internet
Author: User
Tags i18n html5 boilerplate

HTML5 boilerplate with requirejstable of contents

    • HTML5 boilerplate with Requirejs
      • Table of Contents
      • Code Base HTML5 Boilerplate
        • Code Base in Browser
      • Requirejs
        • Install
        • Configure
        • Multiple pages
          • Jscommonjs
          • Update Jsmainjs for indexhtml
          • Page1html
      • i18n Requirejs Plugin
        • Install
        • Configure
        • Usage
          • Update Jsmainjs
          • Jsnlsmainjs
          • Jsnlszh-cnmainjs
          • Update Jscommonjs
          • Browser Home Page

Code BASE:HTML5 Boilerplate

Download html5-boilerplate_v5.0.0.zip from HTML5 boilerplate. and put files in your public folder.

You'll see files:

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.png524 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 to in <script src="js/main.js"></script> index.html Web page. <script src="js/require.js" data-main="js/main"></script>

        <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 inserts requirejs.config (configs) in entrance code js/main.js.

/* file: js/main.js *//** * RequireJS configuration **/requirejs.config({  ‘js‘});/** * Entrance **/requirefunction(){  "Hello, world." );});

Then browser your site and you'll get "Hello, World" as alert message.

Multiple pages

When there was more than one Web page was going to develop. We need some configures.

    • Extractrequirejs.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: {jqu Ery: {exports: ' jQuery '}, underscore: {exports: ' _ '}, Backbone: {deps: [' underscore ', ' JQ  Uery '], exports: ' Backbone '}, Backbonelocalstorage: {deps: [' Backbone '], exports: ' Store '} }, paths: {modernizr: ' Vendor/modernizr-2.8.3.min ', jquery: ' Vendor/jquery-1.11.2.min ', underscore: ' Vendor/und Erscore ', backbone: ' Vendor/backbone-min ', backbonelocalstorage: ' Vendor/backbone.localstorage-min ', text: ' Vendo   R/text '}, Map: {' * ': {' loadcss ': ' helpers/loadcss/wrapper '}, config: {' i18n ': {locale: ' ZH-CN '} }}); ******************/sample ******************/  
Update Js/main.jsFor index.html
/* file: js/main.js *//** * load js/common.js in each web page is required. */require‘common‘function(){requirefunction(){  "Hello, world." );});});  // js/common.js loader
+ page1.html
    1. Now create page1.html by copying from index.html.
      • Changedata-main="js/page1/main.js"
    2. Now create js/page1/main.js by copying from js/main.js.
      • Changerequire([ ‘../common‘ ], ...

Actually, dependencies or other GKFX configures in js/common.js can work in pagexxxx.html well, by L Oading 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 this NLS folder should locate besides page entrance codes, for example js/nls/.

Usageupdate 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

"Hello, world!" "'ll be in alert message as js/common.js configures locale is " ZH-CN ".

HTML5 boilerplate with Requirejs (continuous update)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.