一切福田，不離方寸，從心而覓，感無不通。

Daily Archives: 2021年1月27日

Git 代码统计

代码提交作者

1
git log --pretty='%aN' | sort -u

  代码提交作者个数

1
git log --pretty='%aN' | sort -u | wc -l

  统计某个yourName的增加，删除，总行数

1
git log --author="yourName" --pretty=tformat: --numstat | gawk '{ add += $1; subs += $2; loc += $1 - $2 } END { printf "added lines: %s removed lines: %s total lines: %s\n", add, subs, loc }'

  提交次数top10

1
git log --pretty='%aN' | sort | uniq -c | sort -k1 -n -r | head -n 10

  统计每个人，和上面统计结果一样，亲测非亲写（搬运工），单行脚本，自己感受下：

1
git log --shortstat --pretty="%cE" | sed 's/\(.*\)@.*/\1/' | grep -v "^$" | awk 'BEGIN { line=""; } !/^ / { if (line=="" || !match(line, $0)) {line = $0 "," line }} /^ / { print line " # " $0; line=""}' | sort | sed -E 's/# //;s/ files? changed,//;s/([0-9]+) ([0-9]+ deletion)/\1 0 insertions\(+\), \2/;s/\(\+\)$/\(\+\), 0 deletions\(-\)/;s/insertions?\(\+\), //;s/ deletions?\(-\)//' | awk 'BEGIN {name=""; files=0; insertions=0; deletions=0;} {if ($1 != name && name != "") { print name ": " files " files changed, " insertions " insertions(+), " deletions " deletions(-), " insertions-deletions " net"; files=0; insertions=0; deletions=0; name=$1; } name=$1; files+=$2; insertions+=$3; deletions+=$4} END {print name ": " files " files changed, " insertions " insertions(+), " deletions " deletions(-), " insertions-deletions " net";}'

  from:https://www.cnblogs.com/lioa/p/12074127.html

龙生   27 Jan 2021
View Details

JS删除对象中的某一属性(delete)

1
2
3
4
5
6
7
8
9
10
11
12
var obj= {
  height: 180,
  long: 180,
  weight: 180,
  hobby: {
    ball: 'good',
    music: 'nice'
  }
}
delete obj.hobby
 
// 已声明的对象不可删除, 对象中的对象属性可以删除

  from:https://www.cnblogs.com/juewuzhe/p/11451362.html

龙生   27 Jan 2021
View Details

Dapper实现Like参数化

//参数直接写参数名 string Sql = "select * from [table] where field like @field"; //参数值里面加上通配符，varchar类型查询也不加单引号 var Param = new {field = "%{ParamValue}%"}; //执行查询 Dapper.Query<T>(Sql,Param);   from:https://www.cnblogs.com/tian2008/p/8491633.html

龙生   27 Jan 2021
View Details

H5与App的通讯方式

前言 现在不管是桌面客户端还是移动客户端，都会夹杂着一部分H5页面，这种混合式的应用也是我们常说的Hybrid App。为什么会出现Hybrid App呢，早期是因为开发一个Android或iOS的客户端，需要的人力成本比较大，开发周期比较长，后来有些团队就通过将部分页面拆分出来，由前端来完成，再通过在客户端里的Webview来展示。 由于小编我半路转行当程序猿，只对前端领域有所了解，对其他编程领域接触较少，故不探讨Webview的实现原理和与H5页面交互的原理。有兴趣的小伙伴自行百度搜索JSBridge的相关知识，或请教下客户端(Windows、MacOS、Android、iOS)开发的同学，看看如何桥接JS与其他编程语言之间的联系。 优缺点 凡事都是有好有坏，没有绝对的解决方案。下面我总结下Hybrid App在开发过程中存在的优缺点，各位同学可自行判断Hybrid App的好坏。 优点 H5页面交由前端进行开发，页面模块之间分开开发和维护，有效减少App的开发周期 H5页面不受限于应用商店繁琐的审核流程和冗长的等待时间，新增页面和功能、修复缺陷都可随时部署到线上 H5页面在有需要时才加载，减小App打包后的大小，缩短App在应用商店下载的时间和减少本地占用手机的空间 H5页面接入App Webview中，不再受限于浏览器，可通过与App交互调用设备更多底层的API来完善更多原本浏览器无法完成的操作 缺点 协定好H5和App之间的通讯协议，定义好全局属性和全局方法在两者之间如何调用 H5页面接入App Webview中，可能会出现很多兼容问题，需要前端和客户端多加注意 开发前需按照需求和交互进行页面划分，哪些页面归前端开发，哪些页面归客户端开发 页面出现Bug有时候很难发现是在哪个环节出错，需要前端和客户端共同调试找出问题所在(可能各抒己见，打架都有份) 通讯方式 以下代码全部基于前端(React)进行演示，客户端如何实现JS交互我就不多说了，可以找客户端开发的同学了解下。通讯方式有如下两种，都是使用JS代码来完成，兼容性还是挺不错的。 前端通知客户端：拦截 客户端通知前端：注入 前端通知客户端 在H5页面里触发链接跳转，App Webview检测到链接跳转再进行拦截，因此可以通过URL上携带参数来告知App下一步应该做些什么。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, { Component } from "react";
 
