2019.11.18 - 11.24中你学到什么？

[KieSun]

自学小组打卡专用

每日需打卡以下内容：

• 你学习了什么，比如文章链接、书籍等等
• 学到了什么，具体内容 Po 出来，自己的文档链接或者直接把内容写评论里也行
• 打卡时间

当然特殊情况可请假当日打卡，一周两次。

注意：请把群昵称改成 Github 昵称，便于踢人。

[FairyAndMonster]

2019-11-20:Promise学习总结（2）https://www.cnblogs.com/zxmonster/p/11895734.html

[c2kaka]

2019-11-20: 深入学习ES6作用域 for(let i of [1,2,3])

[xiafeier]

打卡（2019/11/20） 1、什么是丑数 2、ES6 数组去重 Set Array.from 类数组转换成数组
3、Map 的妙用 4、冒泡排序 选择排序 笔记连接 https://juejin.im/post/5dd532e2f265da47d67c20b3

[luoheqp]

打卡

typescript 笔记整理 https://github.com/leoljustsave/A-hour-a-day/blob/typescript/typescript/note/typescript%20base.md

[webRambler]

leetcode-反转字符串

[StrivingRabbit]

打卡 今天工作中进行表格的二次封装改进 学习了axios的源码 学习了九种跨域方式的体现

[ghost]

2019-11-20 学习日记：

CSS盒模型的三维立体结构

---

关键词：CSS、CSS盒模型

---

CSS盒模型的三维立体结构 如下：

• 第一层：border
• 第二层：content + padding
• 第三层：background-image
• 第四层：background-color
• 第五层：margin

[zhang950508]

学习如何使用async & await 时优雅的处理。。这个文章讲的挺好的https://juejin.im/post/5dd1498df265da0bd315cca8

[CarisL]

读书笔记

1.单元测试应该在最基本的功能/参数上验证程序的正确性 2.单元测试必须由程序的作者来写 3.单元测试后，及其状态不变 4.天下武功，唯快不破 5.产生可重复一致性结果 6.独立性，单元测试的运行/通过/失败不依赖于别的测试。保持单元测试的独立性 7.集成到自动测试框架中 8.产品代码一起保存

[leerle]

useModal 避免hide时由于清空弹窗的值导致弹窗关闭时闪现的问题。 export const useModal = (initTitle: string, initContent: string | React.ReactElement) => { const [visible, setVisible] = useState(false); const [title, setTitle] = useState(initTitle); const [content, setContent] = useState(initContent); const CustomModal = () => { return ( <Modal visible={visible} title={title} closable={false} footer={null}

{content} ); } const show = (content?: string | React.ReactElement) => { content && setContent(content); setVisible(true); }; const hide = (delay?: number) => { if (delay) { setTimeout(() => setVisible(false), delay); } else { setVisible(false) } }; return { show, hide, CustomModal, setTitle, setContent } }

[evle]

今天迁移博客文章时候 看到了之前写的chrome浏览器推送实现 感觉再次看到service worker生疏了， 一方面因为当时理解没到位，另一方面感觉是该复习了，最近想整理一个系列关于service worker应用的，比如离线缓存， 推送广告， 以及断网时保存数据恢复网络时更新数据之类的场景，今天看了upup.js的源码，他是对SW API的一个封装 https://dev.opera.com/articles/offline-with-upup-service-workers/

[iamafresh]

js数组乱序

[ABasket]

20号打卡: 看了方应杭的react造轮子
1-3章 了解lisp 函数式编程入门 理解了 为什么递归叫递归 迭代叫迭代 以及高阶函数的定义

[dadawanan]

• 实战ts+react(未完成)
• 明天继续完成实战

[m-yangyu]

webpack深入学习，编写loader http://study.maqixiang.com/webpack-loader.html#webpack-loader

[ZhangLe132]

11月21日学习总结： 1.nodeJs中的koa，koa更小更轻便，定制性更高，没有express的路由等功能，需要配合koa生态圈来解决，koa解决了express异步的问题，koa可以使用async awiat关键字来创建函数，解决异步问题，koa把response和request都挂载在context对象上，这样我们自己的一些变量也可以统一挂载在context对象上，koa用的时候要通过new 关键字，示例use（‘/’,function(ctx,next){}） 2.如何系统的优化页面：https://time.geekbang.org/column/article/143889

[webRambler]

2019-11-21 leetcode-有效的括号

[night-233]

看了vue-element 关于el-input的源码 leetcode: 压缩字符串

[senbochen]

我学了，ts中内置的内置对象，常用的邮4种Boolean、Error、Date、RegExp等;

