03-FTF 2012_葛　亮（焦点）_模块化的javascript开发.pptx

Size: px

Start display at page:

Download "03-FTF 2012_葛　亮（焦点）_模块化的javascript开发.pptx"

雳宰
7 years ago
Views:

1 模块化的 Javascript 开发焦点科技

2 大纲一.Javascript 开发之痛二.Javascript 模块化简简介三. 模块化实现原理四. 案例五. 总结

3 一.Javascript 开发之痛

4 1. 全局变变量冲突冲突了当以上代码遇到以下代码

5 1. 全局变变量冲突解决方案修改变量名匿名函数包裹 (function () { })(); 全局函数 / 类该如何处理?

6 1. 全局变变量冲突用对象模拟拟命名空间命名空间依依然可能冲突书写 / 记忆负负担

7 1. 全局变变量冲突神啊

8 2. 文件依赖赖难以维护制作简单的页面效果引入 jquery.js, 添加 index.js 加上图片轮播效果引入 jquery.switch 插件, 修改 index.js 记住搜索的关键词引入 jquery.cookie 插件, 修改 index.js 记住图片播放的顺序修改 jquery.switch 插件去掉记住关键词功能可以移除 jquery.cookie 插件吗 <script type="text/javascript" <script type="text/javascript" <script type="text/javascript" src="jquery.js"></script> src="index.js"></script> src="jquery.switch.js"></script> src="jquery.cookie.js"></script>

9 2. 文件依赖赖难以维护 index..js jquery.switch.js jquery.cookie.js jquery.js 去掉记住关键键词功能

10 2. 文件依赖赖难以维护需要注意 script 元素的先后顺序移除某个 script 元素时, 需要检查依赖疯了

11 问题的根源源在哪里? Javascript 中没有完备的模块块系统看看 Java 中的模块系统使用 package 声明模块的的命名空间使用 import 引入其他模块类就是模块变量包裹在模块中, 不会跑出去 public 修饰的的方法就是模块的对外接口引入的模块可以直接使用 Javascript 需要这样的模块系统!

12 二.Javascript 模块化简介

13 Javascript 模块规范 CommonJS 适用于 NodeJS, 无法用于 Web AMD 既适用于 Web, 也适用于 NodeJS 国外影响力较大模块加载器 RequireJS CMD 专注于 Web, 通过扩展的方式用用于 NodeJS 国内前端开源界的巨星模块加载器 SeaJS 以 CMD 规范为例讲解模块化

14 CMD 规范使用 define 函数定义模块函数的参数是一个 function 定义模块 index.js 一个模块, 一个文件 define(function() { var txt = 'Hello, world!'; alert(txt); }); 模块的代码书写在匿名 function 中使用模块 test.html 引入 SeaJS 模块加载器 <script src="/sea..js"></script> <script> seajs.use('./index'); </script> 调用 seajs.use 函数来加载并使用模块函数参数为模块标识

