2017-11-13

python-start

** 安装模块

使用pip安装包

pip install numpy
python // 进入交互式命令行
type(变量) // 查看变量的类型
dir(variable) // 查看变量的属性
hasattr(variable, attribute) // 查看变量是否有某种属性
Ctrl+D // 退出交互式命令行

2017-11-10

TCP

TCP(Transmission Control Protocol 传输控制协议)面向连接的，可靠的，基于字节流的传输层通信协议。

三次握手

第一次握手:客户端发送连接请求报文段，SYN位置为1，Sequence Number为x;然后，客户端进入SYN_SEND状态，等待服务器的确认。
第二次握手:服务器收到SYN报文段，需要对这个SYN报文段进行确认，设置Acknowledgment Number为x+1(Sequence Number+1)；同时自己发送SYN请求信息，SYN位置为1，Sequence Number为y；服务器将上述所有信息放到一个报文段（SYN+ACK报文段）中，一并发给客户端，此时服务器进入SYN_RECV状态。
第三次握手:客户端收到服务端的SYN+ACK报文段，然后将Acknowledgment Number设置为y+1,向服务器发送ACK报文段，这个报文段发送完毕后，客户端和服务端都进入ESTABLISHED状态，完成TCP三次握手。
完成了三次握手，客户端和服务端就可以开始传送数据。

四次分手

第一次分手:主机1（可以是客户端，也可以是服务器端）,设置Sequence Number和Ackowledgment Number，向主机2发送一个FIN报文段；此时，主机1进入FIN_WAIT_1状态；这表示主机1没有数据要发送给主机2了；
第二次分手:主机2收到了主机1发送的FIN报文段，向主机1回一个ACK报文段，Acknowledgment Number为Sequence Number加1；主机1进入FIN_WAIT_2状态；主机2告诉主机1，同意你的关闭请求；
第三次分手:主机2向主机1发送FIN报文段，请求关闭连接，同时主机2进入LAST_ACK状态；
第四次分手:主机1收到主机2发送的FIN报文段，向主机2发送ACK报文段，然后主机1进入TIME_WAIT状态；主机2收到主机1的ACK报文段以后，就关闭连接；此时，主机1等待2MSL(通常为2分钟)后依然没有收到回复，则证明Server端已正常关闭，那么，主机1就可以关闭连接了。

参考链接

https://github.com/jawil/blog/issues/14

2017-11-10

wireshark

##

2017-11-10

tcpdump

1
2
3

sudo tcpdump
sudo tcpdump -X -n host www.baidu.com   //浏览器中打开页面，查看数据包的传输

2017-07-18

pyenv安装多版本Python

//安装
brew install pyenv
//设置pyenv
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(pyenv init -)"' >> ~/.zshrc
//重新加载shell
exec $SHELL -l
// 查看当前可用的版本
pyenv versions
//安装特定版本的python
pyenv install <python version>
//在特定目录下，设置局部python版本
pyenv local <python version>

python 包管理工具pip

1
2
3

pip install <package name>
pip list 查看安装的包

2017-07-17

Perl安装模块

利用cpan安装模块

配置CPAN.pm

cpan
o conf makepl_arg INSTALL_BASE=/Users/marong
o conf commit //提交修改
o conf mbuild_arg --install_base /Users/marong
o conf commit //提交修改
o conf //查修配置参数是否生效
cpan IPC::System::Simple //安装模块，安装目录/User/marong/lib/perl5
perldoc IPC::System::Simple //查看安装模块文档

2017-06-26

React同构

同构
React组件既可以在浏览器端渲染，也可以在服务器端渲染产生HTML，代码可以运行在不同的环境下，这种方式叫“同构”
服务端渲染
对于来自浏览器的HTTP请求，服务器通过访问存储器或者访问别的API服务等方式获得数据，然后根据数据渲染生成HTML返回给浏览器，浏览器只需要把HTML渲染出来。

优点
利于SEO
加速首屏渲染
大多数情况下，服务器获取数据比浏览器端获取数据要快
缺点
页面大小对性能的影响，如果服务器端产生的HTML过大，首页下载的HTML要比纯浏览器渲染要大，这样下载HTML的时间会增长，服务器渲染未必能获得更好的性能

