2020-02-26    2024-04-24    8471 字  17 分钟

::  多少事，从来急；天地转，光阴迫。一万年太久，只争朝夕。 – 教员

WIKI

git 多平台换行符问题(LF/CRLF)

详见 git多平台换行符问题(LF/CRLF) - Sampwood的One Piece

git 提供了一个 core.autocrlf 的配置项，用于在提交和检出时自动转换换行符，该配置有三个可选项：

  • true: 提交时转换为 LF，检出时转换为 CRLF
  • false: 默认值，提交检出均不转换
  • input: 提交时转换为 LF，检出时不转换

一种规范换行符的方式是这样的：

# 使用 Windows 系统的开发者设置
git config --global core.aurocrlf true

使用 Linux/MacOS 的开发者设置
git config --global core.autocrlf input

git 同时提供了另一个配置项 core.safecrlf，用于检查文件是否包含混合换行符，该配置也有三个可选项：

  • true 默认值，禁止提交混合换行符的文本文件(git add 的时候会被拦截，提示异常)
  • warn 提交混合换行符的文本文件的时候发出警告，但是不会阻止 git add 操作
  • false 不禁止提交混合换行符的文本文件（默认配置）

该配置用来防止错误的标准化（提交）与转换（检出）。嫌烦的话，可以：

git config --global core.safecrlf false

微信小程序无法调用 wx.chooseImage

又是腾讯的骚操作，你倒是多少给个提示啊，弹窗啊之类的…… 又不报错，又没响应，尼玛……

微信小程序无法调用wx.chooseImage | 微信开放社区

令人费解的 Hugo 日期格式化操作

:: 不得不说，Hugo 的日期格式化是我见过的最操蛋、最垃圾的！😠

如何设置页面所有 a 标签在新窗口打开

<a href="xxx">
<!-- 设置 target 为 _blank，默认为 _self -->
<a href="xxx" target="_blank">

但是许多时候，我们使用第三方静态博客生成 a 标签…… 当然，你可以通过 js 来遍历页面的所有 a 标签，然后动态的为它们添加上述属性，但想想也是挺耗性能的。

其实，只需要在 <head> 标签中加入如下代码就可以了：

<base target="_blank">

:: 当然，这样做也不是说一点问题没有，比如，你在页面内点击相应目录跳转的时候，如果不做进一步处理，那就不是在当前页面滚动到对应位置了，而是在新的页面窗口中了……

Vim 下载插件时出现错误

curl: (6) Could not resolve host: raw. githubusercontent. com

在使用 curl 下载文件时，关于出现上面这个报错，是因为 GitHub 的 raw.githubusercontent.com 域名解析被污染了。

注：curl 命令是一个利用 URL 规则在命令行下工作的文件传输工具。它支持文件的上传和下载，所以是综合传输工具，但按传统，习惯称 curl 为下载工具。作为一款强力工具，curl 支持包括 HTTP、HTTPS、ftp 等众多协议，还支持 POST、cookies、认证、从指定偏移处下载部分文件、用户代理字符串、限速、文件大小、进度条等特征。

怎么办？查询真实 IP, 并修改本机 hosts ，它在哪儿？

# 类 *UNIX 系统中一般位于
/etc/hosts

# Windows 中位于
C:\Windows\System32\drivers\etc\hosts

修改后，刷新 DNS （Windows 下 CMD 中运行 ipconfig /flushdns）即可。

SSH 通过 RSA 认证实现免密登录远程服务器

我们假设你在本机已经生成了 ssh-key

1
2
3
4
5

cd ~/.ssh
# 复制本机公钥到服务器
scp id_rsa.pub walkssi.com:/home/jack
# 追加公钥内容到服务器认证文件末尾
cat id_rsa.pub >> .ssh/authorized_keys

如何修改 VSCode 窗体的默认字体

记得以前在设置中就可以修改，不知道是记错了，还是后来改了……

在 VSCode 的安装路径，本机如下：

C:\Program Files\Microsoft VS Code Insiders\resources\app\out\vs\workbench

