• 认识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') );
    });
  • 相关阅读:
    Smarty学习笔记(二)
    Smarty学习笔记(一)
    MVC学习笔记(一)
    2015羊年主流手机配置什么样?
    FPGA学习笔记(一)Verilog语法基础
    FPGA学习笔记(二)模块建立及变量连接
    STM32学习笔记(一)时钟和定时器
    Win8 HTML5与JS编程学习笔记(一)
    Win8 HTML5与JS编程学习笔记(二)
    LUOGU P2831 愤怒的小鸟 (NOIP 2016)
  • 原文地址:https://www.cnblogs.com/eyeear/p/4729247.html
Copyright © 2020-2023  润新知