Performance

在 V2EX 看到一个关于性能的讨论:

使用者优先,维护者其次,自己的偏执最不重要。

自己有时候就会过于偏执而掉到坑里,谨记。

Angular.js 学习笔记

When in Rome, do as the Romans do.

最近用 Angular “完整”做了一个服务的管理后台,完整的意思是整个 WebApp 都用 Angular MVW (Model-View-Whatever) 的思路去想去做。留一个 Angular 学习笔记。

Think in Angular

Angular 是个 框架(Framework),不像 jQuery、Underscore.js 是个库(Library),库的使用一般是在某个地方调用库所提供的方法完成想要的功能,而框架往往是控制应用整个 runtime 周期。所以 Angular 相对正确的使用方式是从应用全局开始,都用 Angular 提供的双向绑定、DI、Directive、Services 等,把应用数据逻辑层和页面 DOM 操作分离。用 Angular 首先就要认同接受并实践这种思路,Think in Angular

不错的 Angular 学习资料:

  1. 官方文档 AngularJS API Docs
  2. angular-phonecat,官方提供的入门教程,非常好的 Think in Angular 实践,建议把代码 clone 本地完整学习一遍。
  3. Angular FAQ.
  4. AngularUI,官方(?) UI 库,很多 directive 可用,比如 ui.bootstrap, ui.router, ui.grid.
  5. AngularJS Fundamentals In 60-ish Minutes 视频教程,官方 Youtube 频道 也有不少东西,不过看视频效率较低。
  6. AngularJS-Learning,收集了非常多文章,涵盖各个方面,实用参考。
  7. egghead.io Angular 视频教学。
  8. A Better Way to Learn AngularJS.

jQuery

How do I “think in AngularJS” if I have a jQuery background? 很详细的介绍了如果有 jQuery 开发背景在做 Angular 需要注意的地方,以下几点:

  1. 忘掉 jQuery,用 Angular 的方式解决。
  2. 知名的 jQuery plugin 一般都已经有 Angular directive 封装,首先尝试这些,真不能满足的话再用 jQuery 方式解决。
  3. 不要直接操作 DOM,试试 directive: ng-model, ng-class, ng-show, ng-hide, ng-disabled, ng-click.

Services

把常用的数据层访问封装成 Services 在 controller 之间共享访问。$resource 构造服务时要注意返回内容必须为单个对象或对象数组,如果服务端返回格式不符合可以用 $http 构造 service:

//make angular service with $http.
angular.module('APP.services', []).factory('AppsList', function($http){
  var AppsList = {
    list: function(){
      var promise = $http.get('/url').then(function(resp){
        return resp.data;
      });
      return promise;

      //or
      //return $http.get('/url');
      //because $http returns a promise.
    },
  };

  return AppsList;
});

//use
function AppCtrl(AppsList) {
  AppsList.list().then(function(data){
    console.log(data);
  });
}

$rootScope

通过 $rootScope 可以在所有 controller 之间共享方法:

angular.module('APP', []).run(function($rootScope){
  $rootScope.format_appinfo = function(data){
    //...
  };
});

//use in controller with $scope.
function AppCtrl($scope) {
  $scope.format_appinfo();
}

$routeParams

可以通过 $routeParams 获取 url 指定参数,比如

// route 设置 url 格式
$routeProvider.when('/app/:appid/:title', {controller:'AppCtrl'});

//use
function AppCtrl($routeParams) {
  var appid = $routeParams.appid;
  var title = $routeParams.title;
}

Filter

Angular 自带了很多 filters,比如 currency,date,json,lowercase/uppercase,其中 json 可以直接在页面上格式化展示对象信息,很方便检查调试:

<pre>
{.{ app | json }.} // Octopress/Jekyll 会把两个大括号格式化掉,所以中间加一点
</pre>

代码目录组织形式,参考 angular-seed。也可以用 Yeoman 进行管理。

├──css
│  └──app.css
├──img
├──index.html
├──js
│  ├──app.js                      //配置用到的所有 module,包括自定义。
│  ├──controllers                 //每个 controller 独立一个文件,以 Ctrl 结尾命名。
│  │  ├──app_info_ctrl.js
│  │  └──...
│  ├──directives.js
│  ├──filters.js
│  └──services.js
├──lib                            //CDN 没有的第三方库。
│  ├──ngProgress
└──partials                       //页面模版,文件名和 controller 相对应。
   ├──app_info.html
   └──...