浏览器端渲染
服务器返回的HTML只包含几个无内容的元素作为页面框架，网页中引用的JavaScript会直接访问API服务器来获取数据，取到的数据再结合模板来生成HTML字符串，插入到页面框架总，产生了用户最终看到的界面。
模板库的效率并不是很高，用户需要等待API请求成功之后才能看到第一条内容，反而让用户感觉更慢了，并没有提高用户体验。
完全浏览器渲染技术

各种应用框架,包含路由和应用结构功能
模板库
服务器端的API支持
传统的模板库就是DOM树的操作，将HTML字符串插入到网页中，无论如何优化都有它的极限。
React的Virtual DOM工作原理，配合生命周期函数的应用，性能不是字符串替换的模板库能够比拟的。
完全浏览器渲染的缺点：
首页性能,首页加载白屏问题
不利于SEO
React同构

用户第一请求页面时候，node服务端做初始渲染，node服务端接受到请求后，把需要用的HTML渲染成HTML字符串，返回给客户端，之后，客户端接管渲染的控制权限

NODE服务端渲染
Redux在客户端提供应用初始所需的state,客户端把服务端返回的state作为初始的state
发送响应前用ReactDOMServer.renderToString(el)渲染初始的HTML,渲染时会计算所生成HTML的校验和，并存放在根节点的属性data-react-checksum中
服务端最后一步就是把初始组件的HTML和初始state注入到客户端能够渲染的模板中。
state的传递通过script标签来吧preloadedState赋给window.INITIAL_STATE
注入js bundle文件
客户端就可以通过window.INITITIALSTATE__来获取preloadedState,
浏览器客户端渲染
从window.INITIAL_STATE得到初始的state，并传递给createStore()
页面加载js后，打包JS启动，调用React.render()重新渲染一遍React组件，在重新计算DOM树之后，也会计算一遍校验和，和服务器的校验和做一个对比，如果二者相同，就没有必要做DOM操作了。然后会与服务端渲染的HTML的data-react-id属性做关联。这会把新生成的React实例与服务端的虚拟DOM连接起来。因为同样适用了来自Redux Store的初始state,并且view组件代码是一样的，结果就是我们得到了相同的DOM

如果服务器端渲染和浏览器端渲染产生的内容不一致，用户会先看到服务器端渲染的内容，浏览器端生成的DOM树，覆盖掉服务器产生的HTML,用户会看到一次闪烁。
实现同构一定要保正服务器端和浏览器段渲染的结果一致。

2017-06-18

NodeJs调试

node-inspect

1	node-debug index.js

chrome devtools

node –inspect来调试，在需要调试的地方设置下debugger, 在chrome浏览器中，打开commandline中提示的调试地址

"scripts": {
    "start": "node ./worker | bunyan",
    "debug": "node --inspect --debug-brk  ./worker | bunyan",
    "lint": "eslint . --fix && echo 'Eslint Passed\\n'",
    "test": "eslint . --fix && echo 'Eslint Passed\\n' && node test/ | faucet"
}

2017-06-16

react 入门

遇到的问题

报语法错误，最后排除发现，component里li元素的标签没有闭合


performUpdateIfNecessary: Unexpected batch number
//没有定位到具体出错的代码
原因是新增加的组件里没有对应的reducer

2017-06-12

iterm-commandline

open index.html : 在浏览器中打开页面
d 列出在会话访问的目录列表，输入列表前的序号，即可直接跳转

快捷键

1	Command+R 清空命令行

oh-my-zsh 插件

在.zshrc文件中配置要加载的插件

1 2	brew install autojump plugins=(git autojump)

autojump

快速打开文件
在.zshrc,.bash_profile中添加

1	[ -f /usr/local/etc/profile.d/autojump.sh ] && . /usr/local/etc/profile.d/autojump.sh

用法
安装autojump之后，zsh会自动记录访问过的目录，目录名支持模糊匹配
1
2
j <目录名>
j --stat 查看历史路径库

