blog

【译】ES modules: A cartoon deep-dive

Resume


# 联系方式

- 手机：18971387876 (武汉)
- Email：[iwcc@outlook.com](mailto:iwcc@outlook.com)
- 微信号：hiiwcc


# 个人信息

 - 王成才/男/1990
 - 本科/武汉科技大学
 - 工作年限：6年
 - 技术博客：[/](/)
 - 目前职位：**前端负责人**


# 工作经历

## 深圳市必趋科技有限公司 （ 2018年5月 ~ 至今）



### 商品溯源系统， 交易所移动端（Flutter）

因为项目跨平台的需要，加上Flutter强劲的性能，和Dart静态语言的特性，移动项目都选型了Flutter，配合RxDart成功地在短时间做出了性能媲美原生的App。

### 交易所Web端

使用**React + TypeScript + RxJs + webpack**重写了交易所web端（特别是交易部分），达到更好的响应式，速度，性能。

## 武汉中软通证信息技术有限公司 （ 2016年7月 ~ 2018年4月 ）

### 电子围栏系统

系统类项目为团队选型了**React + React Router + webpack**，后续为了加强约束，方便协作又引入了强类型的**TypeScript**，代码规范引入了**Eslint**，负责项目框架搭建，通用组件，重要模块书写，以及code review。

### Wi-Fi临侦客户端

项目需要在Android设备上展示大量的数据，主导选型为**React native +  Redux + React Router**的方案，负责项目框架的搭建，Redux数据结构的定型，通用组件，重要模块书写以及解决项目性能问题。项目达到了比原声Android更高的开发效率，以及近乎原生的体验。

### 取证设备客户端

项目需要作为windows上独立的App，主导选型为**Electron + Vue + Vuex + Vue Router + SQLite**的方案，负责项目框架搭建，克服了在单页应用展示大量数据的体验，最终以前端的开发效率实现了桌面软件的体验水准。

### 边防爆料系统

项目为了能够低成本的touch到更多用户，主导选型为**微信小程序**，负责基础框架搭建，达到了快速开发，快速发布目的。

## 南京掌控武汉分公司 （ 2015年8月 ~ 2016年7月 ）

### 取证大系统2.0
项目属于行业类数据展示系统，多操作，多数据。**独立使用Angular 1重新改写了系统**，完美解决了1.0中jsp页面卡顿，无法展示大量数据的问题。深刻体会了Angular 1 框架所带来的mvc、组件化的思想。


## 武汉昊奇科技有限公司 （ 2012年7月 ~ 2015年8月 ）

### Mepire，Videoclick
独立负责Mepire，Videoclick两个产品的网站，后台的前端开发，初次工作后的正式项目，在保证创业团队速度的情况下，也保证了UI的高度还原，主要是使用原始的HTML，CSS，JavaScript，jQuery，zepto。

注明：四个均是同样的创业团队，只是各方面合作原因，成立了新的公司，实际上算是在一家公司。

