javascript
2 分钟 读完 (大约 246 个字)

音频可视化与音频处理

前言

来自于 Web Audio Api

阅读更多
javascript
几秒 读完 (大约 108 个字)

使用 audioContext 演奏音乐

前言

好久没有更新博客，最近研究了web音频。对音频编码格式和音频容器格式略有了解。同时也关注了 Web Audio Api，发现了一些好玩的东西。
例如：

  • 音频可视化
  • 音频处理
  • 创建和弦

等等

阅读更多
作品
2 分钟 读完 (大约 262 个字)

多房间聊天室

演示

新窗口打开

源码

github

Doc

中文 English

多房间聊天室

多房间聊天室，首次进入需要创建个昵称（关闭浏览器会清除昵称），之后可以选择创建一个房间，或者加入一个房间，
加入房间需要输入房间号。

使用工具

  • socket.io
  • react及周边

使用

启动服务器

1
cd server && yarn start

websocket 服务端口在 3333

启动客户端（开发版本）

1
cd client && yarn run dev

客户端在端口9900

构建客户端 

1
cd client && yarn run build

构建后的目录在 client/dist下

chat-room

Multi-room chat room, you should enter nickname at the first time when you use this project,
and nickname will be cleared if close the browser. After enter nickname, you can choose create
a room or join a room. Room number is needed when join a room.

Build by

  • socket.io
  • react,redux,react-redux,react-router

Usage

run server 

1
cd server && yarn start

websocket port on 3333

run client（development version）

1
cd client && yarn run dev

client port on 9900

build client

1
cd client && yarn run build

LICENSE

MIT

javascript
1 分钟 读完 (大约 150 个字)

js排序算法

前言

填之前的坑几种排序算法的javascript实现
上篇文章只写了冒泡排序，插入排序和快速排序，这篇写一下其他的。

阅读更多
作品
3 分钟 读完 (大约 467 个字)

知乎日报vue2.0重构

前言

大约一年前用了vue1.0写了知乎日报,当时没有用vuex，而且url和view也没有一一对应，并且开源出来别人下载不一定跑的起来（后台代理问题），这次重构用了大约一天时间，使用vue2.0和vuex,基本没有使用vue-cli,自己配的webpack（中间有很多坑，还是vue-cli好用)。使用async/await并且把请求都分离出来方便开发。

阅读更多
作品
6 分钟 读完 (大约 924 个字)

简易仿制jQuery DOM处理

前言

这个文章我将会简单实现 jQuery 的 Dom 操作方法。其中并不会做兼容性处理只是技术实现。而且是直接
操作DOM对象而非 jQuery 对象。而且我也没有实现事件委托 delegate 事件绑定方法 on，等等。

to-do-list

全局变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
(function(window) {
    function _query(selector) {
        this.selector = selector;
        this.node = document.querySelectorAll(selector);
        this.nodes = Array.prototype.slice.call(this.node);
    }
    _query.prototype = {
        constructor: _query
        //这里写dom方法
    }

    function init(selector) {
        return new _query(selector);
    }
    window._ = init;
})(window);

html方法

1
2
3
4
5
6
7
8
html: function(htmlString) {
    if (!!htmlString) {
        this.nodes.forEach(function(e) {
            e.innerHTML = htmlString.toString();
        });
    }
    return this.nodes[0].innerHTML;
}

text方法

1
2
3
4
5
6
7
8
9
text: function(txtString) {
    if (!!txtString) {
        this.nodes.forEach(function(e) {
            e.textContent = txtString.toString();
        });
    } else {
        return this.nodes[0].textContent;
    }
}

操作class方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
hasClass: function(c) {
    return this.nodes.some(function(e) {
        if (e.className.split(" ").indexOf(c) >= 0) {
            return true;
        }
    });
},
addClass: function(c) {
    this.nodes.forEach(function(e) {
        e.className = e.className + " " + c;
    });
    return this; //链式调用
},
removeClass: function(c) {
    this.nodes.forEach(function(e) {
        var classList = e.className.split(" ");
        e.className = classList.filter(function(item) {
            if (item != c) {
                return true;
            }
        }).join(" ");
    });
    return this;
}

遍历

