使用jQuery操作时,发现jQuery常用问答, 都是一些很使用的功能。

如何设置或取消一个checkbox或者radio按钮

这里主要用到prop方法

1
2
3
4
5
6
7
8
// 设置 #x
$( "#x" ).prop( "checked", true );

// 取消 #x
$( "#x" ).prop( "checked", false );

// 获取是否选择 #x
$('#x').prop("checked")

如何从select框中获取所选项的值和文本

1
2
3
4
5
6
7
<select id="myselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>

这里主要是val和text方法

1
2
3
4
5
// 获取值
$( "#myselect" ).val();

// 获取文本
$( "#myselect option:selected" ).text();

select2组件用来替代select, 它的一个最常用功能是搜索功能。

编写如下简单测试代码,可以看看搜索功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
</head>
<body>

<select class="js-example-basic-single">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$(".js-example-basic-single").select2();
});
</script>

</body>

使用过程中遇到的一个问题是,当改变了select2的值时,改变后的结果没有显示在页面上。在select2 FAQ里有说到这个问题,需要触发change事件。如果只想把change事件限定在select2内,可以使用$('select').trigger('change.select2');

用classmethod装饰器修饰的函数,第一个参数是类,classmethod的最常见用途是类构造方法

staticmethod实际上并没什么用,使用函数就可以完成相应的功能。

编写如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
class Demo(object):
@classmethod
def klassmeth(*args):
return args # ... @staticmethod

def statmeth(*args):
return args #

if __name__ == "__main__":
print(Demo.klassmeth())
print(Demo.klassmeth('spam'))
print(Demo.statmeth())
print(Demo.statmeth('spam'))

输出结果如下

1
2
3
4
(<class '__main__.Demo'>,)
(<class '__main__.Demo'>, 'spam')
()
('spam',)

在使用Python的thrfit库时,提示No handlers could be found for logger “thrift.server.TServer”,莫名奇妙,加了logging配置后,logging.basicConfig(level=logging.INFO), 问题就解决了。

在项目中,有一个需求是分配IP,在分配之前,需要判断IP是否已经被使用,也就是判断是否能PING通。

因为使用的开发语音是Python,于是想到使用Python的ping库,但发现需要root权限。之后又想到通过subprocess调用ping命令,能满足需求,但是因为一次需要分配多个IP,于是需要并发执行,这样就需要使用多进程或者多线程,于是暂时先放着。

后来同事说可以使用fping, 因为它支持多个IP地址同时ping, 然后返回可以ping通的IP地址,正好满足这个需求。

查了fping的帮助, 加上-a和-A参数,一个简单的例子如
fping -aA 115.239.210.27 115.236.139.174

现在想来,很多时候工程实践能减少代码的编写就减少,这个场景使用fping这种工具,就是将需要编写的并发代码交给了工具完成。

看blinker源码时,看到weakref,也就是弱引用模块,以前看《Fluent Python》时也有看到过,只是没有再实际场景中用过。看介绍,主要是用在缓存时对象释放,以及循环引用等场景。PEP-205有结束这个模块的由来。

下面是一个缓存使用中的例子,先声明一个Cheese类

1
2
3
4
5
6
7
class Cheese(object):

def __init__(self, kind):
self.kind = kind

def __repr__(self):
return 'Cheese(%r)' % self.kind

之后在交互环境中执行如下操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
>>> import weakref
>>> stock = weakref.WeakValueDictionary()
>>> catalog = [Cheese('Red Leicester'), Cheese('Tilsit'), Cheese('Brie'), Cheese('Parmesan')]
>>> for cheese in catalog:
... stock[cheese.kind] = cheese
...
>>> sorted(stock.keys())
['Brie', 'Parmesan', 'Red Leicester', 'Tilsit']
>>> del catalog
>>> sorted(stock.keys())
['Parmesan']
>>> del cheese
>>> sorted(stock.keys())
[]

可以看到当删除catelog对象时,在stock中的对象会自动释放。

对于循环引用的例子,可以参考Python 弱引用的使用

在Blinker的源码里看到一个defaultdict实现,记录下来

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
class defaultdict(dict):

def __init__(self, default_factory=None, *a, **kw):
if (default_factory is not None and
not hasattr(default_factory, '__call__')):
raise TypeError('first argument must be callable')
dict.__init__(self, *a, **kw)
self.default_factory = default_factory

