• require.js笔记


     
    1. 浏览器端的模块只能采用“异步加载”方式 ==> AMD
    形式:require([module],callback)
     
    2. require.js
    2.1 require.js解决两个问题
      1.实现js文件的异步加载,避免网页失去响应;
      2.管理模块之间的依赖性,便于代码的编写和维护。
    2.2 require.js的使用
    2.2.1 加载js代码
        <script data-main="js/main" src="js/require.js"></script>
        data-main属性的作用是,指定网页程序的主模块。在上例中,就是js目录下面的main.js,这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js,所以可以把main.js简写成main。
    2.2.2 主模块写法
        当主模块依赖其他模块时,采用AMD规范的require()函数
    1 require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    2     // some code here
    3 });
        例如,
    1 require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
    2     // some code here
    3 });
        主模块代码在callback中。
    2.2.3 模块的加载
        在上述代码前,还需对模块的加载行为进行自定义。采用require.config()函数
    1 require.config({
    2     baseUrl: "js/lib", //可选,不写的话默认main.js目录
    3     paths: {
    4         "jquery": "jquery.min",
    5         "underscore": "underscore.min",
    6         "backbone": "backbone.min"
    7     }
    8 });        
        当然,也可以对非本地文件进行加载。
    2.2.4 AMD模块写法
        require.js加载的模块,必须得采用AMD规范。
        用一个普通的js举例,如果它不依赖于其他模块
    1 // math.js
    2 define(function (){
    3   var add = function (x,y){
    4     return x+y;
    5   };
    6   return {
    7     add: add
    8   };
    9 });
        如果它还依赖其它模块,则
    1 define(['myLib'], function(myLib){
    2   function foo(){
    3     myLib.doSomething();
    4   }
    5   return {
    6     foo : foo
    7   };
    8 });
        对该js的加载如下
    1 // main.js
    2 require(['math'], function (math){
    3     alert(math.add(1,1));
    4 });
        其中,第一个数组参数指明其依赖
    2.2.5 加载非AMD规范的依赖
        很多库并不不符合AMD规范,以underscore和backbone为例,如果要加载它们的话,必须先定义它们的特征
     1 require.config({
     2     path: {
     3      ... //同上省略
     4     }
     5     shim: {
     6         'underscore':{
     7             exports: '_'
     8    },
     9         'backbone': {
    10             deps: ['underscore', 'jquery'],
    11             exports: 'Backbone'
    12         }
    13     }
    14 });
        require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。具体来说,每个模块要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性。
  • 相关阅读:
    String API
    正则表达式语法
    正则表达式定义与创建
    jQuery——子元素筛选器
    基本筛选器
    内置对象和包装类型
    栈和队列
    web前端css实现六边形效果
    jquery选择器
    AE导出mov
  • 原文地址:https://www.cnblogs.com/zhaoww/p/5752177.html
Copyright © 2020-2023  润新知