CodeSky's Blog

技术分享与学习笔记


  • 首页

  • 归档

  • 分类

  • 标签

  • 关于

Linux实用命令

发表于 2017-10-23 | 更新于: 2025-03-06 | 分类于 Linux

Linux 实用命令

Linux 实用命令

查看当前特定的所有进程
1
2
3
ps -ef | grep *

eg: ps -ef | grep VirtualBox
杀死特定的进程
1
2
3
kill -9 PID

eg: kill -9 63586
阅读全文 »

exports、module.exports 和 export、export default 之间的关系与区别

发表于 2017-10-18 | 更新于: 2025-03-06 | 分类于 模块化

exports、module.exports 和 export、export default 之间的关系与区别

前言

开始之前,先理理 require、export、module.exports 等的使用范围。

1
2
3
require: node 和 ES6 都支持的引入
export / import : 只有 ES6 支持的导出引入
module.exports / exports: 只有 node 支持的导出

node 模块

Node里面的模块系统遵循的是CommonJS规范。

阅读全文 »

使用PropTypes进行类型检查

发表于 2017-10-12 | 更新于: 2025-03-06 | 分类于 React

使用 PropTypes 进行类型检查

注意: 从 React v15.5 开始 ,React.PropTypes 助手函数已被弃用,我们建议使用 prop-types 库 来定义 contextTypes。

我们提供一个 codemod 脚本来自动转换。

随着应用规模的提升,你可以通过类型检测捕获更多的 bug。对于部分应用,你可能需要使用类似于 Flow 或者 TypeScript 等 JavaScript 扩展来对你整个应用类型进行类型检测。但即使你不使用这些,React 内置了类型检测的功能。要在组件中进行类型检测,你可以赋值 propTypes 属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
import PropTypes from 'prop-types';

class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}

Greeting.propTypes = {
name: PropTypes.string
};
阅读全文 »

需要了解的几个最佳ES6特性

发表于 2017-09-28 | 更新于: 2025-03-06 | 分类于 JavaScript

需要了解的几个最佳 ES6 特性

ES6,正式名称是 ECMAScript2015,但是ES6这个名称更加简洁。ES6已经不再是 JavaScript 最新的标准,但是它已经广泛用于编程实践中。如果你还没用过ES6,现在还不算太晚…

下面是几个ES6最佳特性,排名不分先后:

  • 函数参数默认值
  • 模板字符串
  • 多行字符串
  • 解构赋值
  • 展开运算符
  • 对象属性简写
  • 箭头函数
  • Promise
  • Let 与 Const
  • 类
  • 模块化
阅读全文 »

30个你必须记住的CSS选择符

发表于 2017-08-05 | 更新于: 2025-03-06 | 分类于 前端

30 个你必须记住的 CSS 选择符

你学会了基础的 id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了 CSS 巨大的灵活性。在本文中提到的很多选择器属于 CSS3 规范的一部分,因此,只有在现代浏览器中才可使用。

1.*

1
2
3
4
* {
margin: 0;
padding: 0;
}

对于初学者,在学习更多高级选择器之前,*是最应先了解的选择器。

星号选择器将匹配页面里的每一个元素。很多开发者使用这个技巧将外边距和内边距重置为零。虽然在快速测试时这确实很好用,但我建议你永远不要在生产代码中使用它。它给浏览器带来大量不必要的负担。

*也能作为子选择符使用。

1
2
3
#container * {
border: 1px solid black;
}

这将匹配#container div的每一个后代元素。再次强调,尽量不要使用这种技术。

2.#X

1
2
3
4
#container {
width: 960px;
margin: auto;
}

#号前缀允许我们选择 id。这是最常见的用法,不过应该慎重使用 ID 选择器。

id 选择符是唯一的,不允许重复使用。如果可能的话,先尝试使用一个标签名称,一个新的 HTML5 元素,甚至是一个伪类。

阅读全文 »

CSS清除浮动方法汇总

发表于 2017-07-06 | 更新于: 2025-03-06 | 分类于 前端

CSS 清除浮动方法汇总

在清除浮动前我们要了解两个重要的定义:
  • 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。

  • 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷)

知道浮动和为什么要清除浮动之后我们可以开始学习如何清除浮动了,这时候我们就需要用到清除浮动的属性clear:

  • clear:left | right | both | none | inherit:元素的某个方向上不能有浮动元素
  • clear:both:在左右两侧均不允许浮动元素。
阅读全文 »

React Native的组件通信方式

发表于 2017-07-02 | 更新于: 2025-03-06 | 分类于 React Native

React Native 的组件通信方式

题外话,简单总结下 React、ReactJS 以及 React Native 之间的关系:

  • React 是非常热门的一个前端开发框架,其本身作为 MVC 中的 View 层可以用来构建 UI;同时,React 通过对虚拟 DOM 中的微操作来实对现实际 DOM 的局部更新,提高性能。其组件的模块化开发提高了代码的可维护性。单向数据流的特点,让每个模块根据数据量自动更新,让开发者可以只专注于数据部分,改善程序的可预测性。

  • React Native 是一个框架,而 ReactJS 是用来构建站点的 JavaScript 库。当你用 ReactJS 开始一个新的项目,你或许需要选择一个类似 Webpack 的打包器,然后去指定你工程中所需要的打包模块。React-Native 包含了你需要的所有东西,你几乎不再需要其他东西了。当你开始一个新项目,你会发现一切都很简单——你可以只需要在命令行敲一行命令就行了——然后你就可使用 ES6, 某些 ES7 特性,甚至一些比较新的 polyfills 开始你的编码。

  • React Native 不使用 HTML 来渲染 App,但是提供了可代替它的类似组件。这些 React Native 组件映射到渲染到 App 中的真正的原生 iOS 和 Android UI 组件。

言归正传,正文开始

阅读全文 »

Hello Hexo

发表于 2017-06-08 | 更新于: 2025-03-04 | 分类于 框架

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server
阅读全文 »
<123

28 日志
10 分类
16 标签
GitHub E-Mail
友情推荐
  • GitHub
  • 印记中文
  • AI Tools
© 2015 — 2025 fxs
0%