SZ 博客

忠于理想 忠于技术

0%

发表于 更新于 分类于 ， 阅读次数：

基本算法

电子竞技(coding)，菜是原罪。除了多敲别无他法。准备在LeetCode刷题，这里记录一些基本算法的思想，解题思路，以及一些经典题目的解。一些题目的答案在这里将持续更新。这些记录和总结可能更适于我自己理解和记忆，如果有疑问强烈建议查看文末的[参考及引用](# 引用 & 参考)。

阅读全文 »

发表于 分类于 阅读次数：

type-check-plus

简介

type-check-plus是一个JavaScript库用于检测输入的值是否符合定义。
例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const objValue = {
    name: 'barChart',
    title: 'population growth',
    yAxisName:'Growth rate',
    xAxisName:'Years',
    color:'green',
    values: [0.13,0.14,0.12,0.15,0.17]，
}；
const objDefine = {
    name: 'string',
    title: '?string',
    yAxisName:'?string',
    xAxisName:'?string',
    color:'?color',
    values: numbser[]',
}
check(objValue, objDefine) // true

背景

我们开发了一个快速构建可视化大屏程序的PAAS平台，该平台支持用户采用一些拖拽修改的方式快速生成大屏引用。因此需要对用户输入的数组进行合法性检测，剔除异常数据保留正确数据。

由于npm的type-check字段被占用，并且npm已有的相关库并不能满足我们的需要，所以决定自己开发一个变量类型检测库，命名为type-check-plus。

阅读全文 »

发表于 更新于 分类于 阅读次数： 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
async function async1() {
    console.log("async1 start");
    await  async2();
    console.log("async1 end");
}
async function async2() {
    console.log( 'async2');
}
console.log("script start");
setTimeout(function () {
    console.log("settimeout");
},0);
async1();
new Promise(function (resolve) {
    console.log("promise1");
    resolve();
}).then(function () {
    console.log("promise2");
});
console.log('script end');
阅读全文 »

发表于 分类于 ， 阅读次数：

变量

1
2
3
4
5
6
7
$nav-color: # F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
  border: 1px solid $highlight-color;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@mixin rounded-corners($normal) { // 混合器 引用这个变量重用大段代码
  -moz-border-radius: $normal;
  -webkit-border-radius: $normal;
  border-radius: $normal;
}
notice {
  background-color: green;
  border: 2px solid # 00aa00;
  @include rounded-corners(5px);
}
===============================================================
.notice {
  background-color: green;
  border: 2px solid # 00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

提示

  1. 变量作用域为块级
  2. 中划线 与 下划线 不敏感 例：$link-color与$link_color指向同一个变量
  3. $nav-color: # F90; !default 如果这个变量接下来被声明赋值了，那就用它声明的值，否则就用这个默认值。

嵌套

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
# content {
  article {
    h1 { color: # 333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: # EEE }
  a {
    color: blue;
  &:hover { color: red }   // 父选择器  
  }
  h1, h2, h3 {margin-bottom: .8em} // 群组选择器嵌套
  ~ article { border-top: 1px dashed # ccc } // 选择所有跟在content后的同层article元素
  > section { background: # eee } // 子组合选择器 只会选择content下紧跟着的子元素
  dl > {
    dt { color: # 333 }
    dd { color: # 555 }
  }
  nav + & { margin-top: 0 }
}

nav { 
  border: { // 嵌套属性
  style: solid;
  width: 1px;
  color: # ccc;
  }
}

编译后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# content article h1 { color: # 333 }
# content article p { margin-bottom: 1.4em }
# content aside { background-color: # EEE }
# content a { color: blue; }
# content a:hover { color: red; }
# content h1 { margin-bottom: .8em }
# content h2 { margin-bottom: .8em }
# content h3 { margin-bottom: .8em }
# content ~ article { border-top: 1px dashed # ccc }
# content > footer { background: # eee }
# content dl > dt { color: # 333 }
# content dl > dd { color: # 555 }
nav + # content { margin-top: 0 
nav {
  border-style: solid;
  border-width: 1px;
  border-color: # ccc;
}

导入

css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 嵌套导入
aside {
  background: blue;
  color: white;
}
// blue-theme.scss

===========================================
.blue-theme {@import "blue-theme"}
===========================================
.blue-theme {
  aside {
    background: blue;
    color: # fff;
  }
}

提示

但在下列三种情况下会生成原生的CSS@import，尽管这会造成浏览器解析css时的额外下载：

注释

1
2
3
4
body {
  color: # 333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

参考

https://www.sass.hk/

发表于 分类于 ， 阅读次数：

CSS 选择器

  1. 标签选择器(如：body,div,p,ul,li)
  2. 类选择器(如：class=”head”,class=”head_logo”)
  3. ID选择器(如：id=”name”,id=”name_txt”)
  4. 全局选择器(如：*号)
  5. 组合选择器(如：.head .head_logo,注意两选择器用空格键分开)
  6. 后代选择器 (如：# head .nav ul li 从父集到子孙集的选择器)
  7. 群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示
  8. 继承选择器(如：div p,注意两选择器用空格键分开)
  9. 伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)
  10. 字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)
  11. 子选择器 (如：div>p ,带大于号>)
  12. CSS 相邻兄弟选择器器 (如：h1+p,带加号+)
阅读全文 »

发表于 分类于 ， 阅读次数：

static 默认

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中。

阅读全文 »