仔细查看了一下seajs的源码,确实写的挺赞的。...我在写例子之前是参考过这篇文章的:《JavaScript模块化开发库之seajs》 Seajs适用于分模块化开发的应用,比如类似QZone,点击“装扮空间”时需要动态加载CSS、JS,在资源加载完成后渲染装扮...,监听事件、回调…使用seajs来开发的话会很方便,主体的逻辑结构也将十分清晰。..._util, seajs._data, seajs....Seajs的简单使用示例: 1、定义模块 1: define('.
参考seajs快速入门 一、前端模块化的价值 解决命名冲突 摆脱文件依赖 性能优化 提高可维护性 seajs.use方法调用 通过exports暴露接口 通过require引入依赖 二、Sea.js...的常用 API seajs.config base string Sea.js 在解析顶级标识时,会相对 base 路径来解析 seajs.use 用来在页面中加载模块 require...会相对模块系统的基础路径(即 Sea.js 的 base 路径)来解析 四、 使用步骤 引入sea.js文件(方法与引用jQuery相同) 配置信息 在中,方式与写jQuery代码相同 1 seajs.config...-8' 39 }); 配置sea.js的基础路径 及加载模块 1 通过 use 方法,可以在页面中加载任意模块: 2 3 // 加载模块 main,并在加载完成时,执行指定回调 4 seajs.use...main) { 5 main.init(); 6 }); 7 use 方法还可以一次加载多个模块: 8 9 // // 并发加载模块 a 和模块 b,并在都加载完成时,执行指定回调 10 seajs.use
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 init
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(“....例证 通过一个简单的例子,论证上述过程: tst.html seajs.use('....模块执行之exec 模块执行是在seajs.use中定义的mod.callback中调用的,依次调用所有依赖的exec方法,执行程序逻辑。...对于seajs,前前后后花了不下一个星期来阅读源码,从刚开始的一知半解到如今的拜服,我真切的领会到了设计思想的重要性。
SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制,兼容所有主流浏览器 SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载...模块的定义 SeaJS中使用“define”函数定义一个模块 define(id?, deps?.../a"); (3)基址地址——如果载入字符串既不是绝对路径也不是以”./”开头的相对位置,则相对SeaJS全局配置中的“base”来寻址
具体的seajs实现可通过本博客的系列博文--Seajs源码解析系列来进一步了解。 ...在实际生产中,如果紧紧定义一系列seajs模块而并不进行合并压缩的话,加载性能很低,原因大家都懂的,seajs在浏览器端处理依赖模块,并进行异步加载,这个过程中会有多个http请求,大大降低页面的加载速度...在seajs社区中,已经提供了一款npm模块,即grunt-cmd-transport。我们通过该模块给seajs模块命名,并处理各模块之间的依赖。...其实在未使用grunt进行合并seajs时(即在浏览器端处理模块依赖),seajs设置模块id和uri相同,为绝对路径。...transport任务 transport任务是打包seajs模块的难点,上节提到了seajs模块的id和uri之间的关系,它们是由seajs来维护的。
前端js实现模块化的历史进程中有两个库不得不提,那就是seajs和requirejs,这两个库分别对应CMD和AMD规则,这里咱们先不讨论AMD和CMD的异同,先看看用seajs和requirejs分别来实现一个计算器的功能怎么来实现...四则运算的函数和初始化的函数可以作为模块抽离出来,不论是seajs实现还是requirejs实现都需要一个主文件,seajs实现效果如下:index.html ?...以上便是seajs实现计算器功能。 用requirejs来实现计算器功能也很简单,写法不同而已,首先看index.html ? main.js代码: ? calculate模块内容如下: ?...很多人说requireJS是异步加载模块,SeaJS是同步加载模块,这么理解实际上是不准确的,其实加载模块都是异步的,只不过AMD依赖前置,js可以方便知道依赖模块是谁,立即加载,而CMD就近依赖,需要使用把模块变为字符串解析一遍才知道依赖了那些模块
这也就是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
seajs遵循CMD规范,requirejs遵循AMD规范。AMD规范是预加载,CMD规范是赖加载。...对依赖模块只加载不执行,requirejs对依赖模块既加载也执行 运行代码: // seajs <!...控制台:b is loaded 3. seajs可以在任意处直接require文件,无需提前写依赖模块;一旦提前写了任意一个依赖模块,下面的所有require的使用必须保证也有其对应的依赖模块 seajs...对依赖模块加载并执行 2. seajs ,requirejs在 require具体文件时既加载也执行 3. seajs可以在任意处直接require文件,无需提前写依赖模块;一旦提前写了任意一个依赖模块.../seajs-requirejs-demo
seajs 的目的就是将 js,css,html 文件变成一个模块,一个 .js,.css,.html 就是一个模块。...seajs.config 这个有点像 webpack 的配置项,可以方便我们配置一些路径,以及一些简化路径等等,比如下面的代码: seajs.config({ // 设置路径,方便跨目录调用...seajs.use 用来在页面中加载一个或多个模块。有点像 es6 中的 import 关键字,就是用来导入文件的 但是 seajs.use 是用来加载模块的。...// 就比如说我们创建了一个 a.js 文件,我们就可以使用 seajs.use 加载一个模块 seajs.use('..../a'); // 加载一个模块,在加载完成时,执行回调 seajs.use('.
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('.
---- seajs.config seajs.config(options) 用来进行配置的方法。...比如: seajs.config({ preload: 'a' }); // 在加载 b 之前,会确保模块 a 已经加载并执行好 seajs.use('..../to/a.js' }, preload: ['seajs-text'] }); seajs.config({ alias: { 'underscore': 'path/to/underscore.js...', 'seajs-combo']; 即:config 会自动合并不存在的项,对存在的项则进行覆盖。...config.js seajs.config({ ... }); 独立成一个文件时,一般通过 script 标签在页面中同步引入。
、货币转换库 javascript-algorithms: Javascript 实现的各种算法集合 lazy.js: 类似于 underscore, 但是会延迟执行,某些场景下,性能会有很大的提升 seajs...美观的 HTML5 视频播放器 timesheet.js: 基于 HTML5 & CSS3 时间表 slideout: 一个非常美观的侧滑菜单 包管理工具 Package Managers NPM 菜鸟教程...菜鸟教程 https://www.tslang.cn/ TypeScript教程 gitbookhttps://www.gitbook.com/ CoffeeScript CoffeeScript 中文...Tools RequireJS RequireJS 英文网http://requirejs.org/ RequireJS 中文网http://requirejs.cn/ require.js的用法-阮一峰 seajs...seajs文档http://seajs.org/docs/ SeaJS从入门到原理 http://www.tuicool.com/articles/FfEJv2u Browserify 官网http:
,然后再诞生了SeaJS。...但其实requirejs 和 seajs其实都是模块加载器,只是遵循的模块规范不同,加载机制有所不同。...SeaJS 则专注于 Web 浏览器端,同时通过 Node 扩展的方式可以很方便跑在 Node 服务器端。 遵循的规范不同。...SeaJS 更简洁优雅,更贴近 CommonJS Modules/1.1 和 Node Modules 规范。 社区理念有差异。...SeaJS 不强推,采用自主封装的方式来“海纳百川”,目前已有较成熟的封装策略。 代码质量有差异。RequireJS 是没有明显的 bug,SeaJS 是明显没有 bug。 对调试等的支持有差异。
模块化编程 CommonJS AMD(Asynchronous Module Definition)规范 requireJS与seaJS requireJs 以及 seaJs 的区别 模块化编程: @...,然后再诞生了SeaJS。...但其实requirejs 和 seajs其实都是模块加载器,只是遵循的模块规范不同,加载机制有所不同。...SeaJS 则专注于 Web 浏览器端,同时通过 Node 扩展的方式可以很方便跑在 Node 服务器端。 遵循的规范不同。...SeaJS 不强推,采用自主封装的方式来“海纳百川”,目前已有较成熟的封装策略。 代码质量有差异。RequireJS 是没有明显的 bug,SeaJS 是明显没有 bug。 对调试等的支持有差异。
SeaJS路径配置 //seajs所在的路径为默认根目录 seajs.config({ //配置根目录 base: “.....了解SeaJS,以及Seajs与requirejs之间的区别?...module.exports = ... }) 启动模块 seajs.use 加载入口模块,我们把define定义的js就叫模块 这个用于在html代码里面的加载 seajs使用的时候,可以先在配置文件中...,修改base设置基本路径,以后加载,都是相对seajs文件所在文件,但是安全起见,最好少用。...js 代码,一定要在 seajs.use 内部通过 window.onload 或者 $(function(){}) requirejs与seajs的区别 requirejs是优先加载的 seajs
瘳雪峰的Javascript教程 jQuery基础教程 前端工程师必备的PS技能——切图篇 结合个人经历总结的前端入门方法 效果类 弹出层 焦点图轮播特效 工具类 css sprite 雪碧图制作...基于webpack搭建前端工程解决方案探索 React原创实战视频教程 9....Seajs seajs seajs 中文手册 13. Less,sass sass sass教程-sass中国 Sass 中文文档 less 14....Gulp安装及配合组件构建前端开发一体化 Gulp 入门指南 Gulp 入门指南 - nimojs Gulp入门教程 Gulp in Action Gulp开发教程(翻译) 前端构建工具gulpjs的使用介绍及技巧...推荐作品 winter代码片段需要访问外国网站 fgm 岑安作品集 当耐特demo集合 米空格 js作品 myFocus SeaJS组件库 颜海镜作品 脚儿网作品 javascript个人作品 妙味的雷东升游戏作品
Node JS JS Template 移动端 移动端 API 综合 API 其他 API 综合类 工具类 综合效果搜索平台 团队 BLOG 开发中心 ECMAScript D3 RequrieJS SeaJS...入门类(微信不支持外链,大家可以参照看一下) ---- 前端入门教程 瘳雪峰的Javascript教程 前端工程师必备的PS技能——切图篇 HTML 修真录------初识"异界" HTML 修真录...SeaJS ---- seajs seajs 中文手册 25. Less & Sass ---- sass sass教程-sass中国 Sass 中文文档 less 26....推荐作品 ---- winter代码片段需要访问外国网站 fgm 岑安作品集 当耐特demo集合 米空格 js作品 myFocus SeaJS组件库 颜海镜作品 脚儿网作品 javascript个人作品...zhangxinxu-icommon icommon 用字体在网页中画ICON图标(推荐教程 字体压缩工具 63.
seaJS 官网 http://seajs.org/docs/ API快速参考 https://github.com/seajs/seajs/issues/266 sea.js...seajs.use 用来在页面中加载一个或者多个模块 // 加载一个模块 seajs.use('./a'); // 加载模块,加载完成时执行回调 seajs.use('....看了以上 AMD,requireJS 与 CMD, seaJS的简单介绍会有点感觉模糊,总感觉较为相似。...CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。 ...另外,SeaJS 和 RequireJS 的差异,可以参考:https://github.com/seajs/seajs/issues/277 原文地址:http://blog.chinaunix.net
领取专属 10元无门槛券
手把手带您无忧上云