koa2-compose学习


koa-compose模块学习

最近在一点一点学习koa源码和深入浅出Node.js那本书,因为现在egg也是基于koa2的,而且自己以前做毕设的时候也用过,async/await真的是太好用了;现在新的中间层用egg搭建,所以想彻底把这部分的东西好好系统看一遍。

点击阅读

React高阶组件(转)


前言

本文代码浅显易懂,思想深入实用。此属于react进阶用法,如果你还不了解react,建议从文档开始看起。

我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只不过传入的参数变成了react组件,并返回一个新的组件.

A higher-order component is a function that takes a component and returns a new component.

点击阅读

2018新年第一篇


过年期间没更新博客也没去更新theme的新功能,倒是也没有懒惰,只是趁着过年期间算是可以有一小段修整的时间,一边给自己放了个假,一边也完成了自己一直想做的一个小程序的第一版 -> 精灵宝可梦dex

点击阅读

关于切换到https


起因

其实不切https也没什么性能上的问题,就是想把chrome上的安全绿锁头显示出来;从另一方面讲,还能减少一些http劫持(这个其实深层次的我也没研究过,包括DNS劫持之类的…)和运营商劫持,切到https后,看上去好像是减少了一些被劫持的几率。

点击阅读

edit-highlight


把Lap的highlight风格做了一次大的调整,改成了自己最喜欢的atom-one-dark,只不过ES6的语法好像暂时没办法高亮,因为hexo内置hl渲染方法渲染出来的dom节点根本没办法对ES6部分写样式。
下面的是效果的展示,暂时也算满意了,可能以后还会进行一次调整。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function $initHighlight(block, cls) {
try {
if (cls.search(/\bno\-highlight\b/) != -1)
return process(block, true, 0x0F) +
` class="${cls}"`;
} catch (e) {
/* handle exception */
}
for (var i = 0 / 2; i < classes.length; i++) {
if (checkCondition(classes[i]) === undefined)
console.log('undefined');
}
}
const sss = () => {

}
let a = 1
export $initHighlight;
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<title>Title</title>

<style>body {width: 500px;}</style>

<script type="application/javascript">
function $init() {return true;}
</script>

<body>
<p checked class="title" id='title'>Title</p>
<!-- here goes the rest of the page -->
</body>

点击阅读

日常随笔


关于Lap

这个theme现在还差个人介绍模块和article模块没有进行优化,其他的可能弄完以后暂时先不更新了
不过该有的功能和统计的东西肯定是会一点一点全部完成的

对于disqus,虽然看了一下其他人分享的如何去走代理设置让国内也可以访问,但我觉得这个办法还是不太好,既然无法成为一种更加通用可配置的方案,那就暂时不考虑了,也不是每个人都会去买一个vps进行配置,索性接这样弄: 3s访问不到就提示需要翻墙才可以进行评论。。 我觉得这样的处理方法比较通用吧。

近期安排

最近可能要继续开始加班了,毕竟年末,所以写开源和学习的自由时间可能不是很多,但我想起我有一部分文章放在了简书,所以我决定先搬运一波,然后在把自己学Graphql的一些东西稍微写写,最近就是graphql了,别的也没空看了,等年后吧~

最近一到周末就沉迷pokemon revolution不能自拔,可能要写一篇去安利一发了,毕竟是很多90后乃至80后满满的回忆~(更重要的是能和老外尬英文、PY)

点击阅读

关于最近的折腾


其实一直想用这个写博客的,但是出现过一次问题:
我在win上面提交都是正常的,但是把项目搞到mac上之后提交就出现了bug,研究了半天也没找到完美解决的办法,这才自己去搭建了一个自己的博客。。

点击阅读

ng-router


ng-router

ng-router可以把angular1变成一个spa应用,在页面上的原理就是渲染了不同的controller来实现不同的路由,具体实例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由实例 - 菜鸟教程</title>
</head>
<body ng-app='routingDemoApp'>

<h2>AngularJS 路由应用</h2>
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/computers">电脑</a></li>
<li><a href="#/printers">打印机</a></li>
<li><a href="#/blabla">其他</a></li>
</ul>

<div ng-view></div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);
</script>


</body>
</html>

首先,载入了实现路由的js文件:angular-route.js; 然后,包含了ngRoute模块作为主应用模块的依赖模块。

1
angular.module('routingDemoApp',['ngRoute'])

使用ngView指令

1
<div ng-view></div>

该div内html会根据路由的变化来变化。

然后配置$routeProvider, 用于定义我们的路由规则

1
2
3
4
5
6
7
module.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);

点击阅读

ngapi


ngApi

angular JS全局API用于执行常见任务的JS函数集合,如:

  • 比较对象
  • 迭代对象
  • 转换对象
    简单的说就是将一些工作中常用的方法封装到了angular.prototype上了,
    下面有几个典型的:

  • angular.lowercase() - 转换字符为小写

  • angular.uppercase() - 转换字符为大写
  • angular.isString() - 判断是否是字符串
  • angular.isNumber() - 判断是否是数字

例子: 地址

点击阅读