发表于 | 分类于

百度2019前端实习生招聘的一道编程题：根据给定table字段进行升降排序，当时做得不太好，事后再实现一遍。

当时被HtmCollection卡住了一下，建议参考NodeList v.s. HTMLCollection

完整代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <table id="jsList">
        <thead>
            <tr><th>id</th><th>price</th><th>sales</th></tr>
        </thead>
        <tbody>
            <tr><td>1</td><td>10.0</td><td>800</td></tr>
            <tr><td>2</td><td>30.0</td><td>600</td></tr>
            <tr><td>3</td><td>20.5</td><td>700</td></tr>
            <tr><td>4</td><td>40.5</td><td>500</td></tr>
            <tr><td>5</td><td>60.5</td><td>300</td></tr>
            <tr><td>6</td><td>50.0</td><td>400</td></tr>
            <tr><td>7</td><td>70.0</td><td>200</td></tr>
            <tr><td>8</td><td>80.5</td><td>100</td></tr>
        </tbody>
    </table>
</body>

<script>

var tableSort = function(selector, column, order) {
  var table = document.querySelector(selector);
  var column_index = -1; //排序字段的索引

  // 查找字段index
  var th_collection = table.querySelector('thead').querySelector('tr').getElementsByTagName('th');

  Array.prototype.forEach.call(th_collection, function(el, index) {
    if(el.innerHTML == column){
      column_index = index;
    }
  })

  if(column_index == -1){
    alert('字段不存在');
    return;
  }

  // 获取dom collection
  var dom_lines = table.querySelector('tbody').children;

  // domlines 是HTML Collection对象，类数组，但不具有数组相关的方法，所以转换成数组
  var lines = Array.prototype.slice.call(dom_lines, 0);

  lines.sort(function(a, b) {
    var a_value = a.getElementsByTagName('td')[column_index].innerHTML;
    var b_value = b.getElementsByTagName('td')[column_index].innerHTML;

    return order == 'asc' ? a_value - b_value : b_value - a_value;
  })

  var new_table = document.createElement('tbody');

  lines.forEach(function(el){
    new_table.appendChild(el);
  });

  table.replaceChild(new_table, table.querySelector('tbody'));
}

tableSort('#jsList', 'id', 'desc');
  
</script>
</html>

发表于

偶然遇到了

标签的嵌套问题，有必要mark一下。

p 标签内部不能嵌套 原始块元素，否则会通过自动闭合p标签，使块元素暴露出来

例如如下写法

1
2
3
4
5
6
<p id="a">
  <p id="b">
    <div style="display: inline">123</div>
    <a href="" id="c">ccc</a>
  </p>
</p>

经过浏览器就会解析成

1
2
3
4
5
6
<p id="a"></p>
<p id="b"></p>
<div style="display: inline">123</div>
<a href="" id="c">ccc</a>
<p></p>
<p></p>

div 虽然加上了 display:inline 但是其本身是块级元素，所以在p标签中依然当做块元素对待

发表于

dom元素的位置和尺寸属性

clientWidth/clientHeight

clientHeight和clientWidth用于描述元素内尺寸，是指 元素内容+内边距 大小，不包括边框（IE下实际包括）、外边距、滚动条部分

clientLeft/clientTop

clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离，也就是左，上边框宽度

offsetWidth/offsetHeight

offsetHeight和offsetWidth用于描述元素外尺寸，是指 元素内容+内边距+边框，不包括外边距和滚动条部分

offsetLeft/offsetTop

offsetTop和offsetLeft表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离

scrollWidth/scrollHeight

scrollLeft/scrollTop

参考链接

JavaScript获取DOM元素位置和尺寸大小
JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度

发表于 | 分类于

主要参考 十大经典排序算法总结（JavaScript描述） 原文更详细

