发表于 | 阅读次数:

原文链接：If… Else, or not!

简化条件判断

1
2
3
4
5
6
7
if (red) {
    return true;
} else if (blue) {
    return true;
} else {
    return false;
}

可将代码重构为：

1
2
3
4
if (red || blue) {
    return true;
}
return false;

ObjectMapper

这种做法是原文作者最爱的一种模式之一，适用于不同的场景，不管是后端还是前端项目。而且最重要的是这种做法让代码看起来非常简单，可读性也强。最基本的表现形式：

1
2
3
4
5
6
7
const colors = {
  red: true,
  blue: true,
  'default': false,
 };
const colorMapper = color => colors[color] || colors['default'];
const color = colorMapper(item.color);

ObjectMapper在React中的应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// props
const items = [{
 type: ‘hero’,
 content: : {…},
}, {
 type: 'text',
 content: : {…},
}, {
 type: 'image_and_text',
 content: : {…},
}, {
 type: 'text',
 content: : {…},
}, {
 type: 'call_to_action',
 content: : {…},
}];
1
2
3
4
5
6
7
8
9
10
// 将所有组件存在对象中，对象key值为props的type值
const components = {
 hero: HeroComponent,
 text: TextComponent,
 image_and_text: ImageAndTextComponent,
 call_to_action: CallToActionComponent,
 'default': null,
};
const componentMapper = type => 
components[type] || components['default'];
1
2
3
4
5
6
7
8
9
10
11
12
import react from ‘react’;
const RenderItems = props => {
 const componentList = props.items((item, index) => {
   const Component = componentMapper(item.type);
   return <Component content={item.content} />
 };
 return (
  <div>
   {componentList}
  </div>
 )
};

发表于 | 阅读次数:

上一篇讲了如何用canvas绘制简单的图形曲线等，也在图形中加了颜色等。这一篇主要讲下如何添加样式和颜色。

色彩

fillStyle

设置图形的填充颜色，fillStyle = color，color可以表示css颜色值的字符串、渐变对象或者图案对象。

1
2
3
4
5
// 这些 fillStyle 的值均为 '橙色'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

阅读全文 »

发表于 | 阅读次数:

在上一篇文章中已经讲了canvas的基本用法，这一篇就开始讲讲如何通过创建的上下文绘制各种形状，如矩形等。

绘制矩形

canvas只支持一种原生的图形绘制：矩形。而其他图形的绘制都需要依赖路径，canvas提供了三种方法来绘制矩形：
1.fillRect(x, y, width, height) 绘制一个填充的矩形

阅读全文 »

发表于 | 阅读次数:

Canvas简介

Canvas元素是HTML5的一部分，允許指令碼語言動態渲染點陣圖像。Canvas是由HTML代碼配合高度和寬度屬性而定義出的可繪製區域。JavaScript代碼可以訪問該區域，類似於其他通用的二維API，通過一套完整的繪圖函數來動態生成圖形。一些可能的用途，包括使用Canvas構造圖形，動畫，遊戲和圖片。[来自维基百科)]

阅读全文 »

发表于 | 阅读次数:

在实际Android开发过程中，隐藏标题栏，甚至是华为等系列的虚拟按键，可以让界面看起来更加清爽一点，那么怎么隐藏那些对于用户来说，无用的区域呢？网上搜一下，一堆教程，这里介绍我成功的一种。创建BaseActivity类，继承Activity，里面具体重写方法这里就不贴了。增加fullScreenDisplay方法，代码如下。

阅读全文 »

发表于 | 阅读次数:

对于css实现水平垂直居中的方法，在前端开发中涉及的也比较多，在开发中经常使用的是flex布局以及绝对定位来实现居中方式，其实懂个三四种实现方式已经足够，但是这里将这些方法总结一下，这里只包括容器水平垂直居中的总结，可能不适用于图片文字等，图片字体的垂直居中其实也可以在下面的方法找到解决方式。

阅读全文 »

发表于 | 阅读次数:

Redux源码中包含的例子：https://github.com/reactjs/redux/tree/master/examples
这里解析的是Todos例子，直接切入正题好了。在todos.js中，state的默认状态为state: []，在visibilityFilter.js中，state的默认状态为state: ‘SHOW_ALL’，当两个reducer合为一个reducer后，如下代码，这时state的状态为state: {todos: [], visibilityFilter: ‘SHOW_ALL’}。

1
2
3
4
const todoApp = combineReducers({
  todos,
  visibilityFilter
});

这里的reducers由两部分组成，包括todos和visibilityFilter，其中todos里面包含两个action类型，一个是添加todo[ADD_TODO]，一个是切换todo的完成状态[TOGGLE_TODO]；visibilityFilter里面包含一个action类型，设置过滤器[SET_VISIBILITY_FILTER]，画了个简单的结构图看的更直接一点。

阅读全文 »

发表于 | 阅读次数:

这两天看了很早前的一个原型和闭包系列，来自于深入理解Javascript中的原型和闭包系列，对里面十几篇文章做了一些记录，当然里面也有我的一些理解，但基本都是从该系列中提取的一些认为比较重要的点。

  • 一切（引用类型）都是对象，JS引用类型包括数组、对象、null、函数、new Number(10)，他们都是对象。判断一个变量是否为对象十分简单，值类型的判断用typeof，而引用类型的判断可以用instanceof。[其中值类型包括undefined，number，string，boolean]

    1
    2
    var fn = new Function();
    console.log(fn instanceof Object); //true

  • 对象——若干属性的集合，对象里面的一切都是属性，只有属性，没有方法。方法如何表示？方法也是一种属性，它的属性表示为键值对的形式。

阅读全文 »