2018.1

发表于 | 分类于 |
字数统计: 2.1k 字 | 阅读时长 ≈ 8 分钟

2018.10.08

1.使用chorme开发者工具中的performance

1
2
3
4
5
6
统计汇总扇形图：
HTML 蓝色
脚本 黄色
样式表 紫色
媒体文件 绿色
其他资源 灰色

2.demo工作模式

因为代码很多时候是多人合作，在开发时，先开个demo完成自己的功能再迁移过去。

3.vue性能优化

不要老想在技术的角度解决问题，要试着从设计上去规避问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
- 慎用deep watch
- 尽可能的减少watch的数量
- v-show v-if
    涉及权限相关，v-if
    没有涉及权限
        根据用户点击的频次选择
            频繁切换 v-show
            不频繁 v-if
- 不要过多在模板里写表达式与判断
- 循环调用子组件时添加key (item,index) in arr :key='index'
- 对路由组件进行懒加载，即调用到对应的组件时才加载它，否则不加载
  const login = ()=> import('@/pages/login') 类似这种
- style scoped

2018.10.09

1.ES6常见特性

  • forEach 遍历函数
1
2
3
4
5
arr.forEach((v,index)=>{
    if(v==a) {
        //执行
    }
})
  • 箭头函数
  • map和get
  • proxyTable

2.循环遍历

一共有83个语料，需要将其分成三个类别：普通、难度、段位。
原先想着把83分别遍历三次，推到每个类别。好的方法：取出一个语料，分别与普通的，难度的，段位的语料匹配，检查是否存在level,range等字段。

3.indexOf findIndex

indexOf() 可返回某个指定的字符串值在字符串中首次出现的位置。

1
stringObject.indexOf(searchvalue,fromindex)
参数 描述
searchvalue 必需。规定需检索的字符串值。
fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

findIndex() 查找目标元素，找到就返回元素的位置，找不到就返回-1。

1
2
3
let a = arr.findIndex((v,index) => {
    if(v==b) return index
})

2018.10.10

1.如何把对象数组的一部分属性推到新数组

1
2
3
4
循环：
创建新数组m
m.name = ...
array.push(m)

2.es6字符串转数组

1
[...num]

2018.10.11

1.发现打开vscode cup到达100%

1
search.followSymlinks:false

2.关于创建数组

1
2
3
4
5
a = new Array(2)
=> (2)[empty x 2]创建的是2个undefine

push b = [ [],[] ] 
=> (2)[ Array(0),Array(0) ]

2018.10.12

赋值问题

1
2
3
4
5
data = new Array()
data.num = 1
=> console.log(data.num) => 1
但这不是以属性的方法挂载，而是成为了一个方法，正确赋值：
data = new Object()

2018.10.17

前端架构设计

  • 前端架构是一系列工具和流程的集合，旨在提升前端代码的质量，并实现高效、可持续的工作流
  • 模块化内容
  • 四个核心
    • 代码
    • 流程
    • 测试
    • 文档

HTML

  • 模块化标记
  • 模块化css理论
  • OOCSS方法(object-oriented css 面向对象的css)
1
2
3
4
div.toggle simple
    div.toggle-control open
        div.toggle-title
    div.toggle-details open
  • SMACSS方法(Scalable and Modular Architecture for CSS 模块化架构的可扩展css)
1
2
3
4
div.toggle toggle-simple
    div.toggle-control is-active
        div.toggle-title
    div.toggle-details is-active
  • 差异：
1
2
OOCSS -> 通过皮肤进行修改
SMACSS -> 通过子模块进行修改
  • BEM方法
    • 块名_元素_修饰符
  • 补充
    • OOCSS两个主要的原则
      • 分离结构和外观
1
2
simple 皮肤使用直角
comple 皮肤使用圆角
    - 分离容器和内容

1
可复用的css类名toggle-title.无论放到哪里都可复用
- SMACSS把样式系统分成五个具体类别
    - 基础(不加CSS类名，会以什么外观显示)
    - 布局(把页面分成一些区域)
    - 模块(设计中的模块化，可复用的单元，toggle,toggle_title)
    - 状态(描述在特定的状态或情况下，模块或布局的显示方式 is-active)
    - 主题(一个可选的视觉外观层，可更换不同主题)

  • CSS

    • 单一联真原则

      规定你创建的所有东西必须有单一的，高度聚焦的理由

    • 单一样式来源

组件修饰符

1
2
div.calendar calendar_nested
    div.calendar_header
  • JS
    可复用

