Welcome to visit my new blog

这个博客以后不会再更新了,只是留着,防止外链引用失效。

This blog will not update any more.

欢迎访问我的新博客,以后所有的文章更新都在新博客。网址:www.0xfc.cn

Welcome to visit my new blog, all the updates will at my new blog. Site: www.0xfc.cn.

digit-dance

主题

  原生JS实现的数字展示效果。

详情

html

1
2
<!-- 定义wrap元素 -->
<div id="digit-dance"></div>

javascript

1
2
3
4
5
6
7
8
9
10
11
// 获取wrap元素
var digitDanceEle = document.getElementById('digit-dance');

// 使用wrap元素初始化实例
var digitDance = new DigitDance(digitDanceEle);

// 设置位数
digitDance.setDigitBits(10);

// 设置数据
digitDance.setNumber(13456283);

效果

吸附对齐系统

主题

  原生JS实现的吸附对齐系统。

详情

代码

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
...

#content {
border: 1px solid #ddd;
box-sizing: border-box;
height: 400px;
margin: auto;
position: relative;
width: 800px;
}

#canvas {
height: 400px;
position: absolute;
width: 800px;
}

#retangle {
background: #eee;
border: 1px solid #ccc;
box-shadow: 0 0 2px #ddd;
height: 130px;
left: 50px;
top: 10px;
width: 175px;
}

#retangle-1 {
background: #333;
border: 1px solid #000;
box-shadow: 0 0 2px #111;
height: 130px;
left: 250px;
top: 230px;
width: 175px;
}

#retangle-2 {
background: #666;
border: 1px solid #333;
box-shadow: 0 0 2px #444;
height: 130px;
left: 550px;
top: 260px;
width: 175px;
}

.retangle {
box-sizing: border-box;
cursor: pointer;
position: absolute;
}

...

<div id="content">
<canvas id="canvas" height="400" width="800"></canvas>
<div id="retangle" class="retangle"></div>
<div id="retangle-1" class="retangle"></div>
<div id="retangle-2" class="retangle"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 声明吸附参考线
var guideLines = new GuideLines();

// 初始化吸附系统
var moveSystem = new MoveSystem();

// 设置最小吸附距离
moveSystem.setABD(5);

// 设置吸附参考线
moveSystem.setGuideLines(guideLines);

// 设置吸附对齐参考线
moveSystem.setAlignLines(alignLines);

// 设置被拖动的DOM元素
moveSystem.setElement(retangle);

效果

Javascript new及其衍生

1.new操作符的原理

1
2
3
4
5
6
7
8
9
10
function new(f) {
var object = {};
object.__proto__ = f.prototype;

return function() {
f.apply(object, arguments);

return object;
}
}

从上述代码可以看出new操作符的基本原理:

  • 第一步:新建一个对象object
  • 第二步:向对象添加一个名为__proto__的属性,指向构造函数的原型
  • 第三步:返回一个闭包
  • 第四步:立即执行闭包,返回这个新对象。在闭包中,构造函数的作用域(this)为新对象object,执行构造函数可以为object添加新属性
  • 第五步:返回新对象object

具体来说:

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
//构造函数
function Person(name, age) {
this.name = name;
this.age = age;
}

Person.prototype.getName = function() {
return this.name;
}

// 使用new操作符:
// 返回新对象,并且新对象的被关联到构造函数的原型(prototype)
var person = new Person('frank', 20);
log(person.name); // frank
log(person.age); // 20
log(person.getName()); // frank

// 直接执行构造函数:
// 由于函数不返回任何数据,默认返回undefined,
// 而name和age属性被添加到全局作用域
var person2 = Person('peggy', 18);
log(person2); // undefined

// 使用apply方式执行构造函数:
// 可以获取到属性,但是无法关联到原型(prototype)
var person3 = {};
Person.apply(person3, ['peggy', 18]);
log(person.name); // peggy
log(person.age); // 18
log(person.getName()); // Uncaught TypeError: person3.getName is not a function

2.作用域链
当我们执行一个函数A的时候,JS引擎会为A生成一个执行环境,刚开始这个执行环境只有arguments一个可访问对象,还有一个指向外部执行环境的指针,这个外部执行环境也有一个指针指向它的外部执行环境,直到延续到全局执行环境。这样就生成了A的作用域链。当我们访问A中的一个变量v时,如果v不存在于当前的执行环境,则会通过作用域链查找上一个执行环境,如果还不存在v,则会继续通过作用域链查找,直到全局执行环境。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 假设这是全局执行环境:__GlobalEnvironment__

var a = 1; // 即__GlobalEnvironment__.a = 1;

function A() {
// 假设这是函数A的执行环境:__AEnvironment__
// 此时A的执行环境会有一个指针指向__GlobalEnvironment__

var b = 2; // 即__AEnvironment__.b = 2;
log(a); // 1

return function B() {
// 假设这是函数B的执行环境:__BEnvironment__
// 此时B的执行环境会有一个指针指向__AEnvironment__
var c = 3; // 即__BEnvironment__.b = 2;
log(b); //2
}
}

var a = A(); // 返回一个闭包
a(); // 打印b

通过上述代码也可以看到闭包就是作用域链实现的。

3.原型链
在JS中,每定义一个函数,就会为这个函数自动生成一个原型属性(prototype),当我们使用new操作符通过一个构造函数创建一个实例的时候,这个实例会有一个内部指针(__proto__)指向构造函数的原型对象。当我们访问实例的属性时,如果实例本身不存在这个属性,就会查找构造函数的原型。如果还没找到这个属性但是这个原型恰好也有一个内部指针(__proto__),则会继续查找原型的原型对象,这样就形成了一个原型链。如何让这个原型有一个__proto__指针呢,那就是让这个原型也是某一个构造函数的实例。看下代码:

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
function Animal(kind) {
this.kind = kind;
}

Animal.prototype.getKind = function() {
return this.kind;
}

function Cat(name) {
this.name = name;
}

// 通过将Cat的原型指向Animal的实例来继承Animal
Cat.prototype = new Animal('cat');

// 定义Cat自身的原型方法
Cat.prototype.getName = function() {
return this.name;
}

var cat = new Cat('Catty');
// 通过cat的原型访问getName
cat.getName(); // Catty

// 通过cat的原型链访问getKind
cat.getKind(); // cat

通过原型链就可以实现继承了。

基于React-material的组件

demo

包括下属组件:

  • BSelect
  • Color
  • Datetime
  • MultiSelect
  • Paging
  • Tag

BSelect

按钮组组件,包括单选和多选。
BSelect


Color

颜色选择组件。
Color


Datetime

日期时间选择组件,可设置日期时间,日期,时间三种模式。
Datetime


MultiSelect

多选组件,支持异步数据加载,数据格式为{label: ‘’, value:’’}。
MultiSelect


Paging

分页组件,上一页,下一页,首页,尾页,跳转到某页。
Paging


Tag

标签组件,输入内容点击回车添加标签。
Tag