名称 平均复杂度 最差复杂度 最优复杂度 空间开销 是否稳定
冒泡排序 $O( n^2 )$ $O( n^2 )$ $O( n^2 )$ $O(1) 是
选择排序 $O( n^2 )$ $O( n^2 )$ $O( n^2 )$ $O(1) 否
插入排序 $O( n^2 )$ $O( n^2 )$ $O( n^2 )$ $O(1) 是
希尔排序 $O( n\log(n) )$ $O( n^2 )$ $O( n\log_2n )$ $O(1) 否
快速排序 $O( n\log(n) )$ $O( n^2 )$ $O( n\log(n) )$ $O(1) 否
归并排序 $O( n\log(n) )$ $O( n\log(n) )$ $O( n\log(n) )$ $O(1) 是
堆排序 $O( n\log(n) )$ $O( n\log(n) )$ $O( n\log(n) )$ $O(1) 否
计数排序 $O( n + k )$ $O( n + k )$ $O( n + k )$ $O(1) 是
基数排序 $O( n * k )$ $O( n * k )$ $O( n * k )$ $O(1) 是
桶排序 $O( n + K )$ $O( n + K )$ $O( n^2 )$ $O(1) 是

堆排序中建堆过程的时间复杂度是 $O(n)$

桶排序和基数排序均属于分配排序。分配排序的基本思想：排序过程无须比较关键字，而是通过用额外的空间来”分配”和”收集”来实现排序，它们的时间复杂度可达到线性阶：O(n)。简言之就是：用空间换时间，所以性能与基于比较的排序才有数量级的提高！

参考 hexo中插入数学公式
MathJax

发表于 | 分类于

文件和目录

cd 进入文件夹

1
$ cd ~  //进入用户目录

chmod 更改文件或目录权限

chmod [-R] xyz

1
$ chmod 770 xyz

ls 列出

  • –l 显示一个文件的属性以及文件所属的用户和组
  • -a 显示包含隐藏文件
1
$ ls -a // 列出包含隐藏的文件

查看文件大小

  • 查看指定目录大小 du -sh folder

cp 复制

cp [-adfilprsu] 来源档(source) 目标档(destination)

1
$ cp -r source destination // 递归持续复制，用於目录的复制行为；(常用)

scp 文件传输

scp /home/work/source.txt work@192.168.0.10:/home/work/ #把本地的source.txt文件拷贝到192.168.0.10机器上的/home/work目录下

scp work@192.168.0.10:/home/work/source.txt /home/work/ #把192.168.0.10机器上的source.txt文件拷贝到本地的/home/work目录下

scp work@192.168.0.10:/home/work/source.txt work@192.168.0.11:/home/work/ #把192.168.0.10机器上的source.txt文件拷贝到192.168.0.11机器的/home/work目录下

scp -r /home/work/sourcedir work@192.168.0.10:/home/work/ #拷贝文件夹，加-r参数

rm 删除

  • -f ：就是 force 的意思，忽略不存在的文件，不会出现警告信息；
  • -i ：互动模式，在删除前会询问使用者是否动作
  • -r ：递归删除啊！最常用在目录的删除了！这是非常危险的选项！！！

mv 移动文件与目录，或修改名称

mv [options] source1 source2 source3 …. directory
mv [-fiu] source destination

进程

  • 所有进程：ps -A

磁盘管理

df 列出文件系统的整体磁盘使用量

  • -a ：列出所有的文件系统，包括系统特有的 /proc 等文件系统；
  • -k ：以 KBytes 的容量显示各文件系统；
  • -m ：以 MBytes 的容量显示各文件系统；
  • -h ：以人们较易阅读的 GBytes, MBytes, KBytes 等格式自行显示；
  • -H ：以 M=1000K 取代 M=1024K 的进位方式；
  • -T ：显示文件系统类型, 连同该 partition 的 filesystem 名称 (例如 ext3) 也列出；
  • -i ：不用硬盘容量，而以 inode 的数量来显示

网络相关

端口

  • 扫描：nc -z -v {host-name-here} {port-range-here}

防火墙

  • 关闭防火墙：service iptables stop

du 查看文件和目录磁盘使用的空间

