2018.10.08
1.使用chorme开发者工具中的performance
1 | 统计汇总扇形图: |
2.demo工作模式
因为代码很多时候是多人合作,在开发时,先开个demo完成自己的功能再迁移过去。
3.vue性能优化
不要老想在技术的角度解决问题,要试着从设计上去规避问题。
1 | - 慎用deep watch |
2018.10.09
1.ES6常见特性
- forEach 遍历函数
1 | arr.forEach((v,index)=>{ |
- 箭头函数
- 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 | let a = arr.findIndex((v,index) => { |
2018.10.10
1.如何把对象数组的一部分属性推到新数组
1 | 循环: |
2.es6字符串转数组
1 | [...num] |
2018.10.11
1.发现打开vscode cup到达100%
1 | search.followSymlinks:false |
2.关于创建数组
1 | a = new Array(2) |
2018.10.12
赋值问题
1 | data = new Array() |
2018.10.17
前端架构设计
- 前端架构是一系列工具和流程的集合,旨在提升前端代码的质量,并实现高效、可持续的工作流
- 模块化内容
- 四个核心
- 代码
- 流程
- 测试
- 文档
HTML
- 模块化标记
- 模块化css理论
- OOCSS方法(object-oriented css 面向对象的css)
1 | div.toggle simple |
- SMACSS方法(Scalable and Modular Architecture for CSS 模块化架构的可扩展css)
1 | div.toggle toggle-simple |
- 差异:
1 | OOCSS -> 通过皮肤进行修改 |
- BEM方法
- 块名_元素_修饰符
- 补充
- OOCSS两个主要的原则
- 分离结构和外观
- OOCSS两个主要的原则
1 | simple 皮肤使用直角 |
- 分离容器和内容
1 | 可复用的css类名toggle-title.无论放到哪里都可复用 |
- SMACSS把样式系统分成五个具体类别
- 基础(不加CSS类名,会以什么外观显示)
- 布局(把页面分成一些区域)
- 模块(设计中的模块化,可复用的单元,toggle,toggle_title)
- 状态(描述在特定的状态或情况下,模块或布局的显示方式 is-active)
- 主题(一个可选的视觉外观层,可更换不同主题)
CSS
单一联真原则
规定你创建的所有东西必须有单一的,高度聚焦的理由
单一样式来源
组件修饰符
1 | div.calendar calendar_nested |
- JS
可复用
2018.10.18
require引入Js
1 | require( [path + 'js'],function(a){ |
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.如何获取音频时间
1 | <audio v-on:durationchange='row.edit.duration=$event.target.duration' :src='row.edit.url' > |
3.处理时间函数
1 | function formatTime(sc) { |
2018.10.29
子组件给父组件传东西
1 | 子: |
2018.10.31
OAuth2.0
1.是什么?
授权的协议,只要授权方和被授权方遵守这个协议去写代码提供服务,双方就是实现了OAuth模式
2.例子:豆瓣和QQ
1 | 打开豆瓣->需要登录(无账号,不想注册豆瓣账号)->用QQ授权登录->登录豆瓣 |
豆瓣->客户端,QQ->认证服务器,OAuth2.0就是客户端和认证服务器之间由于相互不信任而产生的一个授权协议。
1 | sequenceDiagram |
1 | 1:用户第一次点击:用户点击用QQ方式授权登录按钮 |
1 | 第一步:点击qq方式授权登录: |
3.小爱的逻辑
1 | sequenceDiagram |