seajs官方文档的学习笔记(一)

########### 模块 https://github.com/seajs/seajs/issues/240 #####################

sea.js 专注于前端开发领域里的 JS 模块:

1. 模块是一段 JavaScript 代码,具有统一的基本书写格式。

2. 模块之间通过基本交互规则,能彼此引用,协同工作。

模块定义规范(Module Definition Specification):对[基本书写格式]与[基本交互规则]的清楚描述。

有CommonJS 社区的 Modules 1.1.1 规范、NodeJS 的 Modules 规范、RequireJS 提出的 AMD 规范等等。

sea.js 遵循的是 CMD 规范

########## CMD模块定义规范 https://github.com/seajs/seajs/issues/242 ############

CMD(common Module Definition)。该规范明确了模块的[基本书写格式]和[基本交互规则]。

CMD 规范中,一个模块就是一个文件。

define(factory)

define:是[全局函数],用来定义一个模块

factory:函数、对象或者字符串

define({‘foo‘, ‘bar‘});
define(‘I am a template, My name is {{name}}‘);

factory为函数时,表示[模块的构造方法],可以得到模块向外提供的接口。 factory 方法在执行时,默认会传入三个参数:require、exports 和 module.

define(id?, deps?, factory)

字符串 id 表示模块标识,数组 deps 是模块依赖

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

define.cmd

一个空对象,可用来判定当前页面是否有 CMD 模块加载器

if (typeof define === ‘function‘ && define.cmd)  {
   // 有 sea.js 等 CMD 模块加载器存在
}

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

require(id)

require 是一个方法,接受[模块标识]作为[唯一参数](参数值必须是字符串直接量。),用来获取模块提供的接口

define(function(require, exports) {

   // 获取模块 a 的接口
   var a = require(‘./a‘);
   // 调用模块 a 的方法
   a.doSomething();

});

require.async(id, callback?)

require.async 用来在模块内部[异步加载]模块,在加载完成后执行回调( callback 可选)。 require(id) 是同步往下执行

define(function(require, exports) {  

  // 异步加载一个模块,在加载完成时,执行回调
  require.async(‘./b‘, function(b) {
    b.doSomething();
  });    

  // 异步加载多个模块,在加载完成时,执行回调
  require.async([‘./c‘, ‘./d‘], function(c, d) {
    // 这 function 里的参数要与前面加载模块的顺序一一对应
    c.doSomething();
    d.doSomething();
  });

});

require.resolve(id)

该函数[不会加载函数],只[返回]解析后的[模块绝对路径]。(使用模块系统内部的路径解析机制)

define(function(require, exports) {

  console.log(require.resolve(‘./b‘));
  // ==> http://localhost/seajsS/quick-start/static/hello/src/b.js

});

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

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() {}
  };    

  // 错误写法
  // 解释:exports 仅仅是 module.exports 的一个引用,给 exports 重新赋值时,并不会改变 module.exports 的值,OK?
  exports =  {
    foo: ‘bar‘,   doSomething: function() {}
  }; 

});

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

module

是一个对象,存储了与当前模块相关联的一些属性和方法

module.id

模块的唯一标识。define 的第一个参数就是模块标识

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

module.uri

返回模块的绝对路径(根据模块系统的路径解析规则)。

define(function(require, exports, module) {    

  console.log(module.uri);
  // ==> http://localhost/seajsS/quick-start/static/hello/src/main.js 

});

没有在 define 中手写 id 参数时,module.id 的值就是 module.uri,两者完全相同

注意:而require.resolve(id) 是使用模块系统内部的路径解析机制的

module.dependencies Array

表示当前模块的依赖

module.exports Object

当前模块对外提供的接口

传给 factory 构造方法的 exports 参数是 module.exports 对象的一个引用。只通过 exports 参数来提供接口,有时无法满足开发者的所有需求。 比如当[模块的接口是某个类的实例]时,需要通过 module.exports 来实现

define(function(require, exports, module) {    

  // exports 是 module.exports 的一个引用
  console.log(module.exports === exports);  // true
  // 重新给 module.exports 赋值(模块的接口是某个类的实例)
  module.exports = new SomeClass();
  // exports 不再等于 module.exports
  console.log(module.exports === exports);  // false   

});

这就是 CMD 模块定义规范的所有内容。经常使用的 API 只有 define, require, require.async, exports, module.exports 这五个。其他 API 有个印象就好,在需要时再来查文档,不用刻意去记。

时间: 2024-10-13 15:05:29

seajs官方文档的学习笔记(一)的相关文章

TensorFlow官方文档MNIST初学笔记[二]

