源码学习

源码学习

学习什么

架构设计思维

对所用工具更深的理解

优秀编码技巧

源码都有的特性

开始经常会有大量的健壮性判断

健壮性很重要

1. 健壮性最有效的保证就是在参数层面2. 把容易出问题的代码块用 try catch 包裹起来

模块调模块

看源码技巧

不要一句一句读

先理清架构，再看入口，依照流程读下去

摈弃其他代码，看核心代码

典型架构

工厂模式

工厂模式是我们最常用的实例化对象模式，是用工厂方法代替new操作的一种模式。

工厂模式可以解决实例化对象产生大量重复的问题

<script type=\"text/javascript\

类库例子： JQuery

优点

通过使用工程方法而不是new关键字，将所有实例化的代码集中在一个位置防止代码重复

缺点

工厂模式解决了重复实例化的问题，但一定要查看工厂方法才知道是哪个对象的实例；相比之下使用new关键字和构造函数，可以让代码更加简单易读。

应用场景

当对象或组件涉及高复杂性时当需要根据所在的不同环境轻松生成对象的不同实例时当处理很多共享相同属性的小型对象或组件时

建造者模式

只需要产生少数对象，构造过程比较复杂

建造者模式将一个复杂对象的构建和其表示相分离，使得同样的构建过程可以创建不同的表示。也就是说如果我们用了建造者模式，那么用户就需要制定需要建造的类型就可以得到他们，而具体建造的过程和细节就不需要知道了。建造者模式实际上就是一个指挥者，一个建造者，一个指挥者调用具体建造者工作得出结果给客户。 建造者模式主要用于”分步骤构建一个复杂的对象”，在这其中”分步骤”是一个稳定的算法，而复杂对象的各个部分则经常变化。

作用

1.分步创建一个复杂的对象2.解耦封装过程和具体创建组件3.无需关心组件如何组装

注意事项

1.一定要一个稳定的算法进行支持2.加工工艺是暴露的--白富美不用关心如何建房子，但可以随时去看房子建得怎么样

类库例子： Vue

函数式编程

函数式编程是种编程方式，它将电脑运算视为函数的计算；它属于\"结构化编程\"的一种，主要思想是把运算过程尽量写成一系列嵌套的函数调用。

两个基本运算

合成

如果一个值要经过多个函数，才能变成另外一个值，就可以把所有中间步骤合并成一个函数，这叫做\"函数的合成\

柯里化

f(x)和g(x)合成为f(g(x))，有一个隐藏的前提，font color=\"#924517\

类库例子： lodash

Vue3 为什么要改成函数式

Logic Composition组合大于继承

One of the key aspects of the component API is how to font color=\"#16884a\

Type Inference更好地支持 TS

One of the major goals of 3.0 is tofont color=\"#16884a\

Bundle Size打包后体积更小

Function-based APIs are exposed as named ES exports and imported on demand. This makes themfont color=\"#924517\

参考

https://github.com/vuejs/rfcs/blob/function-apis/active-rfcs/0000-function-api.md

http://www.ruanyifeng.com/blog/2017/02/fp-tutorial.html

JQuery 源码

(function(window){})(window)

为什么要将 window 当参数传入

减少作用域链的查找时间

如何给 JQuery 添加各种功能

先构建 extend 方法，用 extend 来扩展模块

jquery.extend=jquery.fn.extend=function(){}jquery.fn.extend({ // css 模块})jquery.fn.extend({ // 动画 模块});

extend 方法中的享元模式

享元模式可以有效减少代码中的对象数量

jquery.extend = jquery.fn.extend = function() { // 享元模式，把不同部分拿出来，相同部分保留下 var target; var source; if (arguments.length === 1) {  target = this;  source=arguments[0]; }else{  target=arguments[0];  source = arguments[1];} for (var name in source) {  target[name] = source[name]; }};

模块化支持检测（现在一定要有）

jquery 里：if (typeof define === \"function\" && define.amd && define.amd.jquery) { define(\"jquery\

架构亮点

利用工厂模式，无 new 化构建对象

模块划分明确

开闭原则的优秀体现指的是 extend 方法吗？？

在面向对象编程领域中，开闭原则规定“软件中的对象（类，模块，函数等等）应该对于扩展是开放的，但是对于修改是封闭的”，这意味着一个实体是允许在不改变它的源代码的前提下变更它的行为。

express 架构

建造者模式，通过 mixin 函数来给 app 函数扩展功能var mixin=require('merge-descriptors')var proto=require('./application.js')module.exports=createApplicationfunction createApplication(){ function app(){ }font color=\"#924517\

给 app 函数对象上添加 get post delete 等请求方法

font color=\"#924517\

https://study.163.com/course/courseLearn.htm?courseId=1209772816#/learn/live?lessonId=1280423552&courseId=1209772816

https://segmentfault.com/a/1190000002525792