分类
未分类

flex布局常用属性

写组件的时候常常遇到这种情况

设计给的一个设计图 头是固定高度的 底下是自适应的

一般情况下

div{
display:flex;
flex-direction: column;
height:100%;
}

header{
height:50px;
}

body{
height:100%;
}

对一些要求不高的已经可以实现了,但是当下面组件高度很高的时候,flex会进行缩放,导致实际的header高度与预期的不一致,这个时候显式的给header 加上这两个属性就可以让他不缩放了

header{
flex-grow:0;
flex-shrink:0;
height:50px;
}

顺带一提 flex:1 flex: 1; !== flex: 1 1 auto;

  • 第一个参数表示: flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
  • 第二个参数表示: flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
  • 第三个参数表示: flex-basis 给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

分类
未分类

typescript 给ws添加属性类型报错怎么解决?类型“WebSocket”上不存在属性xxx

其实很简单 我以我这边使用的ws库为例子 新建一个 shims.d.ts 文件

import ws from "ws";

declare module "ws" {
  export interface WebSocket extends ws {
    $id: string;
  }
}

这样就可以实现扩展了,成功的在ws 上扩展了$id属性

另外注意一点 d.ts文件不要和.ts文件一样命名 不推荐通过后缀区分文件

还有疑问可以加群讨论 秋秋群:768901972

分类
未分类

学习网站记录

项目模板:https://github.com/gothinkster/realworld

博客:V8: https://v8.dev/

Chromium:https://blog.chromium.org/

Google:https://web.dev/blog/

React Dan:https://overreacted.io/

Chrome Manager:https://medium.com/@addyosmani

Google Chrome Developer: https://jakearchibald.com/
Vue: https://zhuanlan.zhihu.com/evanyou

设计模式:https://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html

司徒正美:https://www.cnblogs.com/rubylouvre/
Egg:https://www.yuque.com/egg

Taobao: https://fed.taobao.org/blogs/?spm=taofed.homepage.header.3.7eab5ac8VeGZCx

腾讯:http://www.alloyteam.com/page/0/

网易:https://zhuanlan.zhihu.com/musicfe

编码规范 https://github.com/ecomfe/spec
JavaScript权威指南pdf版 http://rjxz7.gds.name/2015/JavaScriptqwzn6.pdf
git 简易指南 http://rogerdudler.github.io/git-guide/index.zh.html
svn 手册 http://svnbook.red-bean.com/nightly/zh/index.html
史上最全设计模式导学目录 https://blog.csdn.net/lovelion/article/details/17517213
koa实战项目教程 https://github.com/ikcamp/koa2-tutorial
博客工具
git book http://www.chengweiyang.cn/gitbook/index.html
vuepress https://www.vuepress.cn/

《CSS选择器》作者 张鑫旭:https://www.zhangxinxu.com/

木易杨前端进阶 https://muyiy.cn/blog/

冴羽 https://github.com/mqyqingfeng/Blog

cesium介绍 http://cesium.marsgis.cn/go.html?id=cesium-started


Vue 相关源码地址:

vue2.0         https://github.com/vuejs/vue

Vue3.0         https://github.com/vuejs/vue-next

Vuex            https://github.com/vuejs/vuex

Vue-Router  https://github.com/vuejs/vue-router

Nuxt             https://github.com/nuxt

LRU缓存机制:

介绍:https://baike.baidu.com/item/LRU

LeetCode:  https://leetcode-cn.com/problems/lru-cache/solution/lru-huan-cun-ji-zhi-by-leetcode/

最佳实践: https://github.com/isaacs/node-lru-cache

Canvas学习 https://827652549.github.io/CanvasStudy/