前端模块化开发.pptVIP

前端 模块化 开发 By: 陈益国 命名空间 的困惑 过长的命名空间对于编码和记忆都是一个负担 依赖文件 的困惑 组件的使用者需要关注该组件的每一个依赖 dialog 需要依赖 drag ： 使用时可能就漏掉了 drag ： 依赖文件 的困惑 文件颗粒度小 但依赖太多 5173 首页开发环境的一堆引用： 单个大文件 的困惑 依赖没有了 但单个文件的体积却越来越臃肿 图搜开发初期没有自动化合并工具，只能人肉合并 : 传统开发模式的 主要问题 ? 命名的冲突 ? 代码量巨大的单文件的可维护性 ? 小颗粒度文件的依赖 模块化就是为了解决这些问题 模块化并不是 新鲜玩意 Java 、 python 、 c# 、 php 等都有 include 、 import 连 css 都有 @import JavaScript 在 ES6 也会增加 import 的功能 JavaScript 中目前的模块化方案 ? Common Module Definition （ CMD ） - SeaJS ? Asynchronous Module Definition ( AMD ) - RequireJS ? 其他非标准的实现 - YUI3 - Dojo - Kissy CMD 的一个栗子 CMD 规范的定义 define( factory ) ? factory : 模块体 function( require, exports, module ){ // 模块实现的代码 } ? require : 用于加载依赖模块 ? exports : 用于向外部提供接口 AMD 的一个栗子 AMD 规范的定义 define( id?, deps?, factory ) ? id : 模块名 ( 可省 ) ? deps : 依赖模块列表 ( 可省 ) ? factory : 模块体 CMD vs AMD CMD AMD 严谨 require, exports, moduls 都是伪关键词 宽松 依赖和模块代码混杂在一起 依赖和模块代码是分离的 一个 模块 一个 文件 One Moudle One file 匿名 模块 hello.js 模块名随着文件名的变化可以随时变换 具名 模块 183.js 模块名固定 , 文件名不固定 , 需要配置别名 依赖 处理 hello.js main.js main.js 依赖了 hello.js seed.js 一个简单纯粹的 AMD 模块加载器 /chenmnkken/seed 使用 模块 无回调时更简便的用法 模块化在图搜中的应用 seed 与 jQuery 的结合 seed + jQuery = seed-jquery.js ? 节省请求 ? 可靠性 ? 无需关注基础库的依赖性