RequireJS 上手使用

首先 点击此处 得到requirejs。

捣鼓了俩小时终于运行成功了，原因是因为require(['我是空格underscore',...],function(){...})的时候 变量多个空格（坑爹啊...）以此纪念一下吧！

大标题一：引用

<script src="lib/require.js" data-main="app"></script> 就是如此简单啦。data-main 为JS主入口，Main嘛 引用主要的入口文件。

此处为app.js 可省略扩展名。如果有多层目录就加上目录好了（这不废话吗...）。

require的诞生是为了解决JS加载导致的浏览器渲染失败和N多JS文件的依赖加载。例如以下情形：

<script src="1.js""></script>

<script src="2.js""></script>

<script src="3.js""></script>

<script src="4.js""></script>

我挂了...

<script src="20.js""></script>

20个JS 和 一堆CSS 看着就头疼，而且一个挂了就全挂了。

等一下！万一require挂了怎么办？不怕，你可以加上异步加载defer和 async="true" 或者将引用放在文档底部。

 Like this : <script src="lib/require.js" data-main="app" defer async="true" ></script>.

 好了！这就加载完成了。测试一下吧

 app.js => alert('You');

 假装你打开了vscode 或者 sublime 或者 brackets 等等...并且成功的弹出了You！

 大标题二：Config and Usage 配置和使用

 介绍require三大方法 define([module],fn(){...})，require([module],fn(){...})，和config({...})。

 小标题1：config({...})方法。此方法接受一个对象{...} 作为参数。

　　　　require.config({

　　　　baseUrl: "lib",

　　　　paths: {"jquery": "jquery-1.8.3","underscore": "underscore","backbone": "backbone"},

　　　　shim: {'backbone': {deps: ['jquery', 'underscore'],exports: 'Backbone',init : fn(jquery,underscore){...}}},

　　　　bundles :{...},

　　　　waitSeconds : 15,

　　　　map : {...},

　　　　config : {...},

　　　　packages : {...}

　　　　});

　　　　参数详解：baseUrl ：基础目录。paths ： 文件引用名称 和 文件名。 shim ： 依赖关系。waitSeconeds : 放弃加载脚本前等待时间 默认7s。

　　　　map ： 指定modules的不同脚本版本引用（多版本支持）。config ： 定义模块的通用配置信息，可被传递给模块。

　　　　shim里的 defs：依赖文件数组，exports：引用标识。init ： 脚本加载完毕后执行的方法。

小标题二 ： define([module]/*此处为注释 该参数可选 忽略条件为模块无其他依赖*/,fn(){...}) 和 require([module],function(){...})

　　　　If 你要用requireJS管理你的脚本文件 你就得使用AMD规范编写代码。

　　　　假设现在有一个模块名为 duck的脚本并且无依赖： 

　　　　定义方法：define(function(){ var restBlood = function(sticks,times){ return 100 - sticks*times };return {restBlood : restBlood };})

　　　　加载方法：require(['duck'],function(duck){ console.log(duck.restBlood(2*4));})

 

　　　　依赖模块animals：

　　　　定义方法：define(['animals'],function(){ var addBlood = function(){ animals.addBlood() };return {addBlood : addBlood };})

 

 大标题三：require plug-in 插件

 　 此外require还有一些实现特定功能的插件 需要单独下载噢！

　  举几个栗子：

　  1.domready

　　require(['domready!'], function (doc){

　　　　// when DOM is ready run code here...

　　　　//此种方式可能会发生 加载过大文档等待时间过长而引起waitSeconds错误。

　　});

　　Or

　　require(['domready'], function (domready){

　　　　domReady(function(){

　　　　})

　　});

　　2.text 和 image  允许加载文本和图片文件

　　

　　 define([

　　　　'text!readme.txt',

　　　　'image!lookyou.jpg',

　　　　'jquery'

　　　　],
　　　　function(readme,lookyou,$){

　　　　　　console.log(readme);

　　　　　　$('body').html(lookyou);

　　　　}

　　);

　　3.i18n.js（配置语言） json（加载json文件） mdown（加载markdown文件）等插件

　　4.更多详细文档移步官方API（虽然是生肉...^_^）