sundjly / blog Goto Github PK

View Code? Open in Web Editor NEW

23.0 1.0 2.0 642 KB

blog's Introduction

blog

原来博客地址不在维护，新的东西直接发在这里

掘金

早期博客园

博客列表

react

优化

SICP

函数式编程基本原则

js概念解读

工作

规范

blog's People

Contributors

Stargazers

Watchers

Forkers

melantha ylhb

blog's Issues

面试之正则

来自https://juejin.im/post/5ac1f1106fb9a028be362731

// 正则匹配练习 
/* 
\   转义字符
* 	匹配前一个表达式0次或多次。等价于 {0,}。
+   匹配前面一个表达式1次或者多次。等价于 {1,}。
?   匹配0次或者1次,{0,1}
.   匹配除换行符之外的任何单个字符
(x) 匹配 'x' 并且记住匹配项，常用于replace
x(?=y) 匹配'x'仅仅当'x'后面跟着'y'.这种叫做正向肯定查找
x(?!y) 匹配'x'仅仅当'x'后面不跟着'y',这个叫做正向否定查找。
[xyz]  匹配方括号中的任意字符

*/

// 给定这样一个连字符串，写一个function转换为驼峰命名法形式的字符串 getElementById
let s1: string = "get-element-by-id";
function f1(s: string): string {
    return s.replace(/-\w/g, (x: string) => {
        return x.slice(1).toUpperCase();
    })
}
console.log(f1(s1))

// 判断字符串是否包含数字
let s2: string = '12saad';
function f2(s: string): boolean {
    const regx = /\d/;
    return regx.test(s)
}

console.log(f2(s2))

// 判断电话号码
let s3: string = '14660731152';
function f3(s: string): boolean {
    const regx = /^1[34578]\d{9}$/;
    return regx.test(s)
}
console.log('3', f3(s3));

/* 
给定字符串str，检查其是否符合如下格式
1.XXX-XXX-XXXX
2.其中X为Number类型
 */

let s4: string = '123-234-3213';
function f4(s: string): boolean {
    const regx = /^(\d{3}-){2}\d{4}$/;
    return regx.test(s);
}
console.log('4', f4(s4))

// hard
/* 

给定字符串 str，检查其是否符合美元书写格式

1.以 $ 开始
2.整数部分，从个位起，满 3 个数字用 , 分隔
3 如果为小数，则小数部分长度为 2
4 正确的格式如：$1,023,032.03 或者 $2.03，错误的格式如：$3,432,12.12 或者 $34,344.3**
*/
let s5: string[] = ['$1,023,032.03', '$2.03'];
function f5(s: string): boolean {
    const regx = /^\$\d{1,3}(,\d{3}){0,}(\.\d{2}){0,1}$/;
    return regx.test(s)
}
if (s5.every(val => f5(val))) {
    console.log('5', true)
}


/* JS实现千位分隔符 */
let s6: number = 21312312;
function f6(s: number) {
    const sStr: string = s.toString();
    // const regx = /\d{1,3}(?=(\d{3})+$)/g;
    const regx = /\d{1,3}(?=(\d{3}){1,}$)/g;
    // return sStr.replace(regx,'$&,'); //  $&表示与regx相匹配的字符串
    return sStr.replace(regx, (x) => {
        // console.log('f6', x)
        return `${x},`
    })
}
console.log('6', f6(s6));


/* 
获取 url 中的参数

1 指定参数名称，返回该参数的值 或者 空字符串
2 不指定参数名称，返回全部的参数对象 或者 {}
3 如果存在多个同名参数，则返回数组
*/
let s7 = '/zentao/js/chartjs/chart.line.min.js?v=pro6.7.3&_=1553315640088';
function getUrlParams(url: string) {
    const arr = {};
    const regx = /\?{0,1}(\w{1,})=(\w{1,})&?/g;
    url.replace(regx, (match, matchKey, matchValue): string => {
        console.log('getUrlParams', match, matchKey, matchValue);
        if (!arr[matchKey]) {
            arr[matchKey] = matchValue;
        } else {
            const temp = arr[matchKey];
            arr[matchKey] = [].concat(temp, matchValue);
        }
        return '';
    })

    return arr;
}

