zoukankan      html  css  js  c++  java
  • seajs模块路径解析 简单总结

    seajs模块路径解析


    最近在试着用seajs + grunt改造现有项目, 遇到的最大的问题就是seajs命名与调用, 简单总结一下。

    模块调用

    seajs中调用模块有两种方式,seajs.use(ID) 、 require(ID)。

    ID命名

    • 完整绝对路径 例如 "http://example.com/test/js/jquery/jquery.js"
    • 以 "." 开头 例如 "./home/main" "../main"
    • 以 "/" 开头 例如 "/js/home/"
    • 普通命名 例如 "home/main"

    模块路径解析

    1. 替换alias
    2. 添加base前缀

    可以在seajs.config()方法中设置ID别名和基础路径, 例如:

    seajs.config({
        base:"js",
        alias: {
            jquery: "/jquery/jquery"
        }
    })
    base添加规则
    • 完整的绝对路径 不会加base

    • 以 "." 开头 会相对于当前(被调用的)模块解析地址。 如果不存在被调用的模块(如seajs.use() ), 则会相对于当前页面解析地址。

    • 以 "/" 开头 相对于当前页面的根目录 解析地址

    • 普通命名 直接加上base前缀

    base值
    • base 默认值是 seajs所在目录

    • seajs.config()中base的解析与ID命名解析规则相同

    例如:

    http://example.com/test/js/sea/sea.js

    http://example.com/test/index.html

    在index.html中调用了sea.js

    base的默认值为 "http://example.com/test/js/sea/"

    如果使用seajs.config()设置了base

    seajs.config({
        base: "home"  // base值为 "http://example.com/test/js/sea/home"
    });
    
    seajs.confg({
        base: "./home"  // base值为 "http://example.com/test/home"
    });
    
    seajs.conifg({
        base: "/home"   // base值为 "http://example.com/home"
    });

    seajs.config()中的base 与 seajs.use() 的ID一样, "." 开头的ID 会相对于当前页面 解析地址(因为不存在被调用的模块)

    完整的解析例子:

    有如下文件

    http://example.com/test/js/sea/sea.js

    http://example.com/test/js/home/main.js

    http://example.com/test/js/home/tpl.js

    http://example.com/test/index.html

    index.html页面调用sea.js

    seajs.config({
        base: "./js"        // base为 "http://example.com/test/js"
        alias: {
            "jquery": "jquery/jquery"
        }
    });
    
    
    // 调用 mian 
    seajs.use("home/main");     // 解析后的路径为 "http://example.com/test/js/home/main.js"
    
    // 也可以这么写
    seajs.use("./js/home/main");    // 解析路径为 "http://example.com/test/js/home/main.js"
    
    main.js
    
    define(function(require) {
        var $ = require("jquery");      // "http://example.com/test/js/jquery/jquery.js"
    
        // 调用 tpl
        var tpl = require("./tpl");     // "http://example.com/test/js/home/tpl.js"
    
        // 也可以
        var tpl = require("home/tpl");  // "http://example.com/test/js/home/tpl.js"
    });

    以上例子中的模块define() 都没有定义ID, 实际上项目中打包时会根据配置 自动为模块设定ID, 打包到同一个文件中, 相关问题以后有时间再总结。

  • 相关阅读:
    js 自定义属性
    js innerText、textContent、innerHTML的区别和各自用法
    js 的常用选择器
    js Array属性和用法
    js---String对象
    iframe自适应高度js
    thinkphp 的save()不能更新数据解决办法
    转义字符
    获取客户端真实ip
    thinkphp条件查询和模糊查询的一些方法
  • 原文地址:https://www.cnblogs.com/blackwood/p/3809826.html
Copyright © 2011-2022 走看看