1.9学习笔记

不不川
124 阅读17分钟

  • javascript的执行机制\

    • 因为js是一门单线程语言但因为我们业务需要所以把执行任务分为了同步和异步，同步任务当然是在主线程执行而异步任务是先放在事件table中然后注册回调函数当指定此事情完成时再放入事件队列中，当我们主线程内任务执行完毕为空就去事件队列读取对应函数进入主线程执行。上述过程重复就是常说的事件循环。\
    • setTimeout是异步的，且我们有对任务的精细定义像宏任务包括整体代码，setTimeout，setInterval，微任务包括promise，process.nextTick\
    • 当我们执行完一个宏任务结束之后去事件队列查看也没有可以执行的微任务然后把微任务全部执行调就开始新的宏任务，执行一个宏任务之后清空所有的微任务（现有的。\

  • async函数\

    • async和await可以让我们更简洁的写出基于promise的异步行为而非刻意链式调用promise。\
    • 且我们通常await周围用try catch语句包围起来，这个async函数的返回值一定是promise，这个promise要么会通过一个由async函数返回的值被解决，要么会通过一个从async函数中抛出或者是没有被捕获到的异常被拒绝也就是返回的promise是这个reject态。\
    • await表达式会暂停整个async函数的执行进程并让出他的控制权，只有等待的基于promise的异步操作被兑现或被拒绝之后才会恢复进程，所以被async声明的函数就是和普通函数不一样，也就是await之后的代码相当于await返回的promise之后的then，是在promise状态确定之后才被扔进任务队列等待执行的，且promise的解决值会被当作该await表达式的返回值。\
    • 且在await表达式之后的代码可以被认为是存在在链式调用的then回调中，多个await表达式都将加入链式调用的then回调中也就是多个then一直向下调用，返回值将作为最后一个then回调的返回值。\
    • 如果async函数中没有return那就默认返回undefined。\

    • async function getProcessedData(url) {
      ​ let v;
      ​ try {
      ​ v = await downloadData(url);
      ​ }catch (e) {
      ​ v = await downloadFallbackData(url); //抛出异常的话就执行这个promise
      ​ }
      ​ return processDataInWorker(v); //上面try中语句正常运行不抛出error的话则返回此promise也就相当于try中的then
      ​ // 且返回值没有加 await 是因为返回值默认就是promise因为是async函数所以他会被隐式传递给promise.resolve正常来说返回promise的话前面都要加await的。
      ​}
      ​\

  • 小tips\

    • 空字符串和null不一样啊，一般返回空的话可能是null。\
    • throw可以不用在try catch中 如果判断条件为true 直接抛出 程序就停了。\
    • try catch finally是配套的语句，和await没什么必然关系，只不过我们想如果axios返回的promsie是失败状态的话想让其在catch中输出操作一下而已且如果真的失败状态那await此语句之后的代码块必然不会执行。在try和catch的代码块中，如果碰到return语句，那么在return之前，会先执行finally中的内容，若finally中有return那就return他，之前的return则不会执行。\
    • 感觉装饰器都是用在class相关的，且如果装饰器有参数且返回函数也有那就没有什么语法糖的必要了。\
    • 域名不包含/之后的那些 且单页面是用/#/包含 com之类的是顶级域名，往前来看 父子域名关系 a.b.com是b.com的子域名 ，单页面应用是部分渲染，而多页面也是用/去跳转 然后渲染。我们用localstorage的时候要看会不会和第一次不一样，比如新人引导我们要存下来这个状态用local缓存，而像用户登陆我们不应该用localstroage 这个缓存不仅仅是持久化存值，你要和上一次状态有关系？仔细想一下🐻？\
    • 且localstorage不会在父子域名中共用你要iframe或者改变协议才ok 此缓存是特定于页面的协议。\
    • 拦截器简单点说就是拦截每一次你的请求和响应，然后进行相应的处理，之后再进到 then / catch ，也就是说我如果能进到then那就说明我一定成功了此刻返回的promise 所以axios响应拦截返回的promise一定有状态去进到第一个参数还是第二个参数 ，或者返回就一定抛出错误在catch中，因为我们拦截的时候去第二个参数处理也就是去吞掉了此错误，让他不会再向上传 或者是根本不会向下执行程序。如果返回一个reject呢 那await还是会拿到并且到catch吧？向上传输error这个我还是没有搞明白。🐻？\
    • 但你只是promise.reject了 返回还是undefined的promise是的 然后就默认是then状态的进入下一个then链，除非你throw或者reject不然他就返回一个成功的promise segmentfault.com/a/119000001… 看一下以及源码？🐻\

  • axios相关\

    • 首先他是一个基于promise的http库可以用在浏览器和nodejs中。可以拦截请求和响应，转换请求和响应数据，也可以取消请求，自动转换json数据，客户端还支持防御xsrf。\
    • get请求中axios.get('/user?ID=12345')等同于 axios.get('/user',{params:{ID:12345}})\
    • axios.all是执行多个并发请求参数是函数数组。且在axios.post(url[,data[,config]])也就是说顶多他接收三个参数，所以除了url和data其他参数都要用{}包起来当作config一个对象。\
    • 请求配置一般有url method baseURL transformRequest可以在向服务器发送前修改请求数据 同理也可以在这定义修改响应数据的对象回调函数 headers自定义的请求头 params与请求一起发送的url参数 data是作为请求主体被发送的数据 对象形式key-value timeout如果请求花费超过了此时间则被终端此请求 还有proxy。\
    • 响应结构一般有data status 以及来自服务器响应的http状态信息 headers响应头 config为请求提供的配置信息 等。\

  • try catch捕获异常\

    • 能被try catch 捕捉到的异常，必须是在报错的时候线程执行已经进入 try catch 代码块，且处在try catch里面，这个时候才可以被捕获到，像try中有一个定时器那么如果定时器的回调函数出现错误catch是捕获不到的因为catch以及执行过去了，定时器这个任务执行的时候已经不在try这个代码块了，还有如果在try中定义个函数，在外面去执行那么如果这个函数有问题也不会catch进入，因为try代码块是定义了此函数且已经执行过去了，所以调用此函数的时候不会哦。\
    • 还有try catch执行如果碰到了错误进入了catch那么以后的代码一定不会执行，就像突然断掉了然后进入了catch代码块执行完catch就无了，或者我们平常没有catch代码块的时候也是 遇到有错误，编译或者什么的就是直接停掉了然后提示你 自己出一个错误信息让你去改，程序就是停止了。那么如果try catch里面又套了一个try catch 那一样的道理 里面的catch如果捕捉到了错误就是立马抛出，程序停止的。这和promise不一样他如果catch那她知道了我现在状态是失败的 我会按照链式调用寻找下面的所有失败状态promise一个一个执行。且finally内容是放在return之前的 如果finally中return了那就直接return了 自己内部状态的return就不执行了。\
    • but promise如果被包在try catch内部，promise出现异常他是不会向上抛出的不会让catch代码块感受到，也就是对外感觉没有异常，这是为啥呢，且promise内部有了异常程序也不会停止下来，反而是继续正常运行的只不过此时promise状态为失败而已，是因为promise内部也有try catch包裹但 且如果发生了reject和Promise.prototype.catch那promise就会捕获到异常认定自己是失败状态了 用promise包裹起来此错误信息，那我内部捕获到了，且reject函数调用和catch抛出 其实是一样的处理，那就不会向上抛出异常了。因为他自己内部有try catch包裹所以他有能力可以捕获到catch错误进行处理，所以当你想操作什么的时候去向内部promise增加.catch()回调函数就可以啦。\
    • 但上面说的是try里是正儿八经then resolve这种链式调用的promsie 那如果是await呢 ，因为我们await是想让他成功的因为我们想要结果数据，且想实现一种感觉是同步形式的操作，所以如果await之后的promise如果是reject状态那就会到catch语句，所以我们最好必须await用try catch包裹起来，因为你之后必然不会对一个错误信息进行数据操作，所以他并不会默默无闻的返回一个失败态，虽然他是promise但他更是await可能有一些语法修改吧，这个待考究🐻？，且如果我们请求数据返回的是promise最好就用await搞他，异步嘛毕竟快一点，性能好一点。\
    • promise也有then catch finally方法 且 如果你不resolve或者reject他是一直处于pending状态的，所以在axios请求post什么的时候注意要返回。\
    • promise如果没有resolve或者reject是会内存泄漏的 catch中也要reject（）他应该不会自动成为失败状态吧？🐻？\

  • 高阶函数\

    • 高阶函数是指必须满足以下要求其一当然可以都满足，1.函数作为参数被传递 2.函数作为返回值输出\
    • 像之前取消请求的那个高阶函数一开始我只是想函数传入然后在内部去执行这个函数，但经同事提点也是可以用一个新函数去包起来然后返回此新函数，再新函数内部去执行，这样可以达到我们目的，此处还想说两个tips，学会解构在一些地方不同变量之间可以value相同或者此方法名对应别的map的key，这样容易操作，props传递数据也可以直接解构他会给你命名为同名的变量方法，不影响很有必要，我们ts中常用const 一般都是不会变的常量，还有我们需要去操作值的时候也可以去挂到一个必须传的值上去，之后在内部拿出来再delete掉，怎么让我们的操作简单，不要冗余，尽量一个操作里面只操作这个东西，别的方法里面不要有任何相关这个的东西，也就是拆分逻辑吧，注意⚠️，还有很多时候我们可以获得此方法的名字getname或者别的相关属性去进行处理，这是很好用的注意，还有一些localstorage和window这种全局属性具体🐻？要会，prototype🐻？原型。\
    • 让我们回到正题，用高阶函数实现aop，面向切面编程一般都是指把一个函数动态织入到另外一个函数比如用Function.prototype.xxx这种感觉不常用hh，还有就是 函数柯里化currying，一个函数会接受一些参数但这些参数并不会去立即求值操作而是继续返回另外一个函数，用args，刚才传入的参数也就相当于闭包被保存起来，在函数被真正需要求值的时候再把所有参数一次性用于求值。 还有函数节流去返回一个函数吧🐻？防抖节流看一下 等。\

  • Browser对象\

    • 看一些router相关文档，项目中使用的hashhistory直接push路径什么的就可以跳转了🐻？\
    • \

  • 备忘录整理（摆烂\

    • n.
      faas功能即服务
      iaas基础设施即服务
      paas平台即服务
      saas软件即服务
      ci持续集成服务
    • js命名规范
      一.bool类型命名
      1.表示可见性，进行中的状态
      is+动词的现在进行时或形容词
      isShow
      visible loading connecting validating正在验证中 running运行 listening正在监听中
      2.属性状态类
      描述实体比如组件对象的功能属性
      disabled是否禁用 editable是否可编辑 clearable是否可清除 readonly只读 expandable是否可展开
      checked是否选中 enumerable是否可枚举 iterable是否可迭代 clickable是否可点击 draggable是否可拖拽
      3.配置类，选项类
      主要是组件功能的开启与关闭，功能属性的配置
      withXXX表示组件在基本功能形态外的其他功能
      enableXX表示组件某些功能的开启
      allowXx功能属性的配置
      withTab是否带选项卡 withoutTab不带选项卡 enableFilter开启过滤 allowCustomScale允许自定义缩放
      shouldClear是否清除 canSelectItem是否能选中元素
      只用一种allow也可以
      二.函数命名
      1.事件处理时
      事件处理包括 浏览器原生事件，异步事件，组件自定义事件。onXx onXxClick handleXx handleXxChange
      原生事件用onXx 自定义事件使用handleXx 事件主动监听采用onXx 被动处理使用handleXx
      在表单提交的时候采用onSubmit函数
      如果有时候单词太多可能就省略on或者handle了 动词开头就好
      handleSizeChange 处理分页页数改变
      handlePageChange处理分页每页大小改变
      onKeydown按下键时
      2.异步处理时
      主要是写数据层服务，状态管理中的action命名，以及ajax回调的命名规则。
      getUsers获取用户列表 fetchToken取得token deleteUser删除用户 removeTag移除标签
      addUser添加用户 createAccount创建账户
      get也许是数据源不一定取自异步的原始数据可能是加工处理后的，而fetch是直接拿的原始数据。
      deleteXx主要用于数据删除而remove是移除数据，通常数据是存在的只是没有显示或者是数据假删除
      update是数据更新操作，add是添加新项，而create是创建新实例。
      3.跳转路由时
      有时候我们可能是通过事件触发去跳转目标地址的这个时候需要一个函数去处理
      toTplDetail跳转到模版详情页面
      navigateToHome导航到首页
      goHome跳转首页
      jumpHome跳转首页
      redirectToLogin重定向到登陆页
      switchTab切换到tab选项卡
      backHome回到主页
      三.数据加工
      1.根据特定属性获取属性
      getXxByYy() Xx可以是特定上下文的名字1 比如·element item option data selection list 这种
      Yy就比如id index key value selected actived这种
      除了使用get 还可以使用query fetch
      getItemById
      getItemBySelected根据传入的已选列表id来获取列表全部数据 这种情况写成getItemsSelected更好
      queryUserByUid根据uid查询用户
      2.格式化数据
      比如说排序 调整数据结构 过滤数据 添加属性
      formatXx convertXx转换 inverseXx反转 toggleXx parseXx解析 flatXx展开1
      sliceXx joinXx结合数组方法这种的也可以
      formatDate格式化日期
      toggleAllSelected切换所有已选择的数据状态
      flatSelect展开选择数据
      3.数组命名 用复数
      options选项 list maps nodes节点 entities实体 collection
      userList users tabOptions stateMaps btnGroup userEntities selectedNodes stateMaps
      4.选项元素，下拉元素命名
      title name key label field value id children index nodes
      5.当前选项，激活项命名
      active current select
      activeTab currentPage selectedData
      6.数据循环时候
      menu item option data key object index ijk xyz mn
      count次数 skipped跳过的数量 result结果
      7.
      from 从 to 到
      prev 上一个 next 下一个 cur当前
      source源 target目标
      start开始 end结束
      oldVal newVal 旧 新
      promis中then的回调函数第一个参数：res data json entity都可以
      8.
      ch 单个字符 str字符串 n次数 reg正则 expr表达式 lens数组长度 count数量
      q查询query src数据源 no数字 rate比率 status状态 func函数 size大小 hoz水平方向
      radix基数 vert垂直方向
      四.dom事件
      load已完成加载
      unload资源正在被卸载
      abort中止时
      focus获得焦点
      scroll滚动事件
      offline离线状态
      touch轻按
      pause暂停
      suspend挂起
      complete完成
      seek搜索
      install安装
      progress进行
      zoom放大
      rotate旋转
      active激活
      scale缩放
      valid有效 void 空
      assignedEvent分配事件
      closedEvent关闭事件
      labeledEvent标签事件
      deployedEvent部署事件
      五.
      infinite无限的
    • css里面类的一般命名不会搞驼峰太奇怪 多个单词之间用-分隔 class名字小写不加_尽量不缩写 （less里面如果有变量声明可以驼峰。
      常见class关键词
      布局类：header, footer, container, main, content, aside, page, section
      包裹类：wrap, inner
      区块类：region, block, box
      结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
      列表类：list, item, field
      主次类：primary, secondary, sub, minor
      大小类：s, m, l, xl, large, small
      状态类：active, current, checked, hover, fail, success, warn, error, on, off
      导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
      交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay
      星级类：rate, star
      分割类：group, seperate, divider
      等分类：full, half, third, quarter
      表格类：table, tr, td, cell, row
      图片类：img, thumbnail, original, album, gallery
      语言类：cn, en
      论坛类：forum, bbs, topic, post
      方向类：up, down, left, right
      其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...
      常用的CSS命名
      头：header　　内容：content/container　　尾：footer　　导航：nav　　侧栏：sidebar
      栏目：column　　页面外围控制整体布局宽度：wrapper　　左右中：left right center
      登录条：loginbar　　标志：logo　　广告：banner　　页面主体：main　　热点：hot
      新闻：news　　下载：download　　子导航：subnav　　菜单：menu
      子菜单：submenu　　搜索：search　　友情链接：friendlink　　页脚：footer
      版权：copyright　　滚动：scroll　　内容：content　　标签页：tab
      文章列表：list　　提示信息：msg　　小技巧：tips　　栏目标题：title
      加入：joinus　　指南：guild　　服务：service　　注册：regsiter
      状态：status　　投票：vote　　合作伙伴：partner
      (1)页面结构
      容器: container　　页头：header　　内容：content/container
      页面主体：main　　页尾：footer　　导航：nav
      侧栏：sidebar　　栏目：column　　页面外围控制整体布局宽度：wrapper
      左右中：left right center
      (2)导航
      导航：nav　　主导航：mainbav　　子导航：subnav
      顶导航：topnav　　边导航：sidebar　　左导航：leftsidebar
      右导航：rightsidebar　　菜单：menu　　子菜单：submenu
      标题: title　　摘要: summary
      (3)功能
      标志：logo　　广告：banner　　登陆：login　　登录条：loginbar
      注册：regsiter　　搜索：search　　功能区：shop
      标题：title　　加入：joinus 　状态：status　　按钮：btn
      滚动：scroll　　标签页：tab　　文章列表：list　　提示信息：msg
      当前的: current　　小技巧：tips　　图标: icon　　注释：note
      指南：guild　服务：service　　热点：hot　　新闻：news
      下载：download　　投票：vote　　合作伙伴：partner
      友情链接：link　　版权：copyright
      注意事项::
      1.一律小写;
      2.尽量用英文;
      3.不加中槓和下划线;
      4.尽量不缩写，除非一看就明白的单词。
      CSS样式表文件命名
      主要的 master.css
      模块 module.css
      基本共用 base.css
      布局、版面 layout.css
      主题 themes.css
      专栏 columns.css
      文字 font.css
      表单 forms.css
      补丁 mend.css
      打印 print.css\
    • after伪元素是两个双引号 显示的内容属于自身的content属性 属于内联元素（行内元素\
    • \

  • flex布局\

    • 任何一个容器都可以成为flex布局。他的所有子元素自动成为容器成员为flex项目。\
avatar
文章
阅读
粉丝