函数式编程浅析

命令式 和 声明式

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

function addOne(arr) {
  const results = []
  for (let i = 0; i < arr.length; i++){
    results.push(arr[i] + 1)
  }
  return results
}

console.log(addOne([1, 2, 3]));


function double(arr) {
  const results = []
  for (let i = 0; i < arr.length; i++){
    results.push(arr[i] * 2)
  }
  return results
}

console.log(double([1, 2, 3]));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 声明式

function addOne(arr) {
  return arr.map(item => item + 1);
}

console.log(addOne([1, 2, 3]));

function double(arr) {
  return arr.map(item => item * 2);
}

const oneArray = [1, 2, 3];
const anotherArray = double(oneArray);
// anotherArray的内容为[2, 4, 6]
// oneArray的内容依然是[1, 2, 3]

console.log(oneArray);
console.log(anotherArray);

纯函数(引用透明度Referential Transparency)

纯函数

  • 函数的执⾏过程完全由输⼊参数决定，不会受除参数之外的任何数据影响
  • 函数不会修改任何外部状态，⽐如修改全局变量或传⼊的参数对象

非纯函数

  • 改变了参数
  • 改变了全局变量
  • DOM或者AJAX操作
  • 读取用户输入，抛出异常

数据不可变(Immutable)

  • 数据一旦产生，就不可以发生变化（Immutable）。

es6中的const只是规定了变量不可发生变化，但是变量引用的对象自身可以改变。

发展历史

  • 函数式编程想要实现需要有一层软件模拟来实现数学家们设想的模型，但是在当时的硬件条件下是不被允许的。
  • 硬件的飞速发展，性能的大幅提升，让开发者们开始关注软件的可维护性，可测试性。
  • 函数式编程却能够让⼤部 分开发者不需要操⼼任务处理，所以⾮常适合分布式计算的场景

面向对象 和 函数式

面向对象

优点

  • 因为通过定义类的⽅法，可以控 制对数据的操作。

缺陷

  • ⾯向对象编程提供了⼀种持续编写烂 代码的⽅式，它让你通过⼀系列补丁来拼凑程序。
  • 不知道对象是如何变为当前状态的，因为每一个方法都有可能修改状态。无法预知如果修改了当前状态会导致哪些地方发生变化。

函数式

优点

  • 声明式，纯函数，数据不可变。

缺点

  • 难度，性能

ALL >>

Spring Boot Mysql Guide

添加依赖

主要是 spring-boot-starter-data-jpa 和 mysql-connector-java 。

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.springframework</groupId>
    <artifactId>gs-mysql-data</artifactId>
    <version>0.1.0</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.3.RELEASE</version>
    </parent>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- JPA Data (We are going to use Repositories, Entities, Hibernate, etc...) -->

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>

        <!-- Use MySQL Connector-J -->

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

添加配置

打开文件application.properties，添加以下配置。

1
2
3
spring.datasource.url=jdbc:mysql://localhost:3306/db_example
spring.datasource.username=springuser
spring.datasource.password=ThePassword

添加实体(@Entity)映射

src/main/java/hello/User.java

注意：如果id是主键则将@GeneratedValue(strategy=GenerationType.AUTO)改为@GeneratedValue(strategy=GenerationType.IDENTITY)。

hibernate在数据库生成hibernate_sequence表问题

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
package hello;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity // This tells Hibernate to make a table out of this class
public class User {
  @Id
  @GeneratedValue(strategy=GenerationType.AUTO)
  private Integer id;

  private String name;

  private String email;

	public Integer getId() {
		return id;
	}

	public void setId(Integer id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}
}

创建仓库，用来操作数据库

src/main/java/hello/UserRepository.java

CrudRepository通过@Autowired引用会自动实现crud操作。

1
2
3
4
5
6
7
8
9
10
11
12
package hello;

import org.springframework.data.repository.CrudRepository;

import hello.User;

