' } }); 复制代码 require(jquery); 内部处理是先替换 alias, 再替换 paths, 1) require('jquery') 当前解析为
本周跟大家分享6月1日在深圳举办的腾讯大讲堂【Sea.js与前端技术平台梦】讲座视频。...下面为本期主讲嘉宾 支付宝前端基础技术负责人王保平（玉伯）的主题分享：《Sea.js 与前端技术平台梦》 视频内容
本文给大家分享sea.js知识总结,感兴趣的朋友一起学习吧 http://reactjs.cn/ http://reactjs.cn/react/docs/getting-started-zh-CN.html
配置 可以对 Sea.js 进行配置，让模块编写、开发调试更方便。 ---- seajs.config seajs.config(options) 用来进行配置的方法。...'' : 'json' ], // 调试模式 debug: true, // Sea.js 的基础路径 base: 'http://example.com/path/to/base...base String Sea.js 在解析顶级标识时，会相对 base 路径来解析。详情请参阅 模块标识 注意：一般请不要配置 base 路径，把 sea.js 放在合适的路径往往更简单一致。...插件的配置 插件可以给 Sea.js 添加配置项，请查看具体插件了解相关配置。 配置文件 配置可以直接写在 html 页面上，也可以独立出来成为一个文件。
参考seajs快速入门 一、前端模块化的价值 解决命名冲突 摆脱文件依赖 性能优化 提高可维护性 seajs.use方法调用 通过exports暴露接口 通过require引入依赖 二、Sea.js...的常用 API seajs.config base string Sea.js 在解析顶级标识时，会相对 base 路径来解析 seajs.use 用来在页面中加载模块 require...顶级标识：顶级标识不以点（.）或斜线（/）开始， 会相对模块系统的基础路径（即 Sea.js 的 base 路径）来解析 四、 使用步骤 引入sea.js文件（方法与引用jQuery相同） 配置信息 在...'' : 'json' 29 ], 30 31 // 调试模式 32 debug: true, 33 34 // Sea.js 的基础路径 35 base: 'http://example.com.../path/to/base/', 36 37 // 文件编码 38 charset: 'utf-8' 39 }); 配置sea.js的基础路径 及加载模块 1 通过 use 方法，可以在页面中加载任意模块
sea.js 是一个模块加载器，是 AMD 规范的主要实现者之一。...sea.js 作为 AMD 规范的升级版，简化了使用方法，在使用上更加方便，值得推崇。但是 sea.js 便是浏览器开发中最佳的模块化解决方案吗？未必，还要看是什么类型的项目，后面会讲到。...ES6 模块规范与 CommonJS 规范相比，有以下不同： （1）ES6 模块规范是解析（是解析不是编译）时静态加载、运行时动态引用，所有引用出去的模块对象均指向同一个模块对象。...v8 引擎在执行JS代码时，是将代码先以 MacroAssembler 汇编库在内存中先编译成机器码再送往 CPU 执行的，并不是像其它 JS 引擎那样解析一行执行一行。...至于是使用原生的 ES 模块规范，还是使用sea.js，要看具体场景。如果想页面尽快加载，sea.js 适合；如果是单页面网站，适合使用原生的 ES6 模块规范。
Sea.js 则专注于 Web 浏览器端，同时通过 Node 扩展的方式可以很方便跑在 Node 环境中。 遵循的规范不同。...RequireJS 遵循 AMD（异步模块定义）规范，Sea.js 遵循 CMD （通用模块定义）规范。规范的不同，导致了两者 API 不同。...Sea.js 不强推，采用自主封装的方式来“海纳百川”，目前已有较成熟的封装策略。 对开发调试的支持有差异。...Sea.js 采取的是通用事件机制，插件类型更丰富。 执行机制不同。 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。.../A' 因为它总是会解析到A.js中默认的export default。 ---- 而下面是使用了花括号命名的方式{A}来导入A.js： import { A } from '.
一、方法引用来源和应用 此动态加载css方法 loadCss，剥离自Sea.js，并做了进一步的优化（优化代码后续会进行分析）。...是为了给下载的样式留够渲染的时间 callback(); }else{ pollCss(node, callback, step); } }, 20); } } 三、解析代码...document.getElementsByTagName("head")[0].appendChild(node); 生成一个dom节点，然后配置好rel、type、href等必需的属性值，以便浏览器能正常解析链接的资源...NS_ERROR_DOM_SECURITY_ERR"){ isLoaded = true; } } 如果读取sheet.cssRules有值，证明css资源已经链接进页面，并开始解析...3.5 轮询容错（针对Sea.js源码的优化） css资源加载也有可能出错的时机存在，而且存在不触发onerror方法的可能性。如果不加一个保护，则轮询可能一直持续下去，所以需要有一个极限阈值。
先看问题： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>变量作用域问题</title...
我们通过sea.js来加载我们定义的模块（这会儿遵循CMD规范）并使用相应的数据。...首先，当然是要下载sea.js,可以直接去 http://seajs.org/docs/#downloads 直接下载代码包，解压后 在 /dist/目录下可以 找到 sea.js CMD规范是懒加载，...index.html: 首先包含资源sea.js ，再包含主模块，这里因为要执行主模块中返回的数据，所以使用了回调函数的处理 //加载入口文件main.js，默认后缀js自动匹配 seajs.use('.
v=20170215:61) t.exec (sea.js:2) t.use.e.callback (sea.js:2) t.onload (sea.js:2) t.load (sea.js:2...) d (sea.js:2) onload (seajs-css.js:110) ==== line:6272, [http://tmisc.home.news.cn/search/...v=20170215] , [] line:2, [http://tmisc.home.news.cn/search/font/js/base/sea.js] , [t.exec] line:2,.../search/font/js/base/sea.js] , [t.onload] line:2, [http://tmisc.home.news.cn/search/font/js/base/sea.js...] , [t.load] line:2, [http://tmisc.home.news.cn/search/font/js/base/sea.js] , [d] line:143, [http:/
本文将从实际项目中遇到的问题出发，讲述模块化能解决哪些问题，以及如何使用 Sea.js 进行前端的模块化开发。 恼人的命名冲突 我们从一个简单的习惯出发。...为了方便描述，我们使用 Sea.js 来作为模块化开发框架。 使用 Sea.js 来解决 Sea.js 是一个成熟的开源项目，核心目标是给前端开发提供简单、极致的模块化开发体验。...使用 Sea.js，在书写文件时，需要遵守 CMD （Common Module Definition）模块定义规范。一个文件就是一个模块。...*/); }); 首先要在页面中引入 sea.js 文件，这一般通过页头全局把控，也方便更新维护。...Sea.js 还提供了 nocache、debug 等插件，拥有在线调试等功能，能比较明显地提升效率。前端性能优化。Sea.js 通过异步加载模块，这对页面性能非常有益。
回顾 之前也写了几篇关于javascript模块的博客，链接如下： 回头再看JS模块化编程[2] 回头再看JS模块化编程之AMD[3] sea.js的同步魔法[4] 近几天准备总结一下javascript...factory()) } else if (typeof define === 'function' && define.cmd) { console.log('是CMD模块规范，如sea.js...给个sea.js调用UMD的效果页面链接，sea.js调用UMD模块[9] 而nodejs调用UMD模块需要执行node命令， node umd-simple-used-by-nodejs 效果如下：...'我调用了依赖模块', depModule) // ...省略了一些代码，去代码仓库看吧 return { name: '我自己是一个umd模块' } })) 给个sea.js...的同步魔法: http://hexo.wbjiang.cn/sea.js%E7%9A%84%E5%90%8C%E6%AD%A5%E9%AD%94%E6%B3%95.html [5] Git仓库: https
模块系统 Sea.js 是一个适用于 Web 浏览器端的模块加载器。在 Sea.js 里，一切皆是模块，所有模块协同构建成模块系统。Sea.js 首要要解决的是模块系统的基本问题： 模块是什么？...在 Sea.js 里，我们专注于 JS 模块（其他类型的模块可以转换为 JS 模块）： 模块是一段 JavaScript 代码，具有统一的基本书写格式。模块之间通过基本交互规则，能彼此引用，协同工作。...Sea.js 遵循的是 CMD 规范，会在接下来的文档中详细阐述。 延伸阅读 function / bind 的救赎 继承与混合，略谈系统的构建方式
}, { "id": 2 }, { "id": 3 } ] } Sea.js...(CMD) 因为 Sea.js 社区尚未提供 webpack 插件，所以 Mock.js 暂不完整支持通过 Sea.js 加载。...一种变通的方式是，依然通过 Sea.js 配置和加载 Mock.js，然后访问全局变量 Mock。
Sea.js 则专注于 Web 浏览器端，同时通过 Node 扩展的方式可以很方便跑在 Node 环境中。 遵循的规范不同。...RequireJS 遵循 AMD（异步模块定义）规范，Sea.js 遵循 CMD （通用模块定义）规范。规范的不同，导致了两者 API 不同。...Sea.js 更贴近 CommonJS Modules/1.1 和 Node Modules 规范。 推广理念有差异。...Sea.js 不强推，采用自主封装的方式来“海纳百川”，目前已有较成熟的封装策略。 对开发调试的支持有差异。...Sea.js 采取的是通用事件机制，插件类型更丰富。 总之，如果说 RequireJS 是 Prototype 类库的话，则 Sea.js 致力于成为 jQuery 类库。
、Emoji表情、Task lists、@链接等Markdown扩展语法； 支持TeX科学公式（基于KaTeX）、流程图 Flowchart 和 时序图 Sequence Diagram; 支持识别和解析...HTML标签，并且支持自定义过滤标签解析，具有可靠的安全性和几乎无限的扩展性； 支持 AMD / CMD 模块化加载（支持 Require.js & Sea.js），并且支持自定义扩展插件； 兼容主流的浏览器
jquery', 'math'],function($, math){ var sum = math.add(10,20); $("#sum").html(sum); }); 复制代码 三、CMD和sea.js...此规范其实是在sea.js推广过程中产生的。.../b'); b.doSomething(); } }); /** sea.js **/ // 定义模块 math.js define(function(require, exports...而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
如果加载/解析过程报错，就从缓存删除该模块 // 6. 返回该模块的 module.exports }; Module.prototype....对于 CMD 规范的具体实现是 Sea.js，前端里如果想使用 CMD 规范的模块化技术，需要借助 Sea.js。...而 ES6 新增了模块的机制后，在代码的解析阶段，就能够确定模块以及模块对外的接口，而不用等到运行期。...小结 其实，CMD 跟 CommonJS 很类似，甚至在模块化方面的工作，可以很通俗的将 sea.js 理解成 node.js 所做的事，只是有些 node.js 能完成但却无法通过 sea.js 来负责的工作需要开发人员手动处理...，所以项目中也需要先加载 Sea.js，然后再执行主入口的 js 代码，需要在 HTML 中使用类似如下命令： <script
2、CMD (Common Module Definition) 和 AMD 类似，CMD 是 Sea.js 在推广过程中对模块定义的规范化产出。Sea.js 是阿里的玉伯写的。...Sea.js 官网这么介绍 Sea.js： "Sea.js 追求简单、自然的代码书写和组织方式，具有以下核心特性：" "简单友好的模块定义规范：Sea.js 遵循 CMD 规范，可以像 Node.js...来看看 CMD 规范的实现： 首先要在 html 文件中引入 sea.js 工具库...所以在引入 sea.js 文件后，再引入的其它文件，都可以使用 define 来定义模块。...可以像 CommonsJS 那样同步的形式书写模块代码的秘诀在于：当 b.js 模块被 require 时，b.js 加载后，Sea.js 会扫描 b.js 的代码，找到 require 这个关键字，
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
