最近一直闲暇时间一直在看RN。大概之前主要看Vue，对React只是了解的缘故。直接上RN，扑面而来一箩筐的概念和知识（不光是React还有ios/Android ，没有原生开发经验，上周在配置1环境的时候就踩了不少坑=。=）。
今儿主要说说RN中的布局问题。RN采用的布局方式是FlexBox。现代浏览器还是会有FlexBox的兼容问题，在网页开发多少会有一些限制。而RN，是面向ios/Android的。既然RN对FlexBox支持。我们大可不必关心兼容性问题。
首先要说的是RN中的尺寸。
在RN中尺寸是没有单位的，他代表设备独立像素。
eg：
1 | <View style={ {width:100,height:100,margin:40,backgroundColor:'gray'}}> |
这里使用无单位的尺寸，是为了确保布局在任何不同的dpi的手机屏幕上不会发生改变。
在上面的代码中：
运行在Android上时，View的长和宽被解释成：100dp 100dp单位是dp，字体被解释成16sp 单位是sp，运行在iOS上时尺寸单位被解释称了pt。
more >>周末两天的RN初体验，一些杂乱的笔记。
人员稀缺；开发成本高；代码复用；无法实现动态更新
learn once,write anywhere
跨平台 性能高 低投入高回报 支持动态更新
command+d 在模拟器里打开 开发者菜单
react-native run-ios （没什么坑直接用就好，启动xcode里的ios模拟器）
Android这边坑比较多
遇到的第一个问题：
Unable to access Android SDK add-on list
解决方案：
在 Android Studio 安装目录 bin/idea.properties 文件最后追加一句
disable.android.first.run=true
初始化一个Git仓库，使用git init命令。
添加文件到Git仓库，分两步：
第一步，使用命令git add
第二步，使用命令git commit，完成。
要随时掌握工作区的状态，使用git status命令。
如果git status告诉你有文件被修改过，用git diff可以查看修改内容。
HEAD指向的版本就是当前版本，因此，Git允许我们在版本的历史之间穿梭，使用命令git reset –hard commit_id。
穿梭前，用git log可以查看提交历史，以便确定要回退到哪个版本。
要重返未来，用git reflog查看命令历史，以便确定要回到未来的哪个版本。
more >>前一阵看到一句话，搞技术既要仰望星空，又要脚踏实地。特别是前端，三天两头出来新东西。为了跟上时代，趋势。得学。。然而JS/CSS最基础的东西也不能落下。想学的的东西太多，坑越挖越多。亚历山大，加油吧
（济南·大明湖 2017-04-30）
这两天看了看Yarn，其实之前在微信公众号上看过，自己也照着敲了敲。之后就没在意。还是继续用NPM。没有GET到yarn的优势。恰逢看到一篇yarn vs npm的文章，好好学习了一番。facebook在技术领域的号召力也是没谁了。光看star数都快赶上老大哥npm了。
为什么用yarn？正如官网所说：**FAST, RELIABLE, AND SECURE **。
相比NPM，yarn缓存他下载下来的每一个包，无需重复下载。提高了资源利用率。
超级可靠！由于国内网络的特殊原因。有时候npm下载依赖的时候，不能保证包的完整性。会出现很多的“坑”！yarn的话，在每一个安装包的执行前使用校验码验证包的完整性。就不会面对那些坑了。
还有一个就是目录下的lock文件。Yarn 使用一个格式详尽但简洁的 lockfile 和一个精确的算法来安装，能够保证在一个系统上的运行的安装过程也会以同样的方式运行在其他系统上。
专门为Vue开发的状态管理模式。采用集中存储管理应用的所有组件状态。在没有用Vuex的时候，我们在进行组件化开发时，数据（也就是状态一般都分散在各个组件中。加入我们要使用这些状态是，我们就得在不同组件中去取状态值，然后进行状态修改，最后还要相互读取对方状态值。
父子组件中：
我们可以通过事件触发/props进行状态传递。
子组件之间：
由于Vue本身组件之间有作用域，他们之间无法相互通信。这里就必须用单一时间管理（event bus）或者在所有组件和Vue对象下使用一个统一的Object作为数据，来实现。（实质：引用）。
如果项目较小还好，中大型项目，组件通信复杂频繁的时候，这两种方式管理起来就会十分麻烦，而且容易出错。
有了Vuex，它将数据单独放在一个store里，并提供给外部操作内部数据的方法。让我们能更好的管理项目里的状态。这也是Vuex出现的意义吧。就像官网说的：
Flux 架构就像眼镜：您自会知道什么时候需要它
more >>
接触Vuejs，好一阵了。清明节前在慕课网学了一门课。前前后后花了40多个小时琢磨，搭建起了组件化开发的饿了么SPA。这40小时收获了很多，也踩了不少坑。这里总结一下。
源码： https://github.com/laclys/vueApp
VueJS+Vue-resource+Vue-router+Sass+webpack+ES6
common: 公共文件，包含图标字体文件、一些公共JS方法、Sass的mixin(这里包含移动端一像素、移动端DPR等，后面再提)
components：公共组件
包含：
cartcontrol:页面底部购物车组件
food：商品详情也组件
goods：商品列表页组件
header：头部组件
ratings：评论列表页组件
seller：商家页组件
shopcart：购物车组件
split：空隙行组件
star：评价星星组件
App.vue: 页面入口app组件（组件头头，所有组件都依附于它。)
main.js: VueJs入口文件,加载路由,公共组件,组件状态。
比较零散一条一一条总结：
more >>前端的水很深很杂，因而前端相关的工具也像雨后春笋一个一个的冒出来。最近大热的应该就数webpack–这个模块化解决方案工具。
首先这三者都是前端工具，都等让我们高效自动化的解决一些问题。但实质上webpack和Gulp/Grunt有本质的区别。
先谈谈前者。Gulp/Grunt两者的区别，暂且不在这说了。用处的话，两者可以帮我们自动刷新页面，压缩css/js/html以及便宜sass/less。简单的说只要你配置你需要的插件，就可以把以前需要手动做的事情让它帮你完成。那官方的话来说就是—-TaskRunner。可以做到node能做到的任何事。
而Webpack，简单的说：就是一个针对Javascript代码模块的打包工具。作为一个 module bundler 存在。
在我的理解来看：webpack 更多的是用来打包前端代码。 webpack 并不暴露文件处理的细节，
你只是把一堆文件丢给它，告诉它用什么 loader 来处理什么文件，然后就可以等着输出了。
webpack相比gulp来说功能单一一些，更简化一些。当然两者也有交际例如什么预编译,压缩代码之类的。
more >>不管学习那个前端框架（其实后端也是）都回避不了，数据的交互。在交互中在重要的两个就是AJax以及跨域的JSONP。
在之前的博文中开头先跑题一下说说第一种Angular的Ajax交互。
废话不多说上代码：
1 | var app = angular.module('app', []); |
这里在文件夹内建了一个a.txt文件里面随便打了一些数字。在angular包裹的控制器中调用$http，设置url以及所使用的method。如果有其他数据就加一个data属性。这样向后台发的信息就制作好了。是不是和JQ很像。之后then后面两个函数一次对应JQ中的success和error函数。这里。我们当它成功获取a.txt文件中数据时，console.log一下.数据就在我们控制台显示了出来。
下面开始说今儿的重点JSONP交互。Angular中JSONP的操作也是基于$http方法中的。由于前端框架的高速版本变化。在JSONP这一块1.5版本和1.6版本有很大的不同。下面就来详细说一下。
more >>
缺失模块。
1、在博客根目录（注意不是yilia根目录）执行以下命令：
npm i hexo-generator-json-content --save
2、在根目录_config.yml里添加配置：
jsonContent:
meta: false
pages: false
posts:
title: true
date: true
path: true
text: true
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: false
tags: true