Blog

事件机制的核心就是发布-订阅模式。维护一个对象，对象的 key 存的是事件 type，对应的 value 为触发相应 type 的回调函数，即 listeners，然后 trigger 时遍历通知，即 forEach 进行回调执行。

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

class EventTarget {
    constructor() {
        this.listener = [];
    }

    // 监听事件
    on(type, callback) {
        // 如果是第一次监听该事件，则初始化数组
        if (!this.listeners[type]) this.listeners[type] = [];
        this.listeners[type].push(callback);
    }

    // 只监听一次
    once(type, callback) {
        if (!this.listeners[type]) this.listeners[type] = [];
        // once 只触发一次，触发后 off 即可 回调函数加上标识
        callback._once = true;
        this.listeners[type].push(callback); 
    }

    // 取消监听
    off(type, callback) {
        const listeners = this.listeners[type];
        if (Array.isArray(listeners)) {
            // filter 返回新的数组，会每次对 this.listeners[type] 分配新的空间
            // this.listeners[type] = listeners.filter(l => l !== callback);
            // 根据 type 取消对应的回调
            const index = listeners.indexOf(callback);
            // 用 splice 要好些，直接操作原数组
            this.listeners[type].splice(index, 1);
            // 如果回调为空，删除对该事件的监听
            if (this.listeners[type].length === 0) delete this.listeners[type];
        }
    }

    // 执行 扳机社
    trigger(event) {
        // type 为必传属性
        const { type } = event;
        if (!type) throw new Error('没有要触发的事件！');
        // 判断是否之前对该事件进行监听了
        const listeners = this.listeners[type];
        if (!listeners) throw new Error(`没有对象监听 ${type} 事件！`);
        if (!event.target) event.target = this;
        listeners.forEach(l => {
            l(event);
            // 如果通过 once 监听，执行一次后取消
            if (l._once) this.off(type, l);
        });
    }
}

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

// 测试
function handleMessage(event) { console.log(`message received: ${ event.message }`); }

function handleMessage2(event) { console.log(`message2 received: ${ event.message }`); }

const target = new EventTarget();

target.on('message', handleMessage);
target.on('message', handleMessage2);
target.trigger({ type: 'message', message: 'hello custom event' }); // 打印 message，message2

target.off('message', handleMessage);
target.trigger({ type: 'message', message: 'off the event' }); // 只打印 message2

target.once('words', handleMessage);
target.trigger({ type: 'words', message: 'hello2 once event' }); // 打印 words
target.trigger({ type: 'words', message: 'hello2 once event' }); // 报错：没有对象监听 words 事件！

谷歌开发者中心上面关于谷歌浏览器控制台console.log()的文档：

\n是换行，可以将一个字符串设置成多行 %c标记之后的内容使用对应样式，格式如 console.log(‘%c第一个样式%c第二个样式’,’css1′,’css2′); 如此对应 样式和普通的css效果基本一致，可以设置文字颜色，背景颜色，字体大小，间距，边距等等。还支持部分css3高级效果。

食用方法

使用【上下左右键】来控制飞行器的运动

使用【空格键】来发射导弹

点击开始摧毁

在JS中，大家通常用typeof来判断基本类型，instanceof来判断引用类型。

typeof

typeof一般只能返回如下几个结果：number,boolean,string,function,object,undefined字符串

对于Array,null等特殊对象使用typeof一律返回object，而函数返回function这正是typeof的局限性。

在判断除Object类型的对象(基本类型)时比较方便。

instanceof

object instanceof constructor

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

换种说法就是左侧的对象是否是右侧对象的实例。

相关练习

1
2
3

'123' instanceof String // true
let str = new String('123')
str instanceof String // true

文档目的

希望这篇文档能够帮助到北上广深杭等租房漂泊的同学在找房的时候规避一些明显的问题。

这里枚举了一些常见问题，适当参考文档作出一个判断，或许可以减少租客和房东都不开心的情况的出现，并节约时间。

作为租客，即使在预算并不充裕，或者稍低于目标区域平均价格的时候，也可以找到靠谱的房子，只要策略得当。

希望看过文档的同学可以少遇到居住不舒服的房子，至少，不要遇到居住那么不舒服的房子 :D

1. 善用google⭐

作为一名程序员，你要知道如何搜索问题的答案。学会有效的使用google，你将节省大量开发时间。

2. 谨慎承诺超额交付⭐

让你的团队知道一项任务需要三周的时间，并在两周内完成，这比让他们知道相反的情况要好。通过谨慎承诺和超额交付，你会建立信任。

3. 善待产品设计人员，他们是你的朋友

产品设计人员为用户的痛点提供解决方案。向他们学习，团结一致地构建有效的产品。

4. 找到一名导师

找到一个可以学习和借鉴的人。如果你需要技术指导，Coding Coach会是一个不错的地方。

