SeaJS是一个遵循CMD规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制，兼容所有主流浏览器 SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载...，让开发可以专注于代码本身的逻辑 上手示例 html中加载初始化模块init.js，init 中调用 module1 模块，同时 module1 模块调用 module2 模块 ?...模块的定义 SeaJS中使用“define”函数定义一个模块 define(id?, deps?...模块的ID、module.dependencies 此模块依赖的所有模块的ID列表、module.exports 与exports指向同一个对象） 模块的寻址 （1）绝对地址——给出js文件的绝对路径.../a"); （3）基址地址——如果载入字符串既不是绝对路径也不是以”./”开头的相对位置，则相对SeaJS全局配置中的“base”来寻址
seajs主要用于模块化，通过define定义一个模块，可以通过require加载模块，exports导出模块。...在seajs社区中，已经提供了一款npm模块，即grunt-cmd-transport。我们通过该模块给seajs模块命名，并处理各模块之间的依赖。...对于seajs模块而言，首先需要处理各模块之间的依赖，我们通过设置transport任务来完成。seajs遵循的是CMD规范，在定义模块时不需要制定模块名和模块的依赖组，只需设置工厂函数即可。...其实在未使用grunt进行合并seajs时（即在浏览器端处理模块依赖），seajs设置模块id和uri相同，为绝对路径。...transport任务 transport任务是打包seajs模块的难点，上节提到了seajs模块的id和uri之间的关系，它们是由seajs来维护的。
SeaJS 是一个遵循 CMD 规范的模块化加载框架 CommonJS，CMD，AMD等规范后文会提到，这里主要先了解如何在代码中使用。 如果你有使用过nodejs ，那么理解起来就容易多了。...首先，当然是要下载sea.js,可以直接去 http://seajs.org/docs/#downloads 直接下载代码包，解压后 在 /dist/目录下可以 找到 sea.js CMD规范是懒加载，...index.html是主界面，main.js这里充当了主模块文件（一般需要 seajs.use('.main') 的方式来加载主模块），然后主模块main又调用main1,main2小模块，理解执行过程...index.html: 首先包含资源sea.js ，再包含主模块，这里因为要执行主模块中返回的数据，所以使用了回调函数的处理 //加载入口文件main.js，默认后缀js自动匹配 seajs.use('.
模块化 seajs API 参考 首先说明一下，这个已经是老框架了，不建议使用，只是当做了解一下过去的知识，或者学习一下源代码，知道过去的模块化开发是什么样的，模块化开发的好处，API 快速参考 该页面列举了...只要掌握这些用法，就可以娴熟地进行模块化开发。 seajs 的目的就是将 js,css,html 文件变成一个模块，一个 .js，.css，.html 就是一个模块。...seajs.use 用来在页面中加载一个或多个模块。有点像 es6 中的 import 关键字，就是用来导入文件的 但是 seajs.use 是用来加载模块的。...// 就比如说我们创建了一个 a.js 文件，我们就可以使用 seajs.use 加载一个模块 seajs.use('..../a'); // 加载一个模块，在加载完成时，执行回调 seajs.use('.
不过在查看朋友网的部分JS代码后，对于seajs就很好奇，想看看源码写几个例子，权当学习一下JavaScript的模块开发方式。...我在写例子之前是参考过这篇文章的：《JavaScript模块化开发库之seajs》 Seajs适用于分模块化开发的应用，比如类似QZone，点击“装扮空间”时需要动态加载CSS、JS，在资源加载完成后渲染装扮...Seajs的世界里，一个文件就是一个模块，而如果模块过多，那文件同样也将比较多，那随之而来的JS请求也将变多。...Seajs的简单使用示例： 1、定义模块 1: define('....实现模块化JavaScript开发>> JavaScript模块化开发库之Seajs>> Sea.js手册与文档>>
参考seajs快速入门 一、前端模块化的价值 解决命名冲突 摆脱文件依赖 性能优化 提高可维护性 seajs.use方法调用 通过exports暴露接口 通过require引入依赖 二、Sea.js...的常用 API seajs.config base string Sea.js 在解析顶级标识时，会相对 base 路径来解析 seajs.use 用来在页面中加载模块 require...中，方式与写jQuery代码相同 1 seajs.config({ 2 3 // 别名配置 4 alias: { 5 'es5-safe': 'gallery...1 通过 use 方法，可以在页面中加载任意模块： 2 3 // 加载模块 main，并在加载完成时，执行指定回调 4 seajs.use('....，执行指定回调 10 seajs.use(['.
seajs鼓励使用define(function(require,exports,module){})这种模块定义方式，这是典型的Module/wrappings规范实现。...back // to use onload event to get the uri } // Emit `define` event, used in nocache plugin, seajs...在seajs中，是采用script element方式来并行加载js/css资源的，并针对旧版本的webkit浏览器加载css做了hack。...这些逻辑在fetch方法中得以体现： // Fetch a module // 加载该模块，fetch函数中调用了seajs.request函数 Module.prototype.fetch = function...requestCache[emitData.requestUri] = sendRequest : sendRequest() } function sendRequest() { seajs.request
入口方法 每个程序都有个入口方法，类似于c的main函数，seajs也不例外。系列一的demo在首页使用了seajs.use()，这便是入口方法。...加载依赖之load方法 load方法可谓是seajs的精华所在。该方法主要加载依赖模块并依次执行依赖模块的回调函数，最终执行的回调函数则是通过seajs.use(“....mod.callback，这一依次回溯，最终将会执行通过seajs.use创建的匿名模块的mod.callback。...模块执行之exec 模块执行是在seajs.use中定义的mod.callback中调用的，依次调用所有依赖的exec方法，执行程序逻辑。...对于seajs，前前后后花了不下一个星期来阅读源码，从刚开始的一知半解到如今的拜服，我真切的领会到了设计思想的重要性。
GitHub上可以下载； Alice： 是支付宝的前端css解决方案, 是arale的子集； seajs（ 现在由淘宝和腾讯的人在维护这个项目.seajs简单来说, 就是类似与labjs, requirejs...seajs安装 首先安装node.js：直接到官网下载安装； 再用npm（node.js模块管理工具）安装seajs模块，命令行：npm install seajs -g；-g：全局安装； 说明：推荐使用淘宝...必装 npm install spm-build # 必装 npm install spm-doc # 必装 npm install spm-publish # 这个命令发布你的模块到...seajs.org, 必须注册seajs.org网站用户 npm install spm-deploy # 这个命令是ssh发布到服务器 方法二：在spm装好了之后, 使用如下命令 spm install
当所有依赖模块均加载完毕，后执行代码。这也就是Module/Wrappings规范，而seajs基本实现了该规范。...剖析 阅读seajs官网的入门demo，首先在主页面引入seajs文件，并设置入口 // seajs 的简单配置 seajs.config({ base: "...../sea-modules/", alias: { "jquery": "jquery/jquery/1.10.1/jquery.js" } }) // 加载入口模块 seajs.use...exports.doSomething = ... // 或者通过 module.exports 提供整个接口 module.exports = ... }); 这样，当打开页面时，会调用seajs.use...函数并加载main.js文件，此时解析main模块的依赖，并加载jquery和spining模块，待这两个模块加载完毕，执行回调函数。
前端js实现模块化的历史进程中有两个库不得不提，那就是seajs和requirejs，这两个库分别对应CMD和AMD规则，这里咱们先不讨论AMD和CMD的异同，先看看用seajs和requirejs分别来实现一个计算器的功能怎么来实现...四则运算的函数和初始化的函数可以作为模块抽离出来，不论是seajs实现还是requirejs实现都需要一个主文件，seajs实现效果如下：index.html ?...通过require 导入了相应的功能模块，并且最后用module.exports将构造函数导出， 来看一下sum 是如何导出的： ? 其他的模块也是这样导出。以上便是seajs实现计算器功能。...calculate模块内容如下： ? 通过依赖注入的方式引入模块，最后通过return导出构造函数。 sum模块的代码： ? 通过return 直接导出函数，以便其他模块使用。其他功能模块也是如此。...很多人说requireJS是异步加载模块，SeaJS是同步加载模块，这么理解实际上是不准确的，其实加载模块都是异步的，只不过AMD依赖前置，js可以方便知道依赖模块是谁，立即加载，而CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块
对依赖模块只加载不执行，requirejs对依赖模块既加载也执行 运行代码： // seajs <!...控制台：b is loaded 3. seajs可以在任意处直接require文件，无需提前写依赖模块；一旦提前写了任意一个依赖模块，下面的所有require的使用必须保证也有其对应的依赖模块 seajs...答：资源加载了a.js, b.js， 控制台输出：b is loaded， 点击OK按钮控制台继续输出：b run （选择“答”后面的部分查看答案） 总结： 1. seajs对依赖模块只加载不执行，requirejs...对依赖模块加载并执行 2. seajs ，requirejs在 require具体文件时既加载也执行 3. seajs可以在任意处直接require文件，无需提前写依赖模块；一旦提前写了任意一个依赖模块...，下面的所有require的使用必须保证也有其对应的依赖模块 4. seajs的require.async在执行到使用位置的时候才去异步加载 本文demo： https://github.com/saysmy
配置 可以对 Sea.js 进行配置，让模块编写、开发调试更方便。 ---- seajs.config seajs.config(options) 用来进行配置的方法。.../i18n/{locale}.js'); //=> 加载的是 path/to/i18n/zh-cn.js }); vars 配置的是模块标识中的变量值，在模块标识中用 {key} 来表示变量...// 在老浏览器中，提前加载好 ES5 和 json 模块 seajs.config({ preload: [ Function.prototype.bind ?...比如： seajs.config({ preload: 'a' }); // 在加载 b 之前，会确保模块 a 已经加载并执行好 seajs.use('..../b'); preload 配置不能放在模块文件里面： seajs.config({ preload: 'a' }); define(function(require, exports) {
模块化编程 CommonJS AMD（Asynchronous Module Definition）规范 requireJS与seaJS requireJs 以及 seaJs 的区别 模块化编程： @...，然后再诞生了SeaJS。...但其实requirejs 和 seajs其实都是模块加载器，只是遵循的模块规范不同，加载机制有所不同。...管理模块之间的依赖性，便于代码的编写和维护 RequireJS 与 SeaJS 的异同： @异同摘录知乎大神的讲法，感觉比较具体和准确 相同之处： RequireJS 和 SeaJS 都是模块加载器...RequireJS 遵循的是 AMD（异步模块定义）规范，SeaJS 遵循的是 CMD （通用模块定义）规范。规范的不同，导致了两者 API 的不同。
requireJS与seaJS requireJs 以及 seaJs 的区别 模块化编程： @为了更好的开展话题，首先需了解什么是前端模块化 模块的由来： 其实模块化的诞生不难理解，我们知道因为随着网站逐渐的发展...，然后再诞生了SeaJS。...但其实requirejs 和 seajs其实都是模块加载器，只是遵循的模块规范不同，加载机制有所不同。...管理模块之间的依赖性，便于代码的编写和维护 RequireJS 与 SeaJS 的异同： @异同摘录知乎大神的讲法，感觉比较具体和准确 相同之处： RequireJS 和 SeaJS 都是模块加载器...RequireJS 遵循的是 AMD（异步模块定义）规范，SeaJS 遵循的是 CMD （通用模块定义）规范。规范的不同，导致了两者 API 的不同。
module.exports = ... }) //导入模块 //第一参数是入口模块的路径 //第二个函数是回调函数 seajs.use('路径',function...实现： SeaJS SeaJS路径配置 //seajs所在的路径为默认根目录 seajs.config({ //配置根目录 base： “.....了解SeaJS，以及Seajs与requirejs之间的区别？...module.exports = ... }) 启动模块 seajs.use 加载入口模块，我们把define定义的js就叫模块 这个用于在html代码里面的加载 seajs使用的时候，可以先在配置文件中...导入模块 /* 第一参数是入口模块的路径 第二个函数是回调函数 */ seajs.use('路径',function(回调对象){ //此回调对象就是
seaJS 官网 http://seajs.org/docs/ API快速参考 https://github.com/seajs/seajs/issues/266 sea.js...seajs.use 用来在页面中加载一个或者多个模块 // 加载一个模块 seajs.use('./a'); // 加载模块，加载完成时执行回调 seajs.use('....CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。 ...CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每个 API 都简单纯粹。 4....另外，SeaJS 和 RequireJS 的差异，可以参考：https://github.com/seajs/seajs/issues/277 原文地址：http://blog.chinaunix.net
').addClass('active'); }); // 加载模块 seajs.use(['myModule.js'], function(my){ }); 4.1、Seajs Seajs是一个加载器...seajs.use("abc/main"); //导入seajs.js同级的abc文件夹下的main.js模块的（后缀名可略去不写） seajs.use()还有另外一种用法。...4.3、官方文档 如果您要更加深入学习CMD与seajs可以参考下面的文档、https://seajs.github.io/seajs/docs/ 4.3.1、入门 前端模块化开发的价值 5 分钟上手...Sea.js 官方示例 API 快速参考 4.3.2、基础 模块系统 CMD 模块定义规范 模块标识 require 书写约定 模块的加载启动 配置 构建工具 4.3.3、插件 seajs-css seajs-preload...seajs-text seajs-style seajs-combo seajs-flush seajs-debug seajs-log seajs-health 4.3.4、进阶 Sea.js 的调试接口
四、CMD CMD是SeaJS 在推广过程中对模块定义的规范化产出 CMD和AMD的区别有以下几点： 1.对于依赖的模块AMD是提前执行，CMD是延迟执行。...CMD里面没有全局的 require,提供 seajs.use()来实现模块系统的加载启动。CMD里每个API都简单纯粹。...AMD 是 RequireJS 在推广过程中对模块定义的规范化产出，CMD是SeaJS 在推广过程中被广泛认知。...二者的区别，玉伯在12年如是说： RequireJS 和 SeaJS 都是很不错的模块加载器，两者区别如下： 1. 两者定位有差异。...RequireJS 遵循的是 AMD（异步模块定义）规范，SeaJS 遵循的是 CMD （通用模块定义）规范。规范的不同，导致了两者API 的不同。
我理解的模块就是实现特定功能的文件或者代码，模块化就是隔离、组织这些复杂功能代码。模块可以让我们更方便的加载不同的功能。 现在还有什么组件化、插件化，我觉得都是模块化思想。...CMD（Cmomon Module Definition）： CMD是大神玉伯提出的，然后根据这个规范写了个seaJS。因为AMD想兼容浏览器和后台，所以大神就搞了个专注于浏览器的CMD。...要说requireJS和seaJS最大的区别就是加载的机制： SeaJS只会在真正需要使用(依赖)模块时才执行该模块 RequireJS会先尽早地执行(依赖)模块, 相当于所有的require都被提前了...CMD：异步加载，专注于浏览器，实现的是seaJS，玉伯大神提出的，使用时加载。 UMD：AMD和commonJS的结合，可以服务端使用也可以浏览器使用。...ES6：语言标准的模块化，取代UMD，服务器和浏览器都能使用。 只是分享一下这几个规范的大致理解，至于requireJS、seaJS怎么使用，就自行查找资料。 （完）
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议