其他主机类似。在这个目录下有一个文件 workbench.desktop.main.css ，可以通过修改它改变窗体样式。

这里，我们修改了它的字体，在该文件末尾添加：

1
2
3

.split-view-view {
	font-family: 'LXGW WenKai Mono';
}

如果，你想修改其他样式自然也是没有问题的，但是不建议修改太多，不方便备份，后续升级版本可能会覆盖掉。

推送到 Github 时出现错误相关 (10054 $ 443)

OpenSSL SSL_read: Connection was reset, errno 10054
# OR
Failed to connect to github.com port 443: Timed out

解决办法：

# 关闭验证
git config --global http.sslVerify "false"
# 设置代理，
# 本机代理端口为 7890
git config --global http.proxy http://127.0.0.1:7890
git config --global https.proxy http://127.0.0.1:7890

上面的本机代理端口号为 7890 ，你需要查询自己的，在系统 设置 / 网络和 Internet / 代理 层级，如下：

![[assets/Pasted image 20230908112808.png]]

当然，这需要你科学上网才行。

:: 真心的，不翻墙，Github 这破玩意儿用起来是真的糟心……

再次提交，就可以正常提交了，过程中可以会出现这个警告，无视它即可！

warning: ----------------- SECURITY WARNING ----------------
warning: | TLS certificate verification has been disabled! |
warning: ---------------------------------------------------      
warning: HTTPS connections may not be secure. See https://aka.ms/gcmcore-tlsverify for more information.

怎么恢复呢？很简单。

git config --global http.sslVerify "true"
# 设置代理，
# 本机代理端口为 7890
git config --global --unset http.proxy 
git config --global --unset https.proxy

关于复制 A 目录下的所有文件到 B 目录下

# 1 - 如果 B 目录不存在，可以直接使用：
cp -r A B

# 2 - 如果 B 目录已经存在，则需要使用，否则，
# 会将 A 目录直接复制到 B 目录中，如 B/A 。
cp -r A/. B

Emacs 中 markdown-mode 中代码块字体设置

Emacs 编辑 .md 文件时，代码块默认字体很‘丑’，但是设置的默认字体在这里又不生效……

解决方案如下：

M-x customize-face 回车，输入 markdown-code-face 回车，点击 Show All Attributes ，勾选 Font Family 后输入你想设置的字体，即可。

![[assets/Pasted image 20230821145158.png]]

A4 纸尺寸

  • 210 x 297 mm
  • 595 x 842 px

图片 Background

CSS Backgrounds 中描述了 background 相关的一些属性, 如下：

Property 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。

> CSS 背景属性

那么背景图如何适应容器呢？就需要设置 background-size 了，如下：

#demo{
　　background-img:url(../bg.png);
    --（1）适用于上半部分背景图片，下半部分纯色
    将背景图像等比缩放到完全覆盖屏幕，背景图有可能超出屏幕（容器）
    background-size:cover;

   --（2）将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
   background-size:contain;
   
   --（3）最简单粗暴的方法，缺点会给背景拉伸变形;
   background-size：100%  100%；
}

NPM 源

# 查看当前源
npm config get registry

# 设置默认源
npm config set registry https://registry.npmjs.org

你也可以设置为国内的镜像源，如淘宝源（目前最佳），中间一段时间使用了华为源，老出问题。

# 新的淘宝源
npm config set registry https://registry.npmmirror.com

# 旧的淘宝源（已于 2022.05.31 起停止服务）
npm config set registry https://registry.npm.taobao.org

Telegram 中文汉化

  1. 点此安装官方简体中文语言包
  2. 选择 CHANGE（更改）
  3. 即可把界面语言替换为简体中文

参考链接：

解决 git status 不能显示中文

Ref

默认设置下，中文文件名在工作区状态输出，中文名不能正确显示，而是显示为八进制的字符编码。

  1. 终端输入：
git config --global core.quotepath false
  1. 同时， git-bash 中 Options/Text 终端也要设置成中文和 utf-8 编码。

![[assets/Pasted image 20230529085346.png]]

