yuanhaitaozz-CSDN博客

原创认识Redux，学习Redux，使用Redux

§ 认识 ReduxWhat is store?store是应用状态state的管理者。那什么是state？state是React组件的状态，一般是一个普通对象。How to create store?import { createStore } from 'redux'...// reducer:// 负责接收action并更新state的函数// initialState:// 初始stateconst store = createStore(reducer, ini

2021-06-08 16:59:33 208

原创关于 Virtual Dom 的简单了解（snabbdom，Vue， React）

Virtual Dom 即根据最终状态在内存中绘制出一棵 Virtual Dom Tree，使用 Diff 算法与现存的 Dom Tree 对比并更新。 Virtual Dom 并不能提升性能, 直接操作 Dom 理论上是最快的。 1. Snabbdom Example(官方实例)2. 深入浅出1.) Virtual Node/*...

2018-04-16 19:37:52 2162

翻译 RFC7233 HTTP范围请求(Range Requests)

RFC7233 HTTP范围请求(Range Requests) 目录介绍(Introduction)范围单位(Range Units) 2.1 字节(bytes)范围 2.2 其他范围单位 2.3 HTTP响应头部 Accept Ranges范围请求(Range Reqeust) 3.1 HTTP请求头部 Range 3.2 HTTP请求头部 If-Range对范围请求的响应

2017-08-11 13:24:57 6313

原创深入javascript原型

原型属性通过字面量创建的对象使用 Object.prototype 作为他们的原型通过new创建的对象使用构造函数的prototype属性作为他们的原型通过 Object.create 创建的对象使用第一个参数作为他们的原型获取原型对象的原型属性是用来继承属性的，通过 Object.getPrototypeOf() 可以查询一个对象的原型。几乎所有对象都有原型

2017-03-16 22:09:04 432

原创 Bootstrap简单认识之Tooltips组件

Tooltips（提示工具）组件一、简介此组件用到了Tether插件，Tether一般用于搞定两个元素的位置关系，如下代码:new Tether({ // 此为主动附着元素 element: blurEle, // 此为被依附元素 target: greenEle, // 主动依附和被动依附都可以选择位置，两者通过x，y确定一个点 // 最后呈现出来就是两个点重合 //

2017-03-10 17:11:13 7551

原创 Bootstrap简单认识之Dropdown组件

Dropdown（下拉框）组件一、简介此组件可以不指定 data-target 属性，不指定的话，必须按.dropdown-toggle 按钮和 dropdown-menu 列表放在同一个父元素下注意，如果想要指定 data-target 属性，那么不是指向 .drop-menu 元素，而是指向包含 .dropdown-toggle 按钮和 dropdown-menu 列表的父元素 .dropd

2017-03-06 20:26:08 15551 2

原创 Bootstrap简单认识之Modal组件

Modal（模态框）组件一、简介不支持多个模态框同时存在一般作为文档body元素的直接子元素存在(不要受到其他元素的影响，假如把模态框元素放在一个具有 transform 属性的父元素里，模态框的 position:fixed 属性就会被严重影响)autofocus 在模态框无作为二、样式此版本的Bootstrap大量使用了flex布局 * 在 .modal-content 中，使用了 f

2017-03-02 20:05:22 4695

原创 Bootstrap简单认识之Collapse组件

Collapse（内容折叠）组件一、简介此组件可以将一篇区域收起、展开，类似折叠的效果。主要用于内容过多时，将部分内容折叠。二、样式分析了这几个组件，发现Bootstrap喜欢将transition的持续时间设置为600ms这个组件并没有什么特殊的样式，一共就几个： .collapse { display: none; &.show { display: block; }

2017-03-02 20:04:03 9999

原创 Bootstrap 简单认识之Carousel组件

Carousel（幻灯片）组件一、简介往往用于首页轮流展示不同的图片，电商网站常见；在IE8、9下没有图片滑动动画效果；二、样式下面给出的样式类并不完整从下面可以看出图片切换动画消耗的时间：/*from _carousel.scss*/.carousel-item { /*...省略*/ @include transition($carousel-transitio

2017-03-02 20:02:07 15140

原创 Bootstrap 简单认识之Alert组件

认识Bootstrap之前这里下载的是Bootstrap v4.0 dev 版本css预处理器使用了sassjs使用了es6Bootstrap是依赖于Jquery的，其所有javascript组件都是注册在jquery原型上的，即一般组件末尾会有如下代码： $.fn.xxx = Plugin，也即 jQuery.prototype.xxx = Plugin如果在jQuery中定义了与Boo

2017-03-02 20:00:44 12588

翻译 Flask-Socketio 部分翻译

待验证server端emit数据到浏览器，浏览器端收到数据，无法触发emit指定的回调函数。广播 Broadcasting 以下 socketio 为 SocketIO的一个实例 Broadcast是SocketIO中非常实用的特性，在 send() 或 emit() 中指定 broadcast = True 可以激活这个特性：@socketio.on('my event')def h

2017-01-03 12:30:15 4406

原创 Vue--组件部分

何时使用 is当使用DOM元素作为模板（即为el指定某个元素）时，会受到HTML的一些限制： 1. Vue只有在浏览器解析和标准化HTML后才能获取模板内容。 2. 某些标签元素限制了其所能包含的内容，比如 <ul>， <table>， select等，如下渲染可能出错 <select> <my-component></my-component></seelct>select 元素中规

2016-11-23 16:11:19 3391

原创 Vue--表单控件

不同表单控件绑定 v-model 获得的值textarea：略input[type=’text’]：略单个input[type=’checkbox’]：值为boolean类型，true或false多个input[type=’checkbox’]：多个input的 v-model 绑定同一个属性多个input的value不能相同，否则相同value的box同时被选中绑定属性的

2016-11-19 22:11:35 1794

原创 Vue--class,style,if,for概览

标签的Class属性 class是一个属性，可以用v-bind来指定，普通的方式要求使用者自己控制字符串，但字符串的拼接略显麻烦，所以有专门的处理方式。传递一个对象通过控制对象某个键对应的boolean类型值，来控制class是否被需要：<div class="static" v-bind:class="{ active: isActive, 'text-danger': h

2016-11-19 22:10:55 5250

原创 Vue--基础模板语法以及计算属性

属性和方法每个Vue实例会代理其data对象里所有的对象var app = new Vue({ data: { message : '' }})也就是说，可以直接通过:app.message = 'xxx'来改变data中出现的属性，从而引发视图的变化。 2. 注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

2016-11-17 22:14:40 10729

原创深入理解 vertical-align

关于vertical-align属性的值inherit：继承线类：可选baseline （默认属性值），top，middle，bottom文本类： text-top，text-bottom （文本上下边缘）上标下标类： sub，super数值百分比类： 20px，2em，20% …（支持负值）vertical-align的数值百分比类型的值数值的含义：在baseline对齐基础上上

2016-11-01 19:51:18 6395

原创深入理解line-height

line-height，指的是两行文字【基线】之间的距离。基线：一般就是小写英文字母x的下划线行内框盒子模型（所有内联元素都有关，以下由内至外讲解）举例：啦啦啦啦啦啦啦啦啦啦啦啦啦啦1、内容区域（content area）大小与font-size相关（可理解为鼠标选中区域文字的背景）2、内联盒子（inline boxes）内联盒子不会让内容成块显，而是排成

2016-10-24 22:32:33 1902

原创 Redis基础

概览，Redis中的对象redis中有五种不同类型的对象，分别是字符串对象列表对象哈希对象集合对象有序集合对象每种对象都可能有两种或是多种不同的方式(底层数据结构)实现。对于保存在Redis中的键值对，键总是一个字符串对象，而值可以是上面五种类型中的一种。所以，当称呼一个键为列表键时，指的是这个键所对应的值是列表对象。对于每个对象，都是由redisObjec

2016-09-11 16:27:43 705

原创深入学习absolute

absolute与float:left类似：1. 包裹性两者可以让元素inline-block化比如一个div默认宽度占据100%，但加上position:absolute或float属性后，宽度就会自适应内部元素的宽度比如一个span原本是inline元素，无法设置width属性，但是加上上述属性后，width属性就生效了，不再需要设置display属性2. 破坏性flo

2016-09-08 20:20:29 705

原创 Redis基础结构之hashtable(字典实现)

下图即为该hashtable的结构：主要提炼几点：hashtable的size必须是2的n次方：为了快速的将每个键的hash value转化为array indextype以及privdata：因为字典在redis中有多处应用，所以基于字典的不同应用需要不同的函数，type结构体中保存一组操作函数，privdata主要提供不同应用的私有数据；关于reha

2016-06-22 10:16:24 2953

原创记一次css属性覆盖的问题

问题描述：某个div有id为signUpModal，其中有个图片我将其初始transform的rotateZ值设置为180deg，这个属性包含在male-picture的class中，因为我是用sass写的，所以是直接嵌套写的，最终被编译为 #signUpModal .male-picture {...}。之后我希望在click某个按钮后rotateZ值设置为360deg，为了浏览器的兼容性也

2016-06-09 11:10:26 1772

原创 Websocket认识

想要实现websocket服务器，需要注意两部分，一次握手确认以及数据传输。关于握手：类似HTTP协议，在客户端（用户浏览器发起）发来握手请求：GET / HTTP/1.1Connection:UpgradeHost:127.0.0.1:8088Origin:nullSec-WebSocket-Extensions:x-webkit-deflate-frameSec-WebSocket

2016-04-25 19:40:02 589

原创 javascript私有变量

私有变量严格来说，javascript是没有私有成员的概念的，所有对象属性都是公开的。不顾，任何在函数中定义的变量，都可以认为是私有变量，因为不能在函数外部访问这些变量。私有变量包括函数参数，局部变量以及在函数内部定义的其他函数。通过上一节对闭包概念的学习，可以知道，虽然外部无法访问函数内部的私有变量，但闭包函数却能始终持有这些私有变量，并在外部访问。如下，通过创建闭包，利用其作用域链

2016-04-25 19:38:57 1051

原创 javascript闭包

认识闭包闭包是指有权访问另一个函数作用域中的变量的函数。对于普通函数：function compare(val1, val2){ return val1 - val2;}var result = compare(5, 10);其作用域链如下：如下，是创建闭包的常用方式，该函数是为sort函数创建一个比较函数作为参

2016-04-25 19:38:12 510

原创 Javascript引用类型学习

Object类型两种声明方式： 1. 使用new，如下： var person = new Object() ; person.name = 'Ben' ; person.age = 18 ; 2. 使用对象字面量定义对象 var person = { "name" : 'Be

2016-04-05 08:42:26 349

原创 html的表单form

一般表单的组成必然有如下部分: submit即有form和type为submit的按钮。一旦在text中输入完内容，按下键盘的enter或者点击屏幕的submit按钮，将会触发两个事件，首先是id为btn的按钮事件，接着是id为fm的表单submit事件，如果这两个事件中没有任何一个返回false，那么最后就是将表单提交（如果form有action属性的话）。假如btn的cli

2016-03-28 19:54:21 443

转载 Linux shell ${}简单用法

[转]http://linux.chinaunix.net/techdoc/develop/2007/05/05/956956.shtml为了完整起见，我这里再用一些例子加以说明 ${ } 的一些特异功能：假设我们定义了一个变量为：file=/dir1/dir2/dir3/my.file.txt我们可以用 ${ } 分别替换获得不同的值：${file#*/}：拿掉第一条 /

2016-01-07 17:06:30 919

原创 Nginx基础. HTTP多阶段处理大致分析

HTTP处理阶段的规则：对于每个HTTP阶段, 它都包括checker检查方法和handler处理方法typedef struct ngx_http_phase_handler_s ngx_http_phase_handler_t;//一个HTTP处理阶段中的checker方法, 仅可以由HTTP框架实现, 以此控制HTTP请求的处理流程.typedef ngx_int_t (*ng

2015-10-15 19:32:02 758

原创 Substring with Concatenation of All Words字符串中找到包含所有单词的子串

Substring with Concatenation of All WordsYou are given a string, s, and a list of words,words, that are all of the same length. Find all starting indices of substring(s) ins that is a concaten

2015-10-04 11:40:29 509

原创 Nginx基础. eventfd, 异步IO 与epoll的相互协作

关于eventfd.对于eventfd, 这里只是简单的讲它的功能. 看manpage就足够了, 其中的例子也很容易看懂eventfd函数可以创建一个efd描述符, 该描述符在内核中维护着一个计数器counter. 在调用eventfd时, 可以传入参数指定内核中维护着的计数器的值.如果这样调用： int efd = eventfd(0, 0);那么计数器值为0.

2015-09-25 19:53:38 4111 5

原创 Nginx基础. 防止惊群与子进程之间的负载均衡

作为服务器子进程, 每个worker进程都需要处理大量网络事件. 而网络事件的处理来源于对监听端口新连接的建立.当有多个worker进程同时监听同一个(或多个)端口时, 建立连接就没那么简单了.Nginx出于充分发挥多核CPU性能的考虑, 则使用了多个worker子进程的设计. 这样多个子进程在accept建立连接时候就会有争抢, 产生"惊群"问题. 有的系统可能在内核就解决了这个问题,

2015-09-25 19:46:49 1294

原创 Nginx基础. epoll事件驱动模块

关于epoll事件驱动模块, 这里不做过多分析. 主要着眼于事件添加和事件处理上.static ngx_int_tngx_epoll_add_event(ngx_event_t *ev, ngx_int_t event, ngx_uint_t flags){ int op; uint32_t events,

2015-09-25 19:38:27 1021

原创同一个父进程的多个子进程之间的通信

对于父子进程之间的通信, 或者是没有亲缘关系的进程之间的通信, 之前都有过多多少少的了解, 就不作说明了.这里想要讨论的是多个子进程之间的通信.以前若是有多个子进程之间通信的需要, 那么我可能会选择使用共享内存? 使用消息队列? 或者使用一系列进程间通信机制但这些同样适用于没有亲缘关系的进程之间的通信. 这样做似乎没有必要.这里将要实现的子进程之间的通信, 使用了两个技术:

2015-09-25 19:34:20 6539 1

原创 Nginx基础. 认识Nginx事件模块 (二)

对于事件模块, 定义此模块解析配置项的工作交给了ngx_events_module, 对于事件驱动机制, 更多的则是在ngx_event_core_module中进行的.相比于属于核心模块的ngx_events_module, ngx_event_core_module则属于事件模块.在ngx_modules.c文件中, ngx_event_core_module模块被放在了所有事件模块的

2015-09-25 19:31:40 442

原创 Ngixn基础. 认识Nginx事件模块(一)

对于Nginx的整体框架, 尚且只能了解个大概, 并不能弄清除整个流程. 索性先放着, 先了解其他组件.事件处理框架所要解决的问题是如何收集, 管理, 分发事件. 且事件类型主要为网络事件和定时器事件.既然需要支持跨平台, 那么就肯定要封装不同平台的事件驱动机制. 当然, 我只能看懂select, poll, epoll这几个... 那么Nginx是如何选择的呢？ 1 . 之前在

2015-09-25 19:30:01 2601

原创 Nginx框架与模块

Nginx架构设计 Nginx架构设计的基础是高度的模块化设计. 除了少量的核心代码, 其他一切都是模块. 所有的模块都遵循同样的 ngx_module_t接口设计规范. 此结构体中的 ctx 成员是一个 void * 指针. 可以指向不同模块的不同数据, 一般用来表示在不同类型的模块中的一种类型模块所具备的通用性接口. 配置类型模块

2015-09-25 19:17:03 1017

原创 Nginx基础. Nginx通配散列表

之前学习过Nginx中的普通散列表, 关于其初始化以及整体的构造有了大致的了解.接下来就是在普通散列表的基础上, 分析更复杂的散列表构造. 因为Nginx作为一个Web服务器, 它的各种散列表中的关键字多以字符串为主, 特别是URI域名, 比如 www.ben.com.既然是这样, 那么Nginx就需要去支持带有通配符的主机域名, 即带"*"的域名, 包括前置通配符, 如 *.test

2015-09-12 11:21:53 2753 1

原创 Nginx基础. Nginx基本哈希构成

回顾.下面这个函数是基本散列表的初始化函数. 在http://blog.csdn.net/u012062760/article/details/48140449中也介绍的比较详细了.ngx_int_t ngx_hash_init(ngx_hash_init_t *hinit, ngx_hash_key_t *names, ngx_uint_t nelts);具体的函数内容这里不再谈了

2015-09-12 11:21:27 450

转载 Nginx基础. Nginx中内存地址对齐(转)

下面的内容取自 http://segmentfault.com/a/1190000002771908 (侵删, 感谢)===========分割线===============当a为2的某个幂的值时（例如a=2^2=4，或a=2^3=8），有以下特点：a = 4: 二进制： 0000 0100 从右起，第三位为1，剩下全为0;a = 8: 二进制：

2015-09-12 10:49:17 773

原创 Nginx基础. HTTP过滤模块添加方式探讨

在学习Nginx中的过滤模块开发时, 遇到了使用全局变量和静态全局变量构成的单向函数链表, 对于我这种新手来说, 有些无法理解. 所以, 自己按照Nginx中构建链表的方式也写了一个小小的实验程序如下.整个框架：首先, 这是头文件. 用于制定每个模块需要的一些信息.只是这里因为程序太小太简陋, 所以不需要什么信息. 只需要每个模块的初始化函数. 初始化函数的用途会在下面讲/

2015-09-08 23:25:17 597

小型自动关机软件

linux下编程 ，关于信号sigaction中的sa_flags ，一些改变却不起作用

linux下编程，关于信号sigaction中的sa_flags ，一些改变却不起作用