export default class App extends Component {
    componentDidMount() {
        location.href = "lsbox://toast?msg=页面加载完毕"; // 通知App
    }
    render() {
        return (
            <div className="app">
                <button type="button" onClick={this.openMask.bind(this)}>点它</button>
            </app>
        );
    }
    openMask() {
        location.href = "lsbox://mask?toggle=1"; // 通知App
    }
}

  以上执行了location.href = "lsbox://mask?toggle=1"来通知App打开遮罩层 lsbox：前端和客户端统一定义链接跳转的协议(喜欢怎样定义协议都行) mask：App需要执行的动作(喜欢怎样定义动作都行) toggle=1：动作执行参数(自定义参数，用于告知App怎样做) 如果同步触发两个或以上的location.href(下一个location.href接着上一个location.href)，App可能只会接收到一个location.href发出的通知，所以需要对下一个location.href使用setTimeout设置通知时间间隔(可使用Async/Await封装优化)

1
2
3
4
5
6
7
location.href = "lsbox://toast?msg=one";
setTimeout(() => {
    location.href = "lsbox://toast?msg=two";
    setTimeout(() => {
        location.href = "lsbox://toast?msg=three";
    }, 100);
}, 100);

  客户端通知前端 注入一些全局方法，App Webview直接操作全局方法来控制H5页面，使用window.handleFunc = function() {}这样的形式来定义注入的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React, { Component } from "react";
 
export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [0, 1, 2, 3, 4]
        };
    }
    componentDidMount() {
        window.addNum = this.addNum.bind(this); // 暴露方法给App
    }
    render() {
        return (
            <div className="app">
                <ul>{this.state.list.map(v => <li key={v}>{v}</li>)}</ul>
            </div>;
        );
    }
    addNum(num) {
        this.setState(prevState => ({
            list: prevState.list.concat(num);
        }));
    }
}

  以上在组件加载完成后通过window.addNum = this.addNum.bind(this)将指定方法全局暴露到window上，App Webview可直接操作这些方法来控制H5页面。 作者：JowayYoung 链接：https://juejin.cn/post/6844904020201455624 来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

龙生   27 Jan 2021
View Details

中高级前端必须注意的40条移动端H5坑位指南 | 网易三年实践

前言 不知不觉在网易已有三年半，占了一半时间都在与移动端打交道，整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。Android和iOS各显神通，Android的系统版本和屏幕分辨率多得难以一招兼容，iOS的顽固标准和未知特性多得难以快速掌握。 三年半沉淀通过本文记录下所遇到的坑位，或许有些坑位还未遇到，但本文记录的40条坑位绝对能让同学们少走很多弯路，特别是前端小白。为了减少废话提高本文质量，对以下内容做一些约定。 提及的安卓系统包括Android和基于Android开发的系统 提及的苹果系统包括iOS和iPadOS 本文针对的开发场景是移动端浏览器，因此大部分坑位的解决方案在桌面端浏览器里不一定有效 解决方案若未提及适用系统就默认在安卓系统和苹果系统上都适用，若提及适用系统则会详细说明 Webkit及其衍生内核在移动端浏览器市场占有率里达到惊人的97%，因此无需太过担心CSS3、ES6和浏览器新特性的兼容性 每次填坑都是一次实践过程，全部坑位的源码都按语言方向记录在笔者Github上，若有未记录的坑位可提PR让笔者合并，给个Star支持下咧！ 本来想为每个坑位都截图或录播GIF作为演示，但考虑到目前掘金的Markdown编辑器操作图片还存在缺陷就放弃了，每次上传图片都会花费很多时间甚至上传失败(望掘金的产品小姐姐和程序小哥哥优化喔)。若需演示只能自行复制代码了。 HTML方向 调用系统功能 使用<a>能快速调用移动设备的电话/短信/邮件三大通讯功能，使用<input>能快速调用移动设备的的图库/文件。 这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被移动端浏览器忽略。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 拨打电话 -->
<a href="tel:10086">拨打电话给10086小姐姐</a>
 