当然，你也可以通过修改配置文件来解决中文乱码，此处暂不讨论（因为一般上面这种办法就可以解决）。

相关课程资料

📌 https://blog.csdn.net/sirobot/article/details/122917866

北京大学课程资料整理：
https://github.com/lib-pku/libpku

浙江大学课程攻略共享计划：
https://github.com/QSCTech/zju-icicles

清华大学计算机系课程攻略：
https://github.com/PKUanonym/REKCARC-TSC-UHT

中国科学技术大学课程资源：
https://github.com/USTC-Resource/USTC-Course

上海交通大学课程分享：
https://github.com/CoolPhilChen/SJTU-Courses/

Win10 如何使用输入法快速插入当前时间

参考 Windows10 如何使用微软输入法快速输入时间（yyyy-mm-dd hh:mm:ss格式）

右键微软输入法托盘图标，选择 用户自定义短语 选项，如下：

![[assets/Pasted image 20230525161521.png]]

添加用户自定义的短语：

![[assets/Pasted image 20230525161534.png]] 短语处，完整内容如下：

%yyyy%-%MM%-%dd% %HH%:%mm%:%ss%

添加后，切换一下输入法，输入 sj ，默认输入法首选项就是当前时间了。

我的主机上设置的快捷键是 iid ，短语内容为 %yyyy%-%MM%-%dd% %HH%:%mm% ，如下：

![[assets/Pasted image 20230525161550.png]]

总之就是挺爽的吧！当然，你也可以设置其他自定义输入，而且可以导出完整的自定义选项，更换主机后，也很容易启用。

:: 事实证明，这种动态生成时间的方式，在你更换主机后，只能再次手动地去创建。

其他输入法应该也有类似的定义办法，很不错。

VSCode 折叠策略

VSCode 默认的折叠策略（Wrapping Strategy）为 simple ，如下：

![[assets/Pasted image 20230525161637.png]]

偶尔更换了下 Editor 的字体，以同一编辑器字体和网页字体，出现了自动换行不能正确截断的问题。如图所示，总有一部分会显示不完全。

![[assets/Pasted image 20230525161652.png]]

经过测试，只需要把折叠策略，修改为 advanced 即可。

:: 不得不说，VSCode 是真的好用哦，处理文本真的很方便。

DNS 设置

公司 DNS 备注
安印 192.168.51.168
中国互联网络信息中心 1.2.4.8 210.2.4.8
百度 180.76.76.76
阿里 223.5.5.5 223.6.6.6
腾讯 119.29.29.29

Win10 设置右下角显示秒钟

打开‘控制面板’，在地址栏输入 控制面板、时钟和区域 ，如下：

![[assets/Pasted image 20230525161756.png|650]]

其他设置后时间选项卡，如下：

![[assets/Pasted image 20230525161829.png]]

