## mind ##

NoobNiu
203 阅读5分钟

html

语义化标签

  • 理解：把class改成标签名字。
  • 优点：易于人看//易于搜索引擎解析页面结构抓取关键信息//易于无障碍阅读

input加强与shadow dom

  • H5可以定义type标签来渲染出不同的input形式
  • 原理：input标签内部装载了一个隐藏的dom树，其行为对于当前页面dom完全不可见，用这个隐藏的dom树渲染出了不同的复杂input。

audio/video+source

  • 替代了flash插件，可以在网页插入音乐与视频。
  • 标签内部可使用来按序选择一个可用的格式。

canvas

  • 目前我不会~

本地缓存

  • cookie：在客户端服务端直接不断传递，由于http头长度限制一般不超过4kb。
  • session：服务端的临时会话信息储存对象，给客户端一个seesionID。
  • Cache Manifest：H5的本地离线缓存。
  • Stroage：存储字符串对象。sessionStorage储存在进程内存中，关闭就噶。localStroage储存在磁盘内存中，但是仍然保持同源策略（域名端口协议）。

StroageApi

sessionStroage.setItem(key,value);//增
let a = sessionStroage.getItem(name);//查
sessionStorage.removeItem(name);//删
sessionStorage.clear();//清空
let len = sessionStorage.length；//长度
object.addEventListener('stroge',callBackFunction);//更改监听

web worker

可以让单线程的js执行线程开出一个额外的执行任务的线程。但是完全归主线程管所以并不影响单线程思想。

css

选择器

  • *{}：通配符选择器
  • p{}：元素/标签选择器
  • .class：类选择器
  • .id:id选择器

属性选择器

<ul>
    <li foo>1</li>
    <li foo="abc">2</li>
    <li foo="abc efj">3</li>
    <li foo="abcefj">4</li>
    <li foo="efjabc">5</li>
    <li foo="ab">6</li>
</ul>

文档选择器

  • a b：a内部的b
  • a>b>c:选择父元素为a的b（不越级）
  • a+b：与a相邻的b
  • a~b：a后面的所有b

伪类选择器

  • :root|根元素
  • :ntd-child(n)|第n个子代
  • :nth-of-type(n)|重复出现类型的第n个元素
  • :last-child/:frist-child|最后一个/第一个子代
  • a:link|还未访问
  • a:active|被点击
  • a:hover|获得焦点
  • a:visited|已经被访问的
  • :focus|当前获得焦点的

伪元素

  • ::first-line|第一行
  • ::first-letter|第一个字
  • ::before|在其前面插入一个div
  • ::after|在其后面插入一个div
  • ::selection|被用户选取的部分

优先级

  • ！important--行内--ID选择器--类--标签选择器 详细的计算规则
    同一个元素有两组样式，优先级由ABCD四个值确定。
  • A：有行内样式则为1没有为0
  • B：id选择器出现的次数
  • C：类/属性/伪类出现的次数
  • D：标签/为元素选择器出现的次数 每个样式组有自己的四位优先级码，从A开始比较，较大者胜出，比较B以此类推。 ！improtant除外。

grid

felx是线性一维的布局，在两个一维的轴上做布局。grid则为在平面上做的二位布局，他将空间分为网格，将内容装在网格中。然后根据列线号和行线号对内容进行定位。

image.png

.father{
  display: grid;
  /*100px*3的列*/
  grid-template-columns: 100px 100px 100px;
  /*等同*/
  height: 300px;
  grid-template-columns: repeat(3,33%);
  /*等同*/
  grid-template-columns: repeat(auto-fill,100px);
  /*二三列是第一列的一倍，二倍*/
  grid-template-columns: 150px 1fr 2fr;
  /*行宽设置*/
  grid-template-rows:100px 100px 100px;
  /*行间距*/
  grid-row-gap:20px;
  /*分区与合并*/
  grid-template-areas: 'a a b' 'c d d' 'e e e';
  /*排列逻辑-先列后行并且尽量不要空格*/
  grid-auto-flow: column dense;
  /*单格内部水平对齐方式/垂直对齐方式*/
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
  /*格子在父元素中的对齐方式*/
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
  /*超出部分行的行高*/
  grid-auto-rows: 50px;
}
.son{
  /*此格子列边框是网格列线的哪条*/
  grid-column-start: 2;
  grid-column-end: 4;
  /*等同*/
  grid-column: 2/4;
  /*列长度是几个网格列宽*/
  grid-column-start: span 2;
  /*水平对齐方式*/
  justify-self: start | end | center | stretch;
  /*垂直对齐方式*/
  align-self: start | end | center | stretch;
}

