react-native

React Native使你只使用JavaScript也能编写原生移动应用。 它在设计原理上和React一致，通过声明式的组件机制来搭建丰富多彩的用户界面。

React Native产出的并不是“网页应用”， 或者说“HTML5应用”，又或者“混合应用”。 最终产品是一个真正的移动应用，从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致。 你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。

React Native完美兼容使用Objective-C、Java或是Swift编写的组件。 如果你需要针对应用的某一部分特别优化，中途换用原生代码编写也很容易。 想要应用的一部分用原生，一部分用React Native也完全没问题 —— Facebook的应用就是这么做的。

手势系统

移动设备上的手势识别要比在 web 上复杂得多。用户的一次触摸操作的真实意图是什么，App 要经过好几个阶段才能判断。比如 App 需要判断用户的触摸到底是在滚动页面，还是滑动一个 widget，或者只是一个单纯的点击。甚至随着持续时间的不同，这些操作还会转化。此外，还有多点同时触控的情况。

在没有单独设置手势相关的处理的props时，有以下组件会自动申请成为手势响应者：

• touchablehighlight、touchableopacity、TouchableNativeFeedback、touchablewithoutfeedback这些touchable**组件在层级中会优先成为手势的响应者，而且是在手势触摸开始的瞬间，也就是不论是点击、触摸、滑动等都会先申请成为响应者，由系统决定是否授权。
• scrollView、sectionList、flatList之类的滚动组件，会自动在组件onMoveShouldSetResponder申请成为响应者，不过需要注意的是onMoveShouldSetResponder返回true或者false，是根据滚动组件的设置的滚动方向【水平–垂直】来判断的，也就是会根据手势滑动的第一瞬间判断是响应水平滑动还是垂直滑动，在使用PanResponder的事件中的gestureState可以获取vx、vy【水平、垂直移动速度】来判断手势是水平滑动还是垂直滑动。

手势响应系统可以使组件在不关心父组件或子组件的前提下自行处理触摸交互。

gitbook

GitBook 是一个基于 Node.js 的命令行工具，可使用 Github/Git 和 Markdown 来制作精美的电子书，GitBook 并非关于 Git 的教程。

一步一步部署

可以参考，官方的一步一步的部署教程，

生成步骤如下：

1. 需要安装node
2. 创建项目根文件夹，并进入文件夹
3. 使用npm管理相关包 npm init
4. 安装gitbook， npm install -g gitbook-cli --save-dev
5. 在根目录下初始化book gitbook init

6. 修改生成的SUMMARY.md文件，

   1 2 3 4

   # Summary * [Introduction](README.md) * [The Jabberwocky](chapter1.md) * [A Modest Proposal](chapter2.md)

7. 启动服务。本地查看：gitbook serve

git

git是一个分布式版本控制软件，最初由林纳斯·托瓦兹创作，于2005年以GPL发布。最初目的是为更好地管理Linux内核开发而设计。应注意的是，这与GNU Interactive Tools（一个类似Norton Commander界面的文件管理器）有所不同。git最初的开发动力来自于BitKeeper和Monotone。git最初只是作为一个可以被其他前端（比如Cogito或Stgit）包装的后端而开发的，但后来git内核已经成熟到可以独立地用作版本控制。很多著名的软件都使用git进行版本控制，其中包括Linux内核、X.Org服务器和OLPC内核等项目的开发流程。

更多相关介绍可以查看百科

git的基本使用

主要是指一下基本操作：

1. 安装
2. ssh登入配置
3. 命令使用

shell

shell是指一种应用程序，这个应用程序提供了一个界面，用户通过这个界面访问操作系统内核的服务。Ken Thompson的sh是第一种Unix Shell，Windows Explorer是一个典型的图形界面Shell。

shell脚本（shell script），是一种为shell编写的脚本程序。业界所说的shell通常都是指shell脚本，但读者朋友要知道，shell和shell script是两个不同的概念。由于习惯的原因，简洁起见，本文出现的“shell编程”都是指shell脚本编程，不是指开发shell自身（如Windows Explorer扩展开发）。

http

HTTP协议（HyperText Transfer Protocol，超文本传输协议）是因特网上应用最为广泛的一种网络传输协议，所有的WWW文件都必须遵守这个标准。HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。

在七层OSI模型中，HTTP处于应用层的位置。常见分类列表如下：

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

1.  物理层physical layer 
    例如线路、无线电、光纤
2.  数据链路层data link layer 
    例如以太网、令牌环、HDLC、帧中继、ISDN、ATM、IEEE 802.11、FDDI、PPP
3.  网络层network layer 
    例如IP、ICMP、IPX、BGP、OSPF、RIP、IGRP、EIGRP、ARP、RARP、X.25
4.  传输层transport layer 
    例如TCP、UDP、RTP、SCTP、SPX、ATP、IL
5.  会话层session layer 
    例如ASAP、ISO 8327 / CCITT X.225、RPC、NetBIOS、ASP、IGMP、Winsock、BSD sockets
6.  表示层presentation layer 
    例如XDR、ASN.1、SMB、AFP、NCP
7.  应用层application layer 
    例如HTTP、SMTP、SNMP、FTP、Telnet、SIP、SSH、NFS、RTSP、XMPP、Whois、ENRP、TLS