du [-ahskm] 文件或目录名称

  • -a ：列出所有的文件与目录容量，因为默认仅统计目录底下的文件量而已。
  • -h ：以人们较易读的容量格式 (G/M) 显示；
  • -s ：列出总量而已，而不列出每个各别的目录占用容量；
  • -S ：不包括子目录下的总计，与 -s 有点差别。
  • -k ：以 KBytes 列出容量显示；
  • -m ：以 MBytes 列出容量显示；

其他应用

Shadowsocks

  • 修改配置文件：vim /etc/shadowsocks.json
  • 停止ss服务：ssserver -c /etc/shadowsocks.json -d stop
  • 启动ss服务：ssserver -c /etc/shadowsocks.json -d start
  • 重启ss服务：ssserver -c /etc/shadowsocks.json -d restart
  • 卸载 ss-fly/ss-fly.sh -uninstall

发表于 | 分类于

个人使用或收藏的前端开发工具，便于快速查找需要的工具，完善项目技术栈

react UI库

antd element

浏览器实现页面生成pdf

用html2canvas生成图片，再用jsPDF包装成pdf保存到本地
html2canvas jsPDF

发表于 | 分类于

创建数据库

1
CREATE DATABASE new_database;

显示数据库

1
SHOW DATABASES ;

删除数据库

1
DROP DATABASE example_1;

选择数据库

1
USE example;

建表

CREATE TABLE 表名称(属性名 数据类型[约束条件]，属性名 数据类型[约束条件]);

1
2
3
4
5
6
7
CREATE TABLE `fund_data` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
 `product_alias` varchar(64) NOT NULL DEFAULT '',
 `datetimes` varchar(64) NOT NULL DEFAULT '',
 `datas` varchar(64) NOT NULL DEFAULT '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=691865 DEFAULT CHARSET=utf8;

显示表

1
show tables;

修改表名

1
alter table 旧表名 rename to 新表名;

插入数据

insert [into] 表名 [(列名1, 列名2, 列名3, …)] values (值1, 值2, 值3, …);

1
insert into students values(NULL, "王刚", "男", 20, "13811371377");
1
insert into students (name, sex, age) values("王刚", "男", 21);

更新数据

update 表名称 set 列名1=取值1，列名2=取值2 where …

删除数据

delete from 表名称 where…

1
delete from students where id=2;
1
delete from students where age<20;
1
delete from students;

发表于 | 分类于

推荐一款node验证码生成工具 ccap

以下内容翻译自官方说明

不需要安装额外的库和软件，只需要用npm安装ccap就可以生成验证码。
支持的node版本 0.12.x and 4.x.x

安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var captcha = ccap();

var captcha = ccap(width, height, offset);

var captcha = ccap({
	
	width:256,//set width,default is 256

	height:60,//set height,default is 60

	offset:40,//set text spacing,default is 40

	quality:100,//set pic quality,default is 50

	fontsize:57,//set font size,default is 57

	generate:function(){//Custom the function to generate captcha text
	
	     //generate captcha text here

	     return text;//return the captcha text

	}

});

简单示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var http = require('http');

var ccap = require('ccap')();//Instantiated ccap class 

http.createServer(function (request, response) {

	if(request.url == '/favicon.ico')return response.end('');//Intercept request favicon.ico

	var ary = ccap.get();

	var txt = ary[0];

	var buf = ary[1];

	response.end(buf);

	console.log(txt);

}).listen(8124);

console.log('Server running at http://127.0.0.1:8124/');

API

1
2
3
4
5
6
7
var captcha = ccap();

var ary = captcha.get();//ary[0] is captcha's text,ary[1] is captcha picture buffer.

var text = ary[0];

var buffer = ary[1];

停止或开启缓存定时器

1
2
3
4
5
6
7
8
9
10
11
var ccap = require('ccap')();

ccap.timerIsRunning(); //now timer is running, return 1

ccap.clearTimeout(); //stop all create capature image, so will use the same the 20(default is 20) capature images

ccap.timerIsRunning();//now timer is stoped, return 0

captcha8.setTimeout();//now timer is start again

ccap.timerIsRunning();//now timer is stoped, return 1