flex

.father{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  /*space-between与边框之间无距离平均分布/space-around与边框有间距*/
  align-items: center;
}
.son{
  /*排列优先级，越小越靠前*/
  order: -1;
  flex:1;
  align-self: flex-end;
  justify-self: flex-start;
  /*有剩余空间或空间不够这个元素放大或缩小的倍数*/
  flex-grow: 2;
  flex-shrink: 2;
}

filter

filter: name(value);

div{
  /*亮度*/
  filter: brightness(200%);
  /*高斯模糊*/
  filter: blur(5px);
  /*对比度*/
  filter: contrast(200%);
  /*灰度*/
  filter: grayscale(50%);
  /*背景滤镜*/
  backdrop-filter:blur(5px);
}

媒体查询

/*屏幕宽度在600-900时的样式*/
@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

em/rem

em当前元素font-size值
rem根元素font-size值

动画/变形/过度/移动

  • animation：动画
  • transition：过渡
  • transfrom：变形
div{
  /*transition: property duration timing-function delay;*/
  /*    过度：     属性名称   时间     动线曲线    延迟执行*/
  transition: width 2s ease-in 1s;
  /*形变方式：X方向偏移量*/
  transform: translateX(10px);
  /*animation: name duration timing-function delay iteration-count direction play-state fill-mode;*/
  /*   动画：     动画名  动画时间   曲线  延迟时间  循环次数  重复方式   暂停状态   结束时状态是否保持*/
  animation: run 5s ease-in 1s infinite alternate forwards;
}
  @keyframes run {
    0%{transform: rotate(0rad)}
    50%{transform: rotate(180rad)}
    100%{transform: rotate(360rad)}
  }

BFC

图层，一般指显示图层，独立的块级格式化上下文；

  • 根元素
  • float的值不为none
  • overflow的值不为visible
  • display的值为inline-block、table-cell、table-caption
  • position的值为absolute或fixed

JS/es6

变量定义操作符

  • var：存在变量环境，压栈时自动初始化为undefined，挂载于函数作用域或全局作用域。
  • let/const：存在词法环境，压栈不初始化所以不会有变量提升，定义操作没有赋值才会初始化，挂载于块作用域，const栈中值不可变。
  • 没有操作符的声明，执行到时候会在全局注册一个变量。 函数声明
    es6附录B中规定块作用域内的函数声明浏览器可以自己制定行为不需要一定遵守。
    一般主流方式也是规定方式：块内函数声明类似var，有变量提升但是不止提升初始化而且会提升赋值。同时在非块作用域外的作用域正常var一个同名变量但是只初始化，在执行到赋值语句时才会赋值块作用域外的同名变量。

模块化

  • commonJS输出一个值的浅拷贝，引入后不会影响模块模板。module.exprots+require。
  • es6模块输出值的引用，模块引入后的更改影响模块本身。export+improt。 exprot{} 暴露一个模块可供其他模块调用
    improt{}from '' 引入一个已经暴露的模块
    bable将暴露与improt转为之前commonJS的模板语法。然后webpack将此打包出module，exprots，reauire等环境变量。

模板字符串

  • 用\转义引号
  • 用${}插入js代码或者变量

提一嘴

  • 块级作用域
  • Promise -es13-2020新加入.any方法，返回第一个成功的promise，或者全失败返回一个失败的promise。
  • Async
    • 与.then解决回调地狱相差不大。async关键词修饰的function会返回一个promise，实际上就是promise的封装。
  • 迭代对象与for...of（暂时不会）
  • Class与继承
  • proxy
  • 原型链
  • new操作
  • bind/call/apply
  • deepclone
  • defer最后按顺序解析，async加载完毕解析不按顺序

箭头函数与this指向##

  • 箭头函数没有原型，因此也没有this，但是仍然有函数作用域。
  • 箭头函数的this总是与定义时外层函数this保持一致且无法使用call等更改(但是外层函数的this可以更改)。就像const出来的指向外层this的指针一样。
  • this指向，谁调用指向谁，用bind改过后this被call成一个指向bind参数的常量不能二次更改。

事件触发顺序机制

