IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    SegmentFault 思否技术周刊 Vol.76 — 破解 Javascript 玩法

    Beverly发表于 2023-01-03 11:12:54
    love 0

    本期技术周刊一起了解 Javascript,欢迎大家阅读 ~

    文章推荐

    浅谈 Javascript 闭包 // magnesium

    闭包的概念是有很多版本,不同的地方对闭包的说法不一

    维基百科:在计算机科学中,闭包(英语:Closure),又称词法闭包(Lexical Closure)或函数闭包(function closures),是在支持头等函数的编程语言中实现词法绑定的一种技术。

    MDN: 闭包(closure)是一个函数以及其捆绑的周边环境状态(lexical environment,词法环境)的引用的组合。

    个人理解:

    • 闭包是一个函数(返回一个函数)
    • 返回的函数保存了对外变量引用

    JS 如何返回异步调用的结果? // 现实的理想技术

    在 JS 中处理异步调用的结果,最佳实践就是“异步转同步”:使用 Promise + async/await 语法关键字。在这里 async 总是与 await 成对出现,一个 async 函数总是返回一个 Promise,一个 await 关键字总是在尝试“解开”一个 Promise,结局要么等到有价值的数据,要么异步出现异步,什么也没有等到。为了避免出现异常,影响主线程的正常运行,一般要用 catch 规避异常。

    从 await-to-js 到 try-run-js // jump__jump

    之前在做 code review 时候发现有同事使用 try catch 包装了一堆异步代码,于是个人就觉得很奇怪,难道不应该只 catch 可能出问题的代码吗?同事告诉我说 try catch 太细的话会出现内外作用域不一致,需要提前声明变量。

    let res: Data[] = [];
    
    try {
      res = await fetchData();
    } catch (err) {
      // 错误操作或者终止
      // return
    }
    
    // 继续执行正常逻辑

    前端性能优化到底该怎么做 // 熊的猫

    性能指标,如下:

    • 首字节达到时间(Time to First Byte,TTFB)
    • 首次绘制(First Paint,FP)
    • 首次内容绘制(First Contentful Paint,FCP)
    • 首屏时间 / 最大内容绘制(Largest Contentful Paint, LCP)
    • 累积布局偏移(Cumulative Layout Shift, CLS)
    • 首次输入延迟(First Input Delay, FID)

    关键资源越早到达客户端,证明 TTFB 时间越短,而这也能间接的减少 FP 和 FCP 的时间;对资源进行了压缩处理意味着能够尽可能提升 LCP 的时间;减少了页面的 回流/重绘 就能使得 CLS 的数值越小,视图越趋于稳定;FID 是一个用于跟踪浏览器对用户输入做出反应之前的延迟时间的指标,包括点击和敲击,保证资源的快速加载和页面尽早渲染,其对应的数值就越小,视图响应就越快。

    javaScript 进阶之路 --- 《手写 Promise(中篇)》 // FFF方

    至此距离我们完成自己的 MyPromise 类已经成功了一大半!我相信通过消化这一篇的内容,你会收获很多很多额外的知识。是不是有一种原来 Promise 不过如此的感觉~

    其实有很多很多东西都是用很基本的函数,通过很巧妙的设计去完成一些看起来很复杂的逻辑。在下一章我们会迎来最后的几个关键点,如:微任务的创建,then 函数的链式调用,希望你能坚持下去。

    Javascript 变量命名规范 // 一丁目

    驼峰命名

    首先,和其他语言一样,大部分变量建议采用驼峰命名法。

    var articleTitle = 'javascript变量命名规范' 

    而对于常量,使用大写字母和下划线来组合命名。

    const COUNTRY_NAME = 'China'

    问答推荐

    • js 数组汉字排序?
    • js 如何获取数组元素的前置属性(如下图)?
    • js 中拥有相同值的两个基本数据类型的变量,它们的内存地址相同吗?
    • 如何优化对象跟数组匹配获得新数组的算法?
    • js 获取一串数字中某个数字的索引?
    • 请教一下 js 中这种异步的初始化该怎么设计?
    • 我想要 trim 掉左边的# == 和右边的==,请问 js 如何做到呢?
    • js 需要等待长时间执行的代码,我需要怎么处理?
    • js 怎么删除 style 中某个类样式?

    # SegmentFault 技术周刊 #

    「技术周刊」是社区特别推出的技术内容系列,一周一主题。

    每周二更新,欢迎「关注」。大家也可以在评论处留言自己感兴趣的主题,推荐主题相关的优秀文章。

    如有问题可以添加小姐姐微信~

    image.png



沪ICP备19023445号-2号
友情链接