作者:yanyige | 发布时间:2017-04-11 09:57
第三天
9时59分 第一节课 JavaScript的挑战 月影
课程链接
https://ppt.baomitu.com/d/1f26e039#/
三个问题
- 分红包
每次都分大的红包 - 判断是否是4的幂
正则表达式 - 算点与线段的距离
数学方法
13时58分 第二节课 前端、框架、库及编年史 刘观宇
王者之路 (Jquery的前世今生)
jQuery之父
John Resig, jQuery的创始人和技术领袖
异步对象
jQuery1.5引入
总结
- 频繁操作Dom的应用,尤其是兼容要求较多,依然是最好的选择
- 简化了浏览器兼容性适配细节
- 使得dom选择器使用css selector成了事实标准
- 前瞻性的引入了一些日后语言标准的做法,客观起到polyfill的作用动画、链式调用
- 一些创造性的方法如早期的live、delegate使开发者耳目一新
- 建立了widget模式,使得插件更加规范和易用深刻影响了前端社区,即使在今天依然有着不小的影响力
单页应用的兴起 (BackBone、CommonJS、CMD、requireJS)
CommonJS
AMD和requireJS
AMD:Asynchronous Module Definition,中文名是异步模块定义如果是浏览器环境,要从服务器端加载模块,这时就必须采用非同步模式,因此浏览器端一般采用AMD规范。
requirejs是一个AMD规范的重要实现
UMD
Angular的辉煌
Angular架构:MVVM
Angular的双向绑定
- $digest()
- $watch()
- $apply()
总结
- 做大型管理后台、复杂的单页应用,很犀利
- 重量级、全套的解决方案
- 双向绑定减少了维护数据、视图一致的大量工作
- 创造了比较多的概念,理解起来有一定代价
- 双向绑定带来一定的复杂度和效率问题
- 后续的angular2、angular4值得关注
席卷前端的一股清流(React及其相关)
Flux和redux
- Flux是一种标准,redux是它的具体实现
- 强调单向数据流
- store、state、action、reducer
- 函数式编程
一般的react+redux项目标准设施
- React:复杂视图层
- Redux:负责数据流管理
- React-Router: 负责监听浏览器路由变化
- Webpack+babel:工程编译
总结
- 和新贵Vue是目前最炙手可热的前端库
- 已经形成庞大的周边生态
- 提出了完善的组件生命周期概念
- JSX颠覆了传统的前端工程概念
- 衍生的React Native已经在移动端原声开发中,占有一席之地
16时15分 第三节课 大话设计模式 (如何写出可复用易扩展的代码)纪立明
面向X?
- 面向过程
- 面向对象
- 面向切面
- 面向组件
面向过程(OOP)
面向对象(OOP)
人以类聚,物以群分。
例题: CS建模
组件编程(COP)
乐高积木
- 基于组件开发
- 设计时通常要求组件高内聚低耦合,其接口可能是OO的,调用方式可能是以services的方式
- 基于组件开发关注系统层次,子系统边界和子系统间的通讯设计。
切面编程(AOP)
在运行时,动态地将代码切入到类的指定方法,制定位置上的编程思想就是面向切面的编程。
生产消费模型
通过一个容器来解决生产者和消费者强耦合的问题,生产者和消费者彼此之间不直接通讯。而通过阻塞队列里取,阻塞队列就相当于于一个缓冲区。平衡了生产者和消费者的处理能力
抽象工厂 (Factory Method)
定义一个用于创建对象的接口,让子类决定将哪一个类实例化,使一个类的实例化延迟到其子类。
观察者模式 (Observer)
定义对象的一种一对多的依赖关系,一边当一个对象的状态发生改变时,所有依赖它的对象都得到通知和更新。
装饰者模式 (Decorator)
动态的给一个对象添加一些额外的职责,就扩展功能而言,Decorator模式比生成子类的方式更为灵活。
适配器 (Adaptor)
将一个类的接口转换成客户希望的另外一个接口。Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。
注重对接口的转换和调整。
代理模式 (Proxy)
为其他对象提供一个代理以控制对这个对象的访问。
中介者模式 (Mediator)
用一个对象来封装一系列的对象交互,中介者使各对象不需要显示的互相引用。从而使其耦合松散,而且可以独立的改变它们之间的交互。
外观模式 (Facade)
重新进行类的设计,通过重新组合各类及程序单元,对外提供一致的接口/界面,供上层应用使用。