2018.10.18

require引入Js

1
2
3
4
5
require( [path + 'js'],function(a){
    xxx
})

path的路径不能带@

2018.10.24

1.package.json和package-lock.json的区别

package.json package-lock.json
主要用来定义项目中需要依赖的包 在’npm install’时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号

2.生产模式和开发模式

生产模式 开发模式
npm install –save npm install –save-dev
npm i xxx -S npm i xxx -D
线上环境要用的，运行时的模式 本地调试和打包时要用的

3.flex

flex支持IE10，Edge…

2018.10.25

1.引入外部icons

1
2
3
4
5
6
7
8
9
10
11
12
13
14
- 把整个打包文件引入（阿里图库）

- 在main.js引入
import '@/assets/fonts/b-iconfont.css'

- iconfont.css改 
[class^="b-icon"], [class*=" b-icon"] {
  font-family:"b-FontFamily" !important;
  /* 以下内容参照第三方图标库本身的规则 */
  font-size: 18px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

2.如何获取音频时间

1
2
3
<audio v-on:durationchange='row.edit.duration=$event.target.duration' :src='row.edit.url' >

注意：audio一开始不会立即创建dom的

3.处理时间函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function formatTime(sc) {
  let str = ""
  if (sc > 0) {
    let m = parseInt(sc / 60)
    str += ((m >= 10) ? m : ('0' + m));

    let s = parseInt(sc - m * 60)
    str += ":"
    str += ((s >= 10) ? s : ('0' + s));
    return str;
  } else {
    str = "00:00"
    return str
  }
}
formatTime(60) => 01:00

2018.10.29

子组件给父组件传东西

1
2
3
4
5
6
7
8
9
10
子：
close() {
    this.$emit('closed',true)
}

父：
<子组件 @closed='closeAudio'></子组件>
closeAudio(e) {
    console.log(e)
}

2018.10.31

OAuth2.0

1.是什么？

授权的协议，只要授权方和被授权方遵守这个协议去写代码提供服务，双方就是实现了OAuth模式

2.例子：豆瓣和QQ
1
打开豆瓣->需要登录（无账号，不想注册豆瓣账号）->用QQ授权登录->登录豆瓣

豆瓣->客户端，QQ->认证服务器，OAuth2.0就是客户端和认证服务器之间由于相互不信任而产生的一个授权协议。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
sequenceDiagram
用户浏览器->>豆瓣网站: GET/leadToAuthorize 1
豆瓣网站->>用户浏览器: 302 location:/authorize?callback=/callback 1

用户浏览器->>QQ授权服务: GET/authorize 1
QQ授权服务->>用户浏览器: 200返回QQ登录页面 2-1

用户浏览器->>QQ授权服务: POST/login 2-2
QQ授权服务->>用户浏览器: 302 location:/callback?code=xxx 2-2

用户浏览器->>豆瓣网站: GET/callback?code=xxx 3
豆瓣网站->>QQ授权服务: POST/getToken?code=xxx 3 4
QQ授权服务->>豆瓣网站: 200{token:YYY} 3 4
豆瓣网站->>QQ授权服务: GET/getResource?token=yyy 3 5
QQ授权服务->>豆瓣网站: 200{userame:tom,age:18} 3 5
豆瓣网站->>用户浏览器: 200返回首页结果视图 3
1
2
3
4
5
6
1：用户第一次点击：用户点击用QQ方式授权登录按钮
2-1：用户输入Q号和密码点击登录
2-2：用户第二次点击：此处可能用户在浏览器输入qq密码点击授权这个过程
3：之后的过程用户在浏览器端，感知不到，最终完成时在用户看来就是登录成功并进入了豆瓣的首页
4：模拟发起浏览器请求的技术
5：模拟发起浏览器请求的技术
1
2
3
4
5
6
7
8
9
10
第一步：点击qq方式授权登录：
1).实际是向豆瓣服务器发送http://www.douban.com/leadToAuthorize的请求
2).豆瓣返回重定向地址，浏览器向访问这个地址（授权，QQ登录框），注意带了callback参数（识别跳回）

第二步：输入Q号密码授权登录
返回重定向地址 callback code

第三步：
1).拿code去QQ换token
2).拿token去QQ换用户信息并显示到页面
3.小爱的逻辑
1
2
3
4
5
6
sequenceDiagram
用户->>小爱: （忽略）
小爱->>加班熊: 请求，给加班熊一个token （第一步）
加班熊->>用户: token
用户->>加班熊: token