参考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
仔细查看了一下seajs的源码,确实写的挺赞的。...我在写例子之前是参考过这篇文章的:《JavaScript模块化开发库之seajs》 Seajs适用于分模块化开发的应用,比如类似QZone,点击“装扮空间”时需要动态加载CSS、JS,在资源加载完成后渲染装扮...,监听事件、回调…使用seajs来开发的话会很方便,主体的逻辑结构也将十分清晰。..._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
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”来寻址
这也就是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
前端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就近依赖,需要使用把模块变为字符串解析一遍才知道依赖了那些模块
具体的seajs实现可通过本博客的系列博文--Seajs源码解析系列来进一步了解。 ...在实际生产中,如果紧紧定义一系列seajs模块而并不进行合并压缩的话,加载性能很低,原因大家都懂的,seajs在浏览器端处理依赖模块,并进行异步加载,这个过程中会有多个http请求,大大降低页面的加载速度...在seajs社区中,已经提供了一款npm模块,即grunt-cmd-transport。我们通过该模块给seajs模块命名,并处理各模块之间的依赖。...其实在未使用grunt进行合并seajs时(即在浏览器端处理模块依赖),seajs设置模块id和uri相同,为绝对路径。...transport任务 transport任务是打包seajs模块的难点,上节提到了seajs模块的id和uri之间的关系,它们是由seajs来维护的。
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 是一个遵循 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 的目的就是将 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.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 会自动合并不存在的项,对存在的项则进行覆盖。...---- 常用的配置项是 alias、paths、base,其他配置项有需要时,来查查文档就会用了。
最近正在把逻辑很重的js拆分成模块,在一顿纠结是使用requirejs还是seajs的时候,最终还是偏向于requirejs。毕竟官方文档比较专业嘛......不过即便是有完整的官方文档,仍然遇到不少的问题,比如jquery-ui的使用。 下面就循序渐进的讲解一下我遇到的问题,以及解决的办法。...但是不同点是,require.js加载完会立即执行;而seajs则是等到进入主函数需要执行时才执行。...如果使用seajs初始的加载执行效率会比较高,但是在使用的过程中可能会取执行js,因此可能会出现卡顿,影响用户体验(由于我也没试过,要是说错了,别见怪)。...因此,如果已经习惯了异步编程,并且希望有完善的文档推荐使用requirejs;如果是想对执行顺序有特殊要求,又方便开发,那么也可以使用seajs。
SeaJS路径配置 //seajs所在的路径为默认根目录 seajs.config({ //配置根目录 base: “.....了解SeaJS,以及Seajs与requirejs之间的区别?...module.exports = ... }) 启动模块 seajs.use 加载入口模块,我们把define定义的js就叫模块 这个用于在html代码里面的加载 seajs使用的时候,可以先在配置文件中...我们可以使用定义模块中,module.exports对象所有的属性与方法 }); //seajs.use 和 Document 的 ready 没有任何关系 //要想保证 文档结构加载完毕再执行你的...js 代码,一定要在 seajs.use 内部通过 window.onload 或者 $(function(){}) requirejs与seajs的区别 requirejs是优先加载的 seajs
seaJS 官网 http://seajs.org/docs/ API快速参考 https://github.com/seajs/seajs/issues/266 sea.js...seajs.use 用来在页面中加载一个或者多个模块 // 加载一个模块 seajs.use('./a'); // 加载模块,加载完成时执行回调 seajs.use('....CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。 ...b.doSomething() // ... }) 虽然 AMD 也支持 CMD 的写法,同时还支持将 require 作为依赖项传递,但 RequireJS 的作者默认是最喜欢上面的写法,也是官方文档里默认的模块定义写法...另外,SeaJS 和 RequireJS 的差异,可以参考:https://github.com/seajs/seajs/issues/277 原文地址:http://blog.chinaunix.net
我们公司作为乙方,老是被客户追着要一份API文档,当我们把一个 Swagger 文档地址丢给客户的时候。客户还是很不满意,嫌不够正式!!死活坚持要一份 word 文档 。...然后领导给了个接口模板,就把这个活交给我了......我去,近10个微服务,几百个接口,这不得要了我的命啊(最后整理出来将近200页的 word 文档)。...最后,还是领导有办法:要不我们把Swagger的 json文件转成word文档吧! 一直坚持一句话。作为使用者,人要迁就机器;作为开发者,要机器迁就人。...List responseList = listResponse(); //模拟一次HTTP请求,封装请求体和返回体,如果是Restful的文档可以再补充...四、使用 如果直接采用我的API文档模板的话,只需要将 resources 目录下的 data.json 文件的内容替换成自己的Swagger Json 文件内容就好。
/b'); b.test(); } }); 虽然 AMD也支持CMD写法,但依赖前置是官方文档的默认模块定义写法。 3.AMD的api默认是一个当多个用,CMD严格的区分推崇职责单一。...此时可以这样做:如果一个module ID符合下述规则之一,其ID解析会避开常规的"baseUrl + paths"配置,而是直接将其加载为一个相对于当前HTML文档的脚本: 以 ".js" 结束....4.3、官方文档 如果您要更加深入学习CMD与seajs可以参考下面的文档、https://seajs.github.io/seajs/docs/ 4.3.1、入门 前端模块化开发的价值 5 分钟上手...seajs-text seajs-style seajs-combo seajs-flush seajs-debug seajs-log seajs-health 4.3.4、进阶 Sea.js 的调试接口...5.5.2、导出方式二 在export接口的时候, 我们可以使用 XX as YY, 把导出的接口名字改了, 比如: closureFn as sayingFn, 把这些接口名字改成不看文档就知道干什么的
与RequireJS 网上写amd和cmd的文章很多,当然也有很多都是误人子弟的片面的看法,所以还是推荐自己看官方文档多加尝试去理解。...“RequireJS 遵循的是 AMD(异步模块定义)规范,SeaJS 遵循的是 CMD (通用模块定义)规范”。 AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。...CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。...https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88) cmd 规范 https://github.com/seajs.../seajs/issues/242 区别: 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。
项目一期基本开发完毕,包括后台管理系统以及提供给手机端的接口还有SSO,由于奔着敏捷开发去的,文档没有过多花时间去写, 当然了文档肯定有,开发人员写的自己能看懂,但是对于对接人员来说看了就跟吃了屎一样难受...好吧,由于项目进度比原先提前,所以根据实际情况来修改文档,把文档修改得更加人性化,可读化,方便对接人员的欣赏,让他们觉得我们很屌 其实文档对于一些程序员来说,很瞧不起,自认为代码能力OK就行了,但是,...文档能力大家一定要提高,文档能力的提高可以给你未来带来很大的便捷 因为你要转管理,就必须要具备一定的文档能力,我曾经的一位同事,也是现在的一位挚友,我一直喊他”来来哥“,跟我说过这么一句话“文档能力一定要提高...,不管你未来做项目经理还是产品经理或者是技术经理,如果你写的文档没人看得懂,或者说你写的是垃圾,那么没人会服你”,这话说的的确,就在多年前我兄弟的文档能力就已经绝对是一流的,现在就已经登峰造顶了,甚至PMP...也是他提醒我的,所以,我这位好哥们给予了我很多的提点,虽然对于他来说可能是不经意间~ 好吧,来看看文档模板吧,目前团队使用这样的格式来编辑的,比较不错,推荐个工具,那当然就是wiki了,没有wiki也不要紧
领取专属 10元无门槛券
手把手带您无忧上云