element.addEventListener(type, listener, useCapture)

  • type\事件类型的字符串
  • listener\回调函数
  • useCapture\默认值false，表示事件冒泡；设为true时，表示事件捕获 先捕获后冒泡，但是目标元素的事件是根据注册顺序触发。

bom

  • Bom的对象有：window，screen，location，history，navigator
  • 冒泡/捕获与两种监听方法 element.addEventListener(type, listener, useCapture)
    useCapture：默认flase为冒泡，设为true为冒泡阶段捕获。
  • History API
  • XHR API
  • 异步机制
  • 垃圾回收机制

模块化

  • CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
  • CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

set/map

//set：一个自带去重的类数组||weakSet：元素只能是引用类型并且只是弱引用不会影响回收机制
const set2 = new Set(["a","b","c","d","d","e"]);
set2.add("g").add("h").add("i").add("j").add("k").add("k");
set2.has("z") // true
set2.size // returns 10
set2.clear();//清楚
Array.from(new Set(array));//数组去重
//map：很像对象，但是也类数组，key可以是任意类型，object的key只能是string/number||weakMap类似weakSet的特性
const map = new Map()
map.set('foo', true)
map.size // 长度
let arr = [...map]//转为数组

url参数提取

let a = new URLSearchParams(window.location.search);
let params = Object.fromEntries(a.entries());
console.log(a);//an URLSearchParams
console.log(params) // {id: '2', isShare: 'true'}
console.log(params.id) // 2

VUE

router

hash

  • #后面的部分并不会发给后端
  • 切换：location.hash='#abcsdf'
  • 监听：var hash = window.location.hash
    window.addEventListener('hashchange',function(){})

history

  • 会与后端交互，后端需要配置返回根目录
  • 切换：
    window.history.pushState(state,title,url)
    window.history.replaceState(state,title,url)
    • state：这个参数用于监听事件发生时用event.state获取的东西
    • title：没用，给人看的
    • url：可以是绝对定位或者相对定位
  • 监听：window.addEventListener('popstate', function(event) { });
    • 只能监听到浏览器的前进后退按钮事件或者js调用back、forward、go方法
    • 自己实现一个被加强的pushState或者replaceState，监听这两个事件

Vue3.0

const newObj = new Proxy(obj, {
  get: function(target, key, receiver) {
    console.log(`getting ${key}!`);
    return Reflect.get(target, key, receiver);
  },
  set: function(target, key, value, receiver) {
    console.log(target, key, value, receiver);
    if (key === 'text') {
      input.value = value;
      p.innerHTML = value;
    }
    return Reflect.set(target, key, value, receiver);
  },
});

proxy直接监听一个对象，而Object.defineProperty监听属性，并且无法监听新添加的属性，也无法监听数组。

组件间通信

  • props/$emit
  • children/children/parent:获取组件的实例数组，当然可可以获取到组件的所有方法和data，并不推荐。
  • provide/inject：传给此节点以下的所有子节点，可以跨级传值。
  • eventBus：任意组件通信，通过一个EventBus实例
  • Vuex
  • localStorage/seesionStorage

eventBus

  • 相关思考

    也叫事件总线，其实是一种简单实现的vuex，原理也是有个new Vue实例注册在全局或者按需位置，在其中维护状态对象和注册更改获取等方法。他的取名就像他的作用，想计算机组成原理中的系统总线一样作为让所有组件通信的渠道。

  • 使用

    Vue.prototype.Bus = new Vue()在main.js中来为跟vue实例注册一个事件总线实例。 this.\Bus.$emit('eventName',data);//想eventBus实例发送一个信息
    this.$Bus.$on('eventName',(res)=>{});//监听一个事件并设置回调

  • vuex其实可以是一个实现完善的eventBus，他new了一个实例并在每个组件的beforeCreat周期为组件注入了一个该实例的引用。

diff原理

浏览器

浏览器存储

  • cookie：客户端维护，绑定一个域名，在每次请求都会携带，可设置过期时间或关闭页面失效，只支持字符串，一般限制为4K。
  • seesion：服务端维护，首次请求返回一个sessionID让客户端记录并请求时带有，类型不限，大小不限。

其他

设计模式

  • 工厂模式
  • 单例模式：eventBus，VueX
  • 发布订阅：vue响应式原理
  • 迭代器模式
  • 策略模式：同一个组件不同调用展现不同的样式和行为
  • 外观模式：也就是公共代码封装
  • 代理模式
avatar
文章
阅读
粉丝