深度学习概述

本人没看过任何深度学习概述资料,下面的话都是根据我参考各样模型后瞎诌出来的。

在大家都过着七夕看喜鹊的时候,本鸽忽然想起了本组还没更新博客,看了下发现进度居然还没更新到深度学习(别说了,我发现传统的机器学习算法也没搞),于是打算开始挖个深度学习坑。

AI现状

要说现在的AI,基本都在搞深度学习(为什么,因为无敌啊)。传统的机器学习算法算法效果在目前的一些问题上往往非常复杂,而且效果很差,很多算法已经发展的比较饱和,性能上很难有大突破。但深度学习是机器学习上比较新的领域,结构比较统一(但有些还是复杂),训练过程简单(但时间仍然长),发展迅速(主要是钱多)一线的研究人员多(论文好混)。于是本组的学习现在基本都从传统算法向深度学习靠近。

深度学习和传统机器学习算法的区别

传统机器学习算法基本都在分类、聚类等问题做了些模型,在分类问题上做的比较多(因为很多问题都可以转化为分类问题),要说有什么可以随便翻翻书有一大堆。在分类问题上,一个模型预测一条数据的过程基本是这样的
<!–more–>
特征->分类结果

也就是给一个模型数据特征,然后模型返回出他的结果。看起来简单,但实际问题中,特征往往不好确定。比如简单的iris数据(鸢尾花卉数据),每条数据只有4个属性(花萼长度,花萼宽度,花瓣长度,花瓣宽度),那这4个数据都可以作为特征进行学习。但如果是320*240像素的一张图片,把像素拉成一个向量,有76,800个像素,全用作特征的话特征数量就非常大了,即使有各种降维算法,效果和速度仍然会非常慢。所以有人想出了简单的方法,使用一种设计好的特征提取器,用这个特征提取器从原始图片中提取特征,这样就可以疯狂减少特征量。(和之前文章中的haar算法很像,从图片提取人脸特征的就是一种)但这样就会出现另外一种问题:如何设计这个特征提取器,不同的提取器最终分类效果各异,要找出非常好用的实际上非常困难。最难受的是这个特征提取器不容易迁移,在一个问题上表现非常好的提取器,在另外一个问题上可能就不行。
至此,深度学习概念可以比较好解决这个问题。研究发现,一段声音可以分解成数个基础波(复变函数学的好的同学已经可以理解了,此处不多加解释,不懂的同学可以翻阅傅里叶变换),同样,图像也可以(二维的傅里叶变换),从这个角度设计滤波器,把图像分解成无数个(理想模型是无数个,实际上受限于机器)正交纹理(正交纹理是我随便叫的)的叠加,统计每个正交纹理的数量,把这个数量作为特征进行分类。同时这个滤波器作为特征提取器是由参数构成的,分类模型通过学习训练调整参数,特征提取器也同样可以。在训练过程中调整特征提取器的参数,从而提取出更加正交的特征,这就是深度学习特有的地方。也就是说,深度学习预测数据的过程是这样的

原始数据->特征->分类结果

这样考虑,不同的问题,只需要训练一遍,他就能自动训练出一个好用的提取器,而且有比较好的迁移能力(大部分深度学习模型都通过预训练加快学习速度)因此,深度学习在图像、视频、文字处理上都有比传统机器学习更好的表现。

有关层叠上下文和层叠顺序的理解

在网页中的内容发生层叠的时候,一定有前后的层叠顺序产生(如下),所以我们这就需要我们理解css里的层叠上下文和层叠顺序。

一、层叠上下文

层叠上下文,英文称作”stacking context”. 是HTML中的一个三维的概念。如果一个元素含有层叠上下文,我们可以理解为这个元素在z轴上有较高等级。

那么z轴是什么呢?

在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的X轴Y轴以及表示层叠的Z轴。一般情况下,元素在页面上沿X轴Y轴平铺,我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠,这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。

如果一个元素含有层叠上下文,(也就是说它是层叠上下文元素),我们可以理解为这个元素在Z轴上就“高人一等”,最终表现就是它离屏幕观察者更近。

换句话说,页面中的元素有了层叠上下文,就等同于网页中元素级别更高,离我们用户更近了。
<!–more–>

二、层叠水平

“层叠水平”英文称作”stacking level”(也有翻译为“层叠等级”),它决定了同一个<u>层叠上下文</u>中元素在z轴上的显示顺序。

所有的元素都有层叠水平,包括“层叠上下文元素”,层叠上下文元素的层叠水平可以理解为官员的职级,1品2品,县长省长之类。然后,对于普通元素的层叠水平,我们的探讨仅仅局限在当前<u>层叠上下文元素</u>中。为什么呢?

假设省长下面有1级下属和2级下属,且1级下属的等级高于2级;同样县长下也有1级下属和2级下属,所以即使省长的2级下属也是高于县长的1级下属的。类似地,因为层叠上下文已经比普通元素的级别要高,这时候即使普通元素的层叠水平高于层叠上下文的层叠水平也无济于事。

