Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

基于Seajs的项目构建

1,198 views

Published on

从一个小的例子helloworld开始给大家介绍一下基于Sea.js做模块化开发项目完整的构建过程。然后会结合自身的项目实践分享一些经验。

Published in: Technology
  • Be the first to comment

基于Seajs的项目构建

  1. 1. 基于Seajs的项目构建 CDC miyukizhang
  2. 2. 使用SEA.JS做模块化开发的项目 的构建过程
  3. 3. 不包括: • 为什么使用模块化开发 • Sea.js和其他同类项目的优劣对比 • 各种规范的优劣对比
  4. 4. 提纲 • Sea.js模块标识 • Sea.js模块加载规则 • 项目结构 • 构建过程 • 项目实践
  5. 5. 提纲 • Sea.js模块标识 • Sea.js模块加载规则 • 项目结构 • 构建过程 • 项目实践
  6. 6. Sea.js的模块标识 • 模块标识:字符串,标识模块 – seajs.use("my-module"); – require("my-module"); • 3种模块标识: – 顶级标识 – 相对标识 – 普通路径
  7. 7. 顶级标识 • 不以../ , ./ , / 开头的标识 • 相对于Sea.js base路径来解析
  8. 8. Sea.js base 如果sea.js 的URL是: http://example.com/sea_modules/sea.js 则base 为: http://example.com/sea_modules/ 如果sea.js 的URL是: http://example.com/sea_modules/Sea.js/1.0.0/sea.js 则base 为: http://example.com/sea_modules/
  9. 9. Sea.js base 注意:这里设置的../dist,是相对于当前html页面所在路径来说的,而 不是相对于sea.js所在路径
  10. 10. 顶级标识 假设Sea.js base: http://example.com/sea_modules/ http://example.com/sea_modules/gallery/jquery/1.10.1/jquery.js
  11. 11. 相对标识 • 以./ 或者../ 打头的 • 相对于当前模块的路径来解析
  12. 12. 相对标识 path/to/b.js,path/c.js
  13. 13. 普通路径 • 三种形式: – http,file等开头的绝对路径 – 以/ 开头的根路径 – 传递给seajs.use()函数的相对路径 • 将会根据当前html页面的位置来解析
  14. 14. 提纲 • Sea.js模块标识 • Sea.js模块加载规则 • 项目结构 • 构建过程 • 项目实践
  15. 15. 模块加载规则 假设Sea.js base: http://example.com/sea_modules/ 文件路径:http://example.com/sea_modules/app/hello/1.1.0/hello.js
  16. 16. 模块加载规则 • 定义模块 • 模块分类: – 具名模块 – 匿名模块
  17. 17. I am not ID 具名模块 • 具名模块:定义了ID的模块I am ID
  18. 18. 具名模块 • 具名模块:定义了ID的模块 • ID ∈ 模块标识,模块标识≠ ID • 当一个文件里有多个define时,ID用来判断主模块
  19. 19. 具名模块 • ID 和路径匹配原则 文件路径: http://example.com/sea_modules/app/hello/1.1.0/hello.js
  20. 20. 具名模块 • ID 和路径匹配原则
  21. 21. 匿名模块 • 匿名模块:没定义ID的模块 – 无需匹配 – 文件中只能有一个define 块
  22. 22. 为什么需要具名函数 当seajs.use 这个文件时,应该返回哪个模块?
  23. 23. 为什么需要具名函数 和文件路径匹配的ID 的模块就是这个文件的主模块
  24. 24. 提纲 • Sea.js模块标识 • Sea.js模块加载规则 • 项目结构 • 构建过程 • 项目实践
  25. 25. Grunt Q:Grunt为何物? A:一个专为JavaScript提供的构建工具。 Q:啥是构建工具? A:解决源文件压缩、合并、拷贝和提取业务 代码依赖模块等复杂工作的自动化工具
  26. 26. 项目结构
  27. 27. 准备Grunt插件
  28. 28. Html
  29. 29. js文件 main.js hello.js world.js
  30. 30. js文件
  31. 31. js文件
  32. 32. js文件
  33. 33. 提纲 • Sea.js模块标识 • Sea.js模块加载规则 • 项目结构 • 构建过程 • 项目实践
  34. 34. 构建过程 • 为什么要构建 – 生产环境需要文件合并和压缩 – 代码合并需要遵循“ID 和路径匹配原则”
  35. 35. 构建过程 • 提取操作:用来提取模块的标识id 和依 赖dependencies • 压缩操作:包括文件合并和文件压缩
  36. 36. transport Grunt-cmd-transport
  37. 37. transport
  38. 38. transport 提取后hello.js:
  39. 39. transport 提取后main.js:
  40. 40. concat Grunt-cmd-concat
  41. 41. concat
  42. 42. concat seajs_hello/sea_modules/app/hello/1.0.0/hello.js
  43. 43. concat seajs_hello/sea_modules/app/hello/1.0.0/main.js
  44. 44. uglify和clean grunt-contrib-uglify,grunt-contrib-clean
  45. 45. 构建之后的目录结构
  46. 46. 源码 click me
  47. 47. 提纲 • Sea.js模块标识 • Sea.js模块加载规则 • 项目结构 • 构建过程 • 项目实践
  48. 48. 项目实践tracker.oa.com
  49. 49. 目录结构及说明 tracker_proj trunk release tags branches trunk: 项目源码 release:部署代码,构建后代码
  50. 50. 目录结构及说明 statistics -- 项目页 overview.html -- 概览 product.html -- 产品详情 css -- 样式文件 img -- 图片文件 sea_modules application -- 特定项目特定页面的业务层js都在这里 jquery -- base模块,spm提供的已经以CMD格式封装好的通用库都在这里 seajs -- seajs node_modules -- grunt及其所需插件。注1 grunt -- grunt grunt-cmd-concat -- 依赖合并 grunt-cmd-transport -- 提取依赖并设置模块ID grunt-contrib-clean -- 删除临时文件 grunt-contrib-uglify -- 压缩 Gruntfile.js -- grunt配置文件 package.json -- 项目配置文件,该文件内容可以在grunt中引用 rootConfig.js -- 开发环境下使用的seajs配置文件
  51. 51. 目录结构及说明 overview.js user_charts.js charts.js
  52. 52. 模块application/statistics/1.1.0/charts.js
  53. 53. 模块application/statistics/1.1.0/user_charts.js
  54. 54. 模块application/statistics/1.1.0/overview.js
  55. 55. 模块rootConfig.js
  56. 56. 模块statistics/overview.html
  57. 57. 构建 1. package.json 2. Gruntfile.js 1. transport任务 2. concat任务 3. uglify任务 4. clean任务
  58. 58. 感受 • 文件职责明确 • 代码清晰 • 减少重复开发 • 自动化部署节省开发时间
  59. 59. End Thanks

×