By

前言

今天晚上在逛开发者论坛的时候，偶然间闯入了大疆无人机的官方网站。
大疆一直都是无人机领域的领导者，现在又在航拍、智能城市方面有了应用。
大疆开发者官网
大疆提供了丰富的sdk，可以使用无人机做很多的操作，
无人机领域对我一直都是比较神秘的，遂决定开启swift学习计划

学习计划

swift基本变量和程序流控制(2天)
swift面向对象编程(3天)
swift多线程(3天)
swift设计模式(3天)

By

v8如何执行处理JavaScript

V8是一个由美国Google开发的开源JavaScript引擎，用于Google Chrome中
V8在运行之前将JavaScript编译成了机器码，
而非字节码或是解释执行它，以此提升性能。
更进一步，使用了如内联缓存（inline caching）等方法来提高性能。
有了这些功能，JavaScript程序与V8引擎的速度媲美二进制编译

  • V8 引擎 是用 C++ 编写的，它能够编译并执行 JavaScript 源代码、
  • 处理内存分配和垃圾回收。
  • 它被设计成由两个编译器组成，可以把源码直接编译成机器码

javaScriptCore

JavaScriptCore是一个在WebKit中提供JavaScript引擎的框架，
而且在OS X作为其他内容的脚本引擎
它会将Javascript编译为原生的机器语言，
不再需要字节码直译器，同时加速了JavaScript的执行效率

  • 它进行词法分析，就是将源代码分解成一系列具有明确含义的符号或字符串。
  • 然后用语法分析器分析这些符号，将其构建成语法树。
  • 接着四个 JIT（Just-In-Time）进程开始参与进来，分析和执行解析器所生成的字节码。
    参考资料

一旦编译过程中产生了机器代码，引擎就会向浏览器暴露所有的数据类型、操作符、对象、
在 ECMA 标准中指定的函数、或任何运行时需要使用的东西

补充下JIT的概念

即时编译（英语：Just-in-time compilation又译及时编译/实时编译,
动态编译的一种形式，是一种提高程序运行效率的方法。通
常，程序有两种运行方式：静态编译与动态直译。静态编译的程序在执行前全部被翻译为机器码，而直译执行的则是一句一句边运行边翻译。
JIT编译则是这两种方式的混合，在运行时将源代码翻译成机器码（这一点与解释执行类似），
但是会保存已翻译的机器代码，下次执行同一代码段时无需再翻译（这又与静态编译类似）。

总结

js引擎一般有2种实现方式:

  • 源代码===跳过字节码的步骤==> 机器码(chrome)
  • 源代码===JIT(边运行边翻译)==>机器码(javascriptCore safari)

参考资料1
参考资料2
js引擎内部

By

主要观点

RN提供了Animated组件来提供易于构建和维护的动画效果
学习曲线完全可以参照css3的transform和@keyframes方式

代码流程

  • 只有声明可动画化的组件Animated.Image,Animated.Image,Animated.View等关联动画
  • 初始化实例变量,最常见的就是 var s= Animated.Value(0);
  • 将实例变量绑定组件的style属性,例如:{opacity:s}
  • 在Animated.sequence里面定义动画队列数组,每个动画序列可以采用Animated.timing或者Animated.decay等定义时长或者延迟效果
  • 在style属性中定义transform数组，每个数组都是个key(属性),value(利用interpolate更新的值)

talk is cheap ,show me the code,具体实现请看demo

RN动画中文文档

By

坑点

  • 布局样式方面

    justifyContent和alignItems根据flexDirection来控制横纵轴布局
    样式编写要按照组件名进行归类，保证UI的正确渲染

  • 组件层面

    浏览器中原生的input默认会有一定的宽度，但是TextInput是没有的，需要手动添加

  • 图片加载方面

    在xcassets中添加，对图片文件名格式要求有@1x @2x @3x 并会生成JSON文件适配不同屏幕

By

前言

今天整理下react-native在UI布局方面的代码心得

布局采用flex-box布局以及部分盒模型的异同点

  • 横纵轴的布局属性基本保持一致

    justifyContent,alignItems,alignSelf等等

  • flexDirection默认为column
  • 增加paddingHorizontal和paddingVertical
  • 增加marginVertical和marginHorizontal
  • 所有的样式属性名都用camelCase的形式
  • 颜色的名字采用 CSS3 specification规范
  • 踩坑点:父类元素不需要设置relative

    小结:

    由于react-native实际上是对原生UI组件的一个polyFill，所以在选型上选择了操作
    性更好的flex-box布局形式，同时配合盒模型

页面路由导航

Navigator基本就是栈队列的结构,组件提供了丰富的API供外界调用.
基本不用自己做特殊的封装

事件及触摸处理

  • 封装了基本所有的触摸情况，不需要二次开发
  • 对需要处理的事件的UI都需要包裹事件标签，例如TouchableHighlight等等

今天的成果=》模拟网上的项目，做了个首页

==================3月24日更新=============

2016.3.24日今天完成了webView和照片浏览插件

webView中使用了progressBar组件，而slider使用的是react-native-swiper插件

具体实现细节后期更新，界面实现见下图



By

开始学习react-native

做个大致的学习路线安排(各1天)

  1. 路由系统及调试方式
  2. Ajax系统
  3. 表单系统
  4. 列表界面