结论:普通元素的层叠水平优先由其层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义。不同层叠上下文中比较层叠水平是没有意义的。

三、创建层叠上下文

创建的3种途径:

  1. 根层叠上下文:HTML中的根元素“本身具有层叠上下文,称为“根层叠上下文”。
  2. 定位元素与传统层叠上下文:普通元素设置position属性为static值并设置z-index属性为具体数值,产生层叠上下文。
  3. CSS3中的新属性也可以产生层叠上下文(在本文末尾会写出)

需要注意的层叠上下文特性:
– 层叠上下文的层叠水平要比普通元素高;
– 层叠上下文可以嵌套,内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
– 每个层叠上下文是自成体系的,当元素发生层叠的时候,整个元素被认为是在父层叠上下文的层叠顺序中。

创建途径2的代码示例:

a、b、c处于不同的层叠上下文中,所以根据父级的z-index大小来确定层级。在线预览地址: https://codepen.io/XingTeng/pen/xoMedL

<body>
  <div class="box1">
    <p class="a">a</p>
    <p class="b">b</p>
  </div>

  <div class="box2">
    <p class="c">c</p>
  </div>
</body>

css:

.box1,
.box2{
    width: 100px;
    height: 100px;
    position: relative;
}
.box1 {
  z-index: 2;
}
.box2 {
  z-index: 1;
}
p {
  position: absolute;
  font-size: 20px;
  width: 100px;
  height: 100px;
  color: white;
}
.a {
  background-color: blue;
  z-index: 100;
}
.b {
  background-color: green;
  top: 20px;
  left: 20px;
  z-index: 200;
}
.c {
  background-color: red;
  top: -20px;
  left: 40px;
  z-index: 999;
}

box元素原本为普通元素,但通过设置position属性为static值并设置z-index属性为具体数值,产生层叠上下文。虽然c元素的z-index值为999,大于abz-index值,但是由于ab的父元素div.box1z-index的值为2,c的父元素div.box2的层叠上下文的z-index值为1,所以c永远在ab下面。

四、层叠顺序

“层叠顺序”英文称作”stacking order”. 表示元素发生层叠时候有着特定的垂直显示顺序,注意,这里跟上面两个不一样,上面的层叠上下文和层叠水平是概念,而这里的层叠顺序是规则

css2时代的层叠顺序:

层叠顺序表

注意点:
1. 位于最低水平的border/background指的是层叠上下文元素的边框和背景。

  1. 原图没有呈现inline-block的层叠顺序,实际上,inline-block和inline水平元素是同等level级别。

  2. z-index:0实际上和z-index:auto单纯从层叠水平上看,是可以看成是一样的。注意这里的措辞——“单纯从层叠水平上看”,实际上,两者在层叠上下文领域有着根本性的差异。

  3. 内联元素的层叠顺序要比浮动元素和块状元素都高。 原因:border/background一般为装饰属性,而浮动和块状元素一般用作布局,而内联元素都是内容。网页中最重要的是内容。因此,一定要让内容的层叠顺序相当高,当发生层叠是很好,重要的文字啊图片内容可以优先暴露在屏幕上。

五、有关层叠问题的“套路”

当元素发生层叠的时候,我们可以根据下面2条准则进行判断:
1. 如果在同一个层叠上下文领域,当具有明显的层叠水平标示的时候,如识别的z-index值,层叠水平值大的那一个覆盖小的那一个。

  1. 当元素的层叠水平一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。

代码示例:

<div class="box3">
    <div class="d">d</div>
  </div>

  <div class="box4">
    <div class="e">e</div>
  </div>

css:

.box3,
.box4 {
  width: 100px;
  height: 100px;
  position: relative;
  z-index: auto;
  left: 300px;
  top: -180px;
}

.d {
    width: 200px;
    height: 100px;
    background: #168bf5;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.e {
    width: 100px;
    height: 150px;
    background: #32c292;
    position: absolute;
    top: -50px;
    left: 0;
    z-index: 1;
}

box3和box4虽然设置了position: relative,但是z-index: auto的情况下,这两个div还是普通元素,并没有产生层叠上下文。所以,d和e属于“元素的“根层叠上下文”中,此时,谁的z-index值大,谁在上面

六、css3下的新时代的层叠上下文

CSS3的出现除了带来了新属性,同时还对层叠上下文产生新的影响。

如下:

  1. z-index值不为autoflex项(父元素display:flex|inline-flex),子元素z-index属性值不为auto的时候,子元素为层叠上下文元素;
  2. 元素的opacity值不是1.
  3. 元素的transform值不是none.
  4. 元素mix-blend-mode值不是normal.
  5. 元素的filter值不是none.
  6. 元素的isolation值是isolate.
  7. will-change指定的属性值为上面任意一个。
  8. 元素的-webkit-overflow-scrolling设为touch.