console.log(getUrlParams(s7));

/* 验证邮箱 */
let s8 = '[email protected]';
function isEmail(email: string) {
    const regx = /^([a-zA-Z0-9_\-])+@([a-zA-Z0-9_\-])+(\.[a-zA-Z0-9_\-])+$/;
    return regx.test(email);
}
console.log(isEmail(s8));

/* 密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符 */

function checkPassword() {
    const regx = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;

}

/* 过滤HTML标签 */
let str: string = "<p>dasdsa</p>nice <br> test</br>"
function filterHtml(str: string) {
    var regx = /<[^<>]+>/g;
    return str.replace(regx, '');
}

console.log('str', filterHtml(str))

收集到的正则匹配（2）：https://www.kancloud.cn/zhangqh/front/649501
时间格式化输出

function formatDate(t,str){
  const obj = {
    yyyy:t.getFullYear(),
    yy:(""+ t.getFullYear()).slice(-2),
    M:t.getMonth()+1,
    MM:("0"+ (t.getMonth()+1)).slice(-2),
    d:t.getDate(),
    dd:("0" + t.getDate()).slice(-2),
    H:t.getHours(),
    HH:("0" + t.getHours()).slice(-2),
    h:t.getHours() % 12,
    hh:("0"+t.getHours() % 12).slice(-2),
    m:t.getMinutes(),
    mm:("0" + t.getMinutes()).slice(-2),
    s:t.getSeconds(),
    ss:("0" + t.getSeconds()).slice(-2),
    w:['日', '一', '二', '三', '四', '五', '六'][t.getDay()]
  };
  return str.replace(/([a-z]+)/ig,function($1){return obj[$1]});
}

将 rgb 颜色字符串转换为十六进制的形式，如 rgb(255, 255, 255) 转为 #ffffff
1. rgb 中每个 , 后面的空格数量不固定
2. 十六进制表达式使用六位小写字母
3. 如果输入不符合 rgb 格式，返回原始输入

function rgb2hex(sRGB) {
   return sRGB.replace(/^rgb\((\d+)\s*\,\s*(\d+)\s*\,\s*(\d+)\)$/g, function(a, r, g, b){
       return '#' + hex(r) + hex(g) + hex(b);
   });
}
function hex(n){
    return n < 16 ? '0' + (+n).toString(16) : (+n).toString(16);
}

css 中经常有类似 background-image 这种通过 - 连接的字符，通过 javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式，请完成此转换功能
1. 以 - 为分隔符，将第二个起的非空单词首字母转为大写
2. -webkit-border-image 转换后的结果为 webkitBorderImage

function cssStyle2DomStyle(sName) {
return sName.replace(/(?!^)\-(\w)(\w+)/g, function(a, b, c){
            return b.toUpperCase() + c.toLowerCase();
        }).replace(/^\-/, '');
}

统计字符串中每个字符的出现频率，返回一个 Object，key 为统计字符，value 为出现频率
1. 不限制 key 的顺序
2. 输入的字符串参数不会为空
3. 忽略空白字符

function count(str) {
  var obj = {};
    str.replace(/\S/g,function(s){
        !obj[s]?obj[s]=1:obj[s]++;
    })
    return obj;
}

Dan Abramov(React 核心开发，Redux 作者) 谈他不懂的技术

Dan Abramov(React 核心开发，Redux 作者) 谈他不懂的技术这篇文章结尾说的很好，这是一个贩卖焦虑的时代，最应该静下心来专研某一方面，这是我的理解

React testing library vs. enzyme

unlock-protocol/unlock#467

react之前端决策树

