zoukankan      html  css  js  c++  java
  • 对 Sea.js 进行配置 seajs.config

    配置

    可以对 Sea.js 进行配置,让模块编写、开发调试更方便。


    seajs.config seajs.config(options)

    用来进行配置的方法。

    seajs.config({
    
      // 别名配置
      alias: {
        'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
        'json': 'gallery/json/1.0.2/json',
        'jquery': 'jquery/jquery/1.10.1/jquery'
      },
    
      // 路径配置
      paths: {
        '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,
    
      // Sea.js 的基础路径
      base: 'http://example.com/path/to/base/',
    
      // 文件编码
      charset: 'utf-8'
    });
    

    支持以下配置选项:

    alias Object

    当模块标识很长时,可以使用 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
    
    });
    

    使用 alias,可以让文件的真实路径与调用标识分开,有利于统一维护。

    paths Object

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

    seajs.config({
      paths: {
        '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
    
    });
    

    paths 配置可以结合 alias 配置一起使用,让模块引用非常方便。

    vars Object

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

    seajs.config({
      vars: {
        'locale': 'zh-cn'
      }
    });
    
    define(function(require, exports, module) {
    
      var lang = require('./i18n/{locale}.js');
         //=> 加载的是 path/to/i18n/zh-cn.js
    
    });
    

    vars 配置的是模块标识中的变量值,在模块标识中用 {key} 来表示变量。

    map Array

    该配置可对模块路径进行映射修改,可用于路径转换、在线调试等。

    seajs.config({
      map: [
        [ '.js', '-debug.js' ]
      ]
    });
    
    define(function(require, exports, module) {
    
      var a = require('./a');
         //=> 加载的是 path/to/a-debug.js
    
    });
    

    更多用法可参考:调试实践

    preload Array

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

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

    preload 中的空字符串会被忽略掉。

    注意preload 中的配置,需要等到 use 时才加载。比如:

    seajs.config({
      preload: 'a'
    });
    
    // 在加载 b 之前,会确保模块 a 已经加载并执行好
    seajs.use('./b');
    

    preload 配置不能放在模块文件里面:

    seajs.config({
      preload: 'a'
    });
    
    define(function(require, exports) {
      // 此处执行时,不能保证模块 a 已经加载并执行好
    });
    

    debug Boolean

    值为 true 时,加载器不会删除动态插入的 script 标签。插件也可以根据 debug 配置,来决策 log 等信息的输出。

    base String

    Sea.js 在解析顶级标识时,会相对 base 路径来解析。详情请参阅 模块标识

    注意:一般请不要配置 base 路径,把 sea.js 放在合适的路径往往更简单一致。

    charset String | Function

    获取模块文件时,<script> 或 <link> 标签的 charset 属性。 默认是 utf-8

    charset 还可以是一个函数:

    seajs.config({
      charset: function(url) {
    
        // xxx 目录下的文件用 gbk 编码加载
        if (url.indexOf('http://example.com/js/xxx') === 0) {
          return 'gbk';
        }
    
        // 其他文件用 utf-8 编码
        return 'utf-8';
    
      }
    });
    

    提示

    多次配置自动合并

    seajs.config 可以多次运行,每次运行时,会对配置项进行合并操作:

    seajs.config({
      alias: {
        'jquery': 'path/to/jquery.js',
        'a': 'path/to/a.js'
      },
      preload: ['seajs-text']
    });
    
    seajs.config({
      alias: {
        'underscore': 'path/to/underscore.js',
        'a': 'path/to/biz/a.js'
      },
      preload: ['seajs-combo']
    });
    

    上面两处 config 运行的结果是:

     alias = {
       'jquery': 'path/to/jquery.js',
       'underscore': 'path/to/underscore.js',
       'a': 'path/to/biz/a.js'
     };
    
     preload = ['seajs-text', 'seajs-combo'];
    

    即:config 会自动合并不存在的项,对存在的项则进行覆盖。

    插件的配置

    插件可以给 Sea.js 添加配置项,请查看具体插件了解相关配置。

    配置文件

    配置可以直接写在 html 页面上,也可以独立出来成为一个文件。

    config.js

    seajs.config({
      ...
    });
    

    独立成一个文件时,一般通过 script 标签在页面中同步引入。


    常用的配置项是 aliaspathsbase,其他配置项有需要时,来查查文档就会用了。

  • 相关阅读:
    HDU 5938 Four Operations 【贪心】(2016年中国大学生程序设计竞赛(杭州))
    HDU 5935 Car 【模拟】 (2016年中国大学生程序设计竞赛(杭州))
    HDU 5934 Bomb 【图论缩点】(2016年中国大学生程序设计竞赛(杭州))
    HDU 5933 ArcSoft's Office Rearrangement 【模拟】(2016年中国大学生程序设计竞赛(杭州))
    HDU 5929 Basic Data Structure 【模拟】 (2016CCPC东北地区大学生程序设计竞赛)
    【转】LaTeX 符号命令大全
    HDU 5922 Minimum’s Revenge 【模拟】 (2016CCPC东北地区大学生程序设计竞赛)
    HDU 5927 Auxiliary Set 【DFS+树】(2016CCPC东北地区大学生程序设计竞赛)
    数据结构之稀疏矩阵
    C++中引用(&)的用法和应用实例
  • 原文地址:https://www.cnblogs.com/wangxy/p/4906610.html
Copyright © 2011-2022 走看看