以第一条为例:

<div class="box5">
    <div class="f">f
        <div class="g">g</div>
    </div>
</div>
.f {
  width: 200px;
  height: 100px;
  background: #cac719;
  /* 虽然设置了z-index,但是没有设置box5的position,z-index无效,.f还是普通元素,没有产生层叠上下文 */
  z-index: 1;
}

.g {
  width: 100px;
  height: 200px;
  background: #e767e1;
  position: relative;
  z-index: -1;
}

f在g上方显示了。我们查找层叠顺序图可以找到,负值z-index的层叠顺序在block水平元素的下面,而黄色背景div元素是个普通的block元素,于是z-index小于0的g会被f覆盖。

上面的例子,如果修改.box5的属性,其余DOM不变:

.box5 {
    display: flex;
}

当给.box5设置display: flex时,.f就变成层叠上下文元素,根据层叠顺序规则,层叠上下文元素的background/border的层叠等级小于z-index值小于0的元素的层叠等级,所以z-index值为-1.g.f上面。

总结

本文整理了关于层叠方面的一些基本知识点,一些细节的应用还需要平时的积累。

参考资料:

张鑫旭-《深入理解CSS中的层叠上下文和层叠顺序》

AMInInsist-《CSS 中的z-index属性》

设计模式之工厂模式:简单工厂&工厂方法&抽象工厂

背景

设计模式有3大类,分为:创建型模式结构型模式行为型模式。工厂模式属于创建型模式,创建型模式提供了一种在创建对象的同时隐藏创建逻辑的方式,而不是使用 new运算符直接实例化对象。这使得程序在判断针对某个给定实例需要创建哪些对象时更加灵活。

简单工厂

描述:定义一个类用于创建父类相同的子类对象,由传入参数决定创建哪个子类。
简单工厂
举个例子,我喜欢玩游戏。定义一个Game接口,让具体的游戏去实现这个接口
继续阅读设计模式之工厂模式:简单工厂&工厂方法&抽象工厂

sql注入小结

0.原理及简介

  • sql注入为web系统特有的漏洞.源于php,asp等脚本语言对用户输入数据和解析时的缺陷.如果用户的输入能够影响到脚本中sql命令串的生成,以php语言为例子,在字符串中添加了单引号或#号等转义字符后,能够改变数据库最终执行的sql命令.
  • sql注入的精髓在于构造精妙的注入命令串,分析服务器的反馈,猜测出数据库的每个表的关系,最后彻底攻破数据库.
  • 现在最常见的网站类型组合为:asp+sql server与php+mysql,本小结简要总结一下对这两种网站类型常用的攻击方式.
    继续阅读sql注入小结

Vue生命周期

前言

文章是对整个Vue生命周期,以及在不同生命周期的过程中所发生的一些过程,以及一些简单的原理。涉及响应式,依赖收集,template编译,patch机制,diff算法。当然本篇文章只是简单梳理了一下过程,每一个部分并没有详细介绍,因为每一个部分的实现都是一个篇幅很长的东西。而且下面整理的很乱,估计只有我自己能看懂吧,后面有时间会重新整理一遍发上来。

继续阅读Vue生命周期

[SpringBoot] 使用 slf4j+logback 配合 aop 做日志记录

需要大致了解:java日志基础,如核心组件Loggers,Appenders,Layouts的用处、SpringAOP概念

为什么需要日志

当应用程序部署到服务器上运行时,用户在使用过程中可能会出现各种错误。这时应用程序将错误信息生成日志,就方便了开发人员快速定位错误和根源,从而进行有针对的维护。所以,在大型应用程序中,日志记录是必不可少的。
继续阅读[SpringBoot] 使用 slf4j+logback 配合 aop 做日志记录

分享几个好用的设计相关工具

  • texter
    http://tholman.com/texter/
    文字内容配色都可自选,根据力度大小文字大小也不同,可用来作为背景的点缀或者标题的突出

  • word2art
    http://word2art.com/
    可以自由生成中文和英文排版,当面对文字内容很多又没有想法的时候可以来这边自动生成然后参考一下机器的排版然后自己更改

  • textify
    http://textify.it/
    是一个将文字碎片化的网站,背景图和颜色可以自由导入,文字内容大小密度都可以调整,自由性很高可以去探索一下,当背景不知道用什么的时候或者背景太空想填充点什么,这些都是很好的选择

正则表达式

正则表达式的作用

正则表达式(Regular Expression)是一种文本模式,包括普通字符(例如, a 到 z 之间的字母)和特殊字符(称为”元字符”)。

正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。

正则表达式是繁琐的,但它是强大的,学会之后的应用会让你除了提高效率外,会给你带来绝对的成就感。只要认真阅读本教程,加上应用的时候进行一定的参考,掌握正则表达式不是问题。

许多程序设计语言都支持利用正则表达式进行字符串操作,在此我们以 python 的正则表达式模块为例。
继续阅读正则表达式