2019.11.18 - 11.24中你学到什么？

KieSun commented 4 years ago

自学小组打卡专用

每日需打卡以下内容：

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

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

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

lstrive-yn commented 4 years ago

打卡：elementUI组件Form设计思想

1、el-input组件实现数据双向绑定、input事件传递给父组件，触发校验

2、el-form-item组件接受el-form传递的组件校验规则以及双向绑定数据模型，监听子组件触发的input事件，匹配对应的单条校验规则

3、el-form组件接受校验规则和数据模型model

4、使用vue provider 和inject 接口实现有归属关系组件之间直接传值，将el-form组件实例传递给el-form-item组件，以直接获取el-form组价接收到的校验规则；

5、使用async-validator校验库，进行校验规则的校验，返回对应结果，触发校验结果在页面的错误信息展示

ZhangLe132 commented 4 years ago

今日总结：微前端single-spa，single-spa-vue，首先安装依赖 npm install single-spa-vue，然后修改main.js, 引入single-spa-vue，修改new vue， const vueNav = singleSpaVue({ Vue, appOptions: { el: '#app', router, store, render: r => r(App) } });， single-spa 有三个常用的声明周期，bootstrap引导功能，mount挂载函数，unmount卸载函数，然后修改webpack.base.config.js文件的出口，output：增加library: 'main',libraryTarget: 'umd',然后增加公共依赖参数externals，初次研究微前端，还有很多没有研究明白，等项目运行成功，另写文章梳理

LienJack commented 4 years ago

xiafeier commented 4 years ago

打卡： js 基础学习笔记 1、函数提升 > 变量提升 2、函数名和变量名相同如果变量未赋值函数 > 变量 3、var s = function Test() {} 函数只读，只能内部调用 4、this 指向调用的位置没人调用指向window 5、ES6简单的函数不支持new 6、new this 的指向 7、对象闭包在一起必须加分号 8、暂时性死区

掘金地址： https://juejin.im/post/5dd0a741f265da0bdb75da37

c2kaka commented 4 years ago

深入理解ES6之export

fatCatBadNet commented 4 years ago

打卡：Node.js内部是如何捕获异步错误的？

TimothyJia commented 4 years ago

https://juejin.im/post/5dd231316fb9a01ff13e1fcf 如何渲染几万条数据并不卡住界面？这道题考察了如何在不卡住页面的情况下渲染数据，也就是说不能一次性将几万条都渲染出来，而应该一次渲染部分 DOM，那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <ul>控件</ul>
 <script>
    setTimeout(() => {
       // 插入十万条数据
      const total = 100000
      // 一次插入 20 条，如果觉得性能不好就减少
      const once = 20
      // 渲染数据总共需要几次
     const loopCount = total / once
      let countOfRender = 0
      let ul = document.querySelector("ul");
      function add() {
      // 优化性能，插入不会造成回流
       const fragment = document.createDocumentFragment();
      for (let i = 0; i < once; i++) {
        const li = document.createElement("li");
        li.innerText = Math.floor(Math.random() * total);
        fragment.appendChild(li);
      }
     ul.appendChild(fragment);
     countOfRender += 1;
     loop();
  }
  function loop() {
      if (countOfRender < loopCount) {
       window.requestAnimationFrame(add);
   }
  }
  loop();
  }, 0);
 </script>
</body>
</html>

FairyAndMonster commented 4 years ago

打卡：箭头函数this指向总结https://www.cnblogs.com/zxmonster/p/11881282.html

iamafresh commented 4 years ago

React Hooks自定义Hooks代替高阶组件实现长按逻辑

webRambler commented 4 years ago

leetcode-字符串转整数（atoi）

evle commented 4 years ago

map和weakmap出来很久了但是一直没有实际使用过, 今天研究了下其应用场景, 在合适的场景使用map或者weakMap真的会make life easy.

写了一篇文章: 是时候使用map代替object了 https://juejin.im/post/5dd2495bf265da0bd40d0b39

zhang950508 commented 4 years ago

https://juejin.im/post/5dd1096ee51d453af62c328b 理解堆栈。。这个对面试还是挺有帮助的

Zavieer commented 4 years ago

今日学习：前端数据结构-红黑树 https://docs.qq.com/doc/DVGJVU3JGbEpMckVQ 目前写到平衡二叉搜索树和2-3树，预计还需要两天才能完成，第一节完成了再放群里。。

night-233 commented 4 years ago

打卡：跟着掘金这篇文章模拟了symbol的实现 https://juejin.im/post/5b1f4c21f265da6e0f70bb19 leetcode上用深搜刷了几道关于排列组合的题（第k个排列，全排列）

atbulbs commented 4 years ago

日有所长： [设计模式]单例模式从初识到实践https://juejin.im/post/5dd28c325188254c526a8da5

luoheqp commented 4 years ago

打卡

typescript 基础 : 类型 / 接口 https://github.com/leoljustsave/A-hour-a-day/blob/master/note/typescript%20base.md

m-yangyu commented 4 years ago

今日学习： webpack视频

