4 月数据库流行度排行榜：三巨头分数暴跌

DB-Engines 4 月份流行度排行已更新（基于 3 月份的整体数据变化）。 从总榜来看，前十数据库的排名和上个月保持一致。虽然排名没有变动，但单个数据库的分数却变化不少。稳居前三的 Oracle、MySQL 和 Microsoft SQL Server 分数出现了较大幅度的下跌，分别减少 46.82、34.14 和 7.33 分。其中 SQL Server 分数已经连续下跌了两个月。若与去年同期的数据相比，三者下跌的分数平均已达到 64 分。 后起之秀 PostgreSQL 和 MongoDB 依旧保持着稳步上升的趋势，分数与上个月相比有小幅度增加，与去年同期相比也平均增加了 40 分左右。 ▲ 前十数据库的分数变化走向 对于排名 20 之后的数据库，以年为维度，排名显著上升的数据库有 Snowflake 和 Clickhouse，Snowflake 由去年同时期的第 100 名上升到现在的第 29 名，后者也从第 71 名上升至第 50 名。两者都属于云数据仓库，Snowflake 的母公司去年上市后更是获得巴菲特青睐，股价飙升。相信这也是它排名上升的主要原因。 最后看看各类型 […]

（几乎）完美实现 el-table 列宽自适应

背景 Element UI 是 PC 端比较流行的 Vue.js UI 框架，它的组件库基本能满足大部分常见的业务需求。但有时候会有一些定制性比较高的需求，组件本身可能没办法满足。最近在项目里就碰到了。 很多页面都需要用到表格组件el-table。如果没有给el-table-column指定宽度，默认情况下会平均分配给剩余的列。在列数比较多的情况，如果el-table宽度限定在容器内，单元格里的内容就会换行。强制不换行，内容要么在单元格内滚动，要么就会溢出或被截断。 产品想要的效果是：内容保持单行显示，列间距保持一致，表格超出容器允许水平滚动。el-table-column是支持设置固定宽度的，在内容宽度可预知的情况下，也能满足这个需求。问题就在于如何让列宽动态适应内容的宽度。在官方文档也没找到这样的选项，应该是组件本身不支持。 技术方案 于是想到了动态计算内容宽度的方案。网上也有人提过这个思路，做法是根据内容字符数来计算宽度。这种方法有几个局限： 内容必须是文本 不同字符宽度不一，结算结果不够准确 需要在渲染前操作数据，不利于解耦 我采用了另一种思路，还是动态计算内容宽度，但是根据实 […]

js 日期时间的格式化

将日期时间转换为指定格式，如：YYYY-mm-dd HH:MM表示2019-06-06 19:45

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function dateFormat(fmt, date) {
    let ret;
    const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
    };
    return fmt;
}

  用法：

