JS中的类型转换

Posted on 2018-11-03 Edited on 2020-09-03 In Javascript

==> String

方法1 `toString()`方法

null 和 undefined 没有toString() API
object 的 toString() 不能得到想要的结果
console.log() 默认调用toString()方法

CSS-REM与动态REM

Posted on 2018-11-01 Edited on 2019-12-08 In CSS

什么是em

相对长度单位，这个单位表示元素的font-size的计算值。如果用在font-size 属性本身，它会继承父元素的font-size。

什么是rem

这个单位代表根元素的 font-size 大小（例如元素的font-size）。当用在根元素的font-size上面时，它代表了它的初始值

所以em与rem没有任何关系

动态rem

动态rem是通过js动态改变html的font-size,也就是改变rem，一般是改为页面宽度的十分之一，确保最小字号不会小于12px。

动态rem可以用于移动端页面布局

如果页面宽度是1000px,将rem设为 1000px / 10 => 100px 所以1em就是100px, 将一个div元素设为3em,他就会占页面的十分之三

这样元素的宽高都以屏幕宽度为基准,对于不同的移动设备,屏幕宽度不同,页面元素都会等比例缩放

代码如下

<scrtip>
  document.write(`
      <style>
          html {
              font-size: ${window.innerWidth/10}px
          }
      </style>
  `)
</script>

这样就可以让rem为页面宽度的十分之一

利用scss 函数设置元素rem值

一般ui设计稿都是给定宽度的,我们不能一一计算每个元素的比例,这时候就可以通过scss里的函数自动计算比例.
假设设计稿的页面宽度为640px,xxx元素的宽度为320px(二分之一), 高度为160px(四分之一)。

$pageWidth = 640
function px2rem(px){
  return px/$pageWidth * 10 + rem 
}

.xxx {
  width: px2rem(320);  // 5em
  height: px2rem(160); // 2.5em
}

JS中的数据类型

Posted on 2018-10-29 Edited on 2020-09-03 In Javascript

JS中一共有七大数据类型

2. 字符串(string)

字符串也可以叫做字符数组

字符串就是零个或多个排在一起的字符，放在单引号或双引号之中。
空字符串与空格字符串

空字符串没有字符,长度为0
空格字符串只有一个空格的字符串，空格也是一个字符，所以长度为1

多行字符串(3种) ,ES6新语法

var s='1234\    //使用"\"换行
5677'
s
"12345677"     //输出还是一行

var s='1234'+   //使用"+"连接字符串
'5677'
s
"12345677"    //输出还是一行

//ES6新语法
var s=`1234    //使用"`" 换行
5678`
s
"1234        //输出为两行,length为9，换行符也为一个字符
5678"

//使用转义符
var s='1234\n5678'   //"\n"表示换行符
s
"1234        //输出为两行
5678"

转义

反斜杠（\）在字符串内有特殊含义，用来表示一些特殊字符，所以又称为转义符。

\0 : null
\b : 后退键
\f : 换页符
\n : 换行符
\r : 回车键
\t : 制表符
\v : 垂直制表符
' : 单引号
\ : 反斜杠

字符串与数组

字符串可以被视为字符数组，因此可以使用数组的方括号运算符，用来返回某个位置的字符（位置编号从0开始）
```
var s = "hello"
s[0] // 'h'
s[1] // 'e'
s[4] // 'o'
s[-1] // undefined
```

字符串是不可变的数据类型，不可以通过此方法改变字符串

var s = "hello"
delete s[0]
s // 'hello'
s[0] = "G"
s// 'hello'

3. 布尔(boolean)

只有true 和 false 两个值,用于条件判断

4. 符号(symbol) ES6新增

5. unidefine 只有一个值==> undefined

6. null 只有一个值==> null

undefined 与 null 都表示什么也没有

undefined 与 null 的区别

一个变量被声明而没有赋值，则返回undefined

一个非空对象，现在不想给值，var xxx=undefined ==> 空非对象

一个对象，不想给值， var obj=null ==> 空对象

7. 对象(object)

简单说，对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。
数组和方法也是对象

var obj = {a:1,b:2}

如果键名是数字，会自动转为字符串，如果不加引号，会按照标识符规则，不符合就报错
键名又称为属性，值可以为任意数据类型
对象的引用

如果不同的变量名指向同一个对象，那么它们都是这个对象的引用，也就是说指向同一个内存地址。修改其中一个变量，会影响到其他所有变量。
```
var o1 = {}
var o2 = o1