# 个人项目和技术文章

  - [Hipo](https://hipo.cash)：iOS平台原生(Swift)记账软件，多次App Store首页推荐，稳定在财务付费榜前150名。
  - [Hipo Mac](https://hipo.cash)：Mac平台记账软件(Electron + vue)，App Store中国区免费榜前10
  - [博客](/)：个人博客，涉及，产品，UI，技术等个人思考以及好文翻译。

# 技能清单

- 一定程度的设计/交互/产品能力
- 后端开发：NodeJs(Egg.js/Express/Koa)
- 前端框架：Bootstrap/RxJs/React/Vue
- 跨平台方案：ionic/React Native/Flutter/微信小程序
- 前端语言：HTML/CSS/Javascript/TypeScript/Dart
- iOS开发：Swift
- 前端工具：Webpack/Gulp/SaSS/LeSS/PhoneGap
- 数据库相关：MySQL/SQLite
- 版本管理：Svn/Git

      



推荐电影：《罪人》

有的电影炫画面，有的电影炫结构，甚至可以炫一些更直接的元素，恐怖，色情……但是抛开电影诸多表现形式，我想故事性，或者说如何讲好一个故事，还是判断一个好电影的最主要标准。

《变形金刚》机械越来越高级，故事很扯淡，评分一路走低。

昆丁的电影结构故事俱佳，再配以独特的导演气质，好片不少，《邪不压正》很是炫技，即便是同样的姜味，故事上稍微弱了点，评分差《让子弹飞》不少。

王家卫的电影，看似没故事，恰恰光影与演员的表演便是做好，最让人迷离的故事。

即便是《影》，水墨，八卦，三国，武打……诸多很炫的元素去烹饪那个，很俗套，也不见得高明的权谋故事，评分自然配不上国师。

《罪人》一个场景，一个演员，一个好的故事。

说实话类似的电影不少，《活埋》，《狙击电话亭》，都是不错的电影，都是通过固定单一的场景，去渲染画面外一个更大的，更惊悚，更big picture的场景。


[《罪人》](https://movie.douban.com/subject/27615398/)不一样，两条故事线，一条是画面外的，更精彩，更能留住人的故事。但是我想主线还是画面内的主角。


受害人在电影一个开始就已经被害，只是因为主角，过度的热情，或者正义感，才有了后面所有看似的惊险。

就是经典的路子，主角，通过电影叙述的故事，有了成长的，不着痕迹，却又让人信服，你更可以做出如下推断，如果主角在电影之前便已成长，电影所讲的故事便都不会发生，甚至还会有更好的发展。

还是要有一个好的故事，不是只是有个故事。





新加坡小游

周末机票便宜，就随性和同事来了趟新加坡三日游。很小的城市，很漂亮，也很安静。

对中文很友好，随处可见的中国元素，吃的也大多很中国菜，各色的人种，包容，礼貌，有秩序。

然后再加上一点点清教徒的感觉。这就是新加坡给我最多的感受了……

升级博客系统到2.X版本

无意中发现[Ghost](https://blog.ghost.org/2-0/)已经到2.x的版本，核心的大改动就是编辑器不再只支持Markdown，而是采用所见即所得[MobileDoc](https://github.com/bustle/mobiledoc-kit)格式的卡片式的编辑模式。如果你用过[Notion](https://www.notion.so)，你会知道是什么感觉。

但是眼下体验完全不能和Notion相比。（特别是中文模式，不用Marketdown卡片，完全不能输入中文)

想当初Ghost趁着Markdown的热潮，以及简对标Wordpress，眼下似乎也在越来越向着“复杂”靠拢，想来这就是一个产品的演变。

Flutter中的状态管理

[Flutter](https://flutter.io)作为出自Google的一个跨平台(iOS，Android)应用开发方案。布局方式上和React或者说React Native非常相似——组件(Widget)化。写起来非常的高效，却有着React Native所不具有的优势： 一套代码到处运行，原生渲染，原生调用，不需要像RN需要桥接。

前端应用除去布局部分，就属**状态管理**最复杂难搞了。官方文档中只是提及了最基础的部分，因此本文中着重讨论这部分。

下面基本上转述自Google I/O '18上视频[Build reactive mobile apps with Flutter](https://www.youtube.com/watch?v=RS36gBEp8OI)，内容较水，推荐大家看视频就够了😄

---

### setSate

是的你没看错，就是和React中一模一样的setStae。Flutter将组件分为StatefulWidget，StatelessWidget，自然有状态的组件使用继承Flutter将组件为StatefulWidget。`flutter create app`开箱中代码就是实例了setSate
```dart
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), 
    );
  }
}
```
写法也比较简单，适用于组件层比较浅的情况，但是如果需要跨组件共享`state`的时候，你只能放在它们共有的祖先组件上，然后逐层传递，这样有势必会造成多余的组件更新。

![Build-reactive-mobile-apps-with-Flutter--Google-I-2FO--18--0001](https://image.hicc.pro/hicc_me154157715_Build-reactive-mobile-apps-with-Flutter--Google-I-2FO--18--0001.jpg)

### InheritedWidget, context

逐层传递state太过于笨重，Flutter官方提供了[InheritedWidget Class](https://docs.flutter.io/flutter/widgets/InheritedWidget-class.html)来去优化这个问题，基本上就是将需要共享的State放在一个继承InheritedWidget的类中，然后在使用的组件widget中直接取用就是。

明眼人一看便知，这就是React中Context。

正如React中有基于context的社区库Redux，正式使用时候`InheritedWidget`相对比较基础，你需要写一大堆模版类的代码来满足需求，因此推荐使用flutter社区的库[scoped_model](https://pub.dartlang.org/packages/scoped_model)来方便开发。下面是库官方的例子：

```dart
class CounterModel extends Model {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
    
    notifyListeners();
  }
}

class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new ScopedModel<CounterModel>(
      model: new CounterModel(),
      child: new Column(children: [
        new ScopedModelDescendant<CounterModel>(
                builder: (context, child, model) => new Text(
                    model.counter.toString()),
              ),
        new Text("Another widget that doesn't depend on the CounterModel")
      ])
    );
  }
}
```

就是两个类`Model`和`ScopedModelDescendant`，前者用来存储数据，后者用来包裹组件以此来提供`state`。

值得注意的所有被包裹过的组件在状态变化的时候都会重新渲染，这样可能会造成不必要性能损失。`ScopedModelDescendant`也提供了阻止重新渲染的参数`rebuildOnChange: false`。**。

*稍微了解过React的可以想得到，这个就类似于`shouldComponentUpdate`，不太建议使用，很容易滥用误用造成难以发现的bug。*

### StreamBuilder, ReactiveX

正如上文所说，状态管理很难，特别是异步环境下的状态管理更难，难在哪里？不外乎就是能够做到：

- 方便拿到`State`
- 能够将更新高效的通知给依赖组件
- 能够精准的做到最小更新

想要更好解决这些问题，就需要引入Reactive响应的概念了。引用前端届的RxJS来说：

> Observable = lodash for async

Flutter的官方语言Dart中内置了`Stream`的概念

> Stream ~= Observable

因此不言而喻，就是将需要需要管理的`State`转化为`Stream`，然后使用Flutter官方的`StreamBuilder`来订阅所需要数据源，方便快捷，高效。

```dart
class MyTimer {
  static Stream<String> timerInterval$ = new Stream.periodic(Duration(seconds: 1)).map((int) => new DateTime.now().toString());
}

class _RealTimeText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return StreamBuilder(
      stream: MyTimer.timerInterval$,
      builder: (context, snapshot) => Text(snapshot.data),
    );
  }
}
```

Rx相对Stream来说，提供了更多方法，社区中资料也多，dart社区也有[RxDart](https://pub.dartlang.org/packages/rxdart), 正式使用还是少不了。

### 总结

上面的三种算是主流，官方推荐的Flutter 状态管理的方法了，Rx很强大，但是概念相对复杂，也相对难以掌控，Scope model的方式虽说有缺陷倒也上手容易，已经能很好的解决问题，初学者不妨从它来开始……




矢星当值，大利南方

![7EzWYP0URKy-LEnIKQnP3w_thumb_47d2](https://image.hicc.pro/hicc_me2049935250_7EzWYP0URKy-LEnIKQnP3w_thumb_47d2.jpg)

![IMG_2023](https://image.hicc.pro/hicc_me150142931_IMG_2023.JPG)

![r8sGai1DSa2oB3b8BCSgyg_thumb_485e](https://image.hicc.pro/hicc_me-1694451617_r8sGai1DSa2oB3b8BCSgyg_thumb_485e.jpg)

![UNADJUSTEDNONRAW_thumb_48c1](https://image.hicc.pro/hicc_me-745466811_UNADJUSTEDNONRAW_thumb_48c1.jpg)

《妖猫传》《三块广告牌》和产品

毫无疑问，我是不喜欢《妖猫传》的，塑料感的大唐盛世，配合形如秦昊所演人物般猥琐的剧情。这就是我对《妖猫传》的所有感受。

无心插柳，之后看了《三块广告牌》这个电影，摄影不美，主演不美，至于绝对精彩的女主，更加……放张图片你们感受下


![p2510027371](https://image.hicc.pro/hicc_me1282015665_p2510027371.jpg)

甚至所讲的故事，也不美，不是你们赞美的“玉环之后，再无盛唐”，更不是什么人猫绝世爱恋故事……

但是我超爱这个故事，更改爱这样讲故事，就爱这种长在生活中温突突黑色幽默。

- - - -

一直很喜欢做一些“东西”，也就是俗称的产品吧，但是回顾2017年，无论个人还是工作中，的的确确失败的一年，什么值得称道的东西都没有造出来……

想想，也喜欢这种慢慢长出来的产品，内聚，让你会心一笑，不去创造什么盛大词汇点缀的东西，反而似乎有了点方向，压力少了，动力倒是多了。

善！

- - - -
再分割，相比我还是更喜欢《卧虎藏龙》《聂隐娘》中的古代……



2017，家，流水的一年

2017年流水似的过去了……

所幸赶在2018年元旦前搬进了新家，精装的房子，打包的装修，之前设想的种种基本都没有实施，还是懒的原因……

博客也终于升级到了1.x的版本。

```
$ docker pull ghost
$ docker run -d --name name -p 3001:2368 -v /path/to/ghost/blog:/var/lib/ghost/content -e url=http://your.blog -e NODE_ENV=production ghost:1-alpine
//更改下nginx的监听端口，restart就OK😄
//将之前hicc.me博客中外链http图片全部迁移到https后，博客也升级到了https
//顺便letsencrypt的https升级更方便了，几乎一键，大赞👍，https://certbot.eff.org/#ubuntutrusty-nginx，
```

嗯，支付宝说，我2018年的关键词是——**远方**。


乔布斯的一段演讲



<audio controls="" src="https://image.hicc.pro/steven-There’s%20lots%20of%20ways%20to%20be%20as%20a%20person.mp3"></audio>

> There’s lots of ways to be as a person, and some people express their deep appreciation in different ways. But one of the ways that I believe people express their appreciation to the rest of humanity is to make something wonderful and put it out there. You never meet the people, you never shake their hands, you never hear their stories or tell yours. But somehow in the act of making something with a great deal of care and love, something’s transmitted there. And it’s a way of expressing to the rest of our species our deep appreciation. So we need to be true to who we are and remember what’s really important to us. That’s what’s gonna keep Apple, Apple, is if we keep us, us.




热爱你所热爱的



AirPods终于到手了，密集用了一天，AirPods确实给了我等待6周的惊喜，简单，可信赖，这就是蓝牙耳机该有的样子呀。

产品不就应该是这个样子吗？诸多的纠结不就是为了这个直白的目的吗？

越简单越不易，没日没夜的忙碌，似乎忘却了自我。

喘息，有节奏的喘息才能有力量。

热爱我的热爱。

-----
2017.8.25

买之前诸多评测说是没有按键来调节音量，不免心有疑虑，用到现在才发现，为什么要有音量调节呢？有了这个才是泯然众人矣。

用到现在更加喜欢AirPods了。

[译]简编漫画介绍WebAssembly

最是深情

一早上，妈妈电话我，说外公病重让我给她买回家的票。过了一会奶奶又给我电话，开口就是你别怕，你外公走了，没敢给你妈妈说……

窒息般地伤心。外公走了，过年还是好好的呀，奶奶说，我外公想外婆，想不开，去了。

外婆前年冬天过世的，因为肺部有病，有天劳累过度，吐了血就走了，外公不住的念叨，“还能醒过来不，还能醒过来不”，外公是村里之前少有的读书人，吃饭挑，只有外婆能照顾的妥当，外婆一走，外公身体就开始不好，也不怎么好好吃饭，一直说想我的外婆，想效仿我的大爷爷。

说到这里又是另一个故事，我08年高中毕业，大奶奶过世，大爷爷开始不吃饭，只喝点牛奶，之后一个月我大爷爷跟着我大奶奶走了。

我外公老说也要学我大爷爷，绝食……，许是那样太过辛苦，一直到了今天，想不到是用这样的一种决然的方式。

问朋友车票的事，说起外公，说他和我外公是忘年交，相互聊很多。小时候也对外公无话不谈，有次我抱怨了爸妈的事，爸妈却从外公那里听到了，之后和外公就不那样聊天了。我们两家隔得近，我一天可以去好几次，外公外婆对我极好，仍和他们很亲。之后外面工作，偶尔电话回去，更多的只是问候。

现在好想多和外公聊几次天。

现在就剩下爷爷奶奶了。

![](https://image.hicc.pro/hicc_me-1093279145_IMG_2850.JPG)





升级博客到Ghost 0.11.3，支持AMP

Ghost在0.11版本中支持了Google Accelerated Mobile Pages 也就是AMP，能够1s内加载网页，算是个不错的特性。

周末有时间，也就顺便做了，升级，过程挺顺利，倒是想起了很早以前各种折腾的时光。😄

---
下面是AMP的一个样式，如果是刚刚升级，得等段时间，Google搜索才会有AMP的效果。
![](https://image.hicc.pro/hicc_me459560066_IMG_3620.PNG)

![](https://image.hicc.pro/hicc_me439242604_IMG_3619.PNG)


有天窗的屋子

![有天窗的屋子](https://image.hicc.pro/image/e/19/280bb5529d2b4eebc18d806089b10.jpg)

Tweet上看到的一张照片，好生喜欢，做自己喜欢的事，和心爱的人一起面朝大海，春暖花开。

AngularJS 1 教程

## 为什么需要前端框架

随着浏览器性能提升，更多Web Page演变为Web App，特别是在中大型的项目中，就需要一个 **前端框架** 来:

- 解耦应用的逻辑，数据模型，和界面视图
* 更加方便的多人协作
* 基本组件的抽离复用
* 相对低成本的性能保证
* 方便测试
* ……

## 为什么2016年的今天仍然可以学习Angular 1

眼下潮流的框架太过于现代，入门门槛过高，学习React，Vue 2，Angular 2，需要首先学习npm、webpack、jsx、ES6、甚至Typescript。而且变化非常快，一些需要写前端的后端人员可能力不从心😂

而学习AngularJS 1 只需要基础的前端知识即可，Angular 1 属于经典的MVC类框架，API已经非常稳定，社区成熟，对低版本浏览器支持好(1.2以前版本支持IE6)，性能依然满足大部分场景。


## 和jQuery 的不同
jQuery是库，面向DOM，Angular 面向模型，思路要转变。

---
<a class="jsbin-embed" href="http://jsbin.com/wiqoma/embed?html,js,output">JS Bin on jsbin.com</a><script async  src="http://static.jsbin.com/js/embed.min.js?3.40.0"></script>

同样的一个简单需求，可以明显看得出jQuery中业务代码，直接操作DOM代码揉杂在一块，而Angular中JS代码关心业务逻辑，HTML描述界面非常的清晰。

一般而言，使用jQuery的弊病在于，

- 用作中大型应用jQuery相对简陋，容易执着于DOM操作这种原子类问题。
* 代码不好模块化，变量，方法处在全局作用域下面容易相互污染。
* 代码不容易随着业务更改，扩展。
* 还有相对反直觉的一点是，  **如果页面交互复杂，而开发人员对DOM操作不精通，jQuery遍地`$()`的使用方式很容易造成性能问题** 。
* 遍地所谓的jQuery插件严重使得代码膨胀，性能低下！！！


当然框架本身的学习成本，是对项目后期的投资，不过项目本身不复杂，完全没必要使用前端框架，用了反而适得其反。

## 学习AngularJS 1
AngualrJs则通过数据双向绑定屏蔽了DOM操作，MVC解耦代码，依赖注入，自定义指令来复用代码，然后配合强大的路由，本地化，安全特性等，成功地成为了前ES6时代最流行的前端框架。

### 作用域、数据双向绑定、模块

作用域(scope)是AngualrJs中的基础概念，一般而言，一个controller一个scope ， 每个controller中内置一个数据模型对象`$scope`。而 **`$scope`对象是定义应用业务逻辑、控制器方法和视图属性的地方** 。

上面的Demo中，业务变量`number`是`$scope`的一个属性，然后通过数据绑定的方式链接到view。

```html
<div>{{number}}</div>
<input type="number" ng-model="number">
```
 
`{{ }}`语法绑定到view中，这个符号还可以修改。

```js
angular.module('app',[],function($interpolateProvider) {
    $interpolateProvider.startSymbol('(%');
    $interpolateProvider.endSymbol('%)');
})
```

而 `ng-model`就是 AngularJS 1中的一大特色： **数据双向绑定** ，model中数据变化了view中就会自动改变，而相应的view中(表单)变化了，也会自动同步到model。

Angular 1.3 之后支持了 `controller as`的语法，上面Demo就可以这样写了

```js
<div ng-app="app" ng-controller="MainCtl as vm">
  <div>
    {{vm.number}}
  </div>
  <input type="number" ng-model="vm.number" require>
  <button ng-click="vm.addOne()">
    +1
  </button>
</div>
```

```js
angular.module('app', [])
    .controller('MainCtl', function() {
      this.number = 0;
      this.addOne = function() {
        this.number += 1;
      }
    })
```


这样controller中不在显示的依赖`$scope`，完全就是普通的函数，干净，好测试，并且也有利于避规一些scope的原型继承导致的双向同步的bug，推荐这样书写。

需要注意的是controller中只操作数据即可，不要试图操作DOM，这点jQuery的同学一定要忍住😄，如果需要操作DOM，请使用指令，后续会讲到。

简单说一下模块

```js
//声明模块
angular.module(‘app’, []);
```

相对独立的功能块可以声明为一个模块，然后通过依赖注入相互引用，这样达到方便的复用，控制，一般第三方插件都是通过模块方式引入到你的应用代码，而自身的业务代码也可以根据实际情况切分不同的模块。

到这一步已经可以开始写一定的Angualr应用了，按照一定功能粒度划分模块，然后纯粹js业务代码，之后数据绑定到view。

实际上之后Angular 1的种种概念都是围绕上述的展开和补充。


### Angualr 1实现双向绑定的脏检查

AngualrJS 1中数据模型对象 `$scope`，就是普通的javascript对象(POJO)，你在上面任意的添加属性和方法，Angular都支持并且能够实时双向绑定的“黑魔法”就是脏检查。

**脏检查字面理解就是循环对比前后值，如果不相同说明就是“脏”的然后执行相应的操作，直到所有值相同，或者超出循环次数范围**

如果说scope是入门的核心，那么Angualr脏检查就是入门到精通的核心。

#### 从使用角度来说脏检查

---

<a class="jsbin-embed" href="http://jsbin.com/jevizaq/embed?html,js,output">JS Bin on jsbin.com</a><script async src="http://static.jsbin.com/js/embed.min.js?3.40.0"></script>

上面Demo timeout的例子中，通过原生setTimeout方法修改的变量，并没有更新到视图上，而1000毫秒setTimeout的能够更新。说明：

- 脏检查需要一个契机触发，这也是AngualrJs 1中提供大量自己包装过的js原生就有的方法，典型的如 `$timeout` ， `$http`都是为了能够出发脏检查的 `$digest`，所以尽量使用AngularJS提供的方法。
* 一次脏检查会便利App中所有的需要被观察的对象，有一个全局的`$$watchers`。1000毫秒setTimeout的能够更新是因为，这个时间点，恰好由`$timeout`方法触发了一次检查。因此这也就导致了从另一个角度分析脏检查。

#### 从性能角度来说脏检查

上面例子说明了AngularJS脏检查的特性，手动触发，全局检查。

每次循环都要全部遍历一边`$$watchers`的值，而且如果被检测的值相互有依赖，还要循环多次。因此AngularJS脏检查很容易导致性能问题。因此

- 限制不必要的监控数量，建议不超过2000个
* 避免避免深度比较、复杂的逻辑。
* 只绑定一次，Angular 1.3之后 `{{::number}}`语法有助于减少监控数量，因为 `::` 开头的表达式都被认为是一次性表达式。一次性表达式一经赋值就会移除监控。
* 必要时候使用指令 `directive`


### 指令 `directive`，以及用指令写组件

指令是Angular中相对低层，却又非常强大的功能。如果一般使用并不需要了解，使用内置的指令已经可以完成绝大多数功能。

AngularJs中本身以及内置了大量的指令，例如， `ng-if` ， `ng-repeat` ， 甚至`ng-controller`。

也可以通过下面方式来自定义指令。

```js
angular.module('myApp', [])
.directive('myDirective', function() {
    return {
        restrict: String,
        priority: Number,
        terminal: Boolean,
        template: String or Template Function:
        function(tElement, tAttrs) (...},
        templateUrl: String,
        replace: Boolean or String,
        scope: Boolean or Object,
        transclude: Boolean,
        controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... },
        controllerAs: String,
        require: String,
        link: function(scope, iElement, iAttrs) { ... },
        compile: // 返回一个对象或连接函数，如下所示：
            function(tElement, tAttrs, transclude) {
                return {
                    pre: function(scope, iElement, iAttrs, controller) { ... },
                    post: function(scope, iElement, iAttrs, controller) { ... }
                }
                // 或者
                return function postLink(...) { ... }
            }
    };
});
```

自定义指令相对复杂难懂，算是AngularJS中高阶能够，可以从下面三点简单理解的是：

- scope字段，设定指令的作用域。
* link 函数，如果需要接触DOM，代码在此函数中。
* controller 函数，一般用作指令间的调用。

<a class="jsbin-embed" href="http://jsbin.com/bekubo/embed?html,js,output">JS Bin on jsbin.com</a><script async  src="http://static.jsbin.com/js/embed.min.js?3.40.0"></script>


来自官网 [AngularJS](https://docs.angularjs.org/guide/directive)的Tab例子可以很好的说明controller的使用。

---

<a class="jsbin-embed" href="http://jsbin.com/momozo/3/embed?html,js,output">JS Bin on jsbin.com</a><script async src="http://static.jsbin.com/js/embed.min.js?3.40.0"></script>

上述Nestlist Demo中使用指令的渲染速度明显快过使用Angular模版方式。

原因在于DOM写入是种相当耗时操作，大批量数据最好拼好HTML字符串一次性 `innerHTML`到页面中，这样的速度远快于逐步展开插入(Angualr 模版渲染方式)的速度 ，这也是AngualrJs中指令在现在看来也是很强大有用的功能。

- 有机会直接操作DOM，这样也就
	- 有机会书写高效的渲染代码
	* 可以在此使用一些第三方的非AngularJS系js插件。
* 能够隔离scope，甚至能够灵活的方式和其他scope交互，既可以使用`=`强大的双向绑定，而且AngularJs 1.5 scope中 `<`带了目前流行类似单向绑定的功能。
* 扩展来说，在 **今天主流组件化的潮流之下，Angular 1完全可以依赖directive来按照component-based的方式书写框架，**甚至这点已经是目前Angualr 1社区中潮流用法:[Component-Based AngularJS Directives](https://www.airpair.com/angularjs/posts/component-based-angularjs-directives)， [Refactoring Angular Apps to Component Style](https://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html) 

再次多说一点的是，指令中能够精准定义scope交互的功能，从脏检查的角度来说也能在很大程度上减少`$$watchers`的数量，以此来增强性能。

### Promise

Promise的相关可以通过这篇文章来看，[译用漫画来解说AngularJs中的Promises](/promises-angularjs-explained-as-cartoon/) 。


---

AngularJS 1其实还有蛮多概念，不过毕竟是有点过时的框架，上述所写便是Angular 1值得关注留意的知识点了，应该能够足够了解Angular 1。

使用letsencrypt升级网站到https


因为[Hipo在线版](https://hipo.cash/admin)的~~计划(不日放出)~~，所以将hipo.cash升级到https，证书是免费开放的 [letsencrypt](https://letsencrypt.org)，配合官方的工具[certbot](https://certbot.eff.org/#ubuntutrusty-nginx)。

----  2018.1.10  ----

新版本的cerbot更加的方便，下面的命令还是来自于cerbot网站

```
// 如果是ubuntu nginx的方案
$ sudo apt-get update
$ sudo apt-get install software-properties-common
$ sudo add-apt-repository ppa:certbot/certbot
$ sudo apt-get update
$ sudo apt-get install python-certbot-nginx 

// 然后直接
$ sudo certbot --nginx
// 它会枚举出你 server的网站，你选择需要升级https的域名后，它甚至直接帮你配制nginx，重启，真正的一键。
```

当然如果你之前就配了https的话，如果用完cerbot，还是不能访问，可以参考下面：
```
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/hicc.me/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/hicc.me/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

# Redirect non-https traffic to https
if ($scheme != "https") {
    return 301 https://$host$request_uri;
} # managed by Certbot
```

----



letsencrypt通过访问你服务器上生成的一个随机文件来验证你的域名，所以再使用cerbot脚本之前，首先需要确保要能够通过你的域名直接访问到`.well-known`目录，如果你讲随机文件放倒`/var/www/server/challenges`可以这样配置nginx。

```
server {
    server_name www.yoursite.com yoursite.com;

    location ^~ /.well-known/ {
        alias /var/www/server/challenges;
        try_files $uri =404;
    }
}
```

下面的教程基本来自[cerbot官网](https://certbot.eff.org/#ubuntutrusty-nginx)(使用ubuntu 14 + nginx)，

下载cerbot

```
wget https://dl.eff.org/certbot-auto
chmod a+x certbot-auto

./certbot-auto
```

然后运行
```
./path/to/certbot-auto certonly
```
然后就是输入联系邮箱，选择标准插件还是"webroot"(官网原话:which can work with the webroot directory of any webserver software，hipo选用的是这个)插件，之后输入需要升级的域名(hipo.cash www.hipo.cash)，之后就是输入验证域名随机文件生成的目录(也就是上述所说的`/var/www/server/challenges`)。

Done！！ 一般情况就会提示执行成功。


之后配置nginx监听443，重定向http到https
```
server {
    listen 80 ;
    listen [::]:80;
    server_name hipo.cash www.hipo.cash;
    return  301 https://hipo.cash$request_uri;
}

server {
    listen 443 ssl ;
    listen [::]:443 ssl;

    server_name hipo.cash www.hipo.cash; # Replace with your domain
    ssl on;
    ssl_certificate /etc/letsencrypt/live/hipo.cash/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/hipo.cash/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/hipo.cash/chain.pem;
    location / {
        proxy_pass http://127.0.0.1:18080;
    }
}
```

重启nginx，正常情况下网站便成功升级到了https😄


letsencrypt的脚本需要90后renew下，certbot也支持自动更新。

```
./path/to/certbot-auto renew --quiet --no-self-upgrade
```

可以通过下面验证下

```
./path/to/certbot-auto renew --dry-run
```

更新之后需要重启下nginx

```
service nginx restart
```


![https://hipo.cash/ 手机版](https://image.hicc.pro/image/1/f3/c3af92470cb11b07267da2bcf1948.JPG)

----
因为hicc.me中图片自用用的是七牛http链接，替换稍有点麻烦，hicc.me只能稍后升级到https了～～



解决CloudKit在Electron中无法登录的问题

![cloudkit-auth-window](https://image.hicc.pro/image/e/13/27c4bebd1a705f93843be6368e762.png)


最近CloudKit Web端授权页面更新后中使用了CMD模块化的东西，因此会检查`require`是否存在，本意是存在的话就会按照CMD的方式加载js模块，但是Electron中默认通过`require`来加载electron模块或者`npm`模块，这样问题就来了，**Electron中的Cloudkit授权页面就会报错！**

解决方案也简单，如果你的页面中不需要使用electron提供的node能力，自然**解决方案就是启动主窗口时候禁用node能力即可，这样通过window.open()之后的窗口也会禁用。**

```
//在mian.js中
const BrowserWindow = electron.BrowserWindow
mainWindow = new BrowserWindow({
    width: 1200, 
    height: 800,
    webPreferences: {
      nodeIntegration: true//这里配置禁用node使用
    }
  })
```

当然一般情况下还是需要使用electron所提供的node能力，这样就不能在`main.js`中禁用全部窗口的node能力，因此就需要单独设置。

至于**CloudKit js授权的案例中，单独关闭CloudKit Web端授权页面中node能力即可**。

```
//修改https://cdn.apple-cloudkit.com/ck/2/cloudkit.js中window.open方法第三个参数增加nodeIntegration=0

window.open(a, "", "nodeIntegration=0,width=" + b + ", height=" + c)

```

升级Ghost到0.9.0

![三峡瀑布](https://image.hicc.pro/hicc_me-1582630246_IMG_3418.JPG)

之前blog所使用的是0.5.7的Ghost，最近又时间就顺手升级了下。

根据[官方文档](http://support.ghost.org/how-to-upgrade/)先升级到了0.7.1版本。

本来想先在本地测试的，结果估计是Mac node版本过高无法成功安装所需的node模块，一咬牙直接服务端升级，居然成功了，此刻就是ghost 0.7.1版本。


随后在0.7.1版本上升级到了最新版本(写此文时是0.9.0)。

值得注意的是替换完文件，`npm install --production`之后最好来一次`nam start --production`这个时候Ghost会做些版本升级。

![](https://image.hicc.pro/hicc_me-1209808234_ghost-upgrade.png)

## 七牛插件

还是使用了之前0.5.7版的[七牛插件](http://www.ghostchina.com)：

```
nam install qiniu --production
```

在`config.js`文件

```
config = {
    production: {
        storage: {  
           provider: 'qiniu',
           bucketname: 'xxx',
           ACCESS_KEY: 'xxx',
           SECRET_KEY: 'xxx',
           root: 'xxx',
           prefix: 'xxx'
        }
    }
}
```

替换`core/server/storage/index.js`文件为：

```
var errors  = require('../errors'),
    storage = {};

var config  = require('../config');

function getStorage(storageChoice) {
    // TODO: this is where the check for storage apps should go
    // Local file system is the default.  Fow now that is all we support.
    // storageChoice = 'local-file-store';
    storageChoice = (config.storage && config.storage.provider) || 'local-file-store';  

    if (storage[storageChoice]) {
        return storage[storageChoice];
    }

    try {
        // TODO: determine if storage has all the necessary methods.
        storage[storageChoice] = require('./' + storageChoice);
    } catch (e) {
        errors.logError(e);
    }

    // Instantiate and cache the storage module instance.
    storage[storageChoice] = new storage[storageChoice]();

    return storage[storageChoice];
}

module.exports.getStorage = getStorage;
```

在`core/server/storage/`目录下增加`qiniu.js`文件
```
// Qiniu CDN support
// Copyright: GhostChina.com

var _       = require('lodash'),
    express = require('express'),
    fs      = require('fs-extra'),
    path    = require('path'),
    util    = require('util'),
    utils   = require('../utils'),
    Promise = require('bluebird'),
    config = require('../config'),
    errors  = require('../errors'),
    baseStore   = require('./base'),
    crypto = require('crypto'),

    qiniu        = require('qiniu'),
    qiniuConfig  = config.storage,
    
    qiniuStore;

    qiniu.conf.ACCESS_KEY = qiniuConfig.ACCESS_KEY;
    qiniu.conf.SECRET_KEY = qiniuConfig.SECRET_KEY;
    qiniu.conf.USER_AGENT = 'Ghost ' + config.ghostVersion;

var putPolicy = new qiniu.rs.PutPolicy(qiniuConfig.bucketname);

function QiniuStore () {
}

util.inherits(QiniuStore, baseStore);

QiniuStore.prototype.save = function (image) {
    var uptoken = putPolicy.token();
    var md5sum = crypto.createHash('md5'),
        ext = path.extname(image.name),
        targetDirRoot = qiniuConfig.root,
        targetFilename,
        key,
        extra = new qiniu.io.PutExtra();

    var savedpath = path.join(config.paths.imagesPath, image.name);

    return Promise.promisify(fs.copy)(image.path, savedpath).then(function(){
        return Promise.promisify(fs.readFile)(savedpath);
    }).then(function(data){
        md5 = md5sum.update(data).digest('hex');

        targetFilename = path.join(targetDirRoot, md5.replace(/^(\w{1})(\w{2})(\w+)$/, '$1/$2/$3')) + ext;
        targetFilename = targetFilename.replace(/\\/g, '/');
        key = targetFilename.replace(/^\//, '');

        return Promise.promisify(qiniu.io.put)(uptoken, key, data, extra);
    }).then(function() {
        // Remove temp file
        return Promise.promisify(fs.unlink)(savedpath);
    }).then(function () {
        // prefix + targetFilename
        var fullUrl = qiniuConfig.prefix + targetFilename;
        return fullUrl;
    }).catch(function (e) {
        errors.logError(e);
        return Promise.reject(e);
    });
};

QiniuStore.prototype.exists = function (filename) {
    return new Promise(function (resolve) {
        fs.exists(filename, function (exists) {
            resolve(exists);
        });
    });
};

QiniuStore.prototype.serve = function (){
    // For some reason send divides the max age number by 1000
    return express['static'](config.paths.imagesPath, {maxAge: utils.ONE_YEAR_MS});
};

module.exports = QiniuStore;

```
## Disqus,统计代码安装

最后自然不要遗漏了，disqus，和统计代码的安装😄，可以参考我之前[从wordpress迁移的文章](/wordpress-to-ghost/)

![](https://image.hicc.pro/image/c/42/9feeada746a54ed33da9531fa67e5.jpg)

3张照片

![](https://image.hicc.pro/image/4/ac/353863382ebbd778dc963e57665c9.jpg)

![](https://image.hicc.pro/image/f/03/95a31e3474a0840878f864990e70e.JPG)

![](https://image.hicc.pro/image/5/5d/82cf932761858372a2d680964dd3c.JPG)

Hipo Log

blog

【译】ES modules: A cartoon deep-dive
1/16/2019, 1:32:20 AM

Resume
12/4/2018, 11:34:21 AM

推荐电影：《罪人》
11/11/2018, 3:14:50 PM

新加坡小游
11/7/2018, 11:45:09 PM

升级博客系统到2.X版本
10/17/2018, 10:17:32 PM

Flutter中的状态管理
8/16/2018, 8:28:10 PM

矢星当值，大利南方
7/29/2018, 3:32:34 PM

《妖猫传》《三块广告牌》和产品
1/18/2018, 12:54:30 AM

2017，家，流水的一年
1/8/2018, 9:13:36 PM

乔布斯的一段演讲
9/15/2017, 10:09:56 AM

热爱你所热爱的
7/22/2017, 3:40:43 PM

[译]简编漫画介绍WebAssembly
5/29/2017, 3:59:42 AM

最是深情
5/8/2017, 12:43:13 PM

升级博客到Ghost 0.11.3，支持AMP
12/24/2016, 3:01:54 PM

有天窗的屋子
11/18/2016, 8:57:37 AM

AngularJS 1 教程
11/2/2016, 4:33:40 PM

使用letsencrypt升级网站到https
10/9/2016, 9:57:50 PM

解决CloudKit在Electron中无法登录的问题
8/27/2016, 9:40:14 PM

升级Ghost到0.9.0
8/22/2016, 11:02:30 AM

3张照片
8/22/2016, 9:13:52 AM

blog

【译】ES modules: A cartoon deep-dive1/16/2019, 1:32:20 AM

Resume12/4/2018, 11:34:21 AM

推荐电影：《罪人》11/11/2018, 3:14:50 PM

新加坡小游11/7/2018, 11:45:09 PM

升级博客系统到2.X版本10/17/2018, 10:17:32 PM

Flutter中的状态管理8/16/2018, 8:28:10 PM

矢星当值，大利南方7/29/2018, 3:32:34 PM

《妖猫传》《三块广告牌》和产品1/18/2018, 12:54:30 AM

2017，家，流水的一年1/8/2018, 9:13:36 PM

乔布斯的一段演讲9/15/2017, 10:09:56 AM

热爱你所热爱的7/22/2017, 3:40:43 PM

[译]简编漫画介绍WebAssembly5/29/2017, 3:59:42 AM

最是深情5/8/2017, 12:43:13 PM

升级博客到Ghost 0.11.3，支持AMP12/24/2016, 3:01:54 PM

有天窗的屋子11/18/2016, 8:57:37 AM

AngularJS 1 教程11/2/2016, 4:33:40 PM

使用letsencrypt升级网站到https10/9/2016, 9:57:50 PM

解决CloudKit在Electron中无法登录的问题8/27/2016, 9:40:14 PM

升级Ghost到0.9.08/22/2016, 11:02:30 AM

3张照片8/22/2016, 9:13:52 AM

【译】ES modules: A cartoon deep-dive
1/16/2019, 1:32:20 AM

Resume
12/4/2018, 11:34:21 AM

推荐电影：《罪人》
11/11/2018, 3:14:50 PM

新加坡小游
11/7/2018, 11:45:09 PM

升级博客系统到2.X版本
10/17/2018, 10:17:32 PM

Flutter中的状态管理
8/16/2018, 8:28:10 PM

矢星当值，大利南方
7/29/2018, 3:32:34 PM

《妖猫传》《三块广告牌》和产品
1/18/2018, 12:54:30 AM

2017，家，流水的一年
1/8/2018, 9:13:36 PM

乔布斯的一段演讲
9/15/2017, 10:09:56 AM

热爱你所热爱的
7/22/2017, 3:40:43 PM

[译]简编漫画介绍WebAssembly
5/29/2017, 3:59:42 AM

最是深情
5/8/2017, 12:43:13 PM

升级博客到Ghost 0.11.3，支持AMP
12/24/2016, 3:01:54 PM

有天窗的屋子
11/18/2016, 8:57:37 AM

AngularJS 1 教程
11/2/2016, 4:33:40 PM

使用letsencrypt升级网站到https
10/9/2016, 9:57:50 PM

解决CloudKit在Electron中无法登录的问题
8/27/2016, 9:40:14 PM

升级Ghost到0.9.0
8/22/2016, 11:02:30 AM

3张照片
8/22/2016, 9:13:52 AM