SeaJS是一个遵循CMD规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制，兼容所有主流浏览器 SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载...，让开发可以专注于代码本身的逻辑 上手示例 html中加载初始化模块init.js，init 中调用 module1 模块，同时 module1 模块调用 module2 模块 ?...模块的定义 SeaJS中使用“define”函数定义一个模块 define(id?, deps?...文件的绝对路径 require("http://example/js/a"); （2）相对地址——用载入函数所在js文件的相对地址寻找模块 例如有 js/a.js，js/m/b.js 在b.js.../a"); （3）基址地址——如果载入字符串既不是绝对路径也不是以”./”开头的相对位置，则相对SeaJS全局配置中的“base”来寻址
配置 可以对 Sea.js 进行配置，让模块编写、开发调试更方便。 ---- seajs.config seajs.config(options) 用来进行配置的方法。...seajs.config({ map: [ [ '.js', '-debug.js' ] ] }); define(function(require, exports, module)...: { 'jquery': 'path/to/jquery.js', 'a': 'path/to/a.js' }, preload: ['seajs-text'] }); seajs.config...'path/to/underscore.js', 'a': 'path/to/biz/a.js' }; preload = ['seajs-text', 'seajs-combo']; 即...config.js seajs.config({ ... }); 独立成一个文件时，一般通过 script 标签在页面中同步引入。
参考seajs快速入门 一、前端模块化的价值 解决命名冲突 摆脱文件依赖 性能优化 提高可维护性 seajs.use方法调用 通过exports暴露接口 通过require引入依赖 二、Sea.js...的常用 API seajs.config base string Sea.js 在解析顶级标识时，会相对 base 路径来解析 seajs.use 用来在页面中加载模块 require...约定系统通讯 模块 a. js代码，统一固定的格式 b. 通过基本交互规则，能彼此引用协同工作 模块标识 相对标识：相对标识以 . ...顶级标识：顶级标识不以点（.）或斜线（/）开始， 会相对模块系统的基础路径（即 Sea.js 的 base 路径）来解析 四、 使用步骤 引入sea.js文件（方法与引用jQuery相同） 配置信息 在...： 2 3 // 加载模块 main，并在加载完成时，执行指定回调 4 seajs.use('.
不过在查看朋友网的部分JS代码后，对于seajs就很好奇，想看看源码写几个例子，权当学习一下JavaScript的模块开发方式。...我在写例子之前是参考过这篇文章的：《JavaScript模块化开发库之seajs》 Seajs适用于分模块化开发的应用，比如类似QZone，点击“装扮空间”时需要动态加载CSS、JS，在资源加载完成后渲染装扮...Seajs的世界里，一个文件就是一个模块，而如果模块过多，那文件同样也将比较多，那随之而来的JS请求也将变多。...Seajs的简单使用示例： 1、定义模块 1: define('....实现模块化JavaScript开发>> JavaScript模块化开发库之Seajs>> Sea.js手册与文档>>
一些前端工具和平台介绍 Kissy： 由淘宝前端工程师们发起创建的一个开源 JS 类库。...GitHub上可以下载； Alice： 是支付宝的前端css解决方案, 是arale的子集； seajs（ 现在由淘宝和腾讯的人在维护这个项目.seajs简单来说, 就是类似与labjs, requirejs..., labjs是可以动态载入js文件, 然后延迟将js功能加载到内存的工具）； 简单的说 Node.js 就是运行在服务端的 JavaScript。...seajs安装 首先安装node.js：直接到官网下载安装； 再用npm（node.js模块管理工具）安装seajs模块，命令行：npm install seajs -g；-g：全局安装； 说明：推荐使用淘宝...spm安装（同样基于node.js） 首先命令行安装spm：npm install spm -g； 然后安装spm的几个子命令, node.js叫plugin 方法一：直接使用npm命令安装
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。...INCORRECTLY IN IE6 IF THE CURRENT PAGE HAS TAG IN THE HEAD fetch模块 初始化Module对象时，状态为0，该对象对应的js...文件并未加载，若要加载js文件，需要使用上节提到的request方法，但是也不可能仅仅加载该文件，还需要设置module对象的状态及其加载module依赖的其他模块。
入口方法 每个程序都有个入口方法，类似于c的main函数，seajs也不例外。系列一的demo在首页使用了seajs.use()，这便是入口方法。.../b'); ------------------------------------- a.js define(function(require,exports,module){...exports.add = function(a,b){ return a+b; } }) ------------------------------------ b.js...是因为js中引用赋值所造成的。...js的赋值策略是“按共享传递”，虽说初始时exports === module.exports，但是当给exports赋一个对象时，此时exports指向该对象，module.exports却仍未初始化
类似于c/c++的include，java中的import关键字，在js中也定义了require关键字，用以引进依赖模块。 由于规范的多样性，模块化的实现也是各有各的不同。...这也就是Module/Wrappings规范，而seajs基本实现了该规范。...剖析 阅读seajs官网的入门demo，首先在主页面引入seajs文件，并设置入口 // seajs 的简单配置 seajs.config({ base: "...../sea-modules/", alias: { "jquery": "jquery/jquery/1.10.1/jquery.js" } }) // 加载入口模块 seajs.use...函数并加载main.js文件，此时解析main模块的依赖，并加载jquery和spining模块，待这两个模块加载完毕，执行回调函数。
前端js实现模块化的历史进程中有两个库不得不提，那就是seajs和requirejs，这两个库分别对应CMD和AMD规则，这里咱们先不讨论AMD和CMD的异同，先看看用seajs和requirejs分别来实现一个计算器的功能怎么来实现...四则运算的函数和初始化的函数可以作为模块抽离出来，不论是seajs实现还是requirejs实现都需要一个主文件，seajs实现效果如下：index.html ?...首先是配置模块的路径和别名，然后引入并执行主文件main.js,man.js代码如下： ? 这里通过 require导入了 calculate模块，calculate模块内容如下： ?...以上便是seajs实现计算器功能。 用requirejs来实现计算器功能也很简单，写法不同而已，首先看index.html ? main.js代码： ? calculate模块内容如下： ?...很多人说requireJS是异步加载模块，SeaJS是同步加载模块，这么理解实际上是不准确的，其实加载模块都是异步的，只不过AMD依赖前置，js可以方便知道依赖模块是谁，立即加载，而CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块
grunt与seajs grunt是前端流行的自定义任务的脚手架工具，我们可以使用grunt来为我们做一些重复度很高的事情，如压缩，合并，js语法检查等。...具体的seajs实现可通过本博客的系列博文--Seajs源码解析系列来进一步了解。 .../sea-debug.js"> seajs.config({ base: "...../application.js") 对于上述代码，application.js并没有合并seajs模块，我们通过seajs.use创建了一个匿名use模块，...transport任务 transport任务是打包seajs模块的难点，上节提到了seajs模块的id和uri之间的关系，它们是由seajs来维护的。
seajs.use('....require(['a']) // a.js define(['b'], function(){ }) 运行结果： seajs： ?...2. seajs ，requirejs在 require文件时既加载也执行 //a.js define(function(require, exports, module){ var b = require...点击OK按钮： b.js被加载 ? 控制台输出： ? 这是因为当执行一个js时，seajs会先去查找匹配require，然后加载相应资源，但不执行。匹配到require.async时不加载。...答：资源加载了a.js, b.js， 控制台输出：b is loaded， 点击OK按钮控制台继续输出：b run （选择“答”后面的部分查看答案） 总结： 1. seajs对依赖模块只加载不执行，requirejs
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小模块，理解执行过程...DOCTYPE html> Seajs .../sea.js"> //加载入口文件main.js，默认后缀js自动匹配 seajs.use('.
Sea.js 的常用 API。...seajs 的目的就是将 js,css,html 文件变成一个模块，一个 .js，.css，.html 就是一个模块。...seajs.use 用来在页面中加载一个或多个模块。有点像 es6 中的 import 关键字，就是用来导入文件的 但是 seajs.use 是用来加载模块的。...// 就比如说我们创建了一个 a.js 文件，我们就可以使用 seajs.use 加载一个模块 seajs.use('....Sea.js 推崇一个模块一个文件，遵循统一的写法： // 比如创建 a.js define(function(require, exports, module) { // 模块代码 });
模块化编程 CommonJS AMD（Asynchronous Module Definition）规范 requireJS与seaJS requireJs 以及 seaJs 的区别 模块化编程： @...下面就是一个简单的模块文件example.js console.log("example.js"); exports.message = "hi"; exports.say = function (){...引用AMD的Javscript库： 目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js RequireJS与SeaJS @根据诞生的时间，先有了Requirejs...，然后再诞生了SeaJS。...由于出现了模块的定义，许多js文件之间存在着依赖关系，因此必须严格保证加载的顺序（即依赖性最大的一定要放到最后加载） 由此可以看出模块加载器的作用，主要是为了解决两个问题： 实现js文件的异步加载，避免网页失去响应
下面就是一个简单的模块文件example.js console.log("example.js"); exports.message = "hi"; exports.say = function (){...引用AMD的Javscript库： 目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js RequireJS与SeaJS @根据诞生的时间，先有了Requirejs...，然后再诞生了SeaJS。...由于出现了模块的定义，许多js文件之间存在着依赖关系，因此必须严格保证加载的顺序（即依赖性最大的一定要放到最后加载） 由此可以看出模块加载器的作用，主要是为了解决两个问题： 实现js文件的异步加载，避免网页失去响应...SeaJS 不强推，采用自主封装的方式来“海纳百川”，目前已有较成熟的封装策略。 代码质量有差异。RequireJS 是没有明显的 bug，SeaJS 是明显没有 bug。 对调试等的支持有差异。
为什么要使用模块化 网站越来越复杂，js代码、js文件也越来越多 1.命名冲突 2.文件依赖问题 程序中的模块化 开发效率高 一次编写多次使用 方便维护了（维护的成本更低）模块之间有高耦合低内聚的特点...node.js的模块系统，就是参照CommonJS规范实现的。...了解SeaJS，以及Seajs与requirejs之间的区别？...module.exports = ... }) 启动模块 seajs.use 加载入口模块，我们把define定义的js就叫模块 这个用于在html代码里面的加载 seajs使用的时候，可以先在配置文件中...js 代码，一定要在 seajs.use 内部通过 window.onload 或者 $(function(){}) requirejs与seajs的区别 requirejs是优先加载的 seajs
/script/main.js。 而在seajs是相对于seajs文件的，一律直接使用main.js就OK了，是不是很方便呢？ 既然这么方便那在什么情况需要配置呢？一般情况是用不到的。...seajs.use("abc/main"); //导入seajs.js同级的abc文件夹下的main.js模块的（后缀名可略去不写） seajs.use()还有另外一种用法。...有时候我们写一个简单的单页并不想为它单独写一个js文件，选择在直接把js代码写在页面上，seajs通过seajs.use()实现了这个。...seajs-text seajs-style seajs-combo seajs-flush seajs-debug seajs-log seajs-health 4.3.4、进阶 Sea.js 的调试接口...6.1.4、在CMD规范下运行 app.js seajs.config({ // Sea.js 的基础路径（修改这个就不是路径就不是相对于seajs文件了） base: '.
无模块 优点： 相比于使用一个js文件，这种多个js文件实现最简单的模块化的思想是进步的。 ...目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。...SeaJS 不强推，而采用自主封装的方式来“海纳百川”，目前已有较成熟的封装策略。 4. 两者代码质量有差异。RequireJS 是没有明显的 bug，SeaJS 是明显没有 bug。 5.
nodejs，需要通过browserify工具转换为浏览器支持js （例如：browserify main.js > compiled.js）： 浏览器不兼容nodejs的几个模块 module exports...和curl.js实现 网页js的异步加载 内部函数 require.config({参数})... deps: ['underscore', 'jquery'], exports: 'Backbone' } } }); CMD 淘宝工程师编写seajs...，提出cmd规范 define(function(require, exports, module){}） seajs.use() cmd和amd区别 define(function(require,...模块化方案 seajs、requirejs（在线编译，amd和cmd编译器在浏览器中） webpack、browserify（预编译）
最近正在把逻辑很重的js拆分成模块，在一顿纠结是使用requirejs还是seajs的时候，最终还是偏向于requirejs。毕竟官方文档比较专业嘛......关于AMD和CMD的理解 AMD（异步模块定义）的典型就是requirejs，而CMD（通用模块定义）的典型是淘宝的seajs。 他们的相同点是，都会异步的加载js。...但是不同点是，require.js加载完会立即执行；而seajs则是等到进入主函数需要执行时才执行。...如果使用seajs初始的加载执行效率会比较高，但是在使用的过程中可能会取执行js，因此可能会出现卡顿，影响用户体验（由于我也没试过，要是说错了，别见怪）。...因此，如果已经习惯了异步编程，并且希望有完善的文档推荐使用requirejs；如果是想对执行顺序有特殊要求，又方便开发，那么也可以使用seajs。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