// This will be AUTO IMPLEMENTED by Spring into a Bean called userRepository
// CRUD refers Create, Read, Update, Delete

public interface UserRepository extends CrudRepository<User, Long> {

}

创建Controller

src/main/java/hello/MainController.java

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
26
27
28
29
30
31
32
33
34
35
36
37
38
package hello;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import hello.User;
import hello.UserRepository;

@Controller    // This means that this class is a Controller
@RequestMapping(path="/demo") // This means URL's start with /demo (after Application path)
public class MainController {
	@Autowired // This means to get the bean called userRepository
	           // Which is auto-generated by Spring, we will use it to handle the data
	private UserRepository userRepository;

	@GetMapping(path="/add") // Map ONLY GET Requests
	public @ResponseBody String addNewUser (@RequestParam String name
			, @RequestParam String email) {
		// @ResponseBody means the returned String is the response, not a view name
		// @RequestParam means it is a parameter from the GET or POST request

		User n = new User();
		n.setName(name);
		n.setEmail(email);
		userRepository.save(n);
		return "Saved";
	}

	@GetMapping(path="/all")
	public @ResponseBody Iterable<User> getAllUsers() {
		// This returns a JSON or XML with the users
		return userRepository.findAll();
	}
}

Summery

  1. 创建操作数据库的Repository
  • 类名就是表名
1
public interface UserRepository extends CrudRepository<User, Long> { }
  1. 创建Entity
  • 不需要生成构造函数
1
2
3
4
5
6
// 注解实体
@Entity
// 注解主键
@Id
// 注解主键的创建方式
@GeneratedValue(strategy = GenerationType.IDENTITY)

Refs

ALL >>

Spring Boot Building a RESTful Web Service

创建项目

idea -> new project -> Spring Initializr -> check web/web dependency -> finish

创建VO

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package com.sora.rest;

public class Greeting {
    private final long id;
    private final String content;

    public Greeting(long id, String content) {
        this.id = id;
        this.content = content;
    }

    public long getId() {
        return id;
    }

    public String getContent() {
        return content;
    }
}

创建Controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package com.sora.rest;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.concurrent.atomic.AtomicLong;

@RestController
public class GreetingController {
    private static final String template = "Hello, %s! Your id is %s";

    private final AtomicLong counter = new AtomicLong();

    @RequestMapping
    public Greeting greeting(@RequestParam(value = "/greeting", defaultValue = "world") String name) {
        return new Greeting(counter.incrementAndGet(), String.format(template, name, counter.get()));
    }
}

调试

Press Option + Control + D ，编辑配置，如图所示

configuration

再次按下 Option + Control + D ，选择刚才配置的spring boot，启动。

构建

打开终端，进入项目目录，执行 ./mvnw clean package

部署执行

  1. 安装jre
1
yum install java-1.8.0-openjdk
  1. 将 target 目录下的 jar 文件copy至服务器，执行 java -jar xxxx.jar即可。
1
2
scp target/xxx.jar user@ip:xxx.jar
java -jar xxx.jar

Summery

  1. 创建REST项目需要添加 spring-boot-starter-web 依赖
1
2
3
4
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>
  1. 通过注解的方式关联API请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@RestController

// 映射路径，方法，默认值等
@RequestMapping
@GetMapping
@PostMapping
@PutMapping
@DeleteMapping

// 映射参数
@RequestParam
@RequestBody

// 映射返回值
@ResponseBody

Refs

-How to install Java on CentOS 7
-Building a RESTful Web Service

ALL >>

2018 年中总结

前言

转眼18年已经过半，到公司已经快一年了。从年初到现在的这半年间切实体会到了什么叫做痛并快乐着。从做寄养开始，压力就一直伴随在身边。用新技术处理新业务这一选择，直接导致我们前端开发人员一度崩坏。但是，自己做出的选择，含着泪也要把它搞定！不过，现在回想起来，那真的是一段弥足珍贵的体验，同事的鼓励和领导的宽容，让我坚持了下去。如果不一鼓作气往前走，那么自己永远迈不出那一步。这股魄力成为了我人生中宝贵的一笔财富。

