Slide 1

Slide 1 text

Atom is Growing Up!

Slide 2

Slide 2 text

Atom 阶段回顾 连沁 2013-05-31

Slide 3

Slide 3 text

强调下模块编写/引用的规范

Slide 4

Slide 4 text

• 模块编写 使用 CMD 模块规范,每个js文件就是一个模块 模块使用 匿名方式 编写 • 模块之间引用 引用 自身的私有模块 ,使用 相对路径 引用 其他的公用模块 ,使用 以htdocs为根目录的绝对路径 禁止引用其他模块的私有模块!!! • html/vm 引用模块 禁止在非js文件中定义模块!!! 引用模块只能使用 seajs.use 接口, 禁止使用script标签同步引入!! 引用模块使用 全路径 ,推荐使用 #stamp 宏包裹,保证时间戳准确

Slide 5

Slide 5 text

开发中一些常见问题

Slide 6

Slide 6 text

为什么js里不能使用seajs.use? • 首先,规范 • 在seajs的模式里面,所有的js文件都是 CMD 模块。 • 而在 CMD 模块中,对模块的引用只能通过 require() 及 require.async() 的方式, seajs.use的用法是 不符合规范 的

Slide 7

Slide 7 text

为什么js里不能使用seajs.use? • 其次,性能 • 正常的使用 `seajs.use` 去加载文件,流程如 下 • ... | | - 在 html/vm 里写 seajs.use 去请求模 块(js文件) ====异步===> 模块 ====> 运 行 callback | | - 其他html渲染,script运行等 | ... 除了 atom.js 以外所有的js文件都是 异 步加载 的

Slide 8

Slide 8 text

看看demo与结果

Slide 9

Slide 9 text

i18n相关 • 设置页面i18n • // 页面中越早 调用越好 // 建议在引入 atom.js 之后马上设 置 seajs.setLocale(locale);

Slide 10

Slide 10 text

i18n相关 • 模块里使用i18n • 使用 {locale} 来代替 i18n 中标识语言的部分 • 使用变量代替在 require 中的位置 (该用法是 为了解决独角兽时间戳失效的问题,独角兽端 的修复在7月份解决) • // 时间戳问题修复前,要这么使用 // #require "i18n/en-us.js" // #require "i18n/zh-cn.js" // #require "i18n/zh-tw.js" var i18nStr = './i18n/{locale}.js'; var i18n = require(i18nStr) || {}; // 时间戳问题解决后(2013-07完成),这 么使用 var i18n = require('./i18n/{locale}.js') || {};

Slide 11

Slide 11 text

Combo相关 • 页面上可以在任何地方使用seajs.use,最终 请求会在domReady的时候统一 Combo后 发 出 • 可以使用 seajs.flush() 提前发出请求(一般 用于首屏优化) • url过长的时候会自动拆分成多个 • 做完combo后的页面至少有2个串行的js请 求

Slide 12

Slide 12 text

Q & A