o1.a = 1
o2.a //1 o1改变，也会影响到o2

o2.b = 2
o1.b //2 o2改变，也会影响到o1

o1 = 1    //取消o1对原对象的引用
o2 // {a:1,b:2}  //o2不变
```

对属性的读取

var obj = {'name':'xiaoyu'}
obj['name'] // 'xiaoyu'
obj.name    // 'xiaoyu'  <==> obj['name']

var key =  'name'
obj.key  //error!  obj['key'],这个对象没有key这个属性

对象有哪些属性

var obj = {'name':'xiaoyu','age':'18'}
Object.keys(obj) //['name','age']

对象的遍历

for...in 循环用来遍历一个对象的全部属性。
它遍历的是对象所有可遍历（enumerable）的属性，会跳过不可遍历的属性。
它不仅遍历对象自身的属性，还遍历继承的属性。

var obj = {'name':'xiaoyu','age':'18'}
for(var attr in obj){
    console.log(attr+'==>'+obj[attr]) // name==>xiaoyu age==>18
}

其他

typeof 查看数据类型，两个bug，一个特殊的name

var num = 1
typeof num  //number

//bug1
function f(){]
typeof f //function  js没function这个数据类型

//bug2
var a = null
typeof a //object

//特殊的name  ==>  window.name 会将值通过toString()方法转为字符串
var name = [1,2,4]
typeof name // string
name  // '1,2,4'

CSS布局

Posted on 2018-10-13 Edited on 2020-07-20 In CSS

左右布局
左中右布局
水平居中
垂直居中

Read more »

几个关于CSS的套路

Posted on 2018-10-08 Edited on 2020-07-20 In CSS

横向布局

将子元素全部浮动起来
父元素添加 clearfix 属性
给clearfix类添加三行样式,清除浮动带来的影响
...
> 如果是两列显示在一行可以将li的高度设为50%;

文档流

文档流就是文档内元素的流动方向，内联:左->右,块级:上->下
脱离文档流会影响body的高度
脱离文档流会导致宽度收缩，需设置width: 100%;解决

元素的高度

块级元素的高度由其内部文档流元素高度的总和决定
内联元素的高度

position 定位

sticky 粘性定位
static 当前位置
relative 相对定位(参照自身原来的位置)
absolute 绝对定位(参照父级)
fixed 固定定位(参照浏览器)

通常将父级元素设置为相对定位，子元素设置为决定定位，子元素参照父级设定位置

背景图片居中，自适应

background-position: center center;
background-size: cover;

引用SVG图标

常用的网站：iconfont.cn

其他很实用的小技巧

max-height,max-weight
一般不给元素设定固定的height和width,容易出bug

通常从内向外加pading，将元素撑到指定宽高
内联元素不接受宽高度, 设置margin-top和margin-bottom不生效

display: block / inline-block;

hr 一条横线,样式设置

hr {

height: 0;
border: none;
border-top: 1px solid red;
}

work-break: break all

对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。

HTML常用标签

Posted on 2018-10-07 Edited on 2020-07-20 In HTML

iframe 和 a

iframe 标签通常用于嵌套页面
framborder 属性设置为0用于消除边框
name 属性与a标签结合起来

target=”xxx” #跳转到name为xxx的窗口或iframe
target=”_blank” #在新的窗口打开
target=”_self” #在当前窗口打开
target=”_parent” #在父级窗口打开
target=”_top” #在顶层窗口打开
```
<iframe src="https://www.baidu.com" name="xxx"></iframe>
<a target="xxx" href="http://qq.com">QQ</a>
```

a标签的download属性提供下载功能
```
<a herf="./test.png" download>test</a>
```
a标签的href属性可以发送http请求(只有锚点不发送请求，其他全部发送get <请求)

href=”#” #跳到页面顶部，锚点变为”#”
href=”” #刷新页面，跳转自身
href=”//qq.com” #以当前协议访问qq.com
href=”?q=xxx” #发送get请求,在地址栏显示
href=”javascript:;” #鼠标点击什么也不做,javascript伪协议

form 和 table

form

除了a标签可以发送请求外，form标签也可以发送请求，通常是post请求
action 指定请求路径，请求路径中也可加查询参数，method指定请求动词
form 中提交信息的标签，必须添加name属性
要想发送请求，form标签里必须有提交按钮

form 中有<button>,没写type属性，自动升级为提交按钮
form 中如果有<input>,只有type为submit时,才为提交按钮
```
<form action='query' method="post">
    <label>Username<input type="text" name="name"></label>
    <label>Password<input type="password" name="pwd"></label>
    <input type="submit" value="submit">