打开‘运行’（Win-R），输入 regedit ，打开‘注册表编辑器’后，在地址栏输入 计算机、HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Advanced 后，右键 Advanced ，新建一个‘DWORD (32 位）’值，命名为 ShowSecondsInSystemClock ，并赋值为 1 ，然后重启或注销电脑即可。

![[assets/Pasted image 20230525161902.png]]

关于 Iframe

好吧，老掉牙的技术了，当前许多浏览器已经限制了该功能，了解可能参考：

奶头乐理论

刺激他们的欲望，降低他们的工资，借钱给他们花，让他们忙的停不下来，同时开放大量的娱乐项目，使他们又不至于崩溃。

当娱乐大量占用人们的时间，让人们丧失思考的能力，这一社会麻醉剂将会带来“马太效应”，沉迷的人继续沉迷，清醒的人保持清醒，人与人的差距，甚至阶层间的差距也就拉大了。

从而消磨他们的斗志，抹平阶级跃迁的愿望。

v30 pro

您可以在华为官网查询您设备的相关备件价格。点击后方的链接选择您设备型号和颜色即可，点击链接 https://consumer.huawei.com/cn/support/sparepart-price/

亲亲，为您提供一个便捷的查询服务店方法，点击下方官网链接您可直接查询服务店具体信息，您可根据自己的实际情况选择距离您比较近的服务店前往哦~查询链接（建议收藏哦~）： https://consumer.huawei.com/cn/support/service-center/

华为授权服务中心（濮阳县红旗路）
4.96 分 5.6km

屏幕外层玻璃维修

电脑维修

服务日
河南省-濮阳市-濮阳县红旗路与建新路交叉口向东 100 米路南
0393-3339678
营业时间：9:00-18:00（周一周三至周日）
特别提醒： 门店每周二休息，营业时间为每周一、周三-周日 09:00-18:00，此期间可通过华为服务 APP 选择就近授权服务门店或官方寄修服务，如需帮助请拨打电话 16639328222；针对屏幕外层玻璃维修，本店支持直面手机屏幕外层玻璃维修；针对笔记本业务本店仅提供检测、软件问题处理服务，暂不提供硬件维修服务，给您带来不便敬请谅解

Git 解决每次拉取、提交代码时都需要输入用户名和密码

在家目录运行 git config --global credential.helper store ，然后在拉取时输入正确的用户名和密码，就可以成功记录下来。

解决 git bash 不能登录 mysql

在使用 git bash 登录 mysql 时会卡死，怎么办呢？加上 winpty 就好了，如下：

winpty mysql -u root -p

element-ui 单元格点击事件，行点击+单元格点击，获取某一行的 index

1
2
3
4

<el-table :data="tableData" stripe  @cell-click="addSubAccount" :row-class-name="tableRowClassName">
     <el-table-column prop="installer" label="主子账号">
     </el-table-column>
 </el-table>

相应逻辑：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

//下面是利用给表格添加 className, 添加 index
tableRowClassName ({row, rowIndex}) {
	//把每一行的索引放进 row
	// console.log(row,rowIndex)
	row.index = rowIndex;  
	//拿到的索引赋值给 row 的 index, 在这个表格中能拿到 row 的里面都会包含 index
	return 'row-remarks'  //className（类名）
},
addSubAccount(row){ //获取焦点弹出关联多个子账号
	console.log(row.index)
},
//如果需要区分那一数列的才能触发需要判断下 prop 的值
addSubAccount(row,column){ //获取焦点弹出关联多个子账号
	console.log(row.index)  //获取下标
	console.log(column.property ) //获取判断条件
	if(column.property == 'prop 的值'){  
	//prop 的值是自己设置的，注意别重复设置同一个值

	}
},
//如果表格既有行点击，又有单元格点击，在行点击事件里判断 prop, 等不等于你行点击的 prop, 如果等于直接 return false

Vue 文件的命名规范

→ 详见 https://juejin.cn/post/6844903840626507784#heading-9

#+BEGIN_QUOTE 其实刚开始我写 vue 文件的时候也不注意，各种驼峰啊、大写开头 (PascalCase) 还是横线连接 (kebab-case) 混着来，谁叫 vue 都可以，在风格指南中也没有定论。不过基于本项目我还是整理了一套文件的命名规则。 #+END_QUOTE

  1. Components

所有的 Component 文件都是以大写开关（Pascalcase），这也是官方所推荐的，但除了 index.vue ，如：

  • @/src/components/BackToTop/index.vue
  • @/src/components/Charts/Line. vue
  • @/src/views/example/components/Button. vue
  1. JS 文件

所有的 . js 文件都遵循横线连接 (kebab-case)，如：

  • @/src/utils/open-window. js
  • @/src/views/svg-icons/require-icons. js
  • @/src/components/MarkdownEditor/default-options. js
  1. Views

在 views 文件下，代表路由的 . vue 文件都使用横线连接 (kebab-case)，代表路由的文件夹也是使用同样的规则，如：

  • @/src/views/svg-icons/index. vue
  • @/src/views/svg-icons/require-icons. js

使用横线连接 (kebab-case) 来命名 views 主要是出于以下几个考虑。

  • 横线连接 (kebab-case) 也是官方推荐的命名规范之一；
  • views 下的。vue 文件代表的是一个路由，所以它需要和 component 进行区分 (component 都是大写开头）；
  • 页面的 url 也都是横线连接的，比如  https://www.xxx.admin/export-excel ，所以路由对应的 view 应该要保持统一；
  • 没有大小写敏感问题。

设置 git-bash 为 Emacs 默认 shell

→ https://blog.csdn.net/csfreebird/article/details/9719221

1
2
3
4

(setq explicit-shell-file-name
	"C:/Program Files/Git/bin/bash. exe")
(setq shell-file-name explicit-shell-file-name)
(add-to-list 'exec-path "C:/Program Files/Git/bin")

IDE Active

→ Jetbrains 系列产品重置试用方法

https://plugins.zhile.io

Ubuntu 下清空 DNS 缓存

为什么要清空 DNS 缓存呢？

大多数的 DNS 客户端会把域名解析的结果缓存到本地，这样可以提升对于同一个地址的访问速度。当您打开一个单页面的时候，通常会有多次对同一个域名的访问请求。基本上每个文件、图片、样式表……这些都是在同一个页面内部的对同一个域名的 DNS 解析请求。

所以如果您已经在本地缓存了不正确的 DNS 条目，那么您需要清空您的缓存来使 DNS 客户端提出新的 DNS 请求并更新解析结果。当然，您也可以等缓存的 DNS 条目过期以后让系统自动冲掉该条目……这通常需要 24 个小时。

在 Ubuntu 中冲掉 DNS 缓存的方式是重新启动 nscd 守护程序

1
2
3
4
5

# 安装 nscd （如果没有）
sudo aptitude install nscd

# 清除 DNS
sudo /etc/init. d/nscd restart

vue/cli 3 切换为 dart-sass

首先，安装包 ：

1
2
3

npm i sass sass-loader -D
# or
yarn add sass sass-loader -DE

然后，修改 vue. config. js ，增加如下配置：

1
2
3
4
5
6
7
8
9

module. exports = {
css: {
	loaderOptions: {
	sass: {
		implementation: require ('sass'), // This line must in sass option
	},
}
//...
};

glob

glob 最早是出现在 Unix 系统的命令中，是用来匹配文件路径的。除了在命令行中，我们在程序中也会有匹配文件路径的需求。于是，很多编程语言有了对 glob 的实现，如 Python 中的 glob 模块，php 中的 glob 方法。

下面是 node-glob 的匹配规则：

glob Desc
* 匹配任意 0 或多个字符
? 匹配任意一个字符
———————————- —————————-
[...] 匹配中括号中的字符
![...] 匹配不在中括号中的字符
^[...] 匹配不在中括号中的字符
———————————- —————————-
! (pattern I pattern I pattern) 不满足括号的所有模式
? (pattern I pattern I pattern) 满足 0 或 1 个括号中的模式
+(pattern I pattern I pattern) 满足 1 或多个括号中的模式
@(pattern I pat* I pat? ern) 满足 1 个括号中的模式
———————————- —————————-
** 跨路径匹配任意字符

来看几个最简单常用的例子吧。

它将匹配类似 scripts/index. js、scripts/nested/index. js 和 scripts/nested/twice/index. js 的文件。

'scripts/**/*. js'

取反。

'script/**/*. js', '! scripts/vendor/', 'scripts/vendor/react. js'

'**/*. js', '! node_modules/'

设计模式准则

我以前给一些公司讲一些设计模式的培训课，我一再提到，那 23 个经典的设计模式和 OO 半毛钱关系没有，只不过人家用 OO 来实现罢了。

设计模式就三个准则：

  • 中意于组合而不是继承，
  • 依赖于接口而不是实现，
  • 高内聚，低耦合。

你看，这完全就是 Unix 的设计准则。

文件的描述符和重定向

文件描述符 是和文件的输入、输出相关联的非负整数，Linux 内核（kernel）利用文件描述符来访问文件。打开现存文件或新建文件时，内核会返回一个文件描述符。读写文件也需要使用文件描述符来指定待读写的文件。

系统预留文件描述符：

  • 0 - stdin 标准输入；
  • 1 - stdout 标准输出；
  • 2 - stderr 标准错误。

实例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

# 输出重定向
# 1. 截取模式保存到文件 - 写入到文件之前，文件内容首先会被清空
echo "this is a text line one" > test. txt
# 2. 追加模式保存到文件 - 写入到文件之后，会追加到文件结尾
echo "this is a text line one" >> test. txt

# 标准错误输出的重定向方法
cat linuxde. net                 # → cat: linuxde. net: No such file or directory
# 1. 没有任何错误提示，正常运行
cat linuxde. net 2> out. txt
# 2. 错误信息被保存到了 out. txt 文件中
cat linuxde. net &> out. txt
# 3. 将错误输出丢弃到 /dev/null 中，特殊的设备文件 - 黑洞
cat linuxde. net 2> /dev/null

# 输入重定向
echo < test. txt

数据归档和解压缩

首先要弄清两个概念：打包和压缩。 打包 是指将一大堆文件或目录变成一个总的文件； 压缩 则是将一个大的文件通过一些压缩算法变成一个小文件。

1. tar 命令

利用 tar 命令，可以把一大堆的文件和目录全部打包成一个文件，这对于备份文件或将几个文件组合成为一个文件以便于网络传输是非常有用的。

# 语法
tar （选项） （参数）

实例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

# 打包、压缩
tar -cvf log. tar log2012. log      # 仅打包，不压缩！
tar -zcvf log. tar. gz log2012. log  # 打包后，以 gzip 压缩
tar -jcvf log. tar. bz2 log2012. log # 打包后，以 bzip2 压缩

# 查询
tar -tvf log. tar                # 直接查询
tar -ztvf log. tar. gz            # 查询以 gzip 压缩的文件
tar -jtvf log. tar. bz2           # 查询以 bzip2 压缩的文件

# 解压缩
tar -zxvf log. tar. gz            # 以 gzip 解压缩
tar -jxvf log. tar. bz2           # 以 bzip2 解压缩

tar -zxvf log. tar. gz -C log     # 以 gzip 解压缩在目录 log

其中：

选项 说明
-v 显示操作过程
-f <FILE> --file=<FIEL> 指定备份文件
————————— ————————–
-c --create 建立新的备份文件
-t --list 列出备份文件的内容
-x --extract --get 从备份文件中还原文件
————————— ————————–
-z --gzip --ungzip 通过 gzip 指令处理备份文件
-j 支持 bzip2 解压文件
-C <DIR> 在特定目录解压缩

小结：

压缩：tar -jcv -f filename. tar. bz2 要被压缩的文件或目录名称
查询：tar -jtv -f filename. tar. bz2
解压缩：tar -jxv -f filename. tar. bz2 -C 欲解压缩的目录

关于 CSS 中设置 height 为 100% 不起作用

W3C 的规范，百分比的高度在设定时需要根据这个元素的父元素的高度。

Web 浏览器有计算有效宽度时会考虑浏览器窗口的打开宽度，缼省为页面整个横向宽度。

事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围（导致滚动条出现），缺省为 height: auto 。或者你给整个页面设置一个绝对高度，否则浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。

！！！个人实践，在给 html、body 设置 background 相关属性的时候情况会很奇特，给其内的元素设置背景的时候就不存在这些奇葩问题。

所以，当我们想要设置竖直高度的百分比，需要对 html、body 进行一些初始化设置，如：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

html {
	/* 设置根元素高度 */
	height: 100%;
}

body {
	/* 设置 body 高度 */
	height: 100%;
}

/* body 内元素 .container */
.container {
	height: 60%;
	background: #f66 ;
}

其实试一下，你就会发现，如果直接对 body 设置 background 的背景图片或是背景色，都会占满整个容口。

JavaScript 对 url 的编码和解码

有时候，你会发现一些 url 链接是编码过的，如这样： http%3A%2F%2Fw3cschool. cn%2Fmy%20test. asp%3Fname%3Dst%C3%A5le%26car%3Dsaab 。

JavaScript 中使用 encodeURIComponent () 方法可以对 URI 进行编码；使用 decodeURIComponent () 方法可以对 URI 进行解码。

W3C 提供了简单的实现，如下：

1
2
3
4
5

var uri=" http://w3cschool.cn/my test. php? name=ståle&car=saab";
var uri_encode=encodeURIComponent (uri);
document.write (uri_encode);
document.write ("<br>");
document.write (decodeURIComponent (uri_encode));

↓↓↓

http%3A%2F%2Fw3cschool. cc%2Fmy%20test. php%3Fname%3Dst%C3%A5le%26car%3Dsaab
http://w3cschools.com/my test. asp? name=ståle&car=saab

Emacs 宏操作

https://www.jianshu.com/p/6ad946eb8ebc

Key/Command Description
C-x ( 开启宏记录
C-x ) 关闭宏记录
C-x e 执行刚录制的宏
C-u n C-x e 执行 n 次刚录制的宏
M-x name-last-kbd-marco 给刚记录的宏命名
M-x insert-kbd-marco 把刚命名的宏记录写入到文件中

可以设置一个专门的文件（如 ~/. emacs. d/macro. el ）来记录宏，然后在 init. el 中加载改文件（ (load-file "~/. emacs. d/macro. el") ），如此便可以实现持久化。

如这个例子：用宏定义了下翻 15 行和上翻 15 行的快捷键。

1
2
3
4
5

;; macro. el
(fset 'next-lines
	"\C-u15\C-n")
(fset 'previous-lines
	"\C-u15\C-p")

1
2
3
4
5
6
7
8

;; init. el

;; ...
;; 加载 macro. el
(load-file "~/. emacs. d/macro. el")
;; 绑定快捷键
(global-set-key (kbd "C-x n RET") 'next-lines)
(global-set-key (kbd "C-x p RET") 'previous-lines)

Emacs 终端真彩显示

https://stackoverflow.com/questions/63950/how-to-make-emacs-terminal-colors-the-same-as-emacs-gui-colors?r=SearchResults

设置 TERM 在 . bashrc 文件中，如下：

1

export TERM=xterm-256color

如此，便设置好了。

加入我们使用在终端中使用 Emacs ，执行 M-x list-colors-display ，便可以看到 256 色已经全部激活，如此，终端下使用 Emacs 和 Emacs GUI 的颜色便相差无几了。

CSS 换行

→ 参考链接

文本换行有很多方式：

  • <br/> 标签元素，能够强制使得所在位置文本换行；
  • <p> 元素， <div> 设定宽度，都可以对文本内容实现自适应换行；
  • 对于长单词或链接，默认不会断开换行，方式 2 就不能够在这些文本内部进行换行，此时需要 word-wrap: break-word; 或 word-break: break-all; 实现强制断行。
  1. 强制不换行
1
2
3
4
5
6
7
8
9

div {
	white-space: nowrap;
}
/*
white-space:
- normal  默认
- pre     换行和其他空白字符都将受到保护
- nowrap  强制在同一行内显示所有文本，直到文本结束或者遭遇 <br> 对象
,*/
  1. 控制文本换行
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

div {
	word-break: normal;
	word-break: break-all;
	word-break: keep-all;
}
/*
word-break:
- normal        依据亚洲语言与非亚洲语言的文本规则，允许在字内换行
- break-all     该行为与亚洲语言的 normal 相同，也允许非亚洲语言文本行的任意字内断开，该值适合包含一些非亚洲文本的亚洲文本
- keep-all      与所有非亚洲语言的 normal 相同，对于中文、韩文、日文，不允许字断开，适合包含少量亚洲文本的非亚洲文本
,*/
  1. 强制单词内或链接内断行
1
2
3
4
5
6
7
8

div {
	word-wrap: break-word;
}
/*
word-wrap:      属性用来表明是否允许浏览器在长单词和链接内进行断句
- normal        只在允许的断字点换行
- break-word    在长单词或 URL 地址内部进行换行
,*/

JS 获取 DPI

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

//获取 DPI
function js_getDPI () {
	var arrDPI = new Array ();
	if ( window. screen. deviceXDPI != undefined ) {
		arrDPI[0] = window. screen. deviceXDPI;
		arrDPI[1] = window. screen. deviceYDPI;
	}
	else {
		var tmpNode = document.createElement ( "DIV" );
		tmpNode. style. cssText = "width: 1in; height: 1in; position: absolute; left: 0px; top: 0px; z-index: 99; visibility: hidden";
		document.body.appendChild ( tmpNode );
		arrDPI[0] = parseInt ( tmpNode. offsetWidth );
		arrDPI[1] = parseInt ( tmpNode. offsetHeight );
		tmpNode.parentNode.removeChild ( tmpNode );
	}
	return arrDPI;
}

// 将 px 转成 mm
let mm = pxValue/dpi*2.54*10;   // dpi 是上面获取的，注意对应 XY 轴

小程序跳转 H5 时 url 参数截断

→ 参考链接

先来看一个例子，原来的 url 为  https://ultimavip.cn/m/mposter.html?source=gxw_001_t_mposter ，跳转后变为  https://ultimavip.cn/m/mposter.html ，参数 ? source=gxw_001_t_mposter 丢失了，为什么呢？编码问题。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// 跳转到 H5 页面的小程序代码
targetUrl: function () {
	console.log (this. data. mod_textUrl);
	wx.navigateTo ({
		// 此处需要编码，因为有 '?' ，可能浏览器不认
		url: '../webview/webview? url=' + encodeURIComponent (this. data. mod_textUrl) 
	})
}

// 跳转到的 H5 页面进行解码
onLoad: function (options) {
	this.setData ({
		targetUrl: decodeURIComponent (options. url); // 用 decodeURIComponent 进行解码
	})
	console.log (options. url);
}

滚动懒加载的实现

→ 参考链接

什么时候需要懒加载呢？数据量大，一页显示不完，网页渲染事件长，影响体验。如何解决？分页，或数据懒加载。

先设定了基础前提，假设视窗可以显示 30 数据，总共有 56 条数据要展示。

如何实现数据懒加载呢？先来看三个属性：

  • scrollHeight ，元素总高度，包含滚动条中的内容，只读；
  • scrollTop ，当元素出现滚动条时，向下拖动滚动条时，内容向上滚动的距离，可读写；
  • clientHeight ，元素内容及其边框所占的空间大小，即可视区域大小高度。

如何判断滚动条到底部了呢？很显然，当 scrollHeight - scrollTop - clientHeight = 0 时，滚动条就到底部了。

来看代码，在第一次请求数据的时候，先设置一个变量来记录请求次数（其实后台也是做分页的处理）：

1
2
3
4
5
6
7
8
9

// 初始化首页页码
let currentPage = 1;            // this. currentPage = 1

// 获取首页数据，apiGetTableData 为定义的获取数据的接口
// data 为请求参数
this.apiGetTableData (data). then (res => {
	$this. totalPage = res. totalPage; // 这里需要知道总页数
	$this. tableData = res. data;      // 表格数据
})

监听表格 DOM 对象的滚动事件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

let DOM = document.querySelector (targetDom);

DOM.addEventListener ('scroll', function () {
	let scrollDistance = DOM. scrollHeight - DOM. scrollTop - DOM. clientHeight;

	if (scrollDistance <= 0) {                     // 为 0 证明滚动条已经到底，可以请求接口
		if (this. currentPage < this. totalPage) {   // 当前页数小于总页数继续请求
			this. currentPage++;                   // 当前页数自增

			// 请求接口代码
			// data 为请求参数
			this.apiGetTableData (data). then (res => {
				// 将请求回来的数据和当前展示的数据合并
				this. tableData = $this.tableData.concat (res. data); 
			})
		}
	}
})

如此，就实现表格滚动下拉时的数据懒加载。

刷新 DNS

windows 下 刷新 DNS 的方法：打开 cmd → 输入 ipconfig /flushdns 。 Github 有时候，连接很慢，甚至有打不开的状况，此时，可以尝试刷新一下 DNS ，会有意象不到的效果哦。