前置阅读: macOS 下 Nginx 安装及设置

近期在部分开发场景中，需要使用的 HTTPS 环境，故研究了下 macOS 下 Nginx HTTPS 环境配置。
( HTTPS 相关知识可自行了解 )

创建自定义 SSL 证书

之前在服务器上一直使用 Let’s Encrypt 的 Certbot 脚本一键安装，但是发现本地并无法正确申请证书和使用。
在搜索相关教程和对比之后，发现可以通过 OpenSSL 生成证书或直接使用 mkcert 简易生成证书。

本文主要针对 mkcert 如何创建证书及使用。

安装
使用 macOS 上的 Package Manager - HomeBrew 来安装 mkcert。

1
2

$ brew install mkcert
$ brew install nss # if you use Firefox

创建根证书
创建根证书 CA ( Certificate Authority，即证书颁发机构 )，可以运行以下命令

1
2
3
4
5
6

$ mkcert -install

# 成功安装后输出
# Using the local CA at "/Users/Tuzkiss/Library/Application Support/mkcert" ✨
# The local CA is now installed in the system trust store! ⚡️
# The local CA is already installed in the Firefox trust store! 👍

安装后使用 Keychain Access App 查看安装的证书，点击具体证书可以查看更详细信息：

创建自签名证书
例如需要针对 tuzkiss.com 、localhost 等域名生成自签名证书，则可以运行以下命令：

1
2
3
4
5
6
7
8
9
10

$ mkcert tuzkiss.com localhost 127.0.0.1

# 成功安装后输出
# Using the local CA at "/Users/Tuzkiss/Library/Application Support/mkcert" ✨
# Created a new certificate valid for the following names 📜
# - "tuzkiss.com"
# - "localhost"
# - "127.0.0.1"

# The certificate is at "./tuzkiss.com+2.pem" and the key at "./tuzkiss.com+2-key.pem" ✅

成功创建之后，会在该目录下生成如下两个文件：

• 证书 tuzkiss.com+2.pem
• 私钥 tuzkiss.com+2-key.pem

你可以手动跟改这两个文件名，例如:

1
2

tuzkiss.com+2.pem  -> Tuzkiss-SSL.pem
tuzkiss.com+2-key.pem  -> Tuzkiss-SSL-Key.pem

或者可以直接通过 mkcert 中命令参数创建:

1

$ mkcert -cert-file Tuzkiss-SSL.pem -key-file Tuzkiss-SSL-Key.pem tuzkiss.com localhost 127.0.0.1

最终都会生成如下两个文件:

至此，自定义 SSL 证书均已创建完毕。

更多 mkcert 详细使用可查看：https://github.com/FiloSottile/mkcert

年中在 Apple 更新了 MacBook Pro 2019 之后，终于还是没忍住下单了 15 寸次顶配，于是手中的 MacBook Pro 13-inch Early 2015 理所当然的退休了。

之前一直使用 WebStorm 作为主力 IDE，但是鉴于之前 MacBook Pro 2015 性能有所欠缺，在后期的使用中存在些长时间使用卡顿的现象，所以准备在新 MacBook Pro 2019 上使用 VS Code 来作为新的 IDE。（ 当然这一块选择上也各有所爱，不必强求。）

俗话说得好，工欲善其事，必先利其器。
所以，在这总结并记录下在使用 VS Code 编辑器中的一些设置与技巧。

相关环境及版本地址:
macOS Mojave 10.14.5 (18F132)
Visual Studio Code 1.36.1 (1.36.1)
Alfred 4 4.0.3

安装 Nginx

使用 macOS 上的 Package Manager - HomeBrew 来安装 Nginx。

如果还未安装 HomeBrew, 可以自行登录官网安装。https://brew.sh/
或者在 Terminal 运行如下脚本: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

正式安装 Nginx 在 Terminal 中运行如下命令:

1

$ brew install nginx

等待安装完成之后，可以通过 $ nginx -h 来查看可使用命令，如下图：

运行以下命令开启 Nginx 服务

1

$ nginx

此时打开 http://localhost/ 或 http://127.0.0.1 查看是否 Nginx 是否正常运行。

nginx -s 中参数说明:

1 2 3 4

stop — fast shutdown quit — graceful shutdown reload — reloading the configuration file reopen — reopening the log files

如果是其他 Linux 系统，安装类似。

现在是北京时间的2017年11月21日23:47:37，从东欧回来的第170天，拖了半年的游记，终于在今天又被我提上日程。

也许是最近有些莫名的小情绪无处诉说，所以才又想起来，写点东西好了。

到了🇩🇪柏林的第一天晚上，稍微休息了之后，就准备出去觅食。出门的第一个路口，看到一辆粉色的单车，瞬间有点少女心爆棚。让我想起那辆陪伴我度过美好岁月的死飞，也许一直莫名的对纯色的单车有好感。

从东欧回来的第三天，北京世界的2017年06月07日23:39:50，休息了两天，终于在今天有空静下来好好回顾下这次旅行。

世界那么大，我想去看看。

一、概述

开发语言： HTML + [email protected] + [email protected]
依赖项： 第三方组件flv.js + 第三方开源插件
构建工具： [email protected]

目的： 编译混淆打包源码及素材，并打包合并第三方文件成单个文件。

__ 问题：__
1、 如何对源码文件混淆打包，第三方文件仅打包，最终再将这两部分打包成单个文件？
2、如何对源码部分进行深度混淆？
3、 如何设计多种工作流适应多种开发调试环境？

__ 设想：__
1、定制webpack工作流，大致如下图：

一、架构

背景： 页面中需要使用Flash播放器或HTML5播放器，同时播放器会与页面进行某些交互。已知调用Flash播放器的方法和HTML5播放器的方法不一致，尽量少改动页面前端代码。

设想： 建立一个第三方播放器加载容器文件，通过播放器加载容器文件来加载Flash播放器或HTML5播放器，同时暴露出部分API与页面交互。如下图：

跨域

写过Ajax一般都知道，通过XHR实现Ajax通信的一个主要限制就是跨域安全策略

当然，有些开发中必然少不了跨域开发的问题，所以就出现了CORS

1、CORS

CORS （Cross-orgin Resource Sharing） 跨域资源共享。

CORS的基本思想是，使用自定义的HTTP头部信息让浏览器跟服务器沟通，从而决定请求或相应的成功或失败。

有那么两个跨域可能造成的危害

CSRF (Cross-site Resource Forgery) 跨站点请求伪造
XSS (Cross-site Scripting) 跨站点脚本

当然，目前主流的浏览器都支持XHR的CORS，但是需要服务端的配合修改。那么，机智的前端们总会想出写完美解决的方法，例如JSONP。

三、闭包生成唯一ID

1
2
3
4
5
6
7
8

var createUniqueId = function () {
    "use strict";

    var _id = 0;
    return function () {
        return _id ++;
    };
};

1
2
3
4
5
6

var createId = createUniqueId();

createId(); // 0
createId(); // 1
createId(); // 2
createId(); // 3

上述代码挺简单的，但是要理解闭包原理还是蛮复杂的。

之前总结了基本类型的判断和检测，现在来总结下Javascript中对象的原型和继承

二、对象与原型

首先建立各一个简单的对象

1
2
3
4
5
6
7
8

var person = new Object();
person.name = 'tuzkiss';
person.age = 24;
person.job = 'Front-end developer';

person.sayHi = function () {
    alert(this.name)
};

在ECMAScript中有两种属性，数据属性和访问器属性。