let b: Boolean = new Boolean(1);
let e: Error = new Error('Error occurred');
let d: Date = new Date();
let r: RegExp = /[a-z]/;

[LienJack]

2019.11.21

[x] 剖析 React 源码：先热个身

[x] 剖析 React 源码：render 流程（一）

[x] 剖析 React 源码：render 流程（二）

[x] 剖析 React 源码：调度原理

[x] 组件更新流程（一）

[x] 组件更新流程（二）diff

[FairyAndMonster]

2019.11.21：es6 Symbol学习及总结https://www.cnblogs.com/zxmonster/p/11903849.html

[c2kaka]

2019-11-21 打卡：阅读程序员修炼之道 程序猿修炼之道-注重实效的哲学

[atbulbs]

2019-11-21 日有所长 用装饰器实现截流与防抖https://juejin.im/post/5dd6870e5188254e237c81ce

[senbochen]

for循环创建dom使用cloneNode即可；

var dom=document.querySelector('.id');
            for(let i=0;i<10;i++){
                dom.innerHTML=i;
                console.log(i)
                    document.querySelector('body').appendChild(dom.cloneNode(true))
            }

[StrivingRabbit]

打卡 今天工作中进行表单封装的确认 进一步学习了JS执行时浏览器的内存分配

[xiafeier]

打卡（2019/11/21） 常见的算法学习 地址： https://www.cnblogs.com/libin-1/p/7719537.html

[ABasket]

21号打卡： 实现一个简易版的新闻头条（h5端）， 项目覆盖了：webpack工程化，前端项目架构，组件化模块化，前端分页机制，前端数据结构化，前端数据缓存，模板替换机制，异常处理技巧。

[CarisL]

阅读构建之法第三章 学习最短路径

[evle]

1. 动手实践了 docker + Nginx + express + Redis + jenkin的环境
2. 做了一个简单登录测试页面 使用OAuth2鉴权

[dadawanan]

• 实现一个简单的ts+hook增删查
• hook中组件通信的一些方案
• 明日：react hooks api的总结

[m-yangyu]

22号学习日志

1. 学习webpack的plugin写法以及实现一个简单的dmeo
2. 了解svelte的基础内容以及书写方式和API
3. 极客时间上阅读 设计模式之美
4. 极客时间上阅读 JavaScript核心原理解析
5. 思考 var a = {}; a.x = a =[]; a.x === undefinde的原因

http://study.maqixiang.com/svelte.html#svelte

[ZhangLe132]

11月22日学习总结：1 nodeJs中与服务端通信rpc，ajax通信是基于tcp的，是通过地址发往dns的，然后dns解析域名返回ip，然后再发往服务端，服务端再返回数据，而rpc会更根据id寻址，然后返回ip，rpc是基于tcp或udp，tcp有单工通信，半双工通信，双工通信三种模式，单工通信是客户端往服务端发信息，全部发完后服务端才会给客户端发信息，半双工通信是客户端往服务端发一条信息，服务端返回一条信息，全双工通信指客户端与服务端可以随时通信，rpc发往服务端的数据更小，因为是二进制传输，ajax是json或html传输 2虚拟DOM和实际的DOM有何不同：https://time.geekbang.org/column/article/144569

[night-233]

再次理解了前端堆栈队列关系，加深对event loop的理解 leetcode：构造矩形

[webRambler]

2019-11-22 sass学习小结

[R-Von]

1. 浏览器的EventLoop
2. MobX 简明教程
3. 使用Mobx更好地处理React数据

[FairyAndMonster]

2019.11.22：es6 Interator学习总结https://www.cnblogs.com/zxmonster/p/11910732.html

[senbochen]

简单通用的发布订阅模式：

class Event {
        constructor() {}
        crop = {}
        on(key, fn) {
            if (!this.crop[key]) {
                this.crop[key] = []
            }
            this.crop[key].push(fn);
            console.log('我写的是', this.crop[key])
        }
        emit() {
            let key = [].shift.call(arguments), //采用数组的方法，取到第一个key值
                fns = this.crop[key];
            console.log(key, fns)

            if (!fns || fns.length === 0) { //规避 装注册函数的数组不存在发生的报错行为
                return false;
            }
            fns.forEach(fn => {
                fn.apply(this, arguments);
            })
        }
        remove(key, fn) {
            let fns = this.crop[key]; //我们先拿到整个装注册函数的盒子
            if (!fns) return false; //规避 装注册函数的数组不存在发生的报错行为
            if (!fn) return (fns && (fns.length = 0)) //触发函数不存在,清空 整个数组
            else {
                fns.forEach((ele, index) => {
                    if (ele === fn) {
                        fns.splice(index, 1)
                    }
                })
            }
        }
    }
    let demo = new Event;
    document.querySelector('.input').addEventListener('change', function (e) {
        demo.emit('join', e.target.value)
    }, false)

    function join(data) {
        console.log('狗蛋订阅的数据', data)
    }

    function join2(data) {
        console.log('翠花订阅的数据', data)
    }

    function join3(data) {
        console.log('狗剩订阅的报纸', data)
    }

    function join4(data) {
        console.log('曹操的订阅的信', data)
    }
    demo.on('join', join);
    demo.on('join', join2)
    demo.on('join', join3)
    demo.on('join', join4)
    demo.remove('join', join2)