主要工作

这半年来主要工作都集中在了angular的应用上，从做猫窝开始时的基础试运行，到后来做寄养开始的正式技术迁移，大体成果如下：

架构

核心思想是分层架构，层内独立，层间通过接口通信。

  • lib 公共ts库，所有项目通用
    • net
    • util
    • error
    • pipe
  • style 公共样式库，所有项目通用
    • material-theming
    • icon
    • animation
    • support
    • plugin
    • mobile
    • wechat
    • mini-program
    • pc
  • matrial angular material库
    • amap
    • calendar
    • card
      • check
      • delete
      • loading
    • date-range-picker
    • dialog
      • confirm
      • success
      • table
    • layout
    • loading
    • nav
    • table
    • tree
    • upload
  • flux pc端数据层
  • redux 移动端数据层
  • common 原子业务层，微服务基础
  • saas 聚合业务层

模块化

AMD -> ESM

在angularjs时期，我们是用的AMD(requirejs)模块化方案，解决了按需加载问题，但是随着构建工具（gulp，webpack，rollup等）的不断发展，ESM逐渐成为主流。Angular 框架本身使用的TS，其模块化方案是ESM的超集。

组件化

directive -> Component

angularjs中使用的directive作为组件化的基础，而在angular中则是使用 Module，Component, Directive 来适用不用的组件化场景。

规范化

htmlhint, stylelint, eslint, tslint

使用语言对应的lint插件来规范代码风格，保证代码的可读性和一致性。

git flow

使用git flow分支管理模型，让多人协作，分支管理变得清晰有序。

跨平台

PC端，移动端，小程序使用同一套架构设计。

  • bin中存放了项目相关shell脚本
  • dist编译后文件所在目录
  • projects目录存放了所有库项目，负责独立的业务。
  • src项目源代码
1
2
3
4
5
6
7
8
9
10
11
12
13
▾ bin/
▸ dist/
▸ node_modules/
▾ projects/
  ▸ common/
  ▸ flux/
  ▸ lib/
  ▸ material/
▾ src/
  ▸ app/
  ▸ assets/
  ▸ environments/
  ▸ style/

经验教训

时间评估

细节与依赖都需要自己不断去挖掘才能考虑得详细，如果只是想当然的评估，那么事情的结果往往会变得很糟糕。

三个臭皮匠抵过一个诸葛亮

在使用新技术的过程中，经常闭门造车，导致自己走了很多弯路。以后遇到类似问题一定要多与别人讨论。

思考

这一年做了太多的东西，却思考得太少，没有理解到技术的原理，深深地陷入了码农深渊，不知道为什么这么做，为什么这样设计。每次从需求到研发，都是拿着设计图，思考实现这个东西要怎么做，时间可控不，要花多少时间，有什么风险，需要什么依赖，哪些东西可以复用等等。但是，产品初衷是什么？解决了用户什么刚需？为什么设计师要这样子设计？后端数据库怎么设计的？为什么要给这样的数据结构？这些往往难以接触，即使有机会了解，也不太愿意花时间去做。很多时候都不清除源头，就开始草草动工，只着眼于自己领域的实现，结果往往就是各种返工。在以后的研发中，一定不能把自己仅仅定位为“前端”工程师，应当从更为宏观，更为根本的角度去考虑事情。

未来

测试

目前单元测试已经有了眉目，使用angular官方提供的 karma 和 jasmine。

自动化

这一部分是目前最为薄弱的一环，当业务达到一定复杂度时，会发现越来越多的任务都是水墨功夫，流程都是一摸一样，无非相关数据有所区别，自动化工具可以帮助我们快速创建一系列相关文件和代码，提高生产效率。

异常上报与监控

异常类型

  • 网络
  • 接口
  • 代码
  • 数据

通过线上的异常监控可以及时拿到用户的异常信息，即时修复。

