S.O.L.I.D 原则

面向对象的编程并不能防止难以理解或不可维护的程序。因此，Robert C. Martin 制定了五项指导原则，使开发人员很容易创建出可读性强且可维护的程序。这五项原则被称为 S.O.L.I.D 原则（这种缩写是由 Michael Feathers 提出的）：

• S：单一职责原则 （The Single Responsibility Principle）
  • 相关的特性放在一起，因相同的原因而改变

• O：开闭原则 （The Open Closed Principle ）

  • 如何区别相关特性？继承
  • 是否真的不可修改 ？可扩展时，不可修改

  注：印证了“没有通过增加中间层（继承）不能解决的问题”

• L：里氏替换原则 （Liskov Substitution Principle ）
  • 继承中，父类与子类的关系？子类无隙替换父类

• I：接口隔离原则 （The Interface Segregation Principle ）
  • 如果继承产生了冗余接口？定义细粒度接口

• D：依赖倒置原则 （The Dependency Inversion Principle ）
  • 不同模块之间如何产生联系？模块间的依赖是通过抽象发生
  • 相对于细节的多变性，抽象的东西要稳定的多

前言

经常遇到开发时间预估不准，当然大多数是延期，那么延期的项目是因为什么呢一般？

常见问题

部分时间未考虑

一般情况下是因为我们评估的是直接的开发时间，而且是顺利情况、大家都了解需求，没有任何疑问和阻碍的情况下。实际上，这种非常顺利的场景基本不存在。

javascript隐式转换规则

1. ToString，ToNumber，ToBoolean，ToPrimitive

我们需要先了解一下js数据类型之间转换的基本规则，比如数字、字符串、布尔型、数组、对象之间的相互转换。

1.1 ToString

这里所说的ToString可不是对象的toString方法，而是指其他类型的值转换为字符串类型的操作。

这里我们讨论null、undefined、布尔型、数字、数组、普通对象转换为字符串的规则。

• null：转为"null"
• undefined：转为"undefined"
• 布尔类型：true和false分别被转为"true"和"false"
• 数字类型：转为数字的字符串形式，如10转为"10"， 1e21转为"1e+21"
• 数组：转为字符串是将所有元素按照”,”连接起来，相当于调用数组的Array.prototype.join()方法
  • [1, 2, 3]转为"1,2,3"
  • 空数组[]转为空字符串
  • 数组中的null或undefined，会被当做空字符串处理
• 普通对象：转为字符串相当于直接使用Object.prototype.toString()，返回"[object Object]"

1
2
3
4
5
6
7
8
9
10

String(null) // 'null'
String(undefined) // 'undefined'
String(true) // 'true'
String(10) // '10'
String(1e21) // '1e+21'
String([1,2,3]) // '1,2,3'
String([]) // ''
String([null]) // ''
String([1, undefined, 3]) // '1,,3'
String({}) // '[object Objecr]'

对象的toString方法，满足ToString操作的规则。

注意：上面所说的规则是在默认的情况下，如果修改默认的toString()方法，会导致不同的结果

通用性高

• 优点：满足多种使用场景

• 缺点：糅合多种使用场景，必然有相应的代价

  • 代码逻辑会变得更加复杂，甚至难以理解
  • 复杂的代码，不利于维护

scrollTop

元素的scrollTop值是从元素顶部到其最顶部可见内容的距离的度量（An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content）。

注：overflow属性值为hidden的元素，改变元素的scrollTop值，可以触发滚动效果

一、程序的本质

为了理解 Pointfree，请大家先想一想，什么是程序？

上图是一个编程任务，左侧是数据输入（input），中间是一系列的运算步骤，对数据进行加工，右侧是最后的数据输出（output）。一个或多个这样的任务，就组成了程序。

输入和输出（统称为 I/O）与键盘、屏幕、文件、数据库等相关，这些跟本文无关。这里的关键是，中间的运算部分不能有 I/O 操作，应该是纯运算，即通过纯粹的数学运算来求值。否则，就应该拆分出另一个任务。

注：函数单一职责原则：拆分依据（纯粹数学运算）

什么是柯里化？

在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数且返回结果的新函数的技术。

1
2
3
4
5
6
7
8

function currying(fn) {
    var slice = Array.prototype.slice,
        __args = slice.call(arguments, 1);
    return function() {
        var __inargs = slice.call(arguments);
        return fn.apply(null, __args.concat(__inargs));
    };
}

注：柯里化主要是利用闭包，将单一参数封装起来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function square(i) {
    return i * i;
}

function map(handeler, list) {
    return list.map(handeler);
}

// 通用性写法
map(square, [1, 2, 3, 4, 5]);
map(square, [6, 7, 8, 9, 10]);
map(square, [10, 20, 30, 40, 50]);

// 柯里化写法
// 固定mapSQ的单一参数，降低通用性，提高适用性
var mapSQ = currying(map, square);  // square 为单一参数
mapSQ([1, 2, 3, 4, 5]);
mapSQ([6, 7, 8, 9, 10]);
mapSQ([10, 20, 30, 40, 50]);

// 通用设计与专门设计相比，功能更多，但效率却更低。

原文

1. 使用 Array.includes 来处理多重条件

举个栗子 🌰：

1
2
3
4
5
6

// 条件语句
function test(fruit) {
  if (fruit == 'apple' || fruit == 'strawberry') {
    console.log('red');
  }
}

乍一看，这么写似乎没什么大问题。然而，如果我们想要匹配更多的红色水果呢，比方说『樱桃』和『蔓越莓』？我们是不是得用更多的 || 来扩展这条语句？

我们可以使用 Array.includes(Array.includes) 重写以上条件句。

1
2
3
4
5
6
7

function test(fruit) {
  // 把条件提取到数组中
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
  if (redFruits.includes(fruit)) {
    console.log('red');
  }
}

我们把红色的水果（条件）都提取到一个数组中，这使得我们的代码看起来更加整洁。

一、微信转发分享

1
2
3
4
5

朋友圈    from=timeline&isappinstalled=0

微信群    from=groupmessage&isappinstalled=0

好友分享  from=singlemessage&isappinstalled=0

现象：根据不同途径的转发分享，微信浏览器会偷偷添加以上参数。

坑点：对于配置了JSSDK使用权限的网页，会导致二次分享，权限认证失败。

1、题目和答案

一道题题目：下面这段promise、async和await代码，请问控制台打印的顺序？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

async function async1() {
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}

async function async2() {
    console.log('async2')
}

console.log('script start')

setTimeout(function() {
    console.log('setTimeout')
}, 0)

async1();

new Promise(function(resolve) {
    console.log('promise1')
    resolve();
}).then(function() {
    console.log('promise2')
})

console.log('script end')