[c2kaka]

2019-11-22打卡 设计模式之美： 基于接口而非实现编程

[evle]

从这个人博客里面看到几篇关于JS的文章将的非常好 做了笔记 准备整理一下发到掘金 https://dmitripavlutin.com

• optional chainning新特性的使用 以及babel插件配置
• 使用 [ ] 解构 Object.entries()
• 关于spread operator 的一些规则： 1. 合并对象的覆盖优先级 2. 如果合并一个类中有函数 函数会丢失的问题怎么修正 3. 如何实现浅拷贝 4. 如何用这个实现 immutable 结构
• 对于this绑定的常用场景以及手法
• 对于undefined的常用手法

[StrivingRabbit]

今天学习了call,apply,promise的手写

[luoheqp]

打卡

关于今天误打误撞成功使用 typescript 管理接口返回的数据的思考 , 有些点待思考 https://github.com/leoljustsave/A-hour-a-day/blob/typescript/typescript/article/%E6%8E%A5%E5%8F%A3%E7%AE%A1%E7%90%86.md

[ghost]

2019-11-22 学习日记：

BFC

---

关键词：BFC

---

特性：

• BFC内部的内部box元素会在垂直方向上一个一个排列
• BFC内部的内部相邻的box的上下margin会发生折叠
• BFC内部的每一个盒子的margin-left会触碰到容器的border-left（默认从左到右的排序下）
• 形成了BFC的区域不会与float box重叠
• 计算BFC高度时，浮动元素也参与计算

---

生成：

• 根元素（）
• 浮动元素（float != none）
• 绝对定位或固定定位元素（position = absolute | fixed）
• 行内块元素（inline-block）
• 表格单元格 或 表格标题（table-cell or table-caption）
• 匿名表格单元格元素（display = table | table-row | table-row-group | table-header-group | table-footer-group | inline-table）
• 设置overflow不为visible的元素（overflow != visible）
• 设置display为flow-root的元素（display = flow-root）
• 设置contain为layout、content或paint的元素（contain = layout | content | paint）
• 弹性元素（display = flex | inline-flex元素的直接子元素）
• 网格元素（display = grid | inline-grid元素的直接子元素）
• 多列容器（column-count or column-with != auto，以及column-count = 1）
• columb-span = all的元素始终会创建一个新的BFC

---

作用：

• 当子元素设置了浮动时，将其父元素设置为BFC可以修复父元素高度塌陷
• 如果同一个BFC内的相邻box的上下margin发生重叠，可以将之放置到不同的BFC中
• divA divB，A设置了浮动时（例：float = left），此时A将浮动在B上，如果设置B的overflow = hidden触发BFC，则B将在A的左侧排列

[atbulbs]

2019-11-22 日有所长 用栈实现队列https://juejin.im/post/5dd8031a518825732c764948

[xiafeier]

打卡2019/11/11 打卡学习 typescript 基础类型 学习地址https://www.tslang.cn/docs/handbook/basic-types.html

[iamafresh]

javascript遍历对象笔记

[iamafresh]

RXDB demo

rxjs + 数据库查询 + 数据持久 .非常适合在线协作的应用场景

[dadawanan]

• react hooks api的总结
• 明日: redux redux-sage dava数据流的使用和原理 对前5天的知识做一个总结

[ABasket]

22号打卡 看视频学习ts 1-12 https://www.bilibili.com/video/av38379328?p=12 23号看完

[night-233]

mooc视频 jest自动化测试 leetcode 最大子序和

[LienJack]

深入浅出vue.js

• [x] 实例对象代理访问数据 data
• [x] 数据响应系统的基本思路
• [x] observe 工厂函数
• [x] 数据对象的 ob 属性
• [x] 响应式数据之纯对象的处理
• [x] defineReactive 函数
• [x] 被观测后的数据对象的样子
• [x] 在 get 函数中如何收集依赖
• [x] 在 set 函数中如何触发依赖
• [x] 保证定义响应式数据行为的一致性
• [x] 响应式数据之数组的处理
• [x] 拦截数组变异方法的思路