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 API 参考 首先说明一下,这个已经是老框架了,不建议使用,只是当做了解一下过去的知识,或者学习一下源代码,知道过去的模块化开发是什么样的,模块化开发的好处,API 快速参考 该页面列举了...只要掌握这些用法,就可以娴熟地进行模块化开发。 seajs 的目的就是将 js,css,html 文件变成一个模块,一个 .js,.css,.html 就是一个模块。...seajs.config 这个有点像 webpack 的配置项,可以方便我们配置一些路径,以及一些简化路径等等,比如下面的代码: seajs.config({ // 设置路径,方便跨目录调用...seajs.use 用来在页面中加载一个或多个模块。有点像 es6 中的 import 关键字,就是用来导入文件的 但是 seajs.use 是用来加载模块的。...// 就比如说我们创建了一个 a.js 文件,我们就可以使用 seajs.use 加载一个模块 seajs.use('.
参考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
年团队开发页面时,前台JavaScript会采用类似这样的写法:xx.include(‘…/dom.js’);xx.include([‘a.js’, ‘b.js’, …]);也算是有了JavaScript模块化开发的雏形...仔细查看了一下seajs的源码,确实写的挺赞的。...我在写例子之前是参考过这篇文章的:《JavaScript模块化开发库之seajs》 Seajs适用于分模块化开发的应用,比如类似QZone,点击“装扮空间”时需要动态加载CSS、JS,在资源加载完成后渲染装扮..._util, seajs._data, seajs....实现模块化JavaScript开发>> JavaScript模块化开发库之Seajs>> Sea.js手册与文档>>
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
入口方法 每个程序都有个入口方法,类似于c的main函数,seajs也不例外。系列一的demo在首页使用了seajs.use(),这便是入口方法。...加载依赖之load方法 load方法可谓是seajs的精华所在。该方法主要加载依赖模块并依次执行依赖模块的回调函数,最终执行的回调函数则是通过seajs.use(“....例证 通过一个简单的例子,论证上述过程: tst.html seajs.use('....模块执行之exec 模块执行是在seajs.use中定义的mod.callback中调用的,依次调用所有依赖的exec方法,执行程序逻辑。...对于seajs,前前后后花了不下一个星期来阅读源码,从刚开始的一知半解到如今的拜服,我真切的领会到了设计思想的重要性。
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
SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制,兼容所有主流浏览器 SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载...模块的定义 SeaJS中使用“define”函数定义一个模块 define(id?, deps?.../a"); (3)基址地址——如果载入字符串既不是绝对路径也不是以”./”开头的相对位置,则相对SeaJS全局配置中的“base”来寻址
seajs主要用于模块化,通过define定义一个模块,可以通过require加载模块,exports导出模块。...具体的seajs实现可通过本博客的系列博文--Seajs源码解析系列来进一步了解。 ...在seajs社区中,已经提供了一款npm模块,即grunt-cmd-transport。我们通过该模块给seajs模块命名,并处理各模块之间的依赖。...其实在未使用grunt进行合并seajs时(即在浏览器端处理模块依赖),seajs设置模块id和uri相同,为绝对路径。...transport任务 transport任务是打包seajs模块的难点,上节提到了seajs模块的id和uri之间的关系,它们是由seajs来维护的。
简述 前端开发模块化已经是大势所趋,目前模块化的规范有很多,众所周知的有commonJS,Module/Wrappings和AMD等,而且ES6也着手开始制定模块化机制的实现。...由于规范的多样性,模块化的实现也是各有各的不同。...这也就是Module/Wrappings规范,而seajs基本实现了该规范。...剖析 阅读seajs官网的入门demo,首先在主页面引入seajs文件,并设置入口 // seajs 的简单配置 seajs.config({ base: "...../sea-modules/", alias: { "jquery": "jquery/jquery/1.10.1/jquery.js" } }) // 加载入口模块 seajs.use
前端js实现模块化的历史进程中有两个库不得不提,那就是seajs和requirejs,这两个库分别对应CMD和AMD规则,这里咱们先不讨论AMD和CMD的异同,先看看用seajs和requirejs分别来实现一个计算器的功能怎么来实现...可以实现加减乘除取模运算,不用模块化开发代码很好实现,代码如下: <!...Calculateobj = new Calculate('calculate'); Calculateobj.init(); 用模块化的方式来实现的话...四则运算的函数和初始化的函数可以作为模块抽离出来,不论是seajs实现还是requirejs实现都需要一个主文件,seajs实现效果如下:index.html ?...以上便是seajs实现计算器功能。 用requirejs来实现计算器功能也很简单,写法不同而已,首先看index.html ? main.js代码: ? calculate模块内容如下: ?
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
模块化编程 CommonJS AMD(Asynchronous Module Definition)规范 requireJS与seaJS requireJs 以及 seaJs 的区别 模块化编程: @...为了更好的开展话题,首先需了解什么是前端模块化 模块的由来: 其实模块化的诞生不难理解,我们知道因为随着网站逐渐的发展,嵌入网页的Javascript代码越来越庞大,而网页越来越像桌面程序,需要一个团队去分工协作...的异同: @异同摘录知乎大神的讲法,感觉比较具体和准确 相同之处: RequireJS 和 SeaJS 都是模块加载器,倡导的是一种模块化开发理念,核心价值是让 JavaScript的模块化开发变得更简单自然...SeaJS 通过插件,可以实现 Fiddler 中自动映射的功能,还可以实现自动 combo 等功能,非常方便。RequireJS 无这方面的支持。 总结: 前端模块化的诞生,大大促进我们前端的发展。...前端模块化是web前端需掌握的基础知识之一。
requireJS与seaJS requireJs 以及 seaJs 的区别 模块化编程: @为了更好的开展话题,首先需了解什么是前端模块化 模块的由来: 其实模块化的诞生不难理解,我们知道因为随着网站逐渐的发展...,然后再诞生了SeaJS。...的异同: @异同摘录知乎大神的讲法,感觉比较具体和准确 相同之处: RequireJS 和 SeaJS 都是模块加载器,倡导的是一种模块化开发理念,核心价值是让 JavaScript的模块化开发变得更简单自然...SeaJS 通过插件,可以实现 Fiddler 中自动映射的功能,还可以实现自动 combo 等功能,非常方便。RequireJS 无这方面的支持。 总结: 前端模块化的诞生,大大促进我们前端的发展。...前端模块化是web前端需掌握的基础知识之一。
CMD(Cmomon Module Definition): CMD是大神玉伯提出的,然后根据这个规范写了个seaJS。因为AMD想兼容浏览器和后台,所以大神就搞了个专注于浏览器的CMD。...要说requireJS和seaJS最大的区别就是加载的机制: SeaJS只会在真正需要使用(依赖)模块时才执行该模块 RequireJS会先尽早地执行(依赖)模块, 相当于所有的require都被提前了...ES6: ES6提供了模块化export和import的实现。可以说ES6模块化的实现是替代UMD,服务器和浏览器都会实现ES6的模块化。...CMD:异步加载,专注于浏览器,实现的是seaJS,玉伯大神提出的,使用时加载。 UMD:AMD和commonJS的结合,可以服务端使用也可以浏览器使用。...ES6:语言标准的模块化,取代UMD,服务器和浏览器都能使用。 只是分享一下这几个规范的大致理解,至于requireJS、seaJS怎么使用,就自行查找资料。 (完)
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? ...模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式。...还有一些对于模块化一些专业的定义为:模块化是软件系统的属性,这个系统被分解为一组高内聚,低耦合的模块。...seaJS 官网 http://seajs.org/docs/ API快速参考 https://github.com/seajs/seajs/issues/266 sea.js...seajs.use 用来在页面中加载一个或者多个模块 // 加载一个模块 seajs.use('./a'); // 加载模块,加载完成时执行回调 seajs.use('.
为什么要使用模块化 网站越来越复杂,js代码、js文件也越来越多 1.命名冲突 2.文件依赖问题 程序中的模块化 开发效率高 一次编写多次使用 方便维护了(维护的成本更低)模块之间有高耦合低内聚的特点...总结 最大的问题,规范的问题 如果在多人协作开发过程中,会有很大的问题 多人协作开发过程中:代码的风格一定要统一 JavaScript模块化实现的三种技术规范 http://www.ruanyifeng.com...因为JS现在的语法越来越完善,正在向强语言进化,强语言本身就自带模块化。 AMD AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。...SeaJS路径配置 //seajs所在的路径为默认根目录 seajs.config({ //配置根目录 base: “.....了解SeaJS,以及Seajs与requirejs之间的区别?
(2)通用模块定义(CMD)规范是 SeaJS推广的、对模块定义的规范。...6、如何实现前端模块化开发? require. js、 SeaJS都是适用于web浏览器端的模块加载器,使用它们可以更好地组织 Javascript代码。...因此 JavaScript模块化并不等同于异步模块化。 16、require.JS与 SeaJS的异同是什么? 相同之处如下。...CMD规范的主要实现有 SeaJS。...但是 SeaJS已经停止维护了,因为在 EMAScript 6 中提供了 EMAScript Module模块化规范,随着 EMAScript 6的普及,第三方的模块化规范的实现将会慢慢地被淘汰。
(['myModule.js'], function(my){ }); 4.1、Seajs Seajs是一个加载器、遵循 CMD 规范模块化开发,依赖的自动加载、配置的简洁清晰。...SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。 ?...4.3、官方文档 如果您要更加深入学习CMD与seajs可以参考下面的文档、https://seajs.github.io/seajs/docs/ 4.3.1、入门 前端模块化开发的价值 5 分钟上手...与 Node.js 兼容 与 RequireJS 的异同 与 OzJS 的探讨 五、原生模块化(ECMAScript模块化) ES6之前使用RequireJS或者seaJS实现模块化, requireJS...是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工具。
---- 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 标签在页面中同步引入。
领取专属 10元无门槛券
手把手带您无忧上云