端口占用
1
sudo lsof -n -i4TCP:8081 | grep LISTEN &&  sudo kill pid

组件映射表

1
2
3
4
5
6
7
8
9
ActivityIndicatorIOS=>animation
DatePickerIOS=>日期组件
Modal=>遮罩层
Picker=>select
RefreshControl=>刷新组件
SliderIOS=>类似input volume
StatusBar=>顶部状态栏
Switch=>开关控件
TabBarIOS=>底部导航栏

中文文档

By

优点

angular是很强大的全面前端框架，在集成模板技术的同时,
在函数式接口和作用域方面提供了很好的灵活性

缺点

由于框架大而全，难免源码过重，对于移动端的用户加载速度是个硬伤
angular内部实现的digest脏检查机制，会不断的轮询执行，在实现上面有些瑕疵

离上次使用angular已经快1年了，好多东西都忘了+_+。稍微review下，仅此而已

By

redux源码拆解分析

对于初学者比较纠结的有2点

  1. 函数式API
  2. flux数据流的多个概念

redux的数据流思想

  • action ==> 改变store的行为
  • dispatch ===> 分发数据到reducers
  • reducer ===> 指明应用如何更新数据至Store

redux主要暴露给外界的函数式API

1
2
3
4
5
6
{
    dispatch,//更新操作函数
    subscribe,//推送监听到观察者列表
    getState,//获取数据模型
    replaceReducer//重置store
}

函数式API的处理

redux中使用了很多函数式的API，这类API的一个特点就是使用闭包将逻辑封闭在黑盒子里面。
redux暴露的四个API是setter和getter的变体

下面针对redux的源码配置进行函数式API的说明

1
2
3
4
5
6
7
8
9

//引入redux库
import { createStore, combineReducers, applyMiddleware } from 'redux'
//添加中间件logger和crashReporter
let createStoreWithMiddleware = applyMiddleware(logger, crashReporter)(createStore)
//封装reducers
let todoApp = combineReducers(reducers)
//创建redux的store
let store = createStoreWithMiddleware(todoApp)

1、上述代码不像类似react或者angular/vue之类的前端UI框架更多的关注UI逻辑，API也比较易懂
2、redux的函数式API体现着数据的流向，利用层层闭包将所有的信息最后集成在return的结果里面
3、每个函数都是一个工厂，提供着数据整合的功能
4、redux提供的subscribe API，便利了redux和各类框架结合起来使用。这类库例如react-redux,ng-redux等等

1
例如:react-redux的connect提供了trySubscribe函数注册redux，从而能代理起react的state。可以阅读react-redux源码查看实现

5、redux提供applyMiddleWare为中间件的接口，社区也有诸多redux配合其他框架的中间件,以redux-thunk(形式替换程序)为例

1
2
redux-thunk将action的执行条件，增加到不仅仅是plainObject的范围，并兼容promise。  
所有的中间件都会在store.dispatch的时机进行执行

关于redux的源码逻辑，请点击如下链接

redux主要逻辑源码注释，欢迎fork

By

冒泡排序

Array.prototype.bubble_sort = function() {
    var i, j, temp;
    for (i = 0; i < this.length - 1; i++)
        for (j = 0; j < this.length - 1 - i; j++)
            if (this[j] > this[j + 1]) {
                temp = this[j];
                this[j] = this[j + 1];
                this[j + 1] = temp;
            }
    return this;
};
var num = [22, 34, 3, 32, 82, 55, 89, 50, 37, 5, 64, 35, 9, 70];
num.bubble_sort();

冒泡排序顾名思义就是一个个气泡不断往上浮动的意思。在JS的这段代码中就是不断将最大的数字排在数组尾部，然后类似数学归纳法一般，用同样的方式处理接下来的n-1个数字。这种算法需要计算(n-1)+(n-2)+…+1=(n-1)n/2次，达到O(nn)的级别。

插入排序

Array.prototype.insertion_sort = function() {
    var i, j;
    var temp;
    for (i = 1; i < this.length; i++) {
        temp = this[i];
        for (j = i - 1; j >= 0 && this[j] > temp; j–)
            this[j + 1] = this[j];
        this[j + 1] = temp;
    }
    return this;
};


插入排序对同样的数组进行排序就会表现的好一点，它的原理是在已经排序完成的数组基础上添加新数，从后往前进行比较并插入正确的位置。这种排序方式在最优的情况只需要计算n-1次(即原来的数列已经排序完成),在最差的情况需要计算1+2+…+(n-1)=n(n-1)/2次，即平均复杂度为O(nn)

By

nodejs在前端构建工具的使用中是非常普遍的，今天学习了下node的命令行编写形式，逻辑上来说还是很直观的，这个对创建自己的构建工具很有好处。

#!/usr/bin/env node //表明是node可执行文件,/usr/bin/env为二进制文件
声明了这个头之后，就可以直接使用nodejs支持的语法，进行所有你想要的操作了。相当简单。
如果要写构建工具的话，还需要了解node的I/O及file system操作机制。

如果不是unix系统的话，可以创建cmd后缀名的文件，node file%1的形式，%1代表cmd窗口命令行，其实也就是变个法子调用node进行代码执行而已
命令行编写颜色的原理 http://blog.soulserv.net/terminal-friendly-application-with-node-js/