使用happypack进行多进行/多实例打包
使用dll预编译模式对公共包进行打包
tree Shaking 擦除无用的css代码
使用cache进行构建缓存
对图片进行压缩
- Node库 imagemin / yinypng API
- image-webpack-loader
动态polyfill
- polyfill Service 识别User Agent，动态下发不同的plyfill
- polyfill.is/v3/polyfill.min.js

附上我的学习的记录网站： study.maqixiang.com

CarisL commented 4 years ago

踩坑经历微信小程序微信开发者工具基础库 2.9.3 input 组件 onInput 失效
学到小程序开发者工具用nwjs实现（待考究）

StrivingRabbit commented 4 years ago

打卡：一、基于element的Table组件封装： 1、完善并实现了表格自适应高度设置，可根据内容，父级，设定值来设置高度 2、解决了表格服务端渲染数据的渲染过度动画

二、学习了JavaScript复杂判断的更优雅写法链接：https://mp.weixin.qq.com/s/E_GqIhPKlSsH8Ln8vxG6oA 1、熟悉了Map的用法 2、又去看了一遍正则

senbochen commented 4 years ago

我学了断言:https://juejin.im/post/5dd2a28ef265da0bb036b8e8

leerle commented 4 years ago

1.TypeScript 三斜线指令 next.env.d.ts描述文件中有 “/// ”这样的描述文件，这是ts中的引入方式。（抄自c#） https://www.w3cschool.cn/typescript/typescript-triple-slash-directives.html 2.useContext的使用父组件provider，子组件useContext，少写一层 3.封装useArray hooks封装业务组件，自定义useArray，将根据index删除和根据key删除作为useArray的属性useCallback出去，可以很方便的实现列表中删除某一项

ABasket commented 4 years ago

18号打卡: 今天晚上学了go语言 GO语言 1-36课时学习了golang的基本语法和 golang与js之间的区别，比如声明变量，连接方式，赋值方式等。（只学习到golang的类型）（印象笔记的思维导图共享一直显示图片丢失，明天再换另一个笔记）

dadawanan commented 4 years ago

学习小册<深入浅出Typescript>撸了一半
总结
明天目标：复习HTML5的新特性，阅读完剩余部分

m-yangyu commented 4 years ago

2019-11-19 学习webpakc的源码（一）了解webpack-cli的运行原理，tapable的使用方式 http://study.maqixiang.com/webpack.html#webpack%E5%AD%A6%E4%B9%A0

ZhangLe132 commented 4 years ago

11月19日学习总结： 1.nodeJs中http模块是怎样返回数据，fs模块读取文件以及编写接口 2.浏览器知识，css是怎么影响首次加载白屏的，css和JavaScript文件是需要下载的，然后会发起两个文件的请求，这两个文件下载的时间是重叠的，所以会按照下载时间久的那个来计算

sunqimei commented 4 years ago

2019-11-18 1.基础类型调用方法的执行过程（调用方法其值不变的原因） 2.typeof null 返回‘object’的原因 3.类型转换 4.this指向 5.模块导出

FairyAndMonster commented 4 years ago

11.19日：Promise学习总结（1）https://www.cnblogs.com/zxmonster/p/11888479.html

LienJack commented 4 years ago

2019-11-19 问题： React 中 setState 什么时候是同步的，什么时候是异步的解答：在React中，如果是由React引发的事件处理（比如通过onClick引发的事件处理），调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state。所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。

在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是，有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state。

xiafeier commented 4 years ago

打卡 2019/11/19

1、Object.defineProperty 2、promise 实现公众号代码前端真好玩 3、阮一峰ES6 promise 章节 https://es6.ruanyifeng.com/#docs/promise#Promise-prototype-finally] 4、发布订阅模式 https://blog.csdn.net/hf872914334/article/details/88899326 5、数据劫持 Object.defineProperty 与 Proxy 的区别 http://www.fly63.com/article/detial/4072 笔记连接： https://juejin.im/post/5dd35c9e518825054f719228

evle commented 4 years ago

2019-11-19

会写React代码不一定会设计React组件, 写了一篇如何设计React组件的文章

https://juejin.im/post/5dd35370f265da0bbd558abc

webRambler commented 4 years ago

leetcode-删除排序数组中的重复项

c2kaka commented 4 years ago

2019-11-19 学习了一下Node的异步编程知识 Node异步编程

atbulbs commented 4 years ago

2019-11-19 日有所长: [轮子]一个纯TS的rollup+webpack-dev-server+jest开发类库的项目构建

luoheqp commented 4 years ago

打卡

typescript 基础 : 函数 / 类 https://github.com/leoljustsave/A-hour-a-day/blob/master/note/typescript%20base.md

night-233 commented 4 years ago

打卡：leetcode (无重复字符串的最长字串) vue原理理解：虚拟dom和render函数 https://juejin.im/post/5cd97c1cf265da03563252fe

iamafresh commented 4 years ago

react优化笔记

ABasket commented 4 years ago

11.19号打卡学习正则笔记地址

senbochen commented 4 years ago

问题：在ts中的函数声明:

注意不要混淆了 TypeScript 中的 => 和 ES6 中的 =>。在 TypeScript 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。

function Tom (x:number,y:number):number{
        return x+y
}

let person(x:number,y:number)=>number=function(x:number,y:number):number{
        return x+y;
}

我们也可以先定义一个接口，去约束函数的参数类型和输出类型： interface personFace{ (x:number,y:number):number }

let person:personFace=function(x:number,y:number):number{ return x+y; } 编译结果如下： var person= function (x, y) { return x + y; };

zhang950508 commented 4 years ago

https://juejin.im/post/5dccdd24f265da0c09156fb3 在vue中非常使用的rules校验规则。。非常使用。。

ghost commented 4 years ago

2019-11-19 学习日记：

解析matrix3d值：translateX & translateY

关键词：matrix3d、transform、CSS3、正则

获取元素计算后的transform的属性值，可以采用以下正则：

/^matrix3d\((?:[-\d.]+,\s*){12}([-\d.]+),\s*([-\d.]+)(?:,\s*[-\d.]+){2}\)/

/^matrix\((?:[-\d.]+,\s*){4}([-\d.]+),\s*([-\d.]+)\)$/

示例：

let matrix3dSourceValue = window.getComputedStyle( el )['transform']
let matrix3dArrValue =
    matrix3dSourceValue.match( /^matrix3d\((?:[-\d.]+,\s*){12}([-\d.]+),\s*([-\d.]+)(?:,\s*[-\d.]+){2}\)/ ) ||
    matrix3dSourceValue.match( /^matrix\((?:[-\d.]+,\s*){4}([-\d.]+),\s*([-\d.]+)\)$/ )

// matrix3dArrValue[0]: {matrix3dSourceValue}
// matrix3dArrValue[1]: translateX_value
// matrix3dArrValue[2]: translateY_value
// matrix3dArrValue[3]: input: 0
// matrix3dArrValue[4]: input: {matrix3dSourceValue}

附录：、使用css-transform实现更好的拖拽功能

StrivingRabbit commented 4 years ago

打卡： 1、学习了axios的部分源码 https://mp.weixin.qq.com/s/DUCIsPpMm0qx6m1VG4Y64g 2、学习了vuex的原理 https://m.ke.qq.com/course/367589?_wv=3&from=message&isappinstalled=0#wxlogin=1&from=courseShare

ghost commented 4 years ago

ECMA制定脚本语言的标准 DOM（document Object model）操作网页上元素的API BOM（Browser Object Model）操作浏览器的部分功能的API js的常见输出方式 1通过弹窗形式输出 Alert（需要输出的内容），如果不是数字以字符串输出 confirm(需要输入的内容) 如果不是数字以字符串输出按钮比alert多一个 Prompt（需要输入的内容）//有输入框 2通过网页内容区域的形式来输出 document.write(需要的内容); 3通过控制台进行输出 console.log(需要输入的内容) console.warn(“警告输出”) console.error(“错误输出”)

leerle commented 4 years ago

leerle： useModal 管理弹窗数据流 https://codesandbox.io/s/usemodal-ltoc9

CarisL commented 4 years ago

今日阅读：构建之法第一章。学习：

delete 0 是删除一个表达式。
delete x 删除一个引用
delete 尝试删除数值的时候，会返回true

fatCatBadNet commented 4 years ago

你不知道的Node.js性能优化

dadawanan commented 4 years ago

复习部分H5新特性总结
ts一些工具函数的实现
明天:实战用ts完成表单和表格页面设计和接口对接

m-yangyu commented 4 years ago

今日学习基于webpack源码，书写一个简易的webpack实现

es6转es5
模块化打包
类webpack配置项输出

github: https://github.com/HuskyToMa/simple_webpack

ZhangLe132 commented 4 years ago

11月20日学习总结：1nodeJs 中的express模块，介绍express模块功能,路由routing，http请求重定向redirection,以及支持express模板等，并用express方法get，post等请求方式，next中间件的了解，请求方法分模块维护，调用express next中间件方法 2 浏览器知识分层和合成机制，首先是显示器是怎么显示图像的，浏览器是有刷新频率的，通常是每秒60HZ，更新的图片都是读取显卡前缓冲的的地方，每秒提供60张前缓冲区的图像，显卡的职责就是合成新的图像，并将图像保存到后缓冲区中，一旦显卡把合成的图像写到后缓冲区，系统就会让后缓冲区和前缓冲区互换。分层：把一张网页想象成是由很多个图片叠加在一起的，每个图片就对应一个图层，Chrome 合成器最终将这些图层合成了用于显示页面的图片

LienJack commented 4 years ago

2019-11-20 一下都是vue源码解析

[x] 用 VNode 描述真实 DOM
[x] 用 VNode 描述抽象内容
[x] 使用 flags 作为 VNode 的标识
[x] VNode 的种类
[x] children 和 ChildrenFlags
[x] VNodeData

atbulbs commented 4 years ago

2019-11-20 日有所长 [用TypeScript实现简单的Promise]https://juejin.im/post/5dd4f1045188254e15402bd2

KieSun / today-i-learned