云谦老师的分享 https://github.com/sorrycc/f2e-decision-tree
react 前端项目技术选型、开发工具、周边生态

一些常用的函数

判断 web 平台

const detectDeviceType = () =>
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    ? 'Mobile'
    : 'Desktop';

// 事例
detectDeviceType(); // "Mobile" or "Desktop"

缓存函数：

export const cached = (fn: any) => {
  // Create an object to store the results returned after each function execution.
  const cache = Object.create(null);
  // Returns the wrapped function
  return function cachedFn(str: any) {
    // If the cache is not hit, the function will be executed
    if (!cache[str]) {
      const result: any = fn(str);
      // Store the result of the function execution in the cache
      cache[str] = result;
    }

    return cache[str];
  };
};

npx使用

http://www.ruanyifeng.com/blog/2019/02/npx.html

2019年4月21日

经典问题：从输入URL到看到页面发生了什么？

涉及到了 DNS，TCP 连接，HTTP 请求等；

粗略的整个过程进行展示：

具体的细节涉及到 HTTP 状态码，重绘以及回流的优化等等

参考

Node 相关

关于 node 可以看狼叔的指导 https://github.com/i5ting/How-to-learn-node-correctly
- aliyun-node 开源手册。其主要的目的是帮助 Node.js 开发者应对开发和线上部署中遇到的问题：线上/线下应用出现故障时如何更快地定位问题；应用部署前压测中遇到的性能不足问题调优。

现在了还应该慎用try catch

慎用try catch

之后测试性能与版本的关系可以在这个网站进行测试

具体实现分为两步：

判断item是否属于tree中元素
找到它的parent，并把item添加到它的children中，返回一个新的tree

面试之 js基础

学习

这里强烈推荐冴羽大大的blog，写得很好，回过头去细细看，收获颇多

问题1：

if([2] > 1){console.log('猜猜 我能不能打印出来！')}

new function(){console.log(this)}

问题2：

const foo = {
        bar: function () {
            console.log(this)
        }
    }
(foo.bar)(); // {bar: ƒ}
(false || foo.bar)(); // Window
(foo.bar = foo.bar)(); // Window

问题3：

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();
console.log('script end')

问题4：主要是查看这里

null == undefined
false == undefined
false == null
false == ['']

ECMAScript的最新说明：https://tc39.github.io/ecma262/#sec-intro
你不知道的js https://github.com/getify/You-Dont-Know-JS
关于js中Eventloop 具体看node官方中介绍： https://nodejs.org/es/docs/guides/event-loop-timers-and-nexttick/
以及浏览器中事件队列与之区别
Number.isNaN() VS isNaN()

Number.isNaN ('a') ; // false; | 单纯的判断是不是NaN
isNaN('a'); // true | 判断是不是数字

for ... of 与 for ... in 的区别

2020年目标

时间很快，2019的目标大部分都还没有完成，继续再接再厉！

以下目标争取到中高级水平

node
Typescript (进行中)
Rx.js
Angular
Spring Cloud (当然要先学习 java)

目标

了解 babel 具体操作
https://cnodejs.org/topic/5a9317d38d6e16e56bb808d1
尽量多的翻译 medium 的文章（暂定一个月两篇）
react 源码--关注一下 https://overreacted.io/
算法：高级概念及实现的掌握（每周一题）
英语学习：https://github.com/byoungd/English-level-up-tips-for-Chinese/blob/master/part-1/2-vocabulary.md
webpack 5
关于 node 可以看狼叔的指导https://github.com/i5ting/How-to-learn-node-correctly

2020年05月06日15:28:18

web 漏洞防护安全指南

1.开发者必读篇 | Web漏洞防护指南

SQL 注入
XSS攻击
CSRF攻击
URL跳转漏洞。

react中Suspense, Lazy实现 react-loadble

https://www.yuque.com/fe9/basic/pim01w

面试之梳理一下css知识

1. 动画性能

