Hank's Blog

传统的position: fixed;是相对于窗口的固定定位，但是实际项目中经常会遇到需要根据指定父元素固定定位的情况。研究后找到了两种可行的实现方案。以下代码的效果是.header会相对于.wrapper固定显示，这就实现了相对于父元素的固定定位。

1
2
3
4
5
6

<div class="wrapper">
  <div class="header">little title</div>
  <div class="content">
    <div v-for="(item, index) in new Array(30)">item - {{index}}</div>
  </div>
</div>

学习 ReactNative 的第一步就是搭建开发环境，在搭建Android开发环境中又遇到不少坑，详细安装过程见这里，以下记录搭建过程中遇到的坑。

坑一

运行react-native run-android后报错

1
2
3

* What went wrong:
A problem occurred evaluating project ':app'.  
> SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

解决方法是在android目录下创建一个名叫local.properties文件，里边的内容如下

• in Windows: C:/Users/USERNAME/AppData/Local/Android/sdk
• in macOS: sdk.dir = /Users/USERNAME/Library/Android/sdk
• in linux: sdk.dir = /home/USERNAME/Android/Sdk

这里的USERNAME是你的用户名，然后在终端运行react-native run-android。

阅读了 webpack 打包后的文件，对其打包原理做一个简短的理解。

首先新建一个文件夹，执行命令行npm i webpack安装 webpack，然后配置webpack.config.js

1
2
3
4
5
6
7
8
9
10

module.exports = {
  entry: {
    bundle: './index.js'
  },
  output: {
    path: __dirname,
    filename: '[name].js'
  }
};

学习 ReactNative 的第一步就是搭建开发环境，在搭建iOS开发环境中就遇到不少坑，以下假定你已经安装了node和Xcode。

安装 Yarn 和 React Native 命令行工具

1

npm install -g yarn react-native-cli

设置yarn的镜像源

1
2

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

这时可能会报错EACCES: permission denied，解决方法是修复/usr/local目录的所有权：

sudo chown -R `whoami` /usr/local

安装完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。

用不同的方法实现左边固定，右边自适应的两栏布局。

1
2
3
4

<div class="wrapper">
  <div class="left"></div>
  <div class="right"></div>
</div>

calc(100% - 140px)

两个inline-block元素并排显示。

1
2
3
4
5
6
7
8
9
10
11

.wrapper {
  font-size: 0; // 消除空格的影响
}
.left, .right {
  display: inline-block;
  vertical-align: top; // 顶端对齐
  font-size: 14px;
}
.right {
  width: calc(100% - 140px); // 140px为左侧元素的宽度
}

两个float元素并排显示。

1
2
3
4
5
6
7
8
9

.wrapper {
  overflow: auto; // 清除浮动
}
.left, .right {
  float: left;
}
.right {
  width: calc(100% - 140px);
}

函数式编程在把函数当作一等公民的同时，就不可避免的会产生“柯里化”这种用法。
函数柯里化是逐步传参，逐步缩小函数的适用范围，逐步求解的过程。

1
2
3
4
5
6
7
8
9
10
11

// 通用的柯里化函数, 实现把所有参数传递给 fn
var currying = function(fn) {
  var _args = []; // 用来保存所有的参数
  return function _fn (...args) {
    // 当没有参数时，传入收集后的参数执行 fn
    if (args.length === 0) return fn.apply(this, _args);
    // 当有参数时，进行参数的收集，并返回函数自身
    _args.push(...args);
    return _fn;
  };
};

在 Http 协议消息头中，使用 Content-Type 来表示具体请求中的媒体类型信息，有如下取值。

常见的媒体格式类型

• text/html ： HTML格式
• text/plain ：纯文本格式
• text/xml ： XML格式
• image/gif ：gif图片格式
• image/jpeg ：jpg图片格式
• image/png：png图片格式
• multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式

“函数式编程”是一种”编程范式”（programming paradigm），也就是如何编写程序的方法论。

特点

函数是”第一等公民”

所谓”第一等公民”（first class），指的是函数可以赋值给其他变量，也可以作为参数，传入另一个函数，或者作为别的函数的返回值。

1
2
3
4
5
6

var add = function add (a, b) {
  return a + b
}
function (a, b, add) {
  add(a, b)
}

《黑客与画家》是硅谷创业之父 Paul Graham 的文集，其中有一些有趣的思考，值得记录一下。

• 训练自己去想那些不能想的事情，你获得的好处会超过所得到的想法本身。
• 能够一起谈论“异端邪说”，并且不会因此气急败坏的人，就是你最应该认识的朋友。
• 判断一个人是否具备“换位思考”的能力有一个好方法，那就是看他怎样向没有技术背景的人解释技术问题。
• 真正重要的是做出人们重要的东西，而不是加入某个公司。
• 如果一家公司能做到按贡献付薪，它将取得巨大成功。许多雇员会更努力的工作，并且会吸引特别努力的人。
• 要致富，你需要两样东西：可测量性和可放大性。你的职位产生的业绩，应该是可以被测量到的，否则你做的再多，也不会有更高的薪水。另外，你所作出的决策能够产生巨大的效益。
• 大多数情况下测量每个员工的贡献是困难的，但是可以通过测量小团队来得到近似值。
• 高技术含量具有可放大性，一份早餐只能服务一个人，但是一个软件可以服务很多人。
• 如果你有两个选择，就选较难的那个。因为大多数人出于懒惰的缘故，都会选择容易的那个，比如看电视和跑步。
• 当讨论收入分配不公平时，还应该考虑收入从何而来，财富是谁生产出来的。
• 贫富差距大的言论，都是从金钱数量的角度出发的，但金钱不等于财富，事实上现今穷人和富人的生活差距已经很小了。

TypeScript 是 JavaScript 的超集。
TypeScript 最大的特点就是类型检查，这和flow很相似，Vue 源码使用 flow 作为类型检查 ，但 React 使用的是 TypeScitpt。
TypeScript 和 ES6 有一些相同的地方，这里不再赘述。

基础类型

基本类型

1
2
3
4
5
6
7

let isDone: boolean = false;
let age: number = 37;
let sentence: string = `Hello, my name is Hank.`
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
let u: undefined = undefined;
let n: null = null;

注意，基本类型首字母都是小写的。
默认情况下null和undefined是所有类型的子类型。就是说你可以把 null和undefined赋值给number类型的变量。

元祖Tuple

1
2
3
4
5

let x: [string, number]; // 定义一个元祖类型
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error
x[2] = 'world'; // OK, 该值属于(string | number)类型
x[3] = true; // Error, 该值不属于(string | number)类型

枚举

enum 类型是对JavaScript标准数据类型的一个补充，使用枚举类型可以为一组数值赋予友好的名字。
默认从0开始为元素编号，也可以手动的指定成员的数值。

1
2
3

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];
alert(colorName);  // 'Green'