认识Require

  1. 加载require.js文件

<script type="text/javascript" src="js/require.js" data-main="js/main" defer async="true" ></script>

  2. 加载主模块文件

  通过<script>标签设置 data-main="js/main" 加载主模块文件。

  3. 异步加载require.js文件 

  设置 defer async="true" 实现多个浏览器兼容异步加载。

    4. 路径配置

   在main.js的顶部加入下面的代码

require.config({
	baseUrl: "js/",
  paths: {
		"jquery": "jquery.min",
		"underscore": "underscore.min",
		"backbone": "backbone.min"
	}
});

  5. 加载一个jquery.js文件

define(['jquery'],function ($){
	 $(function(){
	 	//console.log('jquery已经加载。');
	 });
});

  6. 加载多个文件 

require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
	$(function(){
	 	 //..
	});
});

  7. 加载自定义模块 

//加载key/value格式模块 
define(['jquery','jsonobj'],function ($,json){
	 $(function(){
	 	 console.log(json.name +'/'+ json.age);
	 });
});
//jsonobj.js
define({
	'name': 'lbs',
	'age': 10
});
//加载一个函数模块
define(['jquery','setColor'],function ($,O){
	$(function(){
	 	O.setColor();
	 });
});
//setColor.js
define(function(){
	var color = function (){
    document.getElementsByTagName('body')[0].style.backgroundColor = 'red';
  };
  return {
      setColor: color
	};
});
//加载一个依赖关系的函数模块
define(['jquery','color'],function ($,O){
	$(function(){
	 	O.setColor();
	 });
});
//color.js
define(['jquery'],function($){
	var color = function(){
    $('body').css('background','red');
  };
  return {
      setColor: color
	};
});

  8. 其他配置选项 

//加载非AMD标准的模块文件(underscore,backbone某些版本不符合AMD标准)
require.config({
    baseUrl: "js/",
    paths: {
        "jQuery": "jquery.min",
        "underscore": "underscore-min",
        "backbone": "backbone-min"
    },
    shim: {
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: ['underscore', 'jQuery'],
            exports: 'Backbone'
        }
    }
});
//shim属性定义不符合AMD标准加载模块文件的输出变量(exports)和依赖文件(deps)
//加载对应模块文件
require(['backbone'], function(Backbone){
    var person = Backbone.Model.extend({
        defaults: {
            name: 'lbs',
            age: 10
        }
    });
    var me = new person();
    console.log( me.get('name') +'/'+ me.get('age') );
});
posted @ 2015-08-14 10:31  eyeear  阅读(388)  评论(0编辑  收藏  举报