</form>
```

input与文字关联

通常写法,id与for关联

<input type="checkbox" id="xxx"><label for="xxx">Something</label>

常用套路,label将input包起来

<label><input type="checkbox">Something</label>

table
table的全部用法见下图

其他标签

nav,navigation 用来写导航条
ul,un-ordered list 无序列表
ol,ordered list 有序列表
除了span标签和div标签，其他标签都有默认样式
body默认margin为8px
strong和b都是加粗，strong表示语气上的强调，b只是单纯加粗
空元素 <img> <input> <meta> <link> <br> <hr> <col> <colgroup>
可替代元素 <img> <object> <video> <textarea> <input>

curl常用用法以及http协议

Posted on 2018-10-06 Edited on 2020-07-20 In Http

curl命令常用参数

最简单的用法，直接加网址

curl http://www.baidu.com       #返回下载进度，及网页源代码

-X 指定请求方式
- GET 请求
```
curl -X GET http://www.baidu.com  # -X GET 是可选的
```
- POST 请求
```
curl -X POST -d '123' http://www.baidu.com
```
  -d 后是向服务端发送的数据，写-d 选项后可省略 -X POST

-H 增加头部信息

curl -H "Content-Type:application/json" -d '{"data":"123","key":"456"}' http://www.baidu.com
#即指定发送数据的格式为json格式

-s silent 静静的下载，不输出进度条

-v 显示请求详细信息,HTTP协议的请求内容和响应

$ curl -s -v http://www.baidu.com
...
> GET / HTTP/1.1
> Host: www.baidu.com
> User-Agent: curl/7.55.0
> Accept: */*
>
< HTTP/1.1 200 OK
< Accept-Ranges: bytes
< Cache-Control: private, no-cache, no-store, proxy-revalidate, no-transform
< Connection: Keep-Alive
< Content-Length: 2381
< Content-Type: text/html
< Date: Sun, 07 Oct 2018 02:59:01 GMT
< Etag: "588604c4-94d"
< Last-Modified: Mon, 23 Jan 2017 13:27:32 GMT
< Pragma: no-cache
< Server: bfe/1.0.8.18
< Set-Cookie: BDORZ=27315; max-age=86400; domain=.baidu.com; path=/
<

http协议(hyper text translate protocol) 超文本传输协议

通过curl命令查看http请求和响应

参考curl命令-v参数，>开头的为http请求，<开头的为响应
请求的内容为

> GET / HTTP/1.1
> Host: www.baidu.com
> User-Agent: curl/7.55.0
> Accept: /
>

响应的内容为

< HTTP/1.1 200 OK
< Accept-Ranges: bytes
< Cache-Control: private, no-cache, no-store, proxy-revalidate, no-transform
< Connection: Keep-Alive
< Content-Length: 2381
< Content-Type: text/html
< Date: Sun, 07 Oct 2018 02:59:01 GMT
< Etag: "588604c4-94d"
< Last-Modified: Mon, 23 Jan 2017 13:27:32 GMT
< Pragma: no-cache
< Server: bfe/1.0.8.18
< Set-Cookie: BDORZ=27315; max-age=86400; domain=.baidu.com; path=/
<

另一个请求示例

curl -X POST -d "data" -s -v -H "Xiaoyu: xxx" -- "https://www.baidu.com"

请求的内容为

> POST / HTTP/1.1
> Host: www.baidu.com
> User-Agent: curl/7.55.0
> Accept: /
> Xiaoyu: xxx
> Content-Length: 4
> Content-Type: application/x-www-form-urlencoded

data

请求的格式为

1 动词路径协议/版本 #动词有 GET POST PUT PATCH DELETE HEAD OPTIONS 等
2 Key1: value1
2 Key2: value2
2 Key3: value3
2 Content-Type: application/x-www-form-urlencoded
2 Host: www.baidu.com
2 User-Agent: curl/7.54.0
3 #空格
4 要上传的数据 #可以为空