2017-06-07

回形矩阵算法

1 2 3 4
12 13 14 5
11 16 15 6
10 9 8 7
解决思路：
按圈进行循环,一个圈的循环包括从左上-右上，右上-右下，右下-左下，左下到左上,完成一圈数值的设定

/**
 * @param { Number } m, 矩阵的宽
 * @param { Number } n，矩阵的长
 * @param { Number } initialValue，初始值
 * @returns { Array } 数组
 */
function buildCyclicRectangle(m, n, initialValue) {
    var result = [],
        startM = 0,
        endM = m-1,
        startN = n-1,
        endN = 0,
        num = initialValue,
        i;
    for(var i = 0; i < n; i++){
        result[i] = [];
    }
    var isMLessEqualN = m <= n;
    if(!m || !n) return [];
    if(m == n && (m == 1)) return [[initialValue]];
    //当矩阵的m<=n时，循环圈数根据m的值来判断
    //当矩阵的m>n时，循环圈数根据n的值来判断
    while(isMLessEqualN && (startM < endM) || !isMLessEqualN &&(endN < startN)){
        for(i = startM; i <= endM; i++){
            result[startM][i] = num;
            num++;
        }
        for(i = endN+1; i <= startN; i++){
            result[i][endM] = num;
            num++;
        }
        for(i = endM-1; i>= startM; i--){
            result[startN][i] = num;
            num++;
        }
        for(i = startN-1; i > endN; i--){
            result[i][startM] = num;
            num++;
        }
        startM++;
        endM--;
        startN--;
        endN++;
    }
    //当存在奇数列的情况
    if(isMLessEqualN && startM == endM){
        for(i = endN; i <= startN;i++){
            result[i][startM] = num;
            num++;
        }
    }
    //当存在奇数行的情况
    if(!isMLessEqualN && startN == endN){
        for(i = startM; i <= endM; i++){
            result[startN][i] = num;
            num++;
        }
    }
    return result;
}
var result = buildCyclicRectangle(10,10,1);
console.log(result);

2017-06-03

移动端1px的问题

移动端下，一般设置1px的边线，但在高清屏幕的手机中浏览时，会变粗，并没有显示1px。

设备像素(物理像素)
设备像素又称物理像素，是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。是固定不变的值
设备独立像素(device-independent pixel)
设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如CSS像素)，然后由相关系统转换为物理像素。
CSS像素
CSS像素是抽象的，可以收缩放放大,主要使用在浏览器山个。其面积随着浏览器的缩放比例而同步缩放
屏幕密度
是指一个设备表面上存在的像素数量，通常以每英寸有多少像素来计算(PPI).
devicePixelRatio 设备像素比
devicePixelRatio = 屏幕物理像素/设备独立像素(dips: device-indipendent pixels)
devicePixedlRatio为1时是普通显示屏，大于1时为高清显示屏
在Javascript中，可以通过window.devicePixelRatio获取当前设备的dpr
在CSS中，可以通过-webkit-device-pixel-ratio,-webkit-min-device-pir
viewport

visual viewport(视觉视口)
visual viewport = screen.width/initail-scale
320px宽的屏幕可以显示980px宽的内容
通过设置initial-scale的值可以设置visual viewport的宽度
visual viewport的宽度变化会影响layout viewport的变化
用户能看到的网站区域
window.innerWidth/window.innerHeight是获取视觉视口的尺寸
layout viewport(布局视口)
document.documentElement.clientWidth/document.clientHeight是获取布局视口的尺寸
默认情况下，layout viewport一般为980px

设置布局视口的宽度为屏幕宽度
布局视口的宽度大于等于视觉视口
ideal viewport(理想视口)
布局视口的默认宽度并不一定是一个理想的宽度，它对设备来说是最理想的布局视口尺寸。只有主动地往页面中添加meta视口标签,理想视口才会生效。
window.screen.width/window.screen.height是理想视口的尺寸
当设备方向改变时，iphone的理想视口的尺寸值不会改变，andrio设备的理想视口的尺寸会发生改变
1px变粗的原因

