React hooks 概要
React 基础知识回顾React(响应)的设计理念是,当数据发生变化时,UI能自动把变化反映出来。它的诞生颠覆了传统的web UI开发模式,它把UI的开发从复杂的DOM操作中解脱出来,让开发者专注于数据、逻辑和UI组件本身。
组件 (component)React 是通过组件的方式来组织和描述UI的。组件可以分为两种类型:
内置组件。内置组件其实就是映射到 HTML 节点的组件,例如 div、input、table 等等,作为一种约定,它们都是小写字母。
自定义组件。自定义组件其实就是自己创建的组件,使用时必须以大写字母开头,例如 TopicList、TopicDetail。
123456789function CommentBox() { return ( <div> <CommentHeader /> <CommentList /> <CommentForm /> </div> );}
状态 (state)和属性(props)组件的状态用于 ...
云原生概要
什么是云原生设计目的云原生软件的设计目的是预测故障,并且即使当它所依赖的基础设施出现故障,或者发生其他变化时,它也依然能够保持稳定运行。
将变化或者失败视为正常规律,让面向失败的设计成为它们构建、交付和管理软件过程中的一个组成部分。
云计算时代应用需求
零停机时间软件开发人员或者架构师对设计和开发一个松耦合、组件化的系统同样负有责任,应该通过部署冗余组件来应对不可避免的故障,并设置隔离机制来防止故障在整个系统中引起连锁反应。而且,还必须把软件设计成能够在不停机的情况下完成计划事件(例如,升级)。
缩短反馈周期频道的软件发布可以缩短反馈周期,降低风险
多设备支持用户越来越希望他们的应用体验随时可以从一个设备无缝切换到另一个设备上。
互联设备(物联网)数据量和基础架构之间的差异,需要新的软件设计和实践来解决。
数据驱动数据量正在不断增加,数据源分布得更加广泛,而软件的交付周期正在缩短这些应用程序需要的不是单一的共享数据库,而是一个由更小的、本地化数据库组成的网络,以及能够在多个数据库管理系统之间管理数据关系的软件。
定义云原生软件是高度分布式的,必须在一个不断变化的环境中 ...
Javascript中的异步编程
Javascript最开始是用于浏览器中的前端编程语言。Javascript是单线程的,为了能及时响应用户操作,javascript对耗时操作(如Ajax请求、本地文件读取等)的处理是异步进行的,也即是所谓的异步编程。除了快速响应用户操作之外,另外一个让javascript采用异步方式的原因是,程序无法预知用户会进行哪些操作。比如说程序无法提前知道用户是点“取消”按钮还是“确定”按钮。所以,Javascript采用了事件注册的方式来处理这个问题。在程序编写时,可以给用户点击“取消”按钮和“确认”按钮注册不同的回调函数,这样当用户点击不同的按钮时,不同的回调函数会被执行。本文从回调函数开始,介绍了Promise、async/await几种Javascript主要的异步编程方式。
异步编程和回调函数无论是Ajax请求,还是事件处理,Javascript都是通过回调函数来完成的。谈及异步编程和回调函数,可以回想一下操作系统中的中断及中断处理程序。由于CPU的速度比外设快出许多,为了提高CPU的处理效率,计算机系统引入了中断的概念,外设在读写数据的时候,CPU可以忙别的事情,等到外设读写完数 ...
Sass 概要
前端开发中最大的坑之一莫过于写css,流水账式的写法让众多码农们头痛不已。好在有了sass,写css不再死板。sass对css的增强如下:
宏定义宏定义的优点在于一处定义,多处使用,需要修改的时候只需要修改定义的地方即可。虽然sass没有明确的说明,但其实以下几种语法与C语言中的宏定义非常类似:
变量 sass中的变量适用于替换css中参数的值。例如: scss: $basic-margin: “10px 20px”; #box01 { margin: $basic-margin; } #box02 { margin: $basic-margin; } css: #box01 { margin: “10px 20px”; } #box02 { margin: “10px 20px”; } sass允许根据变量,选择性的输出css,类似于开关,例如: scss: $rounded-corners: false; .button { border: 1px solid black; border-radius: if($rounded-corners, 5px, ...
获取隐藏元素的宽度
问题描述如果DOM元素的fu’yu是被隐藏的(display: none),那么无论使用DOM的接口,还是jquery的接口来获取该元素的宽度,得到的结果始终是0. 例如:
<div id="node">
<p>
hello world
</p>
</div>
#node {
display: none;
}
alert($('#node p').width());
解决方法在过去元素的宽度之前,临时修改元素的display为block,获取之后再讲其设置回none 例如:
function get_width(obj) {
var width = 0;
obj.parent().css('display', 'block');
width = obj.width();
obj.parent().css('display', 'none');
return width;
}
...
ES6: 模块编程
Javascript模块的限制
只能运行于严格模式
模块中的顶级作用域中的变量,不会被自动添加到全局作用域
顶级作用域的this为undefined
导出如果想让模块中的变量、函数、类被其他模块使用,需要将其导出,导出的方法如下:
export var color = “red”;
export function print_hello(){};
export { print_hello }
export { print_hello as printh };
export default function print_hello(){};
export default print_hello
export { print_hello as default}
导入如果想使用其他模块中的变量、函数、类,需要将其导入。导入后的变量、类、函数为只读。导入的方法如下:
import { color, print_hello } from “./example.js”;
import * as example from “./example. ...
ES6:数组
新增的静态方法Array.of() :可以将传入的参数逐个传入数组,即使只有一个数值类型的参数,也会成为新数组的成员,而不是代表数组的长度 Array.from():可以将类数组结构转化为数组,例如: Array.from(arguments). 利用Array.from()也可以转换原来的数组,例如:
let trans_args = function() {
let args = Array.from(arguments, (value)=>value + 1);
console.log(args);
}
trans_args(1, 2, 3);
$ node test.js
[ 2, 3, 4 ]
新增的普通方法find() 与findIndex():传入一个回调函数来表明查找的条件,例如:
> let arr = [1, 2, 3, 4, 5];
undefined
> arr.find((n)=>n>3);
4
> arr.findIndex((n)=>n>3);
3
fill(va ...
ES6中的类
ES6中添加的class关键字其实并非真正的类,而是ES5用函数来模拟类的语法糖。在ES6中可以用如下的语法创建一个类:
class Students {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayName() {
console.log(this.name);
}
sayAge() {
console.log(this.age);
}
}
let st1 = new Students('sen', 18);
st1.sayName();
st1.sayAge();
使用ES6的class语法糖和ES5自定义的类还是有些区别的:
类的声明不会被提升,类的实例化只能在类的声明之后
类声明中的代码只能运行在严格模式下
类中的方法是不可枚举的
实例化的时候必须加new关键字
在 ...
ES6: 迭代器与生成器
什么是迭代器?迭代器是一个对象,它拥有一个next方法,调用next方法会返回一个对象,该对象有两个属性值,value和done。每次调用next方法,返回的value表示可迭代对象中的下一个值,done表示迭代是否完成。根据此定义,可用下面的代码实现一个迭代器:
let create_iter = function(items) {
let i = 0;
return {
next: function() {
let value, done;
if (i >= items.length) {
value = null;
done = true;
} else {
value = items\[i++\];
done = false;
}
...
单链表反转
实现单链表反转的思路实现单链表反转的难点在于,如果让当前节点的next指向前驱节点,那么链表就断了,所以解决的办法就是在进行反转操作之前用一个临时指针变量保存后继节点的地址。
单链表反转的代码实现#include <stdio.h>
#include <stdlib.h>
typedef struct LIST_NODE {
int data;
struct LIST_NODE* next;
} LIST_NODE;
void show\_list(LIST\_NODE *head) {
LIST_NODE *p = head->next;
while(p != NULL) {
printf("%d ", p->data);
p = p->next;
}
printf("\\n");
}
void reverse\_list(LIST\_NODE *head) ...