全栈

年初之时就想朝着全栈发展，这半年从结果上看，离自己的目标还是有一段距离，现在后端的同事们都在朝着全栈发展，我们也不能落后。如果有相关后端业务的话，希望自己还是能够主动去争取

ALL >>

浅谈angularjs架构演进

笔者大言不惭将其称为前端架构，各位大佬可直接略过

前言（纯属乱劈柴，可直接略过）

在公司工作快一年了，收获了很多东西，学而不思则罔，思而不学则殆。都明白，智者总是一语道天机，大道至简，很多核心的设计思想往往都是非常简洁，明了的。这一年做了太多的东西，却思考得太少，没有理解到技术的原理，深深地陷入了码农深渊，不知道为什么这么做，为什么这样设计（现在老是后悔以前上大学的时候没有好好学习理论知识，书到用时方恨少）。每次从需求到研发，都是拿着设计图，思考实现这个东西要怎么做，时间可控不，要花多少时间，有什么风险，需要什么依赖，哪些东西可以复用等等。但是，产品初衷是什么？解决了用户什么刚需？为什么设计师要这样子设计？后端数据库怎么设计的？为什么要给这样的数据结构？这些往往难以接触，即使有机会了解，也不太愿意花时间去做。很多时候都不清除源头，就开始草草动工，只着眼于自己领域的实现，结果往往就是各种返工。既然看不到原理，那就先从现象入手吧，透过现象看本质。现象都不知道，还鬼的个本质？

最原始架构

ALL >>

Git Stash 保存和恢复进度

stash 使用的stack数据结构，先进先出

保存进度

1
2
3
4
5
6
7
8
9
10
11
12
# 不包括untracked的文件（比如新增的文件，不会被添加至储藏）
# untrack 的文件在stash后依然可见——即依然在工作空间中，不会被保存到stash镜像中，因此对 untrack 文件的修改不能通过 stash pop 恢复——因为该命令不暂存未track的文件
git stash

# 添加 message
git stash save 'message...'

# 添加(untracked)暂存区的文件（新增的文件会被移动至储藏）
git stash save -u 'message...'

# 添加所有(--all)文件（包括.gitignore中忽略的文件)（比如node_modules，执行该命令后就也会被移除了，可以看作刚clone下来时的状态）
git stash save -a 'message...'

查看进度列表

1
2
git stash list
# stash@{0}: WIP on master: ef0f1dc message...

恢复进度

1
2
3
4
5
6
7
8
9
10
# 恢复至最新进度并且删除
git stash pop

# 指定进度index
# 这里的 3 指的 git stash list 显示的列表里 stash@{3} 中括号里面的数字
git stash pop 3

# 恢复但不删除
git stash apply
git stash apply 3

删除进度

1
2
3
4
5
6
7
8
# 删除最新进度
git stash drop

# 指定进度index
git stash drop 3

# 删除所有进度
git stash clear

从储藏中创建分支

1
2
# 创建一个新的分支，检出你储藏工作时的所处的提交，重新应用你的工作，如果成功，将会丢弃储藏
git stash branch stash/branchName 3

Refs

ALL >>

docker flow

Flow

  • 导入镜像
1
docker import centos-ng-0.0.2.tar centos:ng-0.0.2
  • 运行容器
1
2
3
4
docker run -it -d --name centos-ng-v0.0.2 \
  -p 127.0.0.1:7203:7203 -p 127.0.0.1:7204:7204 \
  --volume /Users/liuxin/docker/centos-ng:/opt/petkit \
  centos:ng-0.0.2 bash
  • 进入容器终端
1
docker exec -it centos-ng-v0.0.2 bash
  • 退出终端
1
$ exit
  • 启动／停止容器
1
2
docker start centos-ng-v0.0.2
docker stop centos-ng-v0.0.2
  • 查看所有容器
1
docker ps -a
  • 删除容器
1
docker rm centos-ng-v0.0.2
  • 从容器导出镜像
1
docker export -o centos-ng-0.0.2.tar a843ae730779

ALL >>

centos 7 设置 yum 换源

1. 备份 CentOS-Base.repo

1
mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak

2. 替换 /etc/yum.repos.d/CentOS-Base.repo 内容

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
# CentOS-Base.repo
#
# The mirror system uses the connecting IP address of the client and the
# update status of each mirror to pick mirrors that are updated to and
# geographically close to the client.  You should use this for CentOS updates
# unless you are manually picking other mirrors.
#
# If the mirrorlist= does not work for you, as a fall back you can try the 
# remarked out baseurl= line instead.
#
#
 
[base]
name=CentOS-$releasever - Base - mirrors.aliyun.com
failovermethod=priority
baseurl=http://mirrors.aliyun.com/centos/$releasever/os/$basearch/
        http://mirrors.aliyuncs.com/centos/$releasever/os/$basearch/
#mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=os
gpgcheck=1
gpgkey=http://mirrors.aliyun.com/centos/RPM-GPG-KEY-CentOS-7
 
#released updates 
[updates]
name=CentOS-$releasever - Updates - mirrors.aliyun.com
failovermethod=priority
baseurl=http://mirrors.aliyun.com/centos/$releasever/updates/$basearch/
        http://mirrors.aliyuncs.com/centos/$releasever/updates/$basearch/
#mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=updates
gpgcheck=1
gpgkey=http://mirrors.aliyun.com/centos/RPM-GPG-KEY-CentOS-7
 
#additional packages that may be useful
[extras]
name=CentOS-$releasever - Extras - mirrors.aliyun.com
failovermethod=priority
baseurl=http://mirrors.aliyun.com/centos/$releasever/extras/$basearch/
        http://mirrors.aliyuncs.com/centos/$releasever/extras/$basearch/
#mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=extras
gpgcheck=1
gpgkey=http://mirrors.aliyun.com/centos/RPM-GPG-KEY-CentOS-7
 
#additional packages that extend functionality of existing packages
[centosplus]
name=CentOS-$releasever - Plus - mirrors.aliyun.com
failovermethod=priority
baseurl=http://mirrors.aliyun.com/centos/$releasever/centosplus/$basearch/
        http://mirrors.aliyuncs.com/centos/$releasever/centosplus/$basearch/
#mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=centosplus
gpgcheck=1
enabled=0
gpgkey=http://mirrors.aliyun.com/centos/RPM-GPG-KEY-CentOS-7
 
#contrib - packages by Centos Users
[contrib]
name=CentOS-$releasever - Contrib - mirrors.aliyun.com
failovermethod=priority
baseurl=http://mirrors.aliyun.com/centos/$releasever/contrib/$basearch/
        http://mirrors.aliyuncs.com/centos/$releasever/contrib/$basearch/
#mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=contrib
gpgcheck=1
enabled=0
gpgkey=http://mirrors.aliyun.com/centos/RPM-GPG-KEY-CentOS-7

3. Install epel

1
yum install epel-release

4. 替换 /etc/yum.repos.d/epel.repo 内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
[epel]
name=Extra Packages for Enterprise Linux 7 - $basearch
baseurl=https://mirrors.tuna.tsinghua.edu.cn/epel/7/$basearch
failovermethod=priority
enabled=1
gpgcheck=1
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL-7

[epel-debuginfo]
name=Extra Packages for Enterprise Linux 7 - $basearch - Debug
baseurl=https://mirrors.tuna.tsinghua.edu.cn/epel/7/$basearch/debug
failovermethod=priority
enabled=0
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL-7
gpgcheck=1

[epel-source]
name=Extra Packages for Enterprise Linux 7 - $basearch - Source
baseurl=https://mirrors.tuna.tsinghua.edu.cn/epel/7/SRPMS
failovermethod=priority
enabled=0
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL-7
gpgcheck=1

ALL >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

嗯？ 嗯～