<!-- 发送短信 -->
<a href="sms:10086">发送短信给10086小姐姐</a>
 
<!-- 发送邮件 -->
<a href="mailto:young.joway@aliyun.com">发送邮件给JowayYoung</a>
 
<!-- 选择照片或拍摄照片 -->
<input type="file" accept="image/*">
 
<!-- 选择视频或拍摄视频 -->
<input type="file" accept="video/*">
 
<!-- 多选文件 -->
<input type="file" multiple>

  忽略自动识别 有些移动端浏览器会自动将数字字母符号识别为电话/邮箱并将其渲染成上述调用系统功能里的<a>。虽然很方便却有可能违背需求。

1
2
3
4
5
6
7
8
<!-- 忽略自动识别电话 -->
<meta name="format-detection" content="telephone=no">
 
<!-- 忽略自动识别邮箱 -->
<meta name="format-detection" content="email=no">
 
<!-- 忽略自动识别电话和邮箱 -->
<meta name="format-detection" content="telephone=no, email=no">

  弹出数字键盘 使用<input type="tel">弹起数字键盘会带上#和*，适合输入电话。推荐使用<input pattern="\d*">弹起数字键盘，适合输入验证码等纯数字格式。

1
2
3
4
5
<!-- 纯数字带#和* -->
<input type="tel">
 
<!-- 纯数字 -->
<input pattern="\d*">

  唤醒原生应用 通过location.href与原生应用建立通讯渠道，这种页面与客户端的通讯方式称为URL Scheme，其基本格式为scheme://[path][?query]，笔者曾经发表过《H5与App的通讯方式》讲述URL Scheme的使用。 scheme：应用标识，表示应用在系统里的唯一标识 path：应用行为，表示应用某个页面或功能 query：应用参数，表示应用页面或应用功能所需的条件参数 URL Scheme一般由前端与客户端共同协商。唤醒原生应用的前提是必须在移动设备里安装了该应用，有些移动端浏览器即使安装了该应用也无法唤醒原生应用，因为它认为URL Scheme是一种潜在的危险行为而禁用它，像Safari和微信浏览器。还好微信浏览器可开启白名单让URL Scheme有效。 若在页面引用第三方原生应用的URL Schema，可通过抓包第三方原生应用获取其URL。

1
2
3
4
5
6
7
8
9
10
11
<!-- 打开微信 -->
<a href="weixin://">打开微信</a>
 
<!-- 打开支付宝 -->
<a href="alipays://">打开支付宝</a>
 
<!-- 打开支付宝的扫一扫 -->
<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫</a>
 
<!-- 打开支付宝的蚂蚁森林 -->
<a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>

  禁止页面缩放 在智能手机的普及下，很多网站都具备桌面端和移动端两种浏览版本，因此无需双击缩放查看页面。禁止页面缩放可保障移动端浏览器能无遗漏地展现页面所有布局。

1
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">

  禁止页面缓存 Cache-Control指定请求和响应遵循的缓存机制，不想使用浏览器缓存就禁止呗！

1
<meta http-equiv="Cache-Control" content="no-cache">

  禁止字母大写 有时在输入框里输入文本会默认开启首字母大写纠正，就是输入首字母小写会被自动纠正成大写，特么的烦。直接声明autocapitalize=off关闭首字母大写功能和autocorrect=off关闭纠正功能。

