ReactNative SourceCode Networking

Posted on 2016-07-13 |

React Native 源码阅读(1):网络

fetch in RN 0.25 调用链

app/AppNetworking.js

1	fetch(reqUrl,fetchObj)

node_modules/react-native/Libraries/Fetch/fetch.js line 377:

1 2	line 368: self.fetch = function(input, init) { var xhr = new XMLHttpRequest()

node_modules/react-native/Libraries/JavaScriptAppEngine/Initialzation/InitializeJavaScriptAppEngine.js line 137:
定义的全局fetch和XMLHttpRequest 以及其他的

function setUpXHR() {
  // The native XMLHttpRequest in Chrome dev tools is CORS aware and won't
  // let you fetch anything from the internet
  polyfillGlobal('XMLHttpRequest', require('XMLHttpRequest'));
  polyfillGlobal('FormData', require('FormData'));

  var fetchPolyfill = require('fetch');
  polyfillGlobal('fetch', fetchPolyfill.fetch);
  polyfillGlobal('Headers', fetchPolyfill.Headers);
  polyfillGlobal('Request', fetchPolyfill.Request);
  polyfillGlobal('Response', fetchPolyfill.Response);
}

node_modules/react-native/Libraries/Network/XMLHttpRequest.ios.js line 15:

1	var RCTNetworking = require('RCTNetworking');

node_modules/react-native/Libraries/Network/RCTNetworking.ios.js line 13:

1	var RCTNetworkingNative = require('NativeModules').Networking;

node_modules/react-native/Libraries/Network/RCTNetworking.m line 135 and 432:

1
2
3

RCT_EXPORT_MODULE()
RCT_EXPORT_METHOD(sendRequest:(NSDictionary *)query
                  responseSender:(RCTResponseSenderBlock)responseSender)

分析iOS的实现, 使用了系统原生的 NSURLRequest,NSURLSession等
分析Android的实现. 使用了OKHttp

深入理解 React Native Debugging

Posted on 2016-06-23 |

翻译改编自 Shaheen Ghiassy的Deep Diving React Native Debugging from medium.com

中文译名: 深入理解 React Native Debugging

译者注: 使用React Native(以下简称RN) 开发已经有3个月了,Debug更是每天都会用到的技能.最近闲来看看一些原理性的文章,决定先从debug入手,可以更深入了解到框架背后的东西.原作者写这篇文章的时候RN还是0.11版本,我的开发版本是 0.20.其实debug的原理没有改变,只是个别环节的实现function增加了一些参数.下面我们开始正文

——————

如果你和我一样,当你看到React Native 简单的debugging的时候,你一定会觉得这太拽了.在Chrome浏览器里打下断点,就可以终端iOS应用.而且可以console和watch各种变量.

但如果你和我一样,你一定不会相信编程中有魔法的存在,而要去探究他的工程实现.这篇文章就是带你理解React Native Debugging 背后的原理.

ShadowSocks+ProxyChains-NG 实现终端(iTerm2)下代理

Posted on 2016-04-19 |

参考原文

安装

使用 Homebrew 安装 proxychains-ng

1	~ $ brew install proxychains-ng

编辑配置文件

1	vim /usr/local/etc/proxychains.conf

在 [ProxyList] 下面（也就是末尾）加入代理类型，代理地址和端口
注释掉原来的代理并添加, 1080 就是默认的shadowSocks 本地代理端口号,

1	socks5 127.0.0.1 1080

如果有的软件支持socks5代理, 比如 dropbox ,可以直接设置,

我们在这里搞这么多飞机就是因为, iTerm2 不支持配置代理,而且就算你在系统设置了也不管用.

如果所在的网络很复杂，可能需要在配置文件中启用
dynamic_chain - 按照列表中出现的代理服务器的先后顺序组成一条链，如果有代理服务器失效，则自动将其排除，但至少要有一个是有效的
然后在 [ProxyList] 下添加多个代理
默认：strict_chain - 按照后面列表中出现的代理服务器的先后顺序组成一条链，要求所有的代理服务器都是有效的

测试

proxychains4 curl google.com
注意：proxychains支持的是socks，http, https协议.它们以tcp或者udp协议为基础, ping命令用的是 ICMP 协议， proxychains 不支持;

优化

alias 命令别名
直接在命令行中输入

1	~ $ alias pc="proxychains4”

iTerm中前缀补全
你输了很长一段命令，然后你突然想使用代理功能，怎么办？
我想你应该会复制一下，然后重写；
现在你可以这样做：

在 iTerm -> Preferences -> Profiles -> Keys 中，新建一个快捷键，例如 ⌥(alt) + p ，Action 选择 Send Hex Code，键值为 0x1 0x70 0x63 0x20 0xd，保存生效。这个 HexCode 用 hexCodeToAsciiText 就是 “pc”两个字母

以后命令要代理就直接敲命令，然后 ⌥ + p 即可，这样命令补全也能保留了。
比如 git clone, npm install 加速等等.

谜团

关于使用shadowSocks 时,dns是不是一起走了代理了,这里面还有很多网络知识不是特别明白

ReactNative-NativeComponent -- 1. 官方指引

Posted on 2016-03-31 |

Native-Module 基本分为两种

可见的Module. (显示,原生动画)
View 本身继承自RCTView,如果想要在JS中使用,需要再实现一个 Manager
不可见的Module. (数据,网络,modeling)
需要实现 delegate

今天我们来讲讲第二种不可见的Module

Module 和 method的关系

One Module

-> MethodA
-> MethodB
…
-> MethodN

官方指引

正常的参数, 所有json格式的参数
而且有个强大的Util RCTConvert.h 从字体,颜色,string,number都可以转换
支持回调 callback, 可以传function进去
原生类型是 RCTResponseSenderBlock
和传参都是用RCT_EXPORT_METHOD 声明
支持Promise
但是需要用到 RCT_REMAP_METHOD 声明,再辅助两个block
RCTPromiseResolveBlock/ RCTPromiseRejectBlock
JS 层面用 ES2016 async/await 去写, 这个需要看一下
接下来讲多线程
methodQueue 是在一个Module下的所有method共享的, 要么这个module是在主线程上执行,要么就是在某个线程上执行. 而且大家可以共享这个线程
如果我有一个方法需要单独在新的线程上执行怎么办,比如相对耗时的存储等等.我可以在方法里面用dispatch_async包一下执行代码,执行完之后可以用 2.里面提到的callback通知外面
最后提到了在不同的Module中共享线程,比较高深
导出常量
返回Dictionary的native method 在初始化的时候完成赋值,运行时的时候再改变他,js也拿不到最新的值.
如果要枚举常量,他建议新建一个RCTConvert的extension
向JS发送Event
如何使用 bridge.eventDispatcher, 如何在native send 以及如何在JS subscription. 这样Native 也可作用在JS上了,这是除了 callback的另一种实现.
采用的是观察者模式. 如果想用JS作用在Native上直接调取Native 用RCT_EXPORT_METHOD 暴露出来的函数就好了,各种回调,promise,sender伺候你.

这里多数一句,我们在OC里常用的传递消息的方式有很多 KVO,Delegate,Block. 还有高逼格的NSOperation,GCD 等等.基本上RN都用了.可见facebook的原生功力还是比较深厚的

最后提到了如何在swift 用RN,然并卵.

RN = ReactNative

————

有兴趣的同学可以读一下具体 Module 和 Method 的原生实现

关于Bridge的一篇facebook的内部剖析
如何优化RNApp性能的官方介绍

下一部分准备按照官方的指引写一个Demo 把这些点传起来

AMD 和 CommonJS -- 1. 基本概念

Posted on 2015-12-31 |

AMD = Asynchronous Module Definition

它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

1	require([module], callback);

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：

require([‘jquery’,’math'], function ($, math) {
	math.add(2, 3);
	$(body).show();
});

CommonJS

那什么是CommonJS呢, 总是拿他和AMD来对比使用
2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程。
node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。

1 2	var math = require('math'); math.add(2,3); // 5

那么问题来了

有了服务器端模块以后，很自然地，大家就想要客户端模块。而且最好两者能够兼容，一个模块不用修改，在服务器和浏览器都可以运行。
但是，由于一个重大的局限，使得CommonJS规范不适用于浏览器环境。
服务器端的文件依赖只取决于磁盘IO,但是客户端会有网络的不确定性.取决于网速的快慢，可能要等很长时间，浏览器处于”假死”状态。

因此，浏览器端的模块，不能采用”同步加载”（synchronous），只能采用”异步加载”（asynchronous）。这就是AMD规范诞生的背景.

CommonJS 到底是个什么鬼

CommonJS 网站标题 : javascript: not just for browsers any more!

With CommonJS-compliant systems, you can use JavaScript to write:

Server-side JavaScript applications
Command line tools
Desktop GUI-based applications
Hybrid applications (Titanium, Adobe AIR)

感觉基本就是定义一些文档和API, 大家都遵循,自己去实现. 然后把JS写的到处都是,开枝散叶.

CommonJS是服务器端模块的规范，Node.js采用了这个规范。
根据CommonJS规范，一个单独的文件就是一个模块。加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。

预告

接下来的几篇文章次会按照加载方式的不同,讲解一下 require.js 和 AngularJS 的加载机制以及webwork 和 serverwork 的开发方式, 还有bower库和npm库的外壳的不同.

aboutme

Posted on 2015-11-06 |

Nice to meet you.Thank you for your time.

I’ve been working as a programmer for 9 years.My major is computer science and technology.During my previous experiences I have learned lots of important skills.I have improved my technology (skills) expertise along with my creative problem solving skills and deep understanding of Mobile development and Front-end development.I’ve learned how to (iterate products for users and clients )demonstrate our new apps to the users and clients.And also give them some trainings.I’m very confident to give presentations of our products by using some easy to understand way.

I have good communication skills and easygoing.(easy to get along with my colleagues) I can working in a fast-paced environment and enjoy working under pressure.

I have the ability to communicate ,my second strength is my ability to set and hit targets. During my last job,I’m one of the leaders have in charge of 20 people to achieved some goals.we’ve got some projects done on time.I have had the opportunity to complete a couple of management trainings to District Managers.

I can also come up some ideas not only with my own but also with team members.I’m a self-motivated person and a self-learner.

With my previous work experiences combine my education,my achievements and my ability to adapt to a different kind of circumstances,I have a good faith with this position.I love this industry and I’m really looking forward this opportunity.

I have a positive attitude towards life.I love high-tech gadgets. I prefer to do smart work instead of hard work. I believe in achieving maximum output with minimum input.

What kind of opportunities do you offer the staff,What kind of ongoing training you offer.

responsibilities

宝宝来画画文案

Posted on 2015-08-31 |

###宝宝来画画

###一起勾勒世界吧

每天更新的简笔画，享受和孩子一起画画的时光。

清新的选材，清晰的分步教学，有乐趣的互动。让我们一起秀出孩子们精彩的创意吧！

###项目地址(注意wiki里面的描述)

https://github.com/xbay/RACBabyDoodle/
https://github.com/xbay/bbgraf-adm

property 参数详解

Posted on 2013-11-06 |

关于@property特性的介绍

@property(nonatomic/atomic, readwrite/readonly, strong/weak/assign)

@Property是声明属性的语法，它可以快速方便的为实例变量创建存取器，并允许我们通过点语法使用存取器。
每个@property属性都含有特性（attribute），用来描述响应存取方法的行为，这些特性需要写在小括号里。任何@property属性都有特性，每个特性都有不同的可选类型，每种特性中都有一项是默认的。如果使用默认特性则不用在括号中表明。

1.多线程特性

多线程特性有两种可选类型：nonatomic 和 atomic，其中后者为默认特性。但因atomic这种线程保护技术很耗费资源，在iOS开发中一般使用nonatomic特性。

atomic：默认是有该属性的，这个属性是为了保证程序在多线程情况，编译器会自动生成一些互斥加锁代码，避免该变量的读写不同步问题。他并不代表线程安全，只是说对同一对象的set和get的操作是顺序执行的
nonatomic：如果该对象无需考虑多线程的情况，请加入这个属性，这样会让编译器少生成一些互斥加锁代码，可以提高效率。不保证 set和get 方法是按照顺序执行的,但速度比atomic快

2.读/写特性

readwrite、readonly这两个属性的价值，不是提供成员变量访问接口，而是控制成员变量的访问权限。

readwrite：这个属性是默认的情况，会自动为你生成存取器。
readonly：只生成getter不会有setter方法。

3.内存管理特性

内存管理特性的类型可以决定相应的实例变量将如何引用对象。

ARC 下再不用 retain 只用strong

assign：默认类型，setter方法直接赋值，不进行任何retain操作，不改变引用计数。该方法只会针对“纯量类型”(CGFloat或NSInteger等)和C数据类型（int, float, double, char, 等等）的简单赋值操作，id类型也要用assign，所以一般iOS中的代理delegate属性都会用assign来标示。如果想用 assign for C primitive properties, NSInteger, int, float 等等

@property(nonatomic, assign)int name;

strong：强引用，其存亡直接决定了所指向对象的存亡。使用该特性实例变量在赋值时，会释放旧值同时设置新值，对对象产生一个强引用，即引用计数+1。如果不存在指向一个对象的引用，并且此对象不再显示在列表中，则此对象会被从内存中释放。
weak：弱引用，不决定对象的存亡。属性表明了一种”非拥有关系“，既不释放旧值，也不保留新值，即引用计数不变，当指向的对象被释放时，该属性自动被设置为nil。即使一个对象被持有无数个弱引用，只要没有强引用指向它，那么还是会被清除。

如果想用 weak, weak references to Objective-C objects.

@property(nonatomic, weak)NSString *name;

copy：和strong类似，不过该属性会被复制一个新的副本。很多时使用copy是为了方式Mutable（可变类型）在我们不知道的情况下修改了属性值，而用copy可以生成一个不可变的副本防止被修改。如果我们自己实现setter方法的话，需要手动copy。用 @property 声明 NSString、NSArray、NSDictionary 经常使用 copy 关键字，是因为他们有对应的可变类型：NSMutableString、NSMutableArray、NSMutableDictionary，他们之间可能进行赋值操作，为确保对象中的字符串值不会无意间变动，应该在设置新属性值时拷贝一份。

摘自Clang ARC 方法[ARC是支持copy的]
copy implies __strong ownership, as well as the usual behavior of copy semantics on the setter.

So if you implement custom setters, you’re responsible for implementing strong or weak semantics in those setters.

copy意味着strong,而且通常会copy setter方法.如果你实现自己定制的setter方法,请使用strong或者weak方法. 所以一般NSNumber 或者 NSString使用 copy,因为他们一般不用自定义setter方法

@property (nonatomic, copy) NSNumber *userID;
@property (nonatomic, copy) NSString *username;

unsafe_unretained：和weak一样，唯一的区别就是当对象被释放后，该属性不会被设置为nil。所以是unsafe的。

4.方法名特性

方法名可以修改为我们合成的方法名，可以使存取方法语义更加符合应用场景。

Node.js

Posted on 2013-08-07 |

###Node.js

####Socket.IO

io.sockets.emit(all client)
socket.broadcast.emit(all client except you)
socket.emit(only you)

socket.io now allows rooms/groups. for a client to join and leave a room:
socket.io 现在原生支持join和leave with room or group

socket.join(‘room1’);
socket.leave(‘room1’);

======

io.sockets.on('connection', function (socket) {
      //these should do the same thing  
      io.sockets.emit('this', { receivers: 'everyone'});

      socket.broadcast.emit('this', { receivers: 'everyone but socket'}); 
      //emits to everyone but socket
      socket.emit('this', { receivers: 'socket'}); //emits to socket
});

Request URL: ws://localhost:8080/socket.io/1/websocket/Jr7emUQyeh2cm8vwZYCc

Request Method: GET

Status Code: 101 Switching Protocols

lego_set

Posted on 2012-12-07 |

###MOC lego set

能实现五十川芳仁书中大多数创意的套装

好多红肉… 8070还是8258？
参考一下8466，8448，8880的设计，

==========

##8043入手搭建+杀肉8258

###8043 [RMB 1600]
1123 bricks

###8258-1: Crane Truck [RMB 2200]
1877 bricks

========

###9394 [RMB 360]
499 bricks

###8070 [RMB 1000]
1281 bricks

========

###9398-1: 4x4 Crawler [RMB 1350]
1327 bricks

========

###8110 [RMB 1400]
8110-1: Mercedes-Benz Unimog U 400
2048 bricks

========

###8053 [RMB 1800]老货
8053-1: Mobile Crane
1289 bricks

========

###8265-1: Front Loader [RMB 1400]老货
1061 bricks

========

###8184 [RMB ]
http://www.brickset.com/detail/?set=8184-1

ReactNative SourceCode Networking

fetch in RN 0.25 调用链

深入理解 React Native Debugging

ShadowSocks+ProxyChains-NG 实现终端(iTerm2)下代理

安装

编辑配置文件

测试

优化

推荐(福利)

谜团

ReactNative-NativeComponent -- 1. 官方指引

Native-Module 基本分为两种

Module 和 method的关系

One Module

官方指引

RN = ReactNative

有兴趣的同学可以读一下具体 Module 和 Method 的原生实现

next

AMD 和 CommonJS -- 1. 基本概念

AMD = Asynchronous Module Definition

CommonJS

那么问题来了

CommonJS 到底是个什么鬼

预告

aboutme

宝宝来画画文案

property 参数详解

关于@property特性的介绍

1.多线程特性

2.读/写特性

3.内存管理特性

4.方法名特性

Node.js

lego_set