Live Note

Remain optimistic

效果如下:

  • 分为三部分,上部,中部,下部。
  • 上部为 header 部分,不吸顶。
  • 中部吸顶。
  • 下部为 SubPages 部分,可以左右滑动切换页面子页面。
Read more »

Null-aware operators

1
2
3
4
5
6
7
8
9
10
String foo = 'a string';
String bar; // Unassigned objects are null by default.

// Substitute an operator that makes 'a string' be assigned to baz.
String baz = foo ?? bar;

void updateSomeVars() {
// Substitute an operator that makes 'a string' be assigned to bar.
bar ??= 'a string';
}

Conditional property access

myObject?.someProperty equals to (myObject != null) ? myObject.someProperty : null.

1
2
3
4
5
6
// This method should return the uppercase version of `str`
// or null if `str` is null.
String upperCaseIt(String str) {
// Try conditionally accessing the `toUpperCase` method here.
return str?.toUpperCase();
}

Cascades

myObject.someMethod() will get the return value of the someMethod(), myObject..someMethod() will get the reference of the myObject.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class BigObject {
int anInt = 0;
String aString = '';
List<double> aList = [];
bool _done = false;

void allDone() {
_done = true;
}
}

BigObject fillBigObject(BigObject obj) {
// Create a single statement that will update and return obj:
return obj
..anInt = 1
..aString = "String!"
..aList = [3.0]
..allDone();
}
Read more »

基本用法

1
2
3
4
5
6
7
8
9
10
function* testGenerator() {
yield "hello"
yield "world"
return "done"
}
let test = testGenerator()
test.next() // { value : 'hello', done : false }
test.next() // { value : 'world', done : false }
test.next() // { value : 'done', done : true }
test.next() // { value : undefined, done : true }
Read more »

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
<!--语义化标签-->
<header>页面的头部</header>
<hgroup>
<h1>Test</h1>
<h2>test</h2>
</hgroup>
<footer>页面的底部</footer>
<nav>
<a href="#">导航</a>
<a href="#">link1</a>
<a href="#">link2</a>
</nav>
<section>用来划分区域</section>
<article>用来在页面中表示一套结构完整且独立的内容部分(主题)</article>
<aside>和主题相关的附属信息</aside>

<figure>用于对元素进行组合,一般用于图片或视屏</figure>
<figure>
<img src="" alt="" />
<figcaption>Test</figcaption>
</figure>

<time>9:00</time>

<p>
明天
<time datatime="2018-02-14">情人节</time>
</p>

<!--用于描述文档或文档某个部分的细节-->
<details open>
<!--open时默认打开-->
<summary>test</summary>
<!--details元素的标题-->
<p>testjfkdsjkfsjd</p>
</details>

<!--定义一段对话-->
<dialog>
<dt>老师</dt>
<dd>2 + 3 ?</dd>
<dt>学生</dt>
<dd>5</dd>
</dialog>

<address>定义文章或页面作者的详细联系信息</address>

<mark>需要标记的词或句子</mark>

<!--keygen给表单添加一个公钥-->
<form action="http://www.baidu.com" method="get">
用户:
<input type="text" name="usr_name" /> 公钥:
<keygen name="security" />
<input type="submit" />
</form>

<!--定义进度条-->
<progress max="100" value="76">
<span>76</span>%
<!--为了兼容-->
</progress>

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
<form action="">
<!--placeholder: 输入框提示信息-->
<!--autocomplete: 自动保存用户输入过的值,默认为on-->
<!--pattern: 正则验证-->
<input
type="text"
placeholder="请输入6-8个数字"
pattern="\d{6,8}"
name="user"
autocomplete="off"
id=""
/>
<!--formaction: 定义提交地址-->
<input type="submit" value="提交" formaction="http://www.baidu.com" />
</form>

<form action="">
<!--autofocus: 自动焦点-->
<!--required: 必填项-->
<input type="text" name="username" id="" autofocus required />
<input type="password" name="" id="" required />
</form>

<!--datalist选项列表,与input元素配合使用,定义input的可能值-->
<input type="text" list="varList" />
<datalist id="varList">
<option value="javascript">javascript</option>
<option value="html">html</option>
<option value="css">css</option>
</datalist>
Read more »