• seajs学习笔记


    seajs配置

    seajs.config({
        //别名配置
      alias:{
        'es5-safe':'gallery/es5-safe/0.9.3/es5-safe',
        'jquery':'jquery/jquery/1.10.1/jquery',     'json':'gallery/json/1.0.2/json',   },   //配置路径   path:{
        'gallery':'https://a.alipayobjects.com/gallery'
      },
      //变量配置
      vars:{
        'locale':'zh-cn'
      },
      //映射配置
      map:[
        ['http://example.com/js/app','http://localhost/js/app/']
      ],
      //预加载
      preload:[
        Function.prototype.bind?'':'es5-safe',
        this.JSON?'','json'
      ],
      //调试模式
      debug:true,
      //seajs的基础路径
      base:'http:example.com/path/to/base',
      //文件编码
      charset:'utf-8'
    })

     seajs使用

    1.当模块标识很长时,可以使用alias来简化。

    seajs.config({
        alias:{
        'jquery':'jquery/jquery/1.10.1/jquery',
        'app/biz':'http://path/to/app/biz.js',
      }
    })

    define(function(require,exports,module){
      var $=require('jquery');
      //加载的是http://path/to/base/jquery/jquery/1.10.1/jquery.js
      var biz=require('app/biz');
      //加载的是http://path/to/app/biz.js
    })

    2.当目录比较深,或需要跨目录调用模块时,可以使用paths来简化。

    seajs.config({
      path:{
        'gallery':'https://a.alipayobjects.com/gallery',
        'app':'path/to/app',
      }
    })

    define(function(require,exports,module){
      var underscore=require('gallery/underscore');
      //加载的是https://a.alipayobjects.com/gallery/underscore.js
      var biz=require('app/biz');
      //加载的是path/to/app/biz.js
    })

    3.有些场景下,模块路径在运行时才能确定,这时可以使用vars变量来配置

    seajs.config({
      vars:{
        'locale':'zh-cn'
      } })

    define(function(require,exports,module){
      var lang=requrie('./i18n/{locale}.js')
      //加载的是path/to/il8n/zh-cn-js
    })

    4.map,对模块路径进行映射修改,可用于路径转换,在线调试等。

    seajs.config({
        map:[
        ['.js','-debug.js']
      ] })

    define(function(require,exports,module){
      var a=require('./a');
      //加载的是path/to/a-debug.js
    })

    5.使用preload配置项,可以在普通模块加载前,提前加载并初始化好指定模块。

    // 在老浏览器中,提前加载好 ES5 和 json 模块
    seajs.config({
      preload: [
        Function.prototype.bind ? '' : 'es5-safe',
        this.JSON ? '' : 'json'
      ]
    });//preload中的空字符串会被忽略

    6.定义模块

    define('hello', ['jquery'], function(require, exports, module) {
    
      // 模块代码
    
    });

    define('hello', ['jquery'], function(require, exports, module) {
    
      // 模块代码
    
    });
     

    7.require 是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口。

    define(function(require, exports) {
    
      // 获取模块 a 的接口
      var a = require('./a');
    
      // 调用模块 a 的方法
      a.doSomething();
    
    });

    8.require.async 方法用来在模块内部异步加载模块,并在加载完成后执行指定回调。callback 参数可选。

    define(function(require, exports, module) {
    
      // 异步加载一个模块,在加载完成时,执行回调
      require.async('./b', function(b) {
        b.doSomething();
      });
    
      // 异步加载多个模块,在加载完成时,执行回调
      require.async(['./c', './d'], function(c, d) {
        c.doSomething();
        d.doSomething();
      });
    
    });

    注意require 是同步往下执行,require.async 则是异步回调执行。require.async 一般用来加载可延迟异步加载的模块。

    9.使用模块系统内部的路径解析机制来解析并返回模块路径。该函数不会加载模块,只返回解析后的绝对路径。

    define(function(require, exports) {
    
      console.log(require.resolve('./b'));
      // ==> http://example.com/path/to/b.js
    
    });

    10.exports 是一个对象,用来向外提供模块接口。

    define(function(require, exports) {
    
      // 对外提供 foo 属性
      exports.foo = 'bar';
    
      // 对外提供 doSomething 方法
      exports.doSomething = function() {};
    
    });

    //除了给 exports 对象增加成员,还可以使用 return 直接向外提供接口。
    define(function(require) {
    
      // 通过 return 直接提供接口
      return {
        foo: 'bar',
        doSomething: function() {}
      };
    
    });
     
    define(function(require, exports, module) {
      module.exports = {
        foo: 'bar',
        doSomething: function() {}
      };
    
    });
     

    11.模块的唯一标识。

    define('id', [], function(require, exports, module) {
    
      // 模块代码
    
    });

    12.根据模块系统的路径解析规则得到的模块绝对路径。

    define(function(require, exports, module) {
    
      console.log(module.uri); 
      // ==> http://example.com/path/to/this/file.js  一般情况下(没有在 define 中手写 id 参数时),module.id 的值就是 module.uri,两者完全相同。
    
    });

    练习代码

    //模块入口
    seajs.use('./js/test/test1',function(a){    a.fun1() })
    //test1.js define(
    function(require,exports,module){ var test=require('./test2'); console.log(test.bb)//我safdsafes console.log(require.resolve('./test1'))//http://127.0.0.1:8020/seajs/js/test/test1.js console.log(module.uri)//http://127.0.0.1:8020/seajs/js/test/test1.js console.log(module.dependencies)//['test2'] module.exports={ fun1:function(){console.log("fun1----------"+test.fun1())},//fun1----------fun1---------- fun2:function(){console.log("fun2---------")}, bb:'我是代理商积分' } }) //test2.js define(function(require,exports,module){ module.exports={ fun1:function(){ return "fun1----------"}, fun2:function(){console.log("fun2---------")}, bb:'我safdsafes' } })
  • 相关阅读:
    [Luogu 2261] CQOI2007 余数求和
    [Luogu 3178] HAOI2013 树上操作
    「模板」 树链剖分 HLD
    「模板」 线段树——区间乘 && 区间加 && 区间求和
    [Luogu 2221] HAOI2012 高速公路
    [Luogu 3973] TJOI2015 线性代数
    「模板」 01 Trie实现平衡树功能
    [Luogu 1640] SCOI2010 连续攻击游戏
    [Luogu 1402] 酒店之王
    [Luogu 1963] NOI2009 变换序列
  • 原文地址:https://www.cnblogs.com/yddlvo/p/5973588.html
Copyright © 2020-2023  润新知