By

使用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();

联系作者

By

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');

联系作者

By

用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',)

联系作者

By

在项目中，有一个需求是分配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这种工具，就是将需要编写的并发代码交给了工具完成。

联系作者

By

看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 弱引用的使用

联系作者

By

在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))

联系作者

By

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的返回值是一个数组，数组元素是元祖，包含信号接收者和信号接收后的返回结果。

联系作者

By

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() );
});

联系作者

By

时间日期选择器可以使用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

联系作者