高嘉君的个人博客

  • 首页

  • 关于

  • 归档

一行代码实现网页暗黑模式

发表于 2020-06-08 | 更新于 2020-08-18 | 阅读次数:
本文字数: 1.3k | 阅读时长 ≈ 1 分钟

随着 iOS 13 暗黑模式的发布,前端又要开始忙适配了。那么有没有一劳永逸的方法呢?当然是有的,往下看:

阅读全文 »

typescript axios 使用拦截器时封装通用返回值的方法

发表于 2019-12-24 | 阅读次数:
本文字数: 2.2k | 阅读时长 ≈ 2 分钟

最近起的Vue新项目中用到了typescript和axios,并且axios中使用了响应拦截器:

1
2
3
4
5
6
7
8
service.interceptors.response.use(
(response: AxiosResponse) => {
return response.data;
},
(error: any) => {
return Promise.reject(error);
}
)

但是调用时发现返回值仍然是AxiosResponse<any>,这就导致如果在then里做一些关于res的判断时ts会报错:

1
2
3
4
5
6
7
this.$fetch
.get(url, params)
.then((res) => {
if (res.someKey === 0) { // Property 'someKey' does not exist on type 'AxiosResponse<any>'
// do something
}
})

经过一番Google后,终于找到了解决办法:新建一个shims-ajax.d.ts(不一定非要是这个名,任意的*.d.ts都可以)文件,重新声明axios模块,然后在调用时加上泛型,如下:

阅读全文 »

重构小技巧

发表于 2019-10-30 | 阅读次数:
本文字数: 12k | 阅读时长 ≈ 11 分钟

提炼函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function printOwing(invoice) {
printBanner();
let outstanding = calculateOutstanding();
//print details
console.log(`name: ${invoice.customer}`);
console.log(`amount: ${outstanding}`);
}

// 重构后
function printOwing(invoice) {
printBanner();
let outstanding = calculateOutstanding();
printDetails(outstanding);
function printDetails(outstanding) {
console.log(`name: ${invoice.customer}`);
console.log(`amount: ${outstanding}`);
}
}
阅读全文 »

flex布局占据空间计算方法

发表于 2019-01-22 | 更新于 2024-11-26 | 阅读次数:
本文字数: 718 | 阅读时长 ≈ 1 分钟

影响flex元素占据空间的因素有三个:flex-grow、flex-shrink、flex-basis,下面一一分析。

flex-basis

flex-basis指定了flex元素在主轴方向上的初始大小。默认值为auto,大小为元素的宽度/高度。如果设置了具体值,则占用的空间为设定的值(覆盖设置的width),但是受限于min-width和max-width。当设置为0时,空间大小也为元素的宽度/高度。

demo:


See the Pen
NoWpRj
by abcdGJJ (@abcdGJJ)
on CodePen.

阅读全文 »

30s内即可理解的JavaScript片段

发表于 2018-10-04 | 更新于 2019-05-30 | 阅读次数:
本文字数: 79k | 阅读时长 ≈ 1:12

本文翻译自30-seconds-of-code,可以理解为高阶函数片段。原作者说是30s内就可以理解,而我每一个都看了几分钟。

Adapter

ary

创建一个最多接受n个参数的函数,多余的参数将被忽略。

使用Array.prototype.slice(0,n)和扩展运算符(...),调用提供的函数发fn,并且最多有n个参数。

1
2
3
4
const ary = (fn, n) => (...args) => fn(...args.slice(0, n));
// EXAMPLES
const firstTwoMax = ary(Math.max, 2);
[[2, 6, 'a'], [8, 4, 6], [10]].map(x => firstTwoMax(...x)); // [6, 8, 10]
阅读全文 »

前端性能优化检查清单

发表于 2018-09-15 | 更新于 2024-11-26 | 阅读次数:
本文字数: 13k | 阅读时长 ≈ 12 分钟

本文翻译自thedaviddias总结的Front-End-Performance-Checklist

HTML

  • 压缩HTML: 生产环境上的HTML代码应该是压缩的,注释、空格、新行需要被移除。

    原因:

    移除不必要的空格、注释和新行可以减少html的文件大小并且加快你的网站加载时间,减少了用户的下载流量。

    做法:

    大多数开发框架都有压缩网页的插件。你可以使用一系列的NPM模块来自动为你完成这项工作。

    • HTML minifier | Minify Code
    • Online HTML Compressor
    • Experimenting with HTML minifier — Perfection Kills
阅读全文 »

Android7.0及以上charles抓包提示证书无效的解决方法