def __getitem__(self, key):
try:
return dict.__getitem__(self, key)
except KeyError:
return self.__missing__(key)

def __missing__(self, key):
if self.default_factory is None:
raise KeyError(key)
self[key] = value = self.default_factory()
return value

def __reduce__(self):
if self.default_factory is None:
args = tuple()
else:
args = self.default_factory,
return type(self), args, None, None, self.items()

def copy(self):
return self.__copy__()

def __copy__(self):
return type(self)(self.default_factory, self)

def __deepcopy__(self, memo):
import copy
return type(self)(self.default_factory,
copy.deepcopy(self.items()))

def __repr__(self):
return 'defaultdict(%s, %s)' % (self.default_factory,
dict.__repr__(self))

Flask使用Blinker来处理信号订阅和发送, 查看文档Blinker看看简单的使用方法。

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
from blinker import signal

def subscriber(sender):
print("Got a signal sent by %r" % sender)


class Processor:
def __init__(self, name):
self.name = name

def go(self):
ready = signal('ready')
temp = ready.send(self)
print(temp)
print("Processing.")
complete = signal('complete')
complete.send(self)

def __repr__(self):
return '<Processor %s>' % self.name

ready = signal('ready')
ready.connect(subscriber)
temp = ready.send('sdfsdf')
print(temp)
processor_a = Processor('a')
processor_a.go()

使用signal创建一个信号, connect添加一个订阅,send发送信号,send的返回值是一个数组,数组元素是元祖,包含信号接收者和信号接收后的返回结果。

JQuery的事件代理主要用来解决通过js添加的HTML元素无法监听事件的问题。

JQuery event delegation中给了如下一个简单例子,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="container">
<ul id="list">
<li><a href="http://domain1.com">Item #1</a></li>
<li><a href="/local/path/1">Item #2</a></li>
<li><a href="/local/path/2">Item #3</a></li>
<li><a href="http://domain4.com">Item #4</a></li>
</ul>
</div>
<script>
$( "#list a" ).on( "click", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});
$( "#list" ).append( "<li><a href='http://newdomain.com'>Item #5</a></li>" );
</script>

</body>
</html>

点击item1到item4,对于click事件都会有响应,在console中可以看到输出,而点击item5时click事件不会响应,这是因为将click事件绑定时,item5还没有生成。

解决这个问题的方法是使用事件代理,原理是利用了事件传播机制。也就是在某一个元素中的事件,如果没有得到处理,一直会向父节点触发,直到根节点。如上面的a元素的click事件,如果没有被捕获,一直会向上触发,路径如下

  • <a>
  • <li>
  • <ul #list>
  • <div #container>
  • <body>
  • <html>
  • document root

<ul #list>元素上添加click事件,就可以看到效果。

1
2
3
4
$( "#list" ).on( "click", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});

最后,如果使用事件代理,我们可以把它绑定到<ul #list>元素,然后通过’a’去找到<a>元素,这样就可以监听通过js添加的HTML元素。

1
2
3
4
$( "#list" ).on( "click",  'a', function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});

时间日期选择器可以使用bootstrap-datetimepicker, 中文文档见Bootstrap日期和时间表单组件

使用时有一些注意点,其中一点是不要使用datetimepicker class, 会出bug,主要现象是两个时间框叠在一起。

对于不同的时间输入框,要独立初始化,如下面两个输入框

1
2
3
4
5
6
7
8
9
10
11
12
<div class="row">
<label for="begin-time" class="col-sm-2 control-label">开始时间</label>
<div class="col-sm-4">
<input id="begin-time" readonly type="text" class="form-control" data-date-format="yyyy-mm-dd hh:ii:ss">
</div>
</div>
<div class="row">
<label for="end-time" class="col-sm-2 control-label">结束时间</label>
<div class="col-sm-4">
<input id="end-time" readonly type="text" class="form-control" data-date-format="yyyy-mm-dd hh:ii:ss">
</div>
</div>

要像如下独立初始化

1
2
3
4
5
6
$('#begin-time').datetimepicker({
language: 'zh-CN'
});
$('#end-time').datetimepicker({
language: 'zh-CN'
});

对于中文,还需要加载ootstrap-datetimepicker.zh-CN.js