TensorFlow官方文档MNIST初学笔记[二] MNIST是一个简单的计算机视觉数据集, 它还包括每个图像的标签, 每个图像是28像素乘以28像素, 我们可以把这个数组变成一个28×28 = 784个数字的向量.MNIST只是一个784维向量空间中的一个点.mnist.train.images具有形状的张量(n维阵列)[55000, 784] 第一维度是图像列表中的索引,第二维度是每个图像中每个像素的索引.对于特定图像中的特定像素,张量中的每个条目是0和1之间的像素强度. MNIST中的每

从官方文档去学习之FreeMarker

一.前言 上一篇 <从现在开始,试着学会用官方文档去学习一个技术框架>提倡大家多去从官方文档学习技术,没有讲到具体的实践,本篇就拿一个案例具体的说一说,就是FreeMarker,选择这个框架没什么特别的含义,最近要用,就拿这个做个典型. 二.套路 上篇文章最后说到技术学习没有套路,无招胜有招,无招即是有招,解读一下实际上就是说 本身还是有些招式套路,但是要灵活运用,不要什么都往上套,应该忘掉固有的套路,让其化为你的一种本能,见招拆招.  下面就介绍一种常规学习套路给大家,如下图: 下面就根据上

Django2.0官方文档入门学习(1)overview

object-relational mapper:对象关系映射 data-model syntax:数据模型关系 migrate:负责申请和取消申请迁移 makemigrations:负责根据您对模型所做的更改创建新的迁移 from django.db import models class Reporter(models.Model): full_name = models.CharField(max_length=70) def __str__(self): return self.name

React官方文档学习记录(四)- 条件渲染

一点点记录,建议需要学习React的移步官方文档去学习. 在React中,你可以创建一个清晰(distinct)的组件来简要描述你现在需要的东西.然后,你只需要使用你应用中的state来渲染它们. React中的条件型渲染跟JavaScript中的条件运算符运行方式差不多.好像就是使用JavaScript中的if或者三元运算符创建元素来显示现在的状态,然后让React更新UI来匹配这些修改. 下面这个例子就是根据不同的isLoggedIn进行不同的欢迎. 1 2 3 4 5 6 7 8 9 10

Oracle官方文档(11G r 2)【安装需要参考的文档】

Oracle的官方文档相关的笔记:仅供大家参考,欢迎大家前来指正.提出建议哦 步骤: 点击左上角的Master Book List 然后进入一个书本目录 然后找到如下图所示: 然后根据自己的系统的版本去找相应的文档就OK了 比如我的是RedHat的,那么我就选择 第三项 Database Installation Guide for Linux 这本书了 进入之后如下图 所示 此时直接选择 2.3 点击进入,即可以按照文档去安装Oracle了,但是英语不要太烂哦,嘿嘿,实在不行的话 先去补充一下

Jinja2学习笔记暨官方文档的翻译

http://blog.csdn.net/lgg201/article/details/4647471 呵呵, 刚刚看完Python模板引擎Jinja2的文档, 感觉很好, 觉得动态语言真是很好.  模板引擎竟然可以做的如此灵活....真是不错.... 下面直接把看文档过程的笔记发布出来, 呵呵, 基本上就是翻译, 加了不多的一点自己的解释......希望可以帮到大家 补充: 1. 在模板中设置自定义变量: {% set variable_name = value %} 比如设置{% set u

Swift -- 官方文档Swift-Guides的学习笔记

在经历的一段时间的郁闷之后,我发现感情都是虚伪的,只有代码是真实的(呸) 因为看了swift语法之后依然不会用swift,然后我非常作死的跑去看官方文档,就是xcode里自带的help>documentation and API reference 其中的swift里的guide 这里主要总结一下里面每一章讲了什么,还有自己学到的东西和需要研究的东西 part 2:Building a Basic UI work with view controllers 关于比较基础的viewDidLoad,

Spring 4 官方文档学习(十一)Web MVC 框架之配置Spring MVC

在前面的文档中讲解了Spring MVC的特殊beans,以及DispatcherServlet使用的默认实现.在本部分,你会学习两种额外的方式来配置Spring MVC.分别是:MVC Java config 和  MVC XML namespace. 原文: Section 22.2.1, "Special Bean Types In the WebApplicationContext" and Section 22.2.2, "Default DispatcherSer

Spring 4 官方文档学习(十二)View技术

1.介绍 Spring 有很多优越的地方,其中一个就是将view技术与MVC框架的其他部分相隔离.例如,在JSP存在的情况下使用Groovy Markup Templates 还是使用Thymeleaf,仅仅是一个配置问题. 本章覆盖了主要的view技术,嗯嗯,可以与Spring结合的那些,并简明的说明了如何增加新的view技术. 本章假定你已经熟悉了Spring 4 官方文档学习(十一)Web MVC 框架之resolving views 解析视图 -- 它覆盖了views如何耦合到MVC框架