Godfery的博客


  • 首页

  • 分类

  • 归档

  • 标签

  • 搜索

webpack 换肤功能多主题/配色样式打包解决方案

发表于 2018-04-19 | | 阅读次数
字数统计 1,794 | 阅读时长 8 分钟

色阶
本文主要详细介绍了,如何使用 webpack,打包多套不同主题的解决方案以及实践中所遇到的问题及解决方案。

阅读全文 »

深入研究CSS字体度量及CSS 盒子

发表于 2018-04-09 | | 阅读次数
字数统计 1,636 | 阅读时长 6 分钟

头图

这张图展示的是8种不同的字体,其中第一、第二个分别为 font-awesome图标、自定义的字体图标,其余字体依次为Avenir、Trebuchet MS、Arial、Helvetica、Hiragino Sans GB、STXihei。源代码在这里。这些字符的font-size:100px,但是占的高度却不一样。有的是 100px,有的大于 100px。另外可以看出,垂直方向并没有居中对齐。
这篇文章主要研究:

  • font 的工作原理及度量参数
  • CSS box models 的类型、定义
阅读全文 »

如何使用 Electron 和 React 构建一个 APP

发表于 2018-03-27 | | 阅读次数
字数统计 2,733 | 阅读时长 13 分钟

这篇文章主要记录了,使用 Electron 构建的一个 APP 过程的关键步骤和遇到的问题及解决方法。

最终成品效果图

最终效果图
查看源码

阅读全文 »

React 高阶组件浅析

发表于 2017-08-24 | | 阅读次数
字数统计 2,328 | 阅读时长 10 分钟

背景

高阶组件的这种写法的诞生来自于社区的实践,目的是解决一些交叉问题(Cross-Cutting Concerns)。而最早时候 React 官方给出的解决方案是使用 mixin 。而 React 也在官网中写道:

We previously recommended mixins as a way to handle cross-cutting concerns. We’ve since realized that mixins create more trouble than they are worth.

官方明显也意识到了使用mixins技术来解决此类问题所带来的困扰远高于其本身的价值。更多资料可以查阅官方的说明。

高阶函数的定义

说到高阶组件,就不得不先简单的介绍一下高阶函数。下面展示一个最简单的高阶函数

1
const add = (x,y,f) => f(x)+f(y)

当我们调用add(-5, 6, Math.abs)时,参数 x,y 和f 分别接收 -5,6 和 Math.abs,根据函数定义,我们可以推导计算过程为:

1
2
3
4
x ==> -5
y ==> 6
f ==> abs
f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11

用代码验证一下:

1
add(-5, 6, Math.abs); //11

高阶在维基百科的定义如下

高阶函数是至少满足下列一个条件的函数:

  • 接受一个或多个函数作为输入
  • 输出一个函数

高阶组件的定义

那么,什么是高阶组件呢?类比高阶函数的定义,高阶组件就是接受一个组件作为参数并返回一个新组件的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意。
同时这里强调一点高阶组件本身并不是 React API。它只是一种模式,这种模式是由 React 自身的组合性质必然产生的。
更加通俗的讲,高阶组件通过包裹(wrapped)被传入的React组件,经过一系列处理,最终返回一个相对增强(enhanced)的 React 组件,供其他组件调用。

阅读全文 »

Git使用入门教程

发表于 2017-08-06 | | 阅读次数
字数统计 5,462 | 阅读时长 22 分钟

大纲图

git入门教程

阅读全文 »
12…4
Godfery

Godfery

18 日志
11 分类
29 标签
GitHub 掘金
推荐阅读
  • JSDig
  • 腾讯前端导航
  • 印记中文
  • HYPERS F2E 博客
0%
© 2016 - 2018 Godfery
由 Hexo 强力驱动
主题 - NexT.Pisces