CSS中的1px并不等于设备中的1px，不同的屏幕有不同的设备像素比
例如iphone4s 屏幕物理像素：640 设备独立像素：320,devicePixelRatio: 2, 1像素在iphone4s中会占4个物理像素，由四个像素点所绘制。

解决方案

利用transform缩放

//javascript 对于devicePixelRatio值为3的情况，不会特意设置，统一采用值为2的情况
if(window.devicePixelRatio && window.devicePixelRatio >= 2) {
    document.querySelector('html').className = 'hd-screen';
}
//css
  .one-pixel{
      position:relative;
      height:200px;
  }
  .one-pixel:after{
      content:'';
      position:absolute;
      bottom:0;
      left:0;
      width:100%;
      height: 1px;
      background:#000;
  }
  .hd-screen .one-pixel:after{
      transform: scaleY(0.5);
      transform-origin: 0 0;
  }

利用viewport

把viewport的宽度设置为实际的设备物理宽度，css的1px就等于设备的1px

var scale = 1 / window.devicePixelRatio;
var meta = document.createElement('meta');
meta.setAttribute("name", "viewport");
meta.setAttribute("content", "initial-scale=" + scale + ", maximum-scale=" + scale + ",minimum-scale=" + scale + ",user-scale=no");

利用border-image

参考链接

https://github.com/amfe/article/issues/17
https://segmentfault.com/a/1190000008619063

2017-06-03

HTML5 Element类别和内容模型

DOM中元素继承HTMLElement
自定义的元素继承HTMLUnknowElement
元素定义包含：

类别(categories)
HTML中元素被分成不同的种类，有metadata content,flow content,sectioning content,headingcontent,phrasing content,embedded content,interactive content
metadata content:
元数据内容是设置描述或其他内容的行为，或设置文档和其他文档的关系，或传递信息。
,,,

2017-05-27

Vue2.0入门使用

初始化项目

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
npm install --save vuex
npm install --save sass-loader node-sass autoprefixer

2017-05-22

Javascript相等操作符

相等操作符分为两种，一种是相等(==)和不相等(!=)，另一种是全等(===)和不全等(!==)。
相等和不相等操作符进行比较的时候，如果数据类型不相同，会强制类型转换，再进行比较
全等和不全等操作符进行比较的时候，不会进行类型转换，直接比较

不同数据类型转换规则

布尔值转换为0或1
字符串和数字比较，字符串会转化为数字
对象和其他类型比较，对象会调用valueOf或toString方法，得到的基本类型值，按照之前转化规则进行转化后，比较
null和undefined是相等的, null和undefined不会转化为其他类型值
NaN 不等于NaN
如果两个对象比较，如果两个对象指向同一个对象，则相等，否则，不相等

表达式	值	原因
null == undefined	true
NaN == NaN	false	NaN不等于NaN
0 == false	true	false转换为0
1 == true	true	true转换为1
2 == true	true	true转换为1, 1不等于2
[] == false	true	[]调用toString转化为””,””字符串转换为0
[1] == 1	true	[1]调用toString转化为”1”,”1”字符串转换为1
[] == 0	true	[]调用toString转化为””,””字符串转换为0
{} == false	false	{}调用toString->”[object Object]”->NaN,false->0
{} == “[object Object]”	true	{}调用toString转换为”[object Object]”,
{} == 0	false
{} == false	false	{}调用toString->”[object Object]”->NaN, NaN==0
{} == {}	false	两个对象,分别保存在不同的内存地址中
[] == []	false	两个对象，分别保存在不同的内存地址中
[1] == [1]	false	两个对象,分别保存在不用的内存地址中

var obj = {
    toString: function(){
        return 10;
    }
};
obj == 10 //true
var obj = {
    valueOf: function(){
        return 20;
    }
};
obj == 20 // true
var obj = {
    toString: function(){
        return 10;
    },
    valueOf: function(){
        return 20;
    }
};
obj == 20 //true

由此可见，对象会先调用valueOf试图转换成基本类型值, 如转换不成会再尝试调用toString方法。

2017-05-22

CSS中百分比值