更多参考:

  1. ng-newsletter 每周 Angular 最新技术周报,内容相当好。
  2. 8 Tips for Angular.js Beginners
  3. Migration guide for jQuery Developers
  4. Building Huuuuuge Apps with AngularJS

Bootstrap 3 Grid 笔记

作为非专业的前端开发,Bootstrap 真是个好东西,特别适合做运营、管理系统界面。这些系统界面要求不高,干净整齐就好,最主要的就是网格 Grid 的使用,简单记录一下。

Bootstrap 3 自带了移动优先的响应流式网格布局系统,将整个屏幕或某一视区(viewport)划分为 12 列,使用时把内容放到相应列中,自然就整齐不乱。一般来说 Bootstrap 的网页结构是 container > row > col,一个或多个 col 组成一组 row,多个 row 归于一个 container,这样的多级布局很方便在大小不同的屏幕灵活布局。

最小单位 col 有四种:col-xs-*, col-sm-*, col-md-*, col-lg-*,(题外话,Bootstrap 这四个 col 命名实在是让人费解,也不是什么缩写,完全没有 Foundation 的 small-2 large-4 columns 简洁明了),分别适用于手机(768px 以下),平板(768-992px),桌面(992px+)和超大屏幕(1200px+),后一位是需要的宽度比例,总和为 12,这样就自动把界面进行划分布局,比如想把一个普通电脑屏幕左右平分,两个 col-md-6 即可。col 可以组合,这样就同时适配手机和电脑,比如在电脑是左右三等分,手机是二等分:

<div class="container">
  <div class="row">
    <div class="col-md-4 col-xs-6">
      A
    </div>
    <div class="col-md-4 col-xs-6">
      B
    </div>
    <div class="col-md-4 col-xs-6">
      C
    </div>
  </div>
</div>

col 也可以嵌套,要注意的是每个 col 里又是一个 12 等分的完整网格,也要包在二级容器 row 里。比如左右二等分,每个再 1:2 划分:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="col-sm-4">
          A
        </div>
        <div class="col-sm-8">
          B
        </div>
      </div>
    </div>
    <div class="col-md-6">
      ...
    </div>
  </div>
</div>

网格还有一个方便的东西就是 Offset .col-md-offset-*,可以把某一 div 向右偏移指定比例,比如只一半的宽度,然后居中,3-6-3 布局:

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
      S
  </div>
</div>

参考 Bootstrap 3: the new grid system, for starters.

批量杀进程

批量杀掉包含某一关键字的进程:

ps aux|grep KEY|grep -v grep|awk {'print $2'}|xargs kill -9

git cherry-pick

git-cherry-pick - Apply the changes introduced by some existing commits.

实际开发中会有这种情况:同时存在 v1、v2 两个分支,且不可合并。然后发现两个分支都存在某 bug,在 v1 中修复,需要合并到 v2,要么手动修改,或者用 git cherry-pick:

git cherry-pick 0ba264a1e666bacc

准爸爸

2013-10-20.

Crash Early, Crash Often

最近开发中的一点感悟。

在开发阶段要尽量多的尽量早的暴露问题,应用 crash 恰恰是暴露问题最直接的方式,方便定位没有考虑到的细节问题。

举个例子,应用中对数据边界通常会进行保护判断,比如数组取值前判断数组长度是否满足。其实在开发阶段完全没必要,要求 array[3] 有值你之前的操作就必须要满足,如果不能达到就要想想哪里出了问题,如果数据源根本不能提供那么就要检查业务设计是否有问题。过分的保护检查不一定是好事。

@zadr's iOS 7 dev tricks

@zadr 在 iOS 7 正式发布几个小时后在 Twitter 上连续发了一些 iOS 7 SDK 小技巧,大部分都是我还不知道的东西,所以摘录一下,版权归 @zadr 完全所有。

iOS 7: -[AVPlayer volume] and -[AVPlayer muted]; ! You can finally programmatically control the volume of playback without private APIs! via

AVPlayer 音量状态。

iOS 7: [CTTelephonyNetworkInfo currentRadioAccessTechnology]; what kind of cellular connection you’re on now. LTE/GPRS/CDMA{Rev 0, …}/etc! via