1
2
3
let date = new Date()
dateFormat("YYYY-mm-dd HH:MM", date)
>>> 2019-06-06 19:45`

  2020-11-23: 如果对日期时间处理的需求较多, 推荐moment.js这个日期处理类库, 简单方便. 作者：雷子_ 链接：https://www.jianshu.com/p/49fb78bca621 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Vue watch 中 this 注意事项

在watch中使用this要注意，不能用箭头函数，否则会出错，例如：

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
<template>
</template>
<script>
export default{
data(){
return {
isLogin: false
}
},
watch:{
isLogin: (newVal, oldVal) => {
newVal && this.updateLogin()
}
},
methods:{
updateLogin(){
console.log(`update login`)
}
}
}
</script>
<style scoped>
</style>

  箭头函数要改为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
<template>
</template>
<script>
export default{
data(){
return {
isLogin: false
}
},
watch:{
isLogin: function(newVal, oldVal) {
newVal && this.updateLogin()
}
},
methods:{
updateLogin(){
console.log(`update login`)
}
}
}
</script>
<style scoped>
</style>

    from:https://blog.csdn.net/liubangbo/article/details/115242420

浅谈编程范式

| 前言 相信绝大部分开发人员、DBA都听过范式这个词，在MySQL中有第一范式、第二范式、第三范式、BCNF范式等，在开发中也有相应的范式，专业词汇叫编程范式(ProgrammingParadigm)。由于笔者能力、精力都有限，本篇主要通过针对同一业务场景，基于编程范式的概念，核心原理以及用例实现来对比不同范式及其实现业务功能的差异。 范式分类 如图1所示，范式可以简单分为三类: 图1: 范式的简单分类   范式和语言的关系 图2: 范式和语言的关系   与成百种编程语言相比，编程范式要少得多，如图2所示，共有27种范式。多数范式之间仅相差一个或几个概念，比如图中的函数编程范式，在加入了状态（state）之后就变成了面向对象编程范式。   | 编程范式 图3: 华山派剑气之争 过程式编程的核心在于模块化，在实现过程中使用了状态，依赖了外部变量，导致很容易影响附近的代码，可读性较少，后期的维护成本也较高。 函数式编程的核心在于“避免副作用”，不改变也不依赖当前函数外的数据。结合不可变数据、函数是第一等公民等特性，使函数带有自描述性，可读性较高。 面向对象编 […]

泛型编程

泛型编程（Generic Programming）最初提出时的动机很简单直接：发明一种语言机制，能够帮助实现一个通用的标准容器库。 所谓通用的标准容器库，就是要能够做到，比如用一个List类存放所有可能类型的对象这样的事；泛型编程让你编写完全一般化并可重复使用的算法，其效率与针对某特定数据类型而设计的算法相同。泛型即是指具有在多种数据类型上皆可操作的含义，与模板有些相似。 STL巨大，而且可以扩充，它包含很多计算机基本算法和数据结构，而且将算法与数据结构完全分离，其中算法是泛型的，不与任何特定数据结构或对象类型系在一起。   from:https://baike.baidu.com/item/%E6%B3%9B%E5%9E%8B%E7%BC%96%E7%A8%8B/6787248?fr=aladdin

指令式编程

命令式编程（英语：Imperative programming），是一种描述计算机所需作出的行为的编程典范。 几乎所有计算机的硬件工作都是命令式的；几乎所有计算机的硬件都是设计来运行机器码，使用命令式的风格来写的。 较高阶的命令式编程语言使用变量和更复杂的语句，但仍依从相同的典范。 虽非计算机程序，但与命令式编程有相似的风格：每步都是指令，有形的世界控制情况。 因为命令式编程的基础观念，不但概念上比较熟悉，而且较容易具体表现于硬件，所以大部分的编程语言都是命令式的。   from:https://baike.baidu.com/item/%E6%8C%87%E4%BB%A4%E5%BC%8F%E7%BC%96%E7%A8%8B/22934771?fr=aladdin

函数式编程

函数式编程是种编程方式，它将电脑运算视为函数的计算。 函数编程语言最重要的基础是λ演算（lambda calculus），而且λ演算的函数可以接受函数当作输入（参数）和输出（返回值）。  和指令式编程相比，函数式编程强调函数的计算比指令的执行重要。 和过程化编程相比，函数式编程里函数的计算可随时调用。 from:https://baike.baidu.com/item/%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BC%96%E7%A8%8B/4035031?fr=aladdin

CSS 单位 2

CSS 有几个不同的单位用于表示长度。 一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。 长度有一个数字和单位组成如 10px, 2em, 等。 数字与单位之间不能出现空格。如果长度值为 0，则可以省略单位。 对于一些 CSS 属性，长度可以是负数。 有两种类型的长度单位：相对和绝对。 浏览器支持 下表中的数字表示支持该长度单位的最低浏览器版本。 长度单位 Chrome IE Firefox Safari Opera em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5 ch 27.0 9.0 1.0 7.0 20.0 rem 4.0 9.0 3.6 4.1 11.6 vh, vw 20.0 9.0 19.0 6.0 20.0 vmin 20.0 9.0* 19.0 6.0 20.0 vmax 26.0 不支持 19.0 不支持 20.0 注意: Internet Explorer 9 通过不标准的名称 vm 来支持 vmin 。 相对长度 相对长 […]

CSS cubic-bezier() 函数

实例 从开始到结束的不同速度过渡效果：

1
2
3
4
5
6
7
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

定义与用法 cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。 贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。 从上图我们需要知道的是 cubic-bezier 的取值范围:

1
2
3
4
<span class="pln">P0</span><span class="pun">：默认值</span> <span class="pun">(</span><span class="lit">0</span><span class="pun">,</span> <span class="lit">0</span><span class="pun">)</span><span class="pln">
P1</span><span class="pun">：动态取值</span> <span class="pun">(</span><span class="pln">x1</span><span class="pun">,</span><span class="pln"> y1</span><span class="pun">)</span><span class="pln">
P2</span><span class="pun">：动态取值</span> <span class="pun">(</span><span class="pln">x2</span><span class="pun">,</span><span class="pln"> y2</span><span class="pun">)</span><span class="pln">
P3</span><span class="pun">：默认值</span> <span class="pun">(</span><span class="lit">1</span><span class="pun">,</span> <span class="lit">1</span><span class="pun">)</span>

我们需要关注的是 P1 和 P2 两点的取值，而其中 X 轴的取值范围是 0 到 1，当取值超出范围时 cubic-bezier 将失效；Y 轴的取值没有规定，当然也毋须过大。 最直接的理解是，将以一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意），最后形成的曲线就是动画的速度曲线。 cubic-bezier() 可用于 animation-timing-function 和 transition-timing-fun […]

CSS calc() 函数

实例 使用 calc() 函数计算 <div> 元素的宽度:

1
2
3
4
5
6
7
8
9
#div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}

定义与用法 calc() 函数用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% – 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则； 支持版本：CSS3 浏览器支持 表格中的数字表示支持该函数的第一个浏览器版本号。 "webkit" 或 "moz" 或 "o" 指定的数字为支持该函数的第一个版本号前缀。 函数 calc() 26.0 19.0 -webkit- 9.0 16.0 4.0 -moz- 7.0 6.0 -webkit- 15.0 CSS 语法

1
<span class="pln">calc</span><span class="pun">(</span><span class="pln">expression</span><span class="pun">)</span>

值 描述 […]

三种JS截取字符串方法

转载: https://www.cnblogs.com/zccfun/p/6054533.html JS提供三个截取字符串的方法,分别是:slice(),substring()和substr(),它们都可以接受一个或两个参数: var stmp = "rcinn.cn"; 使用一个参数 alert(stmp.slice(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn" alert(stmp.substring(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn" 使用两个参数 alert(stmp.slice(1,5))//从第2个字符开始，到第5个字符；返回"cinn" alert(stmp.substring(1,5));//从第2个字符开始，到第5个字符；返回"cinn" 如果只用一个参数并且为0的话，那么返回整个参数 alert(stmp.slice(0));//返回整个字符串 alert(stmp.substring(0));//返回整个字符串 […]