zoukankan      html  css  js  c++  java
  • requirejs学习,demo下载学习

    阮一峰:require.js的用法

    学习过程中的demo下载

    关于requirejs有利于js的模块化,自动生成js路径,并且能够解决js的执行的先后,其使用的方法为如下

    下载使用

    1.首先先下载一个require.js

    
    

    data-main,require.js使用它来启动脚本加载过程 注意这段代码的执行顺序是先执行require.js,在执行a.js,在执行main.js;

    require.config

    //main.js
    require.config({
    paths:{jquery:'jquery-1.7.2'}
    })
    require(['jquery'],function($){
    //do something
    })
    

    这里main.js中配置了jquery,前面的是后面路径的require([],function(){})的缩写

    例如
    require.config({
    shim:{
    'jquery.fontsize':['jquery']
    },
    paths:{
    jquery:'jquery-1.7.2',
    'jquery.fontsize':'fontsize'
    }
    })
    require(['jquery','jquery.fontsize'],function($){
    $('#bbb').fontsize();
    })
    
    require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // some code here
    });
    

    理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。但是实际上,虽然已经有一部分流行的函数库(比如jQuery)符合AMD规范,更多的库并不符合。那么,require.js是否能够加载非规范的模块呢? 回答是可以的。 这样的模块在用require()加载之前,要先用require.config()方法,定义它们的一些特征。 举例来说,underscore和backbone这两个库,都没有采用AMD规范编写。如果要加载它们的话,必须先定义它们的特征。

    shim: {
    'jquery.scroll': {
    deps: ['jquery'],
    exports: 'jQuery.fn.scroll'
    }
    }
    require.config({
    shim: {
    'underscore':{
    exports: '_'
    },
    'backbone': {
    deps: ['underscore', 'jquery'],
    exports: 'Backbone'
    }
    }
    });
    

    require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。具体来说,每个模块要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性。

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

    说明:没有baseUrl,这里的地址都是相对于data-main的路径的,

  • 相关阅读:
    android性能优化之布局优化
    android性能调优之traceview的使用
    android性能优化
    EditText光标居上
    ExecutorService的submit(Runnable x)和execute(Runnable x) 两个方法的本质区别
    android 静默安装
    android 内存优化
    image-webpack-loader在mac或ubuntu报错
    git重命名文件和文件夹
    js判断设备类型
  • 原文地址:https://www.cnblogs.com/heyinwangchuan/p/6284217.html
Copyright © 2011-2022 走看看