1
<input autocapitalize="off" autocorrect="off">

  针对Safari配置 贴一些Safari较零散且少用的配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 设置Safari全屏，在iOS7+无效 -->
<meta name="apple-mobile-web-app-capable" content="yes">
 
<!-- 改变Safari状态栏样式，可选default/black/black-translucent，需在上述全屏模式下才有效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
 
<!-- 添加页面启动占位图 -->
<link rel="apple-touch-startup-image" href="pig.jpg" media="(device-width: 375px)">
 
<!-- 保存网站到桌面时添加图标 -->
<link rel="apple-touch-icon" sizes="76x76" href="pig.jpg">
 
<!-- 保存网站到桌面时添加图标且清除默认光泽 -->
<link rel="apple-touch-icon-precomposed" href="pig.jpg">

  针对其他浏览器配置 贴一些其他浏览器较零散且少用的配置，主要是常用的QQ浏览器、UC浏览器和360浏览器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 强制QQ浏览器竖屏 -->
<meta name="x5-orientation" content="portrait">
 
<!-- 强制QQ浏览器全屏 -->
<meta name="x5-fullscreen" content="true">
 
<!-- 开启QQ浏览器应用模式 -->
<meta name="x5-page-mode" content="app">
 
<!-- 强制UC浏览器竖屏 -->
<meta name="screen-orientation" content="portrait">
 
<!-- 强制UC浏览器全屏 -->
<meta name="full-screen" content="yes">
 
<!-- 开启UC浏览器应用模式 -->
<meta name="browsermode" content="application">
 
<!-- 开启360浏览器极速模式 -->
<meta name="renderer" content="webkit">

  让:active有效，让:hover无效 有些元素的:active可能会无效，而元素的:hover在点击后会一直处于点击状态，需点击其他位置才能解除点击状态。给<body>注册一个空的touchstart事件可将两种状态反转。

1
<body ontouchstart></body>

  CSS方向 自动适应布局 针对移动端，笔者通常会结合JS依据屏幕宽度与设计图宽度的比例动态声明<html>的font-size，以rem为长度单位声明所有节点的几何属性，这样就能做到大部分移动设备的页面兼容，兼容出入较大的地方再通过媒体查询做特别处理。 笔者通常将rem布局比例设置成1rem=100px，即在设计图上100px长度在CSS代码上使用1rem表示。

1
2
3
4
5
6
7
8
9
10
function AutoResponse(width = 750) {
    const target = document.documentElement;
    if (target.clientWidth >= 600) {
        target.style.fontSize = "80px";
    } else {
        target.style.fontSize = target.clientWidth / width * 100 + "px";
    }
}
AutoResponse();
window.addEventListener("resize", () => AutoResponse());

  当然还可依据屏幕宽度与设计图宽度的比例使用calc()动态声明<html>的font-size，这样就能节省上述代码。不对，是完全代替上述代码。

1
2
3
html {
    font-size: calc(100vw / 7.5);
}

  若以iPad Pro分辨率1024px为移动端和桌面端的断点，还可结合媒体查询做断点处理。1024px以下使用rem布局，否则不使用rem布局。

1
2
3
4
5
@media screen and (max-width: 1024px) {
    html {
        font-size: calc(100vw / 7.5);
    }
}

  自动适应背景 使用rem布局声明一个元素背景，多数情况会将background-size声明为cover。可能在设计图对应分辨率的移动设备下，背景会完美贴合显示，但换到其他分辨率的移动设备下就会出现左右空出1px到npx的空隙。 此时将background-size声明为100% 100%，跟随width和height的变化而变化。反正width和height都是量好的实际尺寸。

1
2
3
4
5
.elem {
    width: 1rem;
    height: 1rem;
    background: url("pig.jpg") no-repeat center/100% 100%;
}

  监听屏幕旋转 你还在使用JS判断横屏竖屏调整样式吗？那就真的Out了。

1
2
3
4
5
6
7
8
/* 竖屏 */
@media all and (orientation: portrait) {
    /* 自定义样式 */
}
/* 横屏 */
@media all and (orientation: portrait) {
    /* 自定义样式 */
}

  […]

龙生   27 Jan 2021
View Details

Copyright © 2024 Longsheng All rights reserved.