line-height
定位中的百分比
如果top|bottom|left|right的值为百分比
top|bottom根据包含块的高度计算百分比的值
left|right根据包含块的宽度计算百分比的值
margin|padding
行内元素margin|padding值,左右能设置，上下不能设置
如果元素的padding或margin值是百分比值，那么，它的值是根据父元素的宽度来计算的
可以利用此属性，用css实现自适应的正方形

//方案一:利用padding-top
.square{
  width:100%;
  padding-top:100%;
  background:#000;
}
//方案二:利用伪类
.square3{
  width:20%;
  background:yellow;
}
.square3:after{
  content:'';
  display:block;
  padding-top:100%;
}
.square4{
  width:20%;
  background:green;
  overflow:hidden;
}
.square4:after{
  content:'';
  display:block;
  margin-top:100%;
}
//方案三:利用vw单位
.square{
  width:100vw;
  height:100vw;
}

<p><a><img width='2000px' height='2000px' /></a></p>
//1.页面中这三个元素的宽高是多少，img能把a标签撑起来么，为什么
//2.img设置position:absolute; top:10%;left:10%; img的位置，top/left的百分比是基于谁的
//3.如果p设置position:relative;img的position:absolute; top:10%;left:10%; img的位置，top/left的百分比是基于谁的

2017-05-10

mac-commandline

mac os

mac command-line

which tern //查看安装路径
top //显示所有进程
kill -9 pid //结束pid进程

curl

1	curl -O http://.../.tar.gizp //下载文件到当前目录

terminal

1 2	cp -r fromPath/file destinationPath cp ~/test1/. ~/test2/

echo ‘eval “$(perl -I$HOME/lib/lib/perl5 -Mlocal::lib=$HOME/lib)”‘ >>~/.bashrc
echo ‘eval “$(perl -I$HOME/lib/lib/perl5 -Mlocal::lib=$HOME/lib)”‘ >>~/.zshrc

chrome

alfred

安装github

下载workflow工作流，双击安装工作流，自动添加的alfred
生成一个token
gh-auth

登录远程服务器

1	ssh root@47.91.156.125

查看本机IP

ifconfig

查看端口号占用

1 2	lsof -i :8080 kill -8 pid // 杀掉进程

2017-04-30

Perl入门

perl程序文件可以不带扩展名字，也可以plx为扩展名
查看perl的版本号
1
perl -v
运行文件
1
perl hello.pl

常用命令

1 2	perldoc CGI //查看CGI模块文档 cpan -a //列出所有已安装的模块

mac os下安装local::lib模块

// 先从seach.cpan.org下载local::lib模块
//进入local-lib的安装包
cd local-lib-2.000019/
//默认安装到~/perl5
perl Makefile.PL --bootstrap 
make test && make install
perl5 -Mlocal::lib=$HOME/lib)"' >>~/.zshrc
echo 'eval "$(perl -I$HOME/perl5/lib/perl5 -Mlocal::lib)"' >>~/.zshrc
//重启shell

使用模块

my $name = "/usr/local/bin/perl/marong";
my $basename = basename $name;
my $dirname = dirname $name;
print "\$basename:$basename"; //marong
print "\$dirname:$dirname"; //'/usr/local/bin/perl'

2017-04-26

box-model

怪异模式下盒模型

1
2
3

width:10px;
height:10px;
padding:10px;

盒子在页面中的占位

CSS-module 怎么实现

2017-04-26

deepcopy

浅拷贝

深度拷贝

深度拷贝循环引用的问题

1 2	var obj = {}; obj.a = obj;

三次握手

四次分手

参考链接

tcpdump

python 包管理工具pip

利用cpan安装模块

node-inspect

chrome devtools

遇到的问题

快捷键

oh-my-zsh 插件

autojump

1px变粗的原因

解决方案

利用transform缩放

利用viewport

利用border-image

参考链接

mac os

mac command-line

curl

terminal

chrome

alfred

登录远程服务器

查看本机IP

查看端口号占用

CSS-module 怎么实现

浅拷贝

深度拷贝

深度拷贝循环引用的问题