获取运营商网络类别。

iOS 7: -[NSArray firstObject]; Like -[NSArray lastObject];, only, the other end of the array. via

NSArray 直接取第一个对象。推荐 Underscore.m.

iOS 7: NSData has base64 encoding/decoding support now. And this fancy method, enumerateByteRangesUsingBlock:. via

NSData 有了原生的 base64 方法 base64EncodedStringWithOptions:

iOS 7: NSURLComponents: Build a NSURL and have it automatically handle encoding of strings for fragement/path/query/etc. via

NSURLComponents 自动编码处理。

iOS 7: iAd support for prerolls in MPMoviePlayerController. This is more of a heads up than an FYI. via

iAd 支持从前卷广告类型。

iOS 7: JavaScriptCore! Bridge between executing native code and executing JavaScript without needing a UIWebView. via

ObjC 直接操作 JS 的 API,JavaScriptCore 是个里程碑,值得好好学习一番。

iOS 7: MKDistanceFormatter. Localized, unit-specific formatting of distances for both imperial and metric systems. via

MapKit 相关,支持本地化的地点距离换算。

iOS 7: -[MPVolumeView wirelessRouteActive] and -[MPVolumeView wirelessRoutesAvailable] — Customize volume control when AirPlay is available. via

AirPlay 音量控制。

iOS 7: -[UIScrollView keyboardDismissMode]; — Easily recreate Messages.app’s scroll-to-dismiss-keyboard behavior! via

类似系统 Message 的键盘滑动消失效果,UIScrollViewKeyboardDismissModeInteractive.

iOS 7: UITextView supports inserting and tapping on links. Making your own Twitter client just got that much easier! via

UITextView 支持链接点击,应该是 TextKit 带来的新功能。TextKit 也是一个很值得学习的新东西。

iOS 7: AVCaptureDeviceFormat has video zooming with stabilization and simple control over frame rate/duration! via

视频录制支持缩放,以前不支持?

iOS 7: AVSpeechSynthesis - Speak text to users without requiring VoiceOver to be turned on. via

VoiceOver 相关。

iOS 7: Foundation changed a whole bunch of return types to be instancetype instead of id. Yay, type safety! via

默认对象返回类型改为 instancetype,自己封装的类库要跟进。

iOS 7: MediaAccessibility. New framework that makes it really easy to work with closed captions and video. via

图片视频功能继续加强。

iOS 7: MFMessageComposeViewController supports adding attachments! Take a photo/video and iMessage it to someone in the same flow. via

邮件分享支持直接添加附件。

iOS 7: AVCaptureMetadataOutput can detect and decode most kinds of barcodes, including QR codes! via

原生支持二维码扫描!

iOS 7: Also fixed some security vulnerabilities and updated root certificates. Check ‘em out, http://support.apple.com/kb/HT5934 via

修复了一些证书相关的安全问题。

iOS 7: SSReadingList. Add Stuff to Safari’s reading list that syncs between your Mac and iOS devices. via

Safari Reading List API。

iOS 7: I don’t even know how to describe it accurately, but, there’s some amazing motion APIs in there to explore. Can’t call out just one. via

CoreMotion API,M7 也是 iPhone 5s 最吸引我的东西。

iOS 7: UIInputView: If you have a custom input field, use this as the root object. All subviews then get tinting and blur effects. via

iOS 7 输入框的模糊效果。

iOS 7: UISimpleTextPrintFormatter: Print attributed strings without having to fall back to CoreGraphics to render content before printing. via

更为简单的打印内容格式化。

iOS 7: -[NSObject decreaseSize:] / -[NSObject increaseSize:]; // called when cmd+ & cmd- are hit, so you can increase/decrease content size. via

外接键盘可控制显示大小,类似 OS X 上的 Cmd+/Cmd-.

iOS 7: dispatch_source_memorypressure_flags_t, for whenever the system’s memory pressure conditions change. Critical <-> Warn <-> Normal. via

GCD 相关,话说 GCD 的使用一直停留在基本层面,要多多深入。

PS: 分享一个 Twitter 搜索技巧: iOS 7 from:zadr 即可搜索 @zadr 所有包含 iOS 7 关键字的 Tweets。最后鄙视一下一些所谓的开发者,完全无视 NDA 的存在,在 iOS 7 SDK 正式发布前通过翻译等方式来刷自己的技术存在感。