发表于 2018-08-11 | 更新于 2018-08-25 | 阅读次数:
本文字数: 1.6k | 阅读时长 ≈ 1 分钟

最近在开发百度的百度小程序,进行联调的时候发现只有手机百度APP的https请求不能被抓包,其他应用的https请求都可以被抓包,而且证书也安装正确。一开始怀疑是手百APP的问题,以为APP里面对https证书做了限制,但是和手百的人沟通后发现并没有做限制。后来在搜索这个问题的时候,无意间看见相关搜索中有这么一个词:Android7.0 无法进行https抓包,这才知道原来是Android系统的限制。

在Android7.0及以上的系统中,每个应用可以定义自己的可信CA集。默认情况下,应用只会信任系统预装的CA证书,而不会信任用户安装的CA证书。通过Charles安装的证书恰恰正属于用户安装的CA证书,因此会被视作不安全的证书。

阅读全文 »

web攻击原理及预防

发表于 2018-06-09 | 更新于 2018-08-25 | 阅读次数:
本文字数: 2.3k | 阅读时长 ≈ 2 分钟

目前来说,web攻防主要分为3部分:XSS、CSRF、SQL注入。

XSS分类

XSS攻击可以分为以下三类:

  1. 反射型跨站攻击:指的是将用户输入的数据通过URL的形式直接或未经过完善的安全过滤就在浏览器中输出,会导致输出的数据中存在可被浏览器执行的代码数据。涉及浏览器-服务器交互。

  2. 存储型跨站攻击:指的是Web应用将用户输入的数据信息未经处理直接存入数据库中,当页面进行数据库的查询展示时,会把攻击的代码直接在页面中输出展示。只要用户访问带有XSS攻击脚本的网页时,就会触发攻击效果,具有较强的稳定性。涉及浏览器-服务器-数据库交互。

  3. DOM型跨站攻击:严格来说,基于DOM的XSS攻击并非按照“数据书否保存在服务器端”来划分,其从效果上来说也算是反射性XSS。但是这种XSS实现方法比较特殊,利用JavaScript的DOM节点编程可以改变HTML代码这个原理来形成的XSS攻击。一般攻击时需要对具体的DOM结构进行分析,构造攻击语句难度较大,较为少见。涉及浏览器-服务器交互。

阅读全文 »

toLocaleString奇淫技巧

发表于 2018-04-23 | 更新于 2018-08-25 | 阅读次数:
本文字数: 3.2k | 阅读时长 ≈ 3 分钟

toLocaleString介绍

toLocaleString用于将对象根据语言的不同转换成某种语言环境下的字符串,同时也可以根据传入的参数来判断具体的表现形式。本文主要介绍Number和Date类型的toLocaleString方法

Number.prototype.toLocaleString

首先谈一个面试中经常会被问道的问题:如何对数字进行千位符格式化?一般人可能想到的做法是换成字符数组循环手动插入,或者使用正则的方法。其实知道了toLocaleString完全可以不需要这么做,一行代码就能搞定。

1
2
const num = 1122333444455551
num.toLocaleString() //1,122,333,444,455,551
阅读全文 »

centos 配置泛域名https证书

发表于 2018-03-28 | 更新于 2018-08-25 | 阅读次数:
本文字数: 2.2k | 阅读时长 ≈ 2 分钟

前言

2018年1月份Letsencrypt可以申请泛域名证书,这让我们部署多域名、多站点https省了很多功夫,终于可以不用维护多个域名的https证书。笔者以acme.sh为例,手把手教你配置https证书~

本教程适用于centos 6.x的linux服务器

acme.sh

acme.sh是国人开发的基于ACME协议的shell脚本,有了它可以很方便的从Letsencrypt生成免费的证书

阅读全文 »
12…7
abcdGJJ

abcdGJJ

这里是高嘉君的个人博客

68 日志
3 分类
56 标签
Links
  • PP_K’s Blog
  • 胡方运的博客
  • 刘熹的博客
  • 万事静心
  • 雁南之北
  • vi my.cnf
  • 绿岛之美
  • 小马姑娘
  • 技术源码分享
  • summerpro
  • 帝果
  • 猎豹园地
  • 助梦者的博客
  • FMW哈哈哈
  • 路人甲
© 2024 abcdGJJ | 站点总字数: 189k | 站点阅读时长 ≈ 2:52
由 Hexo 强力驱动|鲁ICP备15017412号-1
|
主题 – NexT.Pisces
本网站由又拍云logo提供CDN加速/云存储服务