zoukankan      html  css  js  c++  java
  • SeaJS 学习

    什么是系统

    在生活和工作中,我们会接触到大量系统:自然界生态系统、计算机操作系统、软件办公系统,还有教育系统、金融系统、网络系统、理论系统等等。究竟什么是系统呢?

    来看下维基百科的解释:

    系统泛指由一群有关连的个体组成,根据预先编排好的规则工作,能完成个别元件不能单独完成的工作的群体。系统分为自然系统与人为系统两大类。

    简言之,系统有两个基本特性:

    1. 系统由个体组成。
    2. 个体之间有关连,按照规则协同完成任务。

    系统中的个体可称之为系统成员,这样,要构建一个系统,最基本层面需要做两件事:

    1. 定义系统成员:确定成员是什么。
    2. 约定系统通讯:确定成员之间如何交互,遵循的规则是什么。

    只要把这两个问题描述清楚,我们就可以构建出系统。

    模块系统

    Sea.js 是一个适用于 Web 浏览器端的模块加载器。在 Sea.js 里,一切皆是模块,所有模块协同构建成模块系统。Sea.js 首要要解决的是模块系统的基本问题:

    1. 模块是什么?
    2. 模块之间如何交互?

    在前端开发领域,一个模块,可以是JS 模块,也可以是 CSS 模块,或是 Template 等模块。在 Sea.js 里,我们专注于 JS 模块(其他类型的模块可以转换为 JS 模块):

    1. 模块是一段 JavaScript 代码,具有统一的基本书写格式。
    2. 模块之间通过基本交互规则,能彼此引用,协同工作。

    把上面两点中提及的基本书写格式和基本交互规则描述清楚,就能构建出一个模块系统。对书写格式和交互规则的详细描述,就是模块定义规范(Module Definition Specification)。

    模块标识

    模块标识是一个字符串,用来标识模块。在 require、 require.async 等加载函数中,第一个参数都是模块标识。define 函数的 dependencies 参数也是由模块标识组成。

    SeaJS 中的模块标识是 CommonJS 模块标识 的超集:

    1. 一个模块标识由斜线("/")分隔的多项组成。
    2. 每一项必须是小驼峰字符串、"." 或 ".."
    3. 模块标识可以不包含文件后缀名,比如 ".js"
    4. 模块标识可以是“相对”或“顶级”标识。如果第一项是 "." 或 "..",则该模块标识是相对标识。
    5. 顶级标识根据模块命名空间的根路径来解析。
    6. 相对标识相对 require 所在模块的标识来解析。

    注意,符合上述规范的标识肯定是 SeaJS 的模块标识,但 SeaJS 能识别的模块标识不需要完全符合以上规范。 比如,除了大小写字母组成的小驼峰字符串,SeaJS 的模块标识字符串还可以包含下划线和连字符, 甚至可以以"http://""https://""file:///" 等协议标识开头。

    相对标识

    相对标识只出现在模块环境中,以 "." 开头。会相对当前模块的 URI 来解析:

    // 在 http://example.com/js/a.js 中:
    require('./b');
      // => http://example.com/js/b.js

     顶级标识

    顶级标识不以点(".")或斜线("/")开始, 会相对 SeaJS 的 base 路径来解析:

    // 假设 base 路径是:http://example.com/js/libs/
    
    // 在模块代码里:
    require('jquery/1.7.1/jquery');
      // => http://example.com/js/libs/jquery/1.7.1/jquery.js

    base 路径的默认值,与 sea.js 的路径相关: 如果 sea.js 的路径是: http://example.com/js/libs/sea.js 则 base 路径为: http://example.com/js/libs/

    当 sea.js 路径中含有版本号时,base 不会包含 seajs/x.y.z 字串。 当类库模块有多个版本时,这样会更方便。

    如果 sea.js 的路径是: http://example.com/libs/seajs/1.0.0/sea.js 则 base 路径是: http://example.com/libs/

    当然,也可以手工配置 base 路径:

    seajs.config({
      base: 'http://code.jquery.com/'
    });
    
    // 在模块代码里:
    require('jquery');
      // => http://code.jquery.com/jquery.js

    普通路径

    除了相对和顶级标识之外的标识都是普通路径。普通路径的解析规则,和 HTML 代码中的 script.src 一样,会相对当前页面来解析。(以当前页面路径为基础,无论你设置了怎样的base路径)

    // 在 http://example.com/js/main.js 中:
    require('http://example.com/js/a');
      // => http://example.com/js/a.js
    
    // 在 http://example.com/js/a.js 中:
    require('/js/b');
      // => http://example.com/js/b.js
    
    // 在任何代码里:
    seajs.use('./c');
      // => http://example.com/path/to/page/c.js

    seajs.use(ids, ...) 和 define(id, ...) 中的模块标识始终是普通路径,因为这两个方法是在全局环境中执行的。

    文件后缀的提示

    除非在路径中出现井号("#")或问号("?"),SeaJS 在解析模块标识时, 都会自动添加 JS 扩展名(".js")。如果不想自动添加扩展名,最简单的方法是, 在路径末尾加上井号("#")。

    // ".js" 后缀可以省略:
    require('http://example.com/js/a');
    require('http://example.com/js/a.js');
      // => http://example.com/js/a.js
    
    // ".css" 后缀不可省略:
    require('http://example.com/css/a.css');
      // => http://example.com/css/a.css
    
    // 当路径中有问号("?")时,不会自动添加后缀:
    require('http://example.com/js/a.json?callback=define');
      // => http://example.com/js/a.json?callback=define
    
    // 当路径以井号("#")结尾时,不会自动添加后缀,且会在解析时,去掉井号:
    require('http://example.com/js/a.json#');
      // => http://example.com/js/a.json

     http://seajs.org/docs/#docs

  • 相关阅读:
    [转]利用docker进行java开发小demo
    markdown简介及语法
    Thinking in Java 之classpath理解
    docker官方windows安装
    Thinking in Java笔记之类及对象的初始化
    开发工具之play framework
    图解phpstorm常用快捷键
    Git相关
    Yii 1.1 cookie删不掉
    ajax跨域,这应该是最全的解决方案了
  • 原文地址:https://www.cnblogs.com/zhangcybb/p/4651640.html
Copyright © 2011-2022 走看看