5. 成为一名导师

做一个别人可以学习和借鉴的人。你可以尝试在Coding Coach成为别人的导师。

6. 写些有用的评论

写下有用的回答而不是问为什么，mark和灌水也没什么意思。

提问之前

在向别人提出一个技术问题之前，请尝试从以下几个途径去寻找答案：

1. Google

2. Stackoverflow

3. 相应的社区

4. 官方文档

5. 项目的Issue

6. 项目源码（看个人能力）

提问之时

以上尝试无果的情况下向别人提出问题时：

1. 认真做足相关功课，并整理好提问思路

2. 礼多人不怪，一定要谦虚礼貌

3. 清楚描述使用的环境、需求及问题的症状，语言要精简

4. 能够提供一些问题的必要的截图、例子或者错误信息

提问结束

1. 一定要表示感谢，不管问题有没有得到解决

2. 如果问题解决，在论坛或者社区一定要 留下你的解决方案并加以必要的说明，方便后人(我深受其害)；哪怕是问的身边的人，有价值的问题也要在博客上做记录

3. 如果以上方法都尝试了还是解决不了那就先放一放，说不定过两天就有思路了

4. 再不行，那就换个思路或者方案来解决你的需求吧

参考资料：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/master/README-zh_CN.md

1. 时间常有，时间在于优先。

2. 时间总会有的：每天只计划 4～5 小时真正的工作。

3. 当你在状态时，就多干点；不然就好好休息：有时候会连着几天不是工作状态，有时在工作状态时却又能天天忙活 12 小时，这都很正常的。

4. 重视你的时间，并使其值得重视：你的时间值 1000 美元/小时，你得动起来。

5. 不要多任务，这只会消耗注意力；保持专注，一心一用。

6. 养成工作习惯，并持之以恒，你的身体会适应的。

7. 在有限的时间内，我们总是非常专注并且有效率。

8. 进入工作状态的最佳方式就是工作，从小任务开始做起，让工作运转起来。

9. 迭代工作，期待完美收工会令人窒息：“做完事情，要胜于完美收工” 。动手做，胜过任何完美的想象。

10. 工作时间越长，并不等于效率越高。

11. 按重要性工作，提高效率。

12. 有会议就尽早安排，用于准备会议的时间往往都浪费掉了。

13. 把会议和沟通 (邮件或电话) 结合，创造不间断工作时间：一个小会，也会毁了一个下午，因为它会把下午撕成两个较小的时间段，以至于啥也干不成。PS：当看到一个程序员冥思苦想时，不要过去打扰，甚至一句问候都是多余的。

14. 一整天保持相同的工作环境。在项目/客户之间切换，会效率低。

15. 工作—放松—工作=高效(番茄工作法)。

番茄工作法是弗朗西斯科·西里洛于1992年创立的一种相对于GTD更微观的时间管理方法。使用番茄工作法，选择一个待完成的任务，将番茄时间设为25分钟，专注工作，中途不允许做任何与该任务无关的事，直到番茄时钟响起，然后在纸上画一个X短暂休息一下（5分钟就行），每4个番茄时段多休息一会儿。

16. 把不切实际的任务分割成合理的小任务，只要每天都完成小任务，你就会越来越接近那个大目标了。

17. 从来没有两个任务会有相同的优先级，总会有个更重要，仔细考虑待办事情列表。

18. 必须清楚白天必须完成的那件事，是什么。 只去做那件有着最大影响的事情。

19. 把任务按时间分段，就能感觉它快被搞定了。

20. 授权并擅用他人的力量。—君子善假于物(人)也，如果某件事其他人也可以做到八成，那就给他做！

21. 把昨天翻过去，只考虑今天和明天。昨天的全垒打赢不了今天的比赛。—好汉不提当年勇。

22. 给所有事情都设定一个期限。不要让工作无期限地进行下去。

23. 针对时间紧或有压力的任务，设置结束时间，万事皆可终结。

24. 多记，多做笔记。

25. 进入高效状态后，记下任何分散你注意力的东西比如Google搜索词、灵光乍现的想法、新点子等等。如果你把它们记下来，它就不会再蹦来蹦去了。

26. 休息，休息一下～。

在处理表单登录的过程中，遇到了一个问题，当我们在输入框输入内容输入框获取到焦点时，输入框后面会出现一个图标删除已输入的内容，因此删除图标会绑定一个click事件，但是当我们点击图标的时候，也触发了input的blur事件，blur事件会让input失去焦点时隐藏删除的图标，并且blur事件先于图标的click事件执行，因此这时候点击图标并不会删除输入框已输入的内容，而是图标消失了。还有弹窗输入框blur同时点击取消按钮关闭，也会出现需要点击2次的情况。

接上次的维生素😊，罗列一些生活中需要知道健康指标。