NSURLConnection 在页面滑动时继续执行

这篇笔记只是为了清掉 BlogTodos,实际开发中用了 AFN 等是不会遇到这个问题。当然也可以作为原理理解。

首先是 NSRunLoop,我的理解 runloop 就是 iOS 的消息循环处理机制,响应处理各种消息事件。runloop 有不同的执行模式,不同模式下只会响应处理该模式类型的事件。App 运行时会有一个主线程 mainRunLoop,在程序中可以用 [NSRunloop currentRunLoop] 简单获取当前的 runloop。

NSURLConnection 在网络请求的时候(无论主线程还是子线程),如果有点击或滑动界面,网络请求会被暂停执行,直到滑动等操作结束。这是因为 NSURLConnection 默认是 NSDefaultRunLoopMode,也就是说只会在该模式下执行,当有滑动、点击界面等操作的时候,runloop 会切换到 NSEventTrackingRunLoopMode 来处理界面操作,这时候网络请求就会被暂停执行,直到界面操作结束,runloop 模式切换回去。

解决方法就是设置 NSURLConnection 的执行模式为 NSRunLoopCommonModes,这样就会在所有模式下持续执行:

[connection scheduleInRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];

NSRunLoop Class Reference:

NSDefaultRunLoopMode - The mode to deal with input sources other than NSConnection objects.

NSRunLoopCommonModes - Objects added to a run loop using this value as the mode are monitored by all run loop modes that have been declared as a member of the set of “common” modes.

参考 NSURLConnection: How to avoid blocked file loading during scrolling of UIScrollView or UITableView

NSInvocation Notes

iOS 中一般用 performSelector 系列方法调用某个对象的方法消息,但是参数过多就不太方便,这时候就可以用 NSInvocation。一个简单的例子:

NSMethodSignature *sig = [self methodSignatureForSelector:@selector(addAlbum:atIndex:)];
NSInvocation *action = [NSInvocation invocationWithMethodSignature:sig];
[action setTarget:self];                            //0
[action setSelector:@selector(addAlbum:atIndex:)];  //1
[action setArgument:&deletedAlbum atIndex:2];       //2
[action setArgument:&currentAlbumIndex atIndex:3];  //3
[action retainArguments];
[action invoke];

NSMethodSignature 直译就是方法签名,保存了方法的参数类型和返回值信息 (type information for the arguments and return value of a method)。 通过方法签名信息就可以完整构建一个 invocation,对各个参数进行赋值后激活执行,也就完成了对象方法调用。

再看 NSMethodSignature 一段文档:

Indices begin with 0. The hidden arguments self (of type id) and _cmd (of type SEL) are at indices 0 and 1; method-specific arguments begin at index 2.

NSInvocation 第一步设定 Target(0),第二步设定 Selector(1),然后从 index 2 开始依次对参数赋值,因为 0/1 已被 Target/Selector 占用。要注意赋值的时候传的都是 指针 ,如果赋值参数可能会被释放,要记得 retainArguments。如果需要 NSInvocation 执行后的返回值:

NSString *returnString = nil; //假定返回值类型为 NSString
[action getReturnValue:&returnString];

最后附上 Three20 里用 NSInvocation 实现多参数 performSelector:

https://github.com/facebook/three20/blob/1.0.12/src/Three20Core/Sources/NSObjectAdditions.m#L89

- (id)performSelector:(SEL)selector
           withObject:(id)p1
           withObject:(id)p2
           withObject:(id)p3
           withObject:(id)p4
           withObject:(id)p5
{
    NSMethodSignature *sig = [self methodSignatureForSelector:selector];
    if (sig) {
        NSInvocation* invo = [NSInvocation invocationWithMethodSignature:sig];
        [invo setTarget:self];
        [invo setSelector:selector];
        [invo setArgument:&p1 atIndex:2];
        [invo setArgument:&p2 atIndex:3];
        [invo setArgument:&p3 atIndex:4];
        [invo setArgument:&p4 atIndex:5];
        [invo setArgument:&p5 atIndex:6];
        [invo invoke];

        if (sig.methodReturnLength) {
            id anObject;
            [invo getReturnValue:&anObject];
            return anObject;
        } else {
            return nil;
        }
    } else {
        return nil;
    }
}