移动端开发浅析

目前对于用户而言，移动端的使用场景基本已经替代了大部分PC的场景，所以对于前端开发人员来讲，移动端的开发和测试手段需要很好的了解；关键在于目前的移动端应用开发存在很多不一样的方案：

• 纯web应用开发【WPA的应用】
• 混合开发【hybrid方案：纯webview模式、react-native、weex、小程序等各种方案】
• flutter新型跨端应用处理【基于dart语言的开发】

本文着重浅析的是关于web这一侧的开发和调试方案；

1. chrome本地调试
2. 模拟器调试【web和webview内容调试】
3. 真机调试【安卓应用的webview】

而前端开发和调试最重要的一环就是在本地的各种环境[浏览器/模拟器/真机]中能够运行本地的代码，本地的修改能够实时反馈到对应环境中；而目前很多web侧的JavaScript代码都是通过各类打包工具完成的，其中webpack又是使用最为广泛的工具，所以我们需要的是打包后的代码，而打包后的代码需要存在一个启动了http服务的文件夹中，这样可以配合代理工具[nginx、charles等]来完成前端资源的本地调试。

前记

平时在写bug的时候慢慢的就会有了一些避开bug的经验，慢慢的记录下来，避免自己一次次的踩进去。

技术问题

1. hybrid开发中，安卓手机上小于12px字体的垂直居中对齐【可能是安卓上的webview实现有关系】
2. 无线端1px处理的边框被隐藏问题【通过伪元素after根据prd放大缩小实现】
3. 无线端搜索框使用form的onsumbit监听search类型的input的enter事件
4. scheme跳转问题：包括url中文没有encodeURIComponent、没有写全https:而是用//,
5. 关于微信分享的问题：分享内容敏感、分享了短链接，而断链接没有配置服务域名
6. 在jquery的onclick的回调事件传入匿名箭头函数，并使用this
7. 处理当前页面url参数的时候没有考虑url上具有hash的情况，可能会导致参数追加到了hash上，或者获取最后一个参数时同时获取了hash内容。

web安全讲述

确保您的 Web 站点或 Web 应用安全是十分重要的，即使是代码中很小的 bug 也可能导致隐私信息被泄露，黑客会尝试偷窃数据。这些文档提供信息帮助您使代码更安全。此处列出的面向 Web 安全的文章提供的信息可以帮助您保护站点及其代码免受攻击和数据窃取。

1. CSP内容安全策略
2. xss跨站点脚本攻击
3. CSRF 跨站点请求伪造

CSP内容安全策略

CSP 的主要目标是减少和报告 XSS 攻击 ，XSS 攻击利用了浏览器对于从服务器所获取的内容的信任。恶意脚本在受害者的浏览器中得以运行，因为浏览器信任其内容来源，即使有的时候这些脚本并非来自于它本该来的地方。

CSP通过指定有效域——即浏览器认可的可执行脚本的有效来源——使服务器管理者有能力减少或消除XSS攻击所依赖的载体。一个CSP兼容的浏览器将会仅执行从白名单域获取到的脚本文件，忽略所有的其他脚本 (包括内联脚本和HTML的事件处理属性)。

Content-Security-Policy: policy

一个网站管理者允许网页应用的用户在他们自己的内容中包含来自任何源的图片, 但是限制音频或视频需从信任的资源提供者(获得)，所有脚本必须从特定主机服务器获取可信的代码, 启用发送违规报告，你需要指定 report-uri 策略指令，并提供至少一个URI地址去递交报告：

Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com; report-uri http://reportcollector.example.com/collector.cgi

科学上网

大部分情况下，中国网民都无需绕过“网络防火墙”（GFW）浏览墙外内容。但是对于国外的先进技术，我们需要科学上网来获取。

服务器

国外服务器的购买。这里我选择的是Vultr，对比了很多国外的服务器，这个蛮靠谱的，vultr服务目前是全英文，按时收费，

完整的中文介绍入门和购买流程；个人提醒：

1. 选择便宜的主机
2. 选择USA的主机
3. 创建的时候尽量不要开启防火墙
4. 尽量使用 ubuntu14.06系统

可能会遇到的问题：

1. ssh连接不上，但是可以ping通。解决方法，这其实没得救了，刚开始生成的主机一般22端口是开放的，但是过几分钟就关闭了，我们需要趁着这几分钟把ssh的默认端口改成其他的4422等，这样才好使
2. 服务器安全，尽量不要用root来登入官方推荐配置

通过以上的步骤，我们完成了一台服务器的简单使用。

flex的简介

在flex的容器中默认存在两条轴，水平主轴main axis和垂直交叉轴cross axis，这是默认的设置，不过我们可以通过设置将主轴的方向变成垂直方向，交叉轴变成水平方向。
在一个被设置为flex的容器中，每个直接子元素都被称之为flex item，每个flex item占据着主轴空间是main size，占据交叉轴上的空间叫做corss size;

需要注意的是：主轴和交叉轴的方向是可以设置的，默认的是主轴为水平方向、交叉轴为垂直方向；当然RN的表现和浏览器相反，默认主轴是垂直方向