15 CMD 规范模块的输出 util.js define(function (require, exports) { var getkeys = fu unction () { //... }; exports.getkeys = getkeys; }); 通过 exports 参数对象, 对外提供接口使用模块 test.html <script src="/sea.js"></script> <script> seajs.use('./util', function (util) { util.getkeys(...); }); use 函数数第二个参数为回调函数回调函数数的参数为加载模块的输出 </script> 给函数增加两个参数 :require,exports

16 CMD 规范模块的依赖 index.js define(function (req quire, exports) { var util = require('./util'); var hash = {'key':'value'}; util.getkeys(hash); }); 调用 util 模块输出的接口方法 require 是一个函数接受的参数为模块的标识 ( 路径 ) 返回值为相应模块的输出使用模块 test.html <script src="/sea.js" <script> seajs.use('./index') ); </script> "></script> 只需要加载 index 模块即可 SeaJS 会自动加载此模块依赖的其他模块

17 比较 var Focus = Focus {}; Focus.util = {}; Focus.util.getKeys = function () { }; var hash = {'key':'value'}; alert(focus.util.getkeys(hash)); util.js index.js test.html define(function (require, exports) { var getkeys = function () { }; exports.getkeys = getkeys; }); define(function (require, exports) { var util = require('./util.js'); var hash = {'key':'value'}; alert(util.getkeys(hash)); }); <script src="./util.js"></script> <script src="./index.js"></script> <script src="/sea.js"></script> <script> seajs.use('./index'); </script> 不用担心类 / 函数 / 命名空间的冲突模块依赖由代码决决定, 程序自动维护需要少量额外的编编码

18 小结遵循规范的代码可以很自然地规避避变量 / 函数 / 类 / 命名空间冲突文件之间的依赖由代码决定, 并能能自动管理 define(function (require, exports) { var a = require('...'); //... }); exports.x =....; 模块化是一种更自然然的代码组织方式

19 三. 模块化实现原理

20 模块加载执执行的流程 test.html seajs.use('./index'); index.js define(function (require, exports) { var util = require('./util');... }); 1. 解析模块标识 './index', 获取模块路径 2. 下载 index 模块, 执行 define, 缓存 factory 函数 3. 分析 index 模块的依依赖, 解析 './util' 4. 下载 util 模块 5. 执行 index 模块的 factory 函数模块加载后不会立刻刻执行, 而是先做语法分析

21 如何下载载模块? 异步加载 script 脚本的方式 XHR eval / XHR Injection document.write script script injection SeaJS / RequireJS 采用 script injection var node = document.createelement('script'); node.src = '...'; head.appendchild(node);

22 如何分析模模块依赖? seajs.use('./index'); 模块被下载后, 会自动先执行 define define(function () {...}); 使用 factory.tostring() 将函数体以字符符串方式输出 var code = factory.tostring(); 使用正则表达式匹配字符串中的 requiree 语法即可 var REQUIRE_RE = /(?:^ [^.$])\brequire\s*$\s*(["'])([^"'\s$]+)\1\s*\)/g while ((match = REQUIRE_RE.exec(code) ))) {...

23 require 是如如何实现的? define(function () {...}); 分析完依赖后, 会先下载 util 模块, 并缓存其 factory 函数 var util = require('./util'); 执行 require 时, 会找到对应的 factory 并调用, 然后返回 exports module.exports = {} module.factory.call( window, module.require, module.exports, module) return module.exports

24 小结为什么需要 define? 让模块代码不会在加载后立刻执行让模块加载器有机会在执行模块前做预预处理为什么不需要人工管理依赖了了? 模块代码指明了自身依赖模块的路径模块加载器在模块执行前, 分析代码, 并下载依赖的模块

25 四. 案例

26 案例网页版麦通网页版的即时聊天系统交互非常复杂

27 案例项目情况近 100 个 JS 文件超过 4000 行代码采用模块化方式组织代码遵循 CMD 规范, 使用 SeaJS 加载模块

28 90 多个 JS 文件 90 多个 JS 文件目录结构也很复杂

29 恐怖的依赖关系感谢模块化开发感谢模块化开发感谢 SeaJS!

30 实战战技巧 JS 如何组装 HTML 使用字符串保存 HTML var html = '<div style="...">' + '<span style="...">' + '</span>' + '</div>'; var div = $(html); 可维护性极差, 但代码简单用程序生成 DOM 元素 var div = $('<div></div>'); var span = $('<span></span>'); div.css({ 'border' : '1px solid black', 'position' : 'absolute',... }); span.css('color', 'red'); div.append(span); 可维护性稍强, 但代码过于复杂

31 使用 SeaJS JS 如何组组装 HTML div.html <div class="wrap"> <span class="red"> </span> </div> div.css.wrap {... }.red { color : red; } div.js define(function (require, exports) { require('./div.css' '); var html = require( ('./div.html'); var div = $(html); }); SeaJS 会将 css 文件插入 dom SeaJS 会使用 ajax 获取 html 然后将文件内容作为字符串返回可维护性高, 代码也很简单

32 实战技技巧 JS 文件拆分的矛盾优点可维护性高多人协作更方便缺点 http 请求数变多, 拖慢页面加载速度解决办法使用 SeaJS 配套的 spm 工具合并 JS spm 通过语法分析, 将所有的依赖文件合并并到一起并压缩

33 实战技技巧修改文件, 自动刷新页面安装 SeaJS 配套的 reload-server 进入代码目录, 执行 reload-serv ver 给访问的 url 带上?seajs-reload 参数

34 五. 总结优点解决了长期困扰 Javascript 开发的两大大难题提高了程序的可维护性有利于多人协作纯前端的解决方案, 简单, 适用广泛缺点由于 Javascript 语法的先天不足, 模块块化需要额外代码旧代码迁移的代价

35 使用 SeaJS 的网站

36 define({ }); name : ' 葛亮 ', 'geliang@made-in-china.com', answer : functionn (question) { return getanswer(question); }

本课程作为非计算机专业本科通识课程, 是一门理论和实践紧密结合的实用课程, 内容包括计算机基础部分和程序设计部分计算机基础部分涵盖计算机软硬件组成数制表示操

本课程作为非计算机专业本科通识课程, 是一门理论和实践紧密结合的实用课程, 内容包括计算机基础部分和程序设计部分计算机基础部分涵盖计算机软硬件组成数制表示操计算机基础部程序设计类课程介绍 1. Java 语言程序设计 Java 简介 Java 是一种开放的可以撰写跨平台应用程序的面向对象的程序设计语言 Java 技术具有卓越的通用性高效性平台移植性和安全性, 广泛应用于 PC 数据中心科学超级

03-FTF 2012_葛 亮（焦点）_模块化的javascript开发.pptx

03-FTF 2012_葛　亮（焦点）_模块化的javascript开发.pptx