包括 parent parents prev prevAll next nextAll children 

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
parent: function() {
    var parent = this.nodes[0].parentNode;
    //这里没有做父元素nodeType类型判断
    this.nodes = [parent];
    return this;
},
validElement: function(query, ele) {
    //这个函数类似于querySelector，因为我没有找到数组转 DOMCollection的方法，就写个这个方法
    //来简单替代，用于 parents、find、nextAll、prevAll带查询参数时候。
    var first = query.charAt(0);
    var name = query.slice(1);
    switch (first) {
        case "#":
            if (ele.id == name) {
                return true;
            }
            break;
        case ".":
            if (ele.className.split(" ").indexOf(name) > -1) {
                return true;
            }
        default:
            if (ele.tagName.toLowerCase() === query.toLowerCase()) {
                return true;
            } else {
                return false;
            }
    }
},
parents: function(select) {
    var node = this.nodes[0],
        list = [],
        i = 1;
    while (node.parentNode.tagName.toLowerCase() !== "html") {//一直遍历到body元素
        if (i !== 1) {
            list.push(node);
        }
        i++;
        node = node.parentNode;
    };
    if (!!select) {
        var _this = this;
        this.nodes = list.filter(function(e) {
            return _this.validElement(select, e);
        });
    } else {
        this.nodes = list;
    }
    return this;
},
children: function(select) {
    var node = this.nodes[0];
    var list = Array.prototype.slice.call(node.children);//这里未使用childNodes然后做nodeType判断
    if (!!select) {
        var _this = this;
        this.nodes = list.filter(function(e) {
            return _this.validElement(select, e);
        });
    } else {
        this.nodes = list
    }
    return this;
},
next: function() {
    this.nodes = [this.nodes[0].nextElementSibling];
    return this;
},
nextAll: function(select) {
    var node = this.nodes[0],
        list = [],
        next = node.nextElementSibling;
    while (!!next) {
        list.push(next);
        next = next.nextElementSibling;
    }
    if (!!select) {
        var _this = this;
        this.nodes = list.filter(function(e) {
            return _this.validElement(select, e);
        });
    } else {
        this.nodes = list
    }
    return this;
},
prev: function() {
    this.nodes = [this.nodes[0].previousElementSibling];
    return this;
},
prevAll: function(select) {
    var node = this.nodes[0],
        list = [],
        prev = node.previousElementSibling;
    while (!!prev) {
        list.push(prev);
        prev = prev.previousElementSibling;
    }
    if (!!select) {
        var _this = this;
        this.nodes = list.filter(function(e) {
            return _this.validElement(select, e);
        });
    } else {
        this.nodes = list
    }
    return this;
}

操作css方法

css 方法传入的参数分别士两个参数，或者一个对象，传入对象时候意味着可以一次修改多个style样式，
若不存在第二个参数时候则使用 getComputedStyle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
css: function(a, b) {
    if (typeof a == "string" && !b) {
        return window.getComputedStyle(this.nodes[0], null)[a];
    } else if (typeof a == "object") {
        this.nodes.forEach(function(e) {
            for (var k in a) {
                e.style[k] = a[k];
            }
        });
        return this;
    } else if (typeof a == "string" && typeof b == "string") {
        this.nodes.forEach(function(e) {
            e.style[a] = b;
        });
        return this;
    }
}

源码及使用

下载

1
2
3
4
5
6
7
<!--引入-->
<script src="_query.js"></script>
<!--使用-->
<script>
_("p").text("hello gary");
//和jquery语法相似 把$换成_
</script>

小结

一直想动手实现 jQuery 但是迟迟没有动手，事实证明有时候还是不要眼高手低为好，我只是写了几个操作DOM和
CSS 样式的方法，并且也没有考虑兼容性的问题就已经写了很多行，可见jquery还是很值得前端学习的，无论是
它自带的基础函数还是DOM\CSS的兼容性处理都非常好，而且代码简洁多了。之后我会尝试使用 getter setter
简单模仿 vue 实现 MVVM 框架。

学习笔记
1 分钟 读完 (大约 176 个字)

js括号匹配检验

表达式中括号都是成对出现，否则则报错，现在用js实现这个表达式括号匹配验证。

阅读更多
作品
3 分钟 读完 (大约 466 个字)

使用canvas制作的的钟

效果

新窗口打开

阅读更多
作品
4 分钟 读完 (大约 546 个字)

canvas生成科赫雪花（曲线）

科赫曲线

科赫曲线是一种外形像雪花的几何曲线，所以又称为雪花曲线，它是分形曲线中的一种，具体画法如下：
1、任意画一个正三角形，并把每一边三等分；
2、取三等分后的一边中间一段为边向外作正三角形，并把这“中间一段”擦掉；
3、重复上述两步，画出更小的三角形。
4、一直重复，直到无穷，所画出的曲线叫做科赫曲线。
来自互动百科

思路

使用js配合canvas生成科赫雪花。

阅读更多
杂
1 分钟 读完 (大约 165 个字)

前端实现图片转base64

使用canvas

阅读更多
关注我

友链

分类

标签云

ES6 ES7 angularjs canvas cli compiler css electron go http javascript lib mongodb node.js npm other react template typescript vue websocket 作品 教程 杂 算法 配置 音频

最新文章

归档

标签

ES6 7
ES7 1
angularjs 2
canvas 2
cli 1
compiler 1
css 8
electron 1
go 1
http 1
javascript 37
lib 1
mongodb 2
node.js 3
npm 3
other 3
react 4
template 1
typescript 1
vue 3
websocket 3
作品 7
教程 1
杂 1
算法 6
配置 2
音频 3

最新文章

归档

标签

ES6 7
ES7 1
angularjs 2
canvas 2
cli 1
compiler 1
css 8
electron 1
go 1
http 1
javascript 37
lib 1
mongodb 2
node.js 3
npm 3
other 3
react 4
template 1
typescript 1
vue 3
websocket 3
作品 7
教程 1
杂 1
算法 6
配置 2
音频 3
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×