记有一次面试，关于动画性能 CSS 动画之硬件加速

然后得出结论：
- transform 属性不会触发浏览器的 repaint（严格来说，应该是动画期间不会造成重绘，动画开始和结
束的时候发生了两次 repaint 操作。可以用 Chrome 的 rendering工具进行 repaint 和 reflow 的性能分
析），而 left 和 top 则会一直触发 repaint。

使用 GPU 可以优化动画效果
以及动画用的函数，requestAnimationFrame

2. 水平垂直居中方案：7中方式

flex（推荐）

.parent{
  display: flex;
  justify-content: center;
  align-items: center;
}

transform

.parent{
  position: relative;
}
.child{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

其他的可以看这里

3. 移动端实现 1px 的边框

优先想到的是：伪类 + transform 实现 transform: scaleY(0.5); 其他看这里

4. BFC 是什么？

触发条件，解释，看 mdn
简单罗列：

float（且不是none）
绝对定位（absolute，fixed）
行内块元素
overflow 不为 visible
弹性元素

5. css 选择器优先级

优先级（就近原则）：!important > [ id > class > tag ]

!important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承

6. CSS3 有哪些新特性？

RGBA 和透明度
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（对长的不可分割单词换行）word-wrap：break-word
文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
font-face 属性：定义自己的字体
圆角（边框半径）：border-radius 属性用于创建圆角
边框图片：border-image: url(border.png) 30 30 round
盒阴影：box-shadow: 10px 10px 5px #888888
媒体查询：定义两套 css，当浏览器的尺寸变化时会采用不同的属性

7. png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过 webp？

具体也可以看看这位博主，写得很详细 https://github.com/LiangJunrong/document-library/blob/master/other-library/Interview/PersonalExperience/Other-%E5%9B%BE%E7%89%87.md

png 是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。大多数地方都可以用。
jpg 是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
gif 是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
webp 格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

8. 浏览器解析 CSS 样式的过程

CSS 对象模型(CSSOM)

9. 多行文本溢出显示省略号(…)全攻略:

// 单行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// 多行
display: -webkit-box;
-webkit-box-orient:vertical;
-web-line-clamp:3;
overflow:hidden;

在框架中一些实际运用注意的地方

-webkit-box-orient: vertical 在使用 webpack 打包的时候这段代码会被删除掉，原因是 optimize-css-assets-webpack-plugin 这个插件的问题

10. 移动端自适应布局：手淘方案 rem -> vw -> 第三代布局

11. 有哪些好方法能处理 display: inline-block 元素之间出现的空格？

12. link 标签和 import 标签的区别

link 属于 html 标签，而 @import 是 css 提供的
页面被加载时，link 会同时被加载，而 @import 引用的 css 会等到页面加载结束后加载。
link 是 html 标签，因此没有兼容性，而 @import 只有 IE5 以上才能识别。
link 方式样式的权重高于 @import 的。

13. visibility=hidden, opacity=0，display:none

opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如 click
事件，那么点击该区域，也能触发点击事件的
visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

无障碍 web

无障碍 Web

面试之react

看到的比较好介绍 react 中父子组件之间的生命周期的关系
react 源码分析 -- 关注一下 Dan 的博客

react 中引入 React Hot Loader 的功能分析:
之前可能也没太注意到，hot module replacement（下面简称 HMR）就是webpack的热更新了，为什么引入了这个热更新，是为了解决，更新之后组件会被销毁的问题，导致state初始化，当然redux的数据是不会变的
react 基础之扫盲 -- 常用面试题目与分析
10 个例子学会 React Hooks
React 数据获取为什么一定要在 componentDidMount 里面调用？

跟服务器端渲染（同构）有关系，如果在 componentWillMount 里面获取数据，fetch data 会执行两次，一次在服务器端一次在客户端。在 componentDidMount 中可以解决这个问题。
在 componentWillMount 中 fetch data，数据一定在 render 后才能到达，如果你忘记了设置初始状态，用户体验不好。
react16.0 以后，componentWillMount 可能会被执行多次。因为 fiber 的原因。

动手实现babel(AST)插件解决0.1+0.2！=0.3的问题

利用babel(AST)优雅地解决0.1+0.2！=0.3的问题

不定时分享一些所见所感，主要是一些自己认为重要的东西，都记录在这里

为什么 GitHub 从字体图标迁移到 SVG 图标

https://github.blog/2016-02-22-delivering-octicons-with-svg/

2019年我的目标

以下目标争取到中高级水平

node
Typescript (进行中)
Rx.js
Angular
Spring Cloud (当然要先学习 java)
Dart

目标

了解 babel 具体操作
https://cnodejs.org/topic/5a9317d38d6e16e56bb808d1
尽量多的翻译 medium 的文章（暂定一个月两篇）
react 源码--关注一下 https://overreacted.io/
算法：高级概念及实现的掌握
英语学习：https://github.com/byoungd/English-level-up-tips-for-Chinese/blob/master/part-1/2-vocabulary.md
webpack
关于 node 可以看狼叔的指导https://github.com/i5ting/How-to-learn-node-correctly

2019年02月26日18:19:50

React数据获取为什么一定要在componentDidMount里面调用？

跟服务器端渲染（同构）有关系，如果在componentWillMount里面获取数据，fetch data会执行两次，一次在服务器端一次在客户端。在componentDidMount中可以解决这个问题。
在componentWillMount中fetch data，数据一定在render后才能到达，如果你忘记了设置初始状态，用户体验不好。
react16.0以后，componentWillMount可能会被执行多次。因为 fiber 的原因。

来自 https://segmentfault.com/q/1010000008133309

前端性能指标统计

关键点　　

分页面、区域、浏览器、性能指标　　

页面的性能指标详解：　　

白屏时间（first Paint Time）——用户从打开页面开始到页面开始有东西呈现为止　　
首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间　　
用户可操作时间(dom Interactive)——用户可以进行正常的点击、输入等操作，默认可以统计domready时间，因为通常会在这时候绑定事件操作　　
总下载时间——页面所有资源都加载完成并呈现出来所花的时间，即页面 onload 的时间

确定统计起点：　　

我们需要在用户输入 URL 或者点击链接的时候就开始统计，因为这样才能衡量用户的等待时间。高端浏览器Navigation Timing接口；普通浏览器通过 cookie 记录时间戳的方式来统计，需要注意的是 Cookie 方式只能统计到站内跳转的数据。

const a = {
  count:1,
  b:{
    count: 2,
    getCount: function(){
      console.log(this.count);
    }
  }
}

const getb = a.b.getCount
console.log(getb())
console.log(a.b.getCount())

理解的话，首先要明确的是 this是在函数里面
来自这里 https://juejin.im/post/5c6bbf0f6fb9a049ba4224fd#heading-16
几个概念：堆栈，当前执行上下文(栈) （静态）作用域链

总结一句话，函数里面的this（非箭头函数）： this 只有在运行时才会存在，且指向了当前执行上下文，在箭头函数里面：定义时绑定，this为参数，指向的是箭头函数上一层级作用域中那个this。

理解有误，请指正！

面试之函数

如何编写高质量的函数 -- 敲山震虎篇 ---详细介绍了函数中底层知识：
总结如下：

创建函数，开辟堆内存，以字符串存入函数体，将函数名（变量）的值变为函数体堆内存中地址。
执行函数，将存储的字符串函数体复制一份到新开辟的栈内存中，使其变为真正的 JS 代码

为什么是栈呢？先进后出（有递归能力）可以很好的保存和恢复调用现场

面试之 http 的前世今生，回顾

深入理解浏览器的缓存机制
主要有：一些概念，强缓存，协商缓存
ETag、CacheControl、Expires
都 2019 年了，还问 GET 和 POST 的区别:

GET 用于获取信息，是无副作用的，是幂等的，且可缓存
POST 用于修改服务器上的数据，有副作用，非幂等，不可缓存
其他什么安全性，传输限制以及传输数据方法都是不正确的

比较好的介绍缓存的流程图，来自腾讯云社区

http缓存

举个例子：浏览器第一次请求图片 a，服务器返回完整文件（以及附带信息，Etag 是对 a 文件的编码[一般 md5]，只要 a 在服务器上没有被修改，这个值就不会变）
在返回头里面有如下信息

cache-control: public, max-age=300
etag: W/"FpzhXY6i2z0VU2fftJB289pZu1hS"

浏览器就会把 a（以及额外信息）保存到本地。浏览器在 300 秒以内再次需要获取 a 时，浏览器直接从缓存读取 a (200, from xx cache)。在 300 秒之后再次需要获取 a 时，浏览器发现该缓存过期，就会重新请求服务器，此时发送就会附带上刚刚保存的 Etag( If-None-Match：W/"FpzhXY6i2z0VU2fftJB289pZu1hS")。服务器就会对比这两个 Etag ，不变的话状态码返回 304。不等则发送新文件和新的 ETag，浏览器获取新文件并更新该文件的 Etag。

与 ETag 类似功能的是 Last-Modified/If-Modified-Since。(服务器是集群，图片放在多台服务器上，每个服务器计算出来的 Etag 就不一样，请求的服务器是随机的，所以才会出现 Last-Modified/If-Modified-Since 解决这个问题)

HTTP 2：多路复用以及服务器推送
HTTP 状态码
关于存储的 Cookie V.S. LocalStorage V.S. SessionStorage V.S. Session

Cookie V.S. LocalStorage
主要区别是 Cookie 会被发送到服务器，而 LocalStorage 不会
Cookie 一般最大 4k，LocalStorage 可以用 5Mb 甚至 10Mb（各浏览器不同）
LocalStorage V.S. SessionStorage
LocalStorage 一般不会自动过期（除非用户手动清除），而 SessionStorage 在回话结束时过期（如关闭浏览器）
Cookie V.S. Session
Cookie 存在浏览器的文件里，Session 存在服务器的文件里
Session 是基于 Cookie 实现的，具体做法就是把 SessionID 存在 Cookie 里

2020年05月06日

前端开发的安全建议：https://hackernoon.com/10-security-tips-for-frontend-developers-oi4624ld
实现了一个Chip-8语言解释器，对理解计算机体系结构很有帮助：https://www.taniarascia.com/writing-an-emulator-in-javascript-chip8/
react 性能优化：https://addyosmani.com/blog/profiling-react-js/

sundjly / blog Goto Github PK

blog's Introduction

blog

原来博客地址不在维护，新的东西直接发在这里

react

优化

SICP

js概念解读

工作

规范

blog's People

Contributors

Stargazers

Watchers

Forkers

blog's Issues

参考

学习

以下目标争取到中高级水平

目标

1. 动画性能

2. 水平垂直居中方案 ：7中方式

3. 移动端实现 1px 的边框

4. BFC 是什么？

5. css 选择器优先级

6. CSS3 有哪些新特性？

7. png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过 webp？

8. 浏览器解析 CSS 样式的过程

9. 多行文本溢出显示省略号(…)全攻略:

10. 移动端自适应布局：手淘方案 rem -> vw -> 第三代布局

11. 有哪些好方法能处理 display: inline-block 元素之间出现的空格？

12. link 标签和 import 标签的区别

13. visibility=hidden, opacity=0，display:none

以下目标争取到中高级水平

目标

关键点

页面的性能指标详解：

确定统计起点：

参考

Recommend Projects

Recommend Topics

Recommend Org

2. 水平垂直居中方案：7中方式

关键点　　

页面的性能指标详解：　　

确定统计起点：　　