神的尾巴

目前项目刚好有用到，简单看下源码

遵循 UMD 规范，在 Node 和浏览器端均可使用

判断是 Node 还是浏览器端

如果存在 require 且 window 未定义，引入 nodeWindow 模块，设置变量 document 和是否是浏览器的变量 isBrowser。

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

if (typeof require === "function" && typeof window === "undefined") {
  var NodeWindow = require("nodewindow");
  var nodeWindow = new NodeWindow();

  var win = nodeWindow.runHTML("", {}, {});

  document = win.document;
  isBrowser = false;
} else {
  document = window.document;
  isBrowser = true;
}

JSX 的解析

简单看了下生成的 bundler.js：

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

value: function render() {
  return _index2["default"].x(
    "div",
    null,
    _index2["default"].x(_hello2["default"], { name: this.name }),
    _index2["default"].x(
      "h3",
      { onclick: this.handleClick.bind(this) },
      "Scoped css and event test! click me2!"
    )
  );
}

记得最早接触 PHP 的时候，经常会纠结是用 TS 还是 NTS 版的

线程安全

线程安全问题在以下情况会发生：

1. 有共享变量
2. 多线程
3. 有修改共享变量

解决思路如下：

1. 操作原子化：加锁，使用原子类
2. 每个线程 copy 一份共享变量，互不影响
3. 使用局部变量代替

ACID

原子性（Atomicity）

原子性是指事务包含的所有操作要么全部成功，要么全部失败回滚。

一致性（Consistency）

一致性是指事务必须使数据库从一个一致的状态变到另外一个一致的状态，也就是执行事务之前和之后的状态都必须处于一致的状态。

隔离性(Isolation)

隔离性是指当多个用户并发访问数据库时，比如操作同一张表时，数据库为每一个用户开启的事务，不能被其他事务的操作所干扰，多个并发事务之间要相互隔离。

持久性(Durability)

持久性是指一个事务一旦被提交了，那么对于数据库中的数据改变就是永久性的，即便是在数据库系统遭遇到故障的情况下也不会丢失提交事务的操作。

​ 当我们使用 uni-app 开发应用时，会发现想要实现一个高性能的下拉刷新或滑动删除效果，动画经常会非常卡顿。

为什么会卡顿呢？这个和 uni-app（vue）的实现原理有关。

因为 uni-app 在大部分平台实现思路和微信小程序一致，所以我们这里以微信小程序为例看一下：

微信小程序的渲染层和逻辑层分别由 2 个线程管理。

之所以分为逻辑层和渲染层，主要是为了管控，让开发者的代码只运行在逻辑层。

渲染层的界面使用了 WebView 进行渲染；逻辑层采用 JsCore 线程运行 JS 脚本。一个小程序存在多个界面，所以渲染层存在多个 WebView 线程，这两个线程的通信会经由 Native（微信客户端）做中转，逻辑层发送网络请求也经由 Native 转发。

由于交互动画，需要渲染层高频率的触发事件，逻辑层接收事件后，又需要把事件处理后的结果传递给渲染层，从而产生交互动画。

这中间频繁的通信，是影响性能的主要原因。

So，知道原因后，我们看下，uni-app/微信小程序是如何解决这个问题的。

解决方案：

我们核心思路就是减少通信，让开发者部分受管控代码能够运行在视图层，于是就有了 WXS，因为 WXS 是运行在渲染层的逻辑代码，所以和原始的逻辑层与渲染层通信的方式会不一样，这个后面会有专门的介绍。

对于前端，图标对于我们来讲是最常见的了，图标方案有很多种，那哪种管理方便、性能又高呢？

谈谈那些图标方案

简单粗暴型

我不管，所有图标都单独一个文件，然后统一放到文件夹。

这种方案有几个缺点：

1. 如果一个图标颜色、尺寸不一样，需要制作多个文件；
2. 在 HTTP/1，发送多次请求响应较慢，且同域名有请求并发限制（在 HTTP2.0 引用了多路复用技术，所以影响相对于 HTTP/1 要小很多）；
3. 文件比较多，维护起来比较麻烦。

传统 OSS 上传方案，需要先从客户端上传到 Web 服务器，再从 Web 服务器上传到 OSS 服务器，文件经过中转导致消耗了流量和时间，另外如果客户端并发上传，对 Web 服务器带宽和性能都是不小的压力。

但是如果直接使用前端签名上传的话，则会有安全问题。

因此就有了服务端签名后直传方案。

官方文档：https://help.aliyun.com/document_detail/31926.html。

如果需要获取上传回调，进行特殊操作，可以查看 服务端签名直传并设置上传回调。

未起效的stopPropagation

简单介绍下背景：我有一个通用登录弹窗模块，检测如果element设置了action-login-popup，点击后，会弹出通用的登录弹窗，但是如果没登录的话，要屏蔽element内子元素的事件。

按照原来的经验，在该元素响应事件中直接event.stopPropagation(); return false;搞起，结果发现并没有起效，what a fuck !!!

好吧，仔细看了下，event.stopPropagation()用法应该是没错，但是有一个问题，我绑定的事件哪个先执行呢？简单console.log下，果然是子元素的事件先响应了，怪不得没效果。

好吧，看来是时候研究下JS的事件的执行流程了。

这件事要追溯到N年前网景与微软IE的浏览器大战，当时浏览器技术发展很快，w3c组织也没完全成型，在JS事件捕获这件事上，两家公司产生了分歧：

1. 微软的做法是，使用事件冒泡方式bubble，从目标元素冒泡到父元素
2. 网景的做法是，使用事件捕获方式capture，从父元素一直捕获，直到目标元素

最终w3c定义规范，两种方式都用，先捕获到目标元素再冒泡到父元素

之前使用LNMP安装后，添加了lnmp的Service，研究下为什么要使用Service，和Service是怎么工作的。

运行级别-RunLevel

• 运行级别0：系统停机状态，系统默认运行级别不能设为0，否则不能正常启动；
• 运行级别1：单用户工作状态，root权限，用于系统维护，禁止远程登陆；
• 运行级别2：多用户状态(没有NFS)；
• 运行级别3：完全的多用户状态(有NFS)，登陆后进入控制台命令行模式；
• 运行级别4：系统未使用，保留；
• 运行级别5：X11控制台，登陆后进入图形GUI模式；
• 运行级别6：系统正常关闭并重启，默认运行级别不能设为6，否则不能正常启动。

runlevel可以查看当前runlevel，init n可以进入指定runlevel。

1. CommonJS

具体看，阮一峰写的javascript标准教程的commentjs章节

CommonJS规范由NodeJS采用，CommonJS定义每个文件就是一个模块，有自己的作用于，在一个文件里面定义的变量、函数、类、都是私有的，对其他文件不可见。
CommonJS加载模块是同步的，所以在加载完成后才执行后面操作，所以主要用于服务端编程，不适合在网页端使用。

1
2
3
4
5
6
7
8
9
10
11

Demo:
// 导出模块
var msg = require('./msg.js');
module.exports.log = function(msg){
    msg.handle(msg);
};
module.exports.version = '1.2';
// 依赖模块
var example = require('./example.js');
example.log('demo');
console.log(example.version);