tonyjian

tonyjian 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

一切皆有可能

个人动态

tonyjian 回答了问题 · 4月15日

前端开发的时候有必要用eslint吗

只要是多人开发,不用的肯定烂

关注 8 回答 10

tonyjian 提出了问题 · 4月15日

解决Debug for Chrome插件运行时,浏览器插件都没了

vscode安装了Debug for Chrome,但是运行时好像浏览器运行的是隐私模式还是什么其他模式,chrome的插件没有了,每次都要重装,账号登录不了。但如果是手工打开浏览器,都是正常的。

image.pngimage.png

有没有哪位大神指导怎么设置

关注 1 回答 1

tonyjian 收藏了文章 · 3月31日

浅谈 JS 防抖和节流

防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。(信我,你看完肯定就懂了)

从滚动条监听的例子说起

先说一个常见的功能,很多网站会提供这么一个按钮:用于返回顶部。
返回顶部按钮

这个按钮只会在滚动到距离顶部一定位置之后才出现,那么我们现在抽象出这个功能需求-- 监听浏览器滚动事件,返回当前滚条与顶部的距离
这个需求很简单,直接写:

function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  console.log('滚动条位置:' + scrollTop);
}
window.onscroll  = showTop

但是!

图片描述

在运行的时候会发现存在一个问题:这个函数的默认执行频率,太!高!了!。 高到什么程度呢?以chrome为例,我们可以点击选中一个页面的滚动条,然后点击一次键盘的【向下方向键】,会发现函数执行了8-9次
图片描述

然而实际上我们并不需要如此高频的反馈,毕竟浏览器的性能是有限的,不应该浪费在这里,所以接着讨论如何优化这种场景。

防抖(debounce)

基于上述场景,首先提出第一种思路:在第一次触发事件时,不立即执行函数,而是给出一个期限值比如200ms,然后:

  • 如果在200ms内没有再次触发滚动事件,那么就执行函数
  • 如果在200ms内再次触发滚动事件,那么当前的计时取消,重新开始计时

效果:如果短时间内大量触发同一事件,只会执行一次函数。

实现:既然前面都提到了计时,那实现的关键就在于setTimeout这个函数,由于还需要一个变量来保存计时,考虑维护全局纯净,可以借助闭包来实现:

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒,防抖期限值
*/
function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) //进入该分支语句,说明当前正在一个计时过程中,并且又触发了相同事件。所以要取消当前的计时,重新开始计时
            timer = setTimeout(fn,delay) 
        }else{
            timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时,那么就开始一个计时
        }
    }
}

当然 上述代码是为了贴合思路,方便理解(这么贴心不给个赞咩?),写完会发现其实 time = setTimeout(fn,delay)是一定会执行的,所以可以稍微简化下:


/*****************************简化后的分割线 ******************************/
function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay) // 简化写法
    }
}
// 然后是旧代码
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  console.log('滚动条位置:' + scrollTop);
}
window.onscroll = debounce(showTop,1000) // 为了方便观察效果我们取个大点的间断值,实际使用根据需要来配置

此时会发现,必须在停止滚动1秒以后,才会打印出滚动条位置。

到这里,已经把防抖实现了,现在给出定义:

  • 对于短时间内连续触发的事件(上面的滚动事件),防抖的含义就是让某个时间期限(如上面的1000毫秒)内,事件处理函数只执行一次。

节流(throttle)

继续思考,使用上面的防抖方案来处理问题的结果是:

  • 如果在限定时间段内,不断触发滚动事件(比如某个用户闲着无聊,按住滚动不断的拖来拖去),只要不停止触发,理论上就永远不会输出当前距离顶部的距离。

但是如果产品同学的期望处理方案是:即使用户不断拖动滚动条,也能在某个时间间隔之后给出反馈呢?(此处暂且不论哪种方案更合适,既然产品爸爸说话了我们就先考虑怎么实现)
图片描述

其实很简单:我们可以设计一种类似控制阀门一样定期开放的函数,也就是让函数执行一次后,在某个时间段内暂时失效,过了这段时间后再重新激活(类似于技能冷却时间)。

效果:如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效。

实现 这里借助setTimeout来做一个简单的实现,加上一个状态位valid来表示当前函数是否处于工作状态:

function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间,执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}
/* 请注意,节流函数并不止上面这种实现方案,
   例如可以完全不借助setTimeout,可以把状态位换成时间戳,然后利用时间戳差值是否大于指定间隔时间来做判定。
   也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在,如果存在表示还在冷却,并且在执行fn之后消除定时器表示激活,原理都一样
    */

// 以下照旧
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  console.log('滚动条位置:' + scrollTop);
}
window.onscroll = throttle(showTop,1000) 

运行以上代码的结果是:

  • 如果一直拖着滚动条进行滚动,那么会以1s的时间间隔,持续输出当前位置和顶部的距离

其他应用场景举例

讲完了这两个技巧,下面介绍一下平时开发中常遇到的场景:

  1. 搜索框input事件,例如要支持输入实时搜索可以使用节流方案(间隔一段时间就必须查询相关内容),或者实现输入间隔大于某个值(如500ms),就当做用户输入完成,然后开始搜索,具体使用哪种方案要看业务需求。
  2. 页面resize事件,常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染(这种情形一般是使用防抖,因为只需要判断最后一次的变化情况)

思考总结

上述内容基于防抖和节流的核心思路设计了简单的实现算法,但是不代表实际的库(例如undercore js)的源码就直接是这样的,最起码的可以看出,在上述代码实现中,因为showTop本身的很简单,无需考虑作用域和参数传递,所以连apply都没有用到,实际上肯定还要考虑传递argument以及上下文环境(毕竟apply需要用到this对象)。这里的相关知识在本专栏《柯里化》和《this对象》的文章里也有提到。本文依然坚持突出核心代码,尽可能剥离无关功能点的思路行文因此不做赘述。


惯例:如果内容有错误的地方欢迎指出(觉得看着不理解不舒服想吐槽也完全没问题);如果有帮助,欢迎点赞和收藏,转载请征得同意后著明出处,如果有问题也欢迎私信交流,主页有邮箱地址

查看原文

tonyjian 收藏了文章 · 3月30日

常见的8个前端防御性编程方案

关于前端防御性编程

  • 我们大多数情况可能遇到过,后端的由于同时请求人数过多,或者数据量过大,又或者是因为异常导致服务异常,接口请求失败,然后前端出现白屏或者报错
  • 还有一种情况,是前端自身写的代码存在一些缺陷,整个系统不够健壮,从而会出现白屏,或者业务系统异常,用户误操作等
  • 那么,就出现了前端防御性编程

常见的问题和防范

1.最常见的问题:
uncaught TypeError: Cannot read property 'c' of undefined

出现这个问题最根本原因是:

当我们初始化一个对象obj为{}时候,obj.a这个时候是undefined.我们打印obj.a可以得到undefined,但是我们打印obj.a.c的时候,就会出现上面的错误。js对象中的未初始化属性值是undefined,从undefined读取属性就会导致这个错误(同理,null也一样)

如何避免?

js和ts目前都出现了一个可选链概念,例如:

const obj = {};
console.log(obj?.b?.c?.d)
上面的代码并不会报错,原因是?.遇到是空值的时候便会返回undefined.
2.前端接口层面的错误机制捕获

前端的接口调用,一般都比较频繁,我们这时候可以考虑使用单例模式,将所有的axios请求都用一个函数封装一层。统一可以在这个函数中catch捕获接口调用时候的未知错误,伪代码如下:

function ajax(url,data,method='get'){
  const promise = axios[method](url,data)
  return  promise.then(res=>{
  }).catch(error){
  //统一处理错误
}
}

那么只要发生接口调用的未知错误都会在这里被处理了

3.错误边界(Error Boundaries,前端出现未知错误时,展示预先设定的UI界面)

以React为例

部分 UI 的 JavaScript 错误不应该导致整个应用崩溃,为了解决这个问题,React 16 引入了一个新的概念 —— 错误边界。

错误边界是一种 React 组件,这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误,并且,它会渲染出备用 UI,而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。

使用示例:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}
注意
  • 错误边界无法捕获以下场景中产生的错误:

    • 事件处理(了解更多)
    • 异步代码(例如 setTimeout 或 requestAnimationFrame 回调函数)
    • 服务端渲染
    • 它自身抛出来的错误(并非它的子组件)
4.前端复杂异步场景导致的错误
  • 这个问题可能远不止这么简单,但是大道至简,遵循单向数据流的方式去改变数据,例如:

    //test.js
    export const obj = {
      a:1,
      b:2
    }
    
    //使用obj
    import {obj} from './test.js';
    obj.a=3;

当你频繁使用这个obj对象时,你无法根据代码去知道它的改变顺序(即在某个时刻它的值是什么),而且这里面可能存在不少异步的代码,当我们换一种方式,就能知道它的改变顺序了,也更方便我们debug

例如:

//test.js
export const obj = {
  a:1,
  b:2
}
export function setObj (key,value)  {
  console.log(key,value)
  obj[key] = value
}
这样,我们就做到了
5.前端专注“前端”
  • 对于一些敏感数据,例如登录态,鉴权相关的。前端应该是尽量做无感知的转发、携带(这样也不会出现安全问题)
6.页面做到可降级
  • 对于一些刚上新的业务,或者有存在风险的业务模块,或者会调取不受信任的接口,例如第三方的接口,这个时候就要做一层降级处理,例如接口调用失败后,剔除对应模块的展示,让用户无感知的使用
7.巧用loading和disabled
  • 用户操作后,要及时loading和disabled确保不让用户进行重复,防止业务侧出现bug
8.慎用innerHTML
  • 容易出现安全漏洞,例如接口返回了一段JavaScript脚本,那么就会立即执行。此时脚本如果是恶意的,那么就会出现不可预知的后果,特别是电商行业,尤其要注意

❤️ 看完三件事

  • 如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:
  • 点个「赞」,让更多的人也能看到这篇内容(喜欢不点在看,都是耍流氓 -_-)
  • 关注我,让我们成为长期关系
  • 关注公众号「前端巅峰」,持续为你推送精选好文,也可以加我为好友,随时聊骚。
查看原文

tonyjian 回答了问题 · 3月29日

解决360浏览器,切换急速/兼容模式的时候localstorage丢失,,有没有别的数据传递方式

为啥登录页不直接极速模式,如果说登录后的页面只兼容极速,那么在登录页进行判断提示就好了,如果兼容极速,就跳极速模式的登录,如果不兼容就提示不兼容

关注 8 回答 8

tonyjian 收藏了文章 · 3月24日

组件的可重用性,6个级别的见解!

作者:Michael Thiessen
译者:前端小智
来源:news
点赞再看,微信搜索大迁世界,B站关注前端小智这个没有大厂背景,但有着一股向上积极心态人。本文 GitHubhttps://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。

最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。

github 地址:https://github.com/qq44924588...

我们所有人都希望编写更少的代码,同时也要做更多的事情。为了实现这一点,我们构建了组件,以便可以多次重用它们。

有些组件只需要基本的可重用性,而另一些则需要更复杂的重构技术,我们才能充分复用它。

这里有6个不同级别的可重用性概念,大家先来体会体会,后续更新会一个一个的讲。

1.模板化

通过模板化,我们将一些重复性高的代码包装在其自己的组件中,而不是在周围到处复制和粘贴代码。

当我们重用该组件(而不是直接使用代码)时,它为我们带来了两个好处:

  1. 将来进行更改就会容易得多,因为我们只需要在一个地方更改
  2. 我们不必记住每个重复代码复被复制到了哪些地方

这是最基本的,也是最经常谈论的可重用性形式。

2. 可配置

对于某些组件,我们需要根据需求对它们的工作方式进行修改,如:

Button组件默认有一个主版本,也有一个带有图标版本。但我们没有为每个版本创建全新的组件,而是指定 props 做到不同类型之间切换。

添加这些props通常不会给组件增加很大的复杂度,同时,又能给我们在使用组件方面带来更多在的灵活性。

注意:这不同于使用prop来保存状态或数据,比如loading prop 或disabled prop。

3.适应性

可配置的最大问题是缺乏远见。 我们需要预见将来的需求,并通过放置对应的 prop 将它们构建到组件中。

但是,如果你的组件具有足够适应性,则无需更改组件即应对未来的需求。

为了让我们的组件具有足够的适应性,我们可以使用 插槽 来实现。

例如,我们可以使用默认的插槽来代替在传入Button组件的 text

<!-- Button.vue -->
<template>
  <button
    class="btn btn--default"
    @click="$emit('click')"
  >
    <slot />
  </button>
</template>

现在我们不局限于传入的类型是 string 还是 number

如果我们想在不修改 Button 组件的情况下添加loading ,我们可以这样做:

<template>
  <Button>
    <img
      v-if="loading"
      data-original="spinner.svg"
    />
    Click Me
  </Button>
</template>

4.反转性

除了通过插槽传递完整的标记块给我们的子组件,我们还可以传递一组有关如何渲染的指令。

这就像我们根据食谱来做菜,而不是叫外卖。 当我们遵循食谱时,需要做更多的工作,但是我们完全可以按自己的节奏来制制作, 我们可以随时进行调整,也可以完全放弃不按食谱的流程来。

我们使用作用域插槽来为我们的组件增加更大的灵活性。

5. 扩展

通过适应性反转性,我们拥有必要的一些技术基础,这些技能可以最大限度地提高组件的可重用性。

下一步是将这些技术应用于整个组件,以便我们更轻松地扩展其行为。

我们使用命名插槽在组件中添加一个或多个扩展点。 仅适应性反转性本身给我们提供了扩展行为的一种选择,而拥有多个扩展点则为我们提供了许多不同的选择。

这里,我们有一个Modal组件,其中包含headerdefaultfooter

<template>
  <div class="modal">
    <slot name="header">
      <h2>{{ title }}</h2>
    </slot>

    <!-- Default slot for main content -->
    <slot />

    <slot name="footer">
      <Button @click="closeModal">
        Close
      </Button>
    </slot>
  </div>
</template>

这是一个相当简单的扩展示例,其中我们已经有几个扩展该组件的选项:

  1. 只需覆盖default slot即可添加我们的内容
  2. 可以通过插槽名来覆盖 header 的内容
  3. 可以通过插槽名来覆盖 footer 的内容,其内容还是以不同风格按钮为主
  4. headerfooter的插槽更多是用于自定义

你不必扩展此组件的行为,但也可以扩展其一部分。 无论哪种方式,我们都能获得很大的灵活性和大量的代码重用性。

6. 嵌套

扩展之上更高级重用性就是嵌套, 我们可以多个基本组件为基础, 一层嵌套一层,一开始可能听起来很疯狂,但它非常有用,特别是在大中型应用程序中。

我们从一个通过基础组件开始,该组件的功能相当普遍。 下一个组件就更加具体,以几种方式扩展了基础组件。 然后不断以前面基础组件为底往上扩展,直到我们拥有完成实际工作的最终组件。

这类似我们从非常普通的动物(Animal )到更特定的哺乳动物(Mammal ),然后是狗(Dog ),最后止于贵宾犬(Poodle)的方式。 如果我们需要的只是贵宾犬(Poodle)组件,看上去,我们整这么基础组件就是浪费时间。但是在大型应用程序中就不一样了,我们需要在相同的基本概念上进行多次更改,来满足不同的个性化需求,这时这种以基础组件嵌套的思想就很重要。

我们可以扩展犬类(Dog)组件来获得柯基犬(Corgi )比格犬(Beagle)组件。或者扩展哺乳动物(Mammal )组件以获得猫(Cat )组件,这样就可以添加老虎(Tiger)狮子(Lion)组件。

总结

以上是6个可重用性级别一些概述,当然很有可能会错过一些内容,但基本是可以为我们封装组件提供了一个大致思路,也是很不错的方式。

人才们的 【三连】 就是小智不断分享的最大动力,如果本篇博客有任何错误和建议,欢迎人才们留言,最后,谢谢大家的观看。


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://news.knowledia.com/US...

交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

查看原文

tonyjian 赞了文章 · 3月24日

组件的可重用性,6个级别的见解!

作者:Michael Thiessen
译者:前端小智
来源:news
点赞再看,微信搜索大迁世界,B站关注前端小智这个没有大厂背景,但有着一股向上积极心态人。本文 GitHubhttps://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。

最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。

github 地址:https://github.com/qq44924588...

我们所有人都希望编写更少的代码,同时也要做更多的事情。为了实现这一点,我们构建了组件,以便可以多次重用它们。

有些组件只需要基本的可重用性,而另一些则需要更复杂的重构技术,我们才能充分复用它。

这里有6个不同级别的可重用性概念,大家先来体会体会,后续更新会一个一个的讲。

1.模板化

通过模板化,我们将一些重复性高的代码包装在其自己的组件中,而不是在周围到处复制和粘贴代码。

当我们重用该组件(而不是直接使用代码)时,它为我们带来了两个好处:

  1. 将来进行更改就会容易得多,因为我们只需要在一个地方更改
  2. 我们不必记住每个重复代码复被复制到了哪些地方

这是最基本的,也是最经常谈论的可重用性形式。

2. 可配置

对于某些组件,我们需要根据需求对它们的工作方式进行修改,如:

Button组件默认有一个主版本,也有一个带有图标版本。但我们没有为每个版本创建全新的组件,而是指定 props 做到不同类型之间切换。

添加这些props通常不会给组件增加很大的复杂度,同时,又能给我们在使用组件方面带来更多在的灵活性。

注意:这不同于使用prop来保存状态或数据,比如loading prop 或disabled prop。

3.适应性

可配置的最大问题是缺乏远见。 我们需要预见将来的需求,并通过放置对应的 prop 将它们构建到组件中。

但是,如果你的组件具有足够适应性,则无需更改组件即应对未来的需求。

为了让我们的组件具有足够的适应性,我们可以使用 插槽 来实现。

例如,我们可以使用默认的插槽来代替在传入Button组件的 text

<!-- Button.vue -->
<template>
  <button
    class="btn btn--default"
    @click="$emit('click')"
  >
    <slot />
  </button>
</template>

现在我们不局限于传入的类型是 string 还是 number

如果我们想在不修改 Button 组件的情况下添加loading ,我们可以这样做:

<template>
  <Button>
    <img
      v-if="loading"
      data-original="spinner.svg"
    />
    Click Me
  </Button>
</template>

4.反转性

除了通过插槽传递完整的标记块给我们的子组件,我们还可以传递一组有关如何渲染的指令。

这就像我们根据食谱来做菜,而不是叫外卖。 当我们遵循食谱时,需要做更多的工作,但是我们完全可以按自己的节奏来制制作, 我们可以随时进行调整,也可以完全放弃不按食谱的流程来。

我们使用作用域插槽来为我们的组件增加更大的灵活性。

5. 扩展

通过适应性反转性,我们拥有必要的一些技术基础,这些技能可以最大限度地提高组件的可重用性。

下一步是将这些技术应用于整个组件,以便我们更轻松地扩展其行为。

我们使用命名插槽在组件中添加一个或多个扩展点。 仅适应性反转性本身给我们提供了扩展行为的一种选择,而拥有多个扩展点则为我们提供了许多不同的选择。

这里,我们有一个Modal组件,其中包含headerdefaultfooter

<template>
  <div class="modal">
    <slot name="header">
      <h2>{{ title }}</h2>
    </slot>

    <!-- Default slot for main content -->
    <slot />

    <slot name="footer">
      <Button @click="closeModal">
        Close
      </Button>
    </slot>
  </div>
</template>

这是一个相当简单的扩展示例,其中我们已经有几个扩展该组件的选项:

  1. 只需覆盖default slot即可添加我们的内容
  2. 可以通过插槽名来覆盖 header 的内容
  3. 可以通过插槽名来覆盖 footer 的内容,其内容还是以不同风格按钮为主
  4. headerfooter的插槽更多是用于自定义

你不必扩展此组件的行为,但也可以扩展其一部分。 无论哪种方式,我们都能获得很大的灵活性和大量的代码重用性。

6. 嵌套

扩展之上更高级重用性就是嵌套, 我们可以多个基本组件为基础, 一层嵌套一层,一开始可能听起来很疯狂,但它非常有用,特别是在大中型应用程序中。

我们从一个通过基础组件开始,该组件的功能相当普遍。 下一个组件就更加具体,以几种方式扩展了基础组件。 然后不断以前面基础组件为底往上扩展,直到我们拥有完成实际工作的最终组件。

这类似我们从非常普通的动物(Animal )到更特定的哺乳动物(Mammal ),然后是狗(Dog ),最后止于贵宾犬(Poodle)的方式。 如果我们需要的只是贵宾犬(Poodle)组件,看上去,我们整这么基础组件就是浪费时间。但是在大型应用程序中就不一样了,我们需要在相同的基本概念上进行多次更改,来满足不同的个性化需求,这时这种以基础组件嵌套的思想就很重要。

我们可以扩展犬类(Dog)组件来获得柯基犬(Corgi )比格犬(Beagle)组件。或者扩展哺乳动物(Mammal )组件以获得猫(Cat )组件,这样就可以添加老虎(Tiger)狮子(Lion)组件。

总结

以上是6个可重用性级别一些概述,当然很有可能会错过一些内容,但基本是可以为我们封装组件提供了一个大致思路,也是很不错的方式。

人才们的 【三连】 就是小智不断分享的最大动力,如果本篇博客有任何错误和建议,欢迎人才们留言,最后,谢谢大家的观看。


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://news.knowledia.com/US...

交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

查看原文

赞 6 收藏 4 评论 1

tonyjian 提出了问题 · 3月22日

解决前端如何实现视频在线剪辑的效果?

简单需求就是,一个视频,通过进度条之类的控件,选择片段进行删除,然后不通过服务端处理,直接就将删减片段的前后部分连接在一起播放

类似bilibili云剪辑的效果,我看好像用到了wasm,不过不知道怎么写的,用了ffmpeg么?就算浏览器端可以直接裁剪拼接,速度有那么快么?

image.png

关注 1 回答 1

tonyjian 收藏了文章 · 3月15日

前端爱好者周刊第3期:各大厂 webpack5 实践

前端爱好者周刊 (Github: shfshanyue/weekly),每周记录关于前端的开源工具、优秀文章、重大库版本发布记录等等,周刊中优秀文章会在公众号全栈成长之路逐一推送。每周一发布,订阅平台如下,欢迎订阅。

封面

祁连山国家公园青海片区拍摄到的荒漠猫

祁连山国家公园青海片区拍摄到的荒漠猫

一句话

  • Flutter 将成为未来构建 Ubuntu App 的默认选择。原文:Ubuntu Makes Flutter ‘Default Choice’ for Future Desktop Apps
  • flexbox 布局时可使用 CSS 属性 gap 控制 item 间隙
  • npm outdated 可查看当前项目中的过期 Package
  • 2021春运全国铁路、公路、水路、民航共发送旅客预计达到8.7亿人次,比2019年同期下降70.9%,比2020年同期下降40.8%。
  • 北京市文旅局推出12条赏花游主题线路,有迎春、玉兰、桃花、梅花、杏花等,详见 北京的春天去哪里看花?
  • 微信 Mac 桌面版开始支持朋友圈

开发利器

一、 bestofjs: 发现 Javascript 最好的框架与库

这里有 JS 生态最流行的库,实时刷新并推荐,并且可每周订阅

二、 Lorem Picsum: 随机一张指定尺寸图片 API

https://picsum.photos/200/200 将随机从 Unsplash 取一张指定尺寸的图片

三、 risingstars: 2020年 Javascript 明星项目

2021 年,JS 各个生态圈中最流行的框架及周边产物,如 React 生态圈、Vue 生态圈、GraphQL 生态圈、构建工具生态圈等

四、 User Agents: 关于 UA 的一切

User Agents

拥有大量 UA 的数据库及相关功能

  • 可获取任意平台的 UA (Mac/Windows/Android)
  • 可获取任意 Spider/Crawer 的 UA (Baidu/Google/Bing)
  • 可随机生成 UA
  • 可解析 UA

五、 Browser Logos: 浏览器高清分辨率 Logo

browser-logos

这是 Github 的一个仓库,你可以直接引用地址,找到任意浏览器高清分辨率的Logo。

如果引用 Github 地址比较慢的话,你可以试试 jsdelivr 的 CDN

文章推荐

一、 作者尤雨溪视频直播下一代前端构建工具 Vite讲解 (中英双语字幕,B站可看)

Vite 一个部分是基于 ESM 的利用 esbuild 的开发服务器,另一个部分是基于 Rollup 的配置化的打包器。视频中尤大将使用一个 Demo 进行演示,并讲解关于它的哲学思考。

视频已被热心小哥制作成双语字幕视频,并上传到了 B 站。

二、 字节商业变现团队 webpack5 业务实践

  1. FilesystemCache: 更快的二次构建
  2. Prepack: 更早的编译期计算,更小的体积
  3. Asset Modules: 资源加载内置
  4. Named ChunkID: 更强的永久缓存能力
  5. 深度 TreeShaking 能力
  6. 内置 Worker/WASM 构建能力
  7. Node Polyfill 去除,如 crypto、querystring 等

总结下来更快的打包速度、更小的打包体积

三、 腾讯企鹅辅导 webpack5 升级实践

  1. Module Federation: 多应用共享依赖打包,扔到 CDN 共享

与上边字节差不多,总结下来更快的打包速度、更小的打包体积。但是好在给出了数据

第一次打包

webpack版本第一次build时间第二次build时间第三次build时间
v419.6s6.8s7.4s
v514.8s1.6s1.5s

修改源码后,再次打包

webpack版本第一次build时间第二次build时间第三次build时间
v410.5s7.3s6.8s
v54.0s1.5s1.6s

打包大小对比

webpack版本build产生的文件的大小
v42.16M
v52.05M

四、 All in one:项目级 monorepo 策略最佳实践

目前 monorepo 已成为了 npm7、yarn 的标准功能,未来会有更多的 project/package 通过 monorepo 的方式维护,许多公共库如 babel、react 也通过 monorepo 维护。

通过 monorepo 可以更好地管理多 Pakcage 依赖,复用配置及公共的 devDep 等,现在快来学习吧。

五、 一文详解 CSS in JS

关于 CSS in JS 的历史

开源与库

一、 bytemd: 字节出品 Markdown 编辑器

bytemd 外观

字节出品的 Markdown 编辑器,由 Svelte 构建,同时支持 React/Vue 组件等,支持公式(math)、脚注(footnote)、流程图(mermaid)等复杂富文本内容。另外,掘金社区的编辑器也是基于此构建

bytemd 基于最流行的 Markdown 解析器 remark与 最受欢迎的便捷器 codemirror,基于流行库,拥有更强的扩展能力,你很容易扩展 Plugin,如微信脚注、多样主题等

二、 nodegui: 使用前端开发跨端桌面应用

使用前端技术基于 QT5 的桌面跨端解决方案,可以使用 React/Vue/Svelte 框架来开发跨端应用

三、 docusaurus: facebook 出品文档化工具

facebook 出品的文档化工具,在 Github 已经有两万颗星星,基于 React 可轻松扩展页面,定制能力较强。

四、 tinyhttp: 一个用以替代express的轻量web框架

tinyhttp 创建于九个月前,还是一代很年轻的 http 框架,因为没有任何历史包袱,同时支持 TS,并打包成原生 ESM。它有诸多优点

  1. 比 Express 快两倍
  2. 支持 Express 的所有中间件
  3. 没有历史包袱,支持 ESM 与 TS
  4. 预定常见中间件,如 logger、router 等

tinyhttp 能不能替代 express,让我们拭目以待吧 (应该不能)

五、 isbot: 判断请求是否一个机器人

能够有效识别蜘蛛、爬虫等,但不能识别伪装 UA 恶意爬取数据的机器人

版本发布

一、 esbuild v0.9.0

支持 package.json 中 exports 字段的支持

{
  "name": "your-pkg",
  "exports": {
    "import": "./imported.mjs",
    "require": "./required.cjs"
  }
}

关于山月

我是山月,下篇文章再会

社交:

Github知乎掘金博客

项目:

极客时间我的面试诗词集
开发者工具箱npm 在线执行前端周刊
查看原文

tonyjian 赞了文章 · 3月15日

前端爱好者周刊第3期:各大厂 webpack5 实践

前端爱好者周刊 (Github: shfshanyue/weekly),每周记录关于前端的开源工具、优秀文章、重大库版本发布记录等等,周刊中优秀文章会在公众号全栈成长之路逐一推送。每周一发布,订阅平台如下,欢迎订阅。

封面

祁连山国家公园青海片区拍摄到的荒漠猫

祁连山国家公园青海片区拍摄到的荒漠猫

一句话

  • Flutter 将成为未来构建 Ubuntu App 的默认选择。原文:Ubuntu Makes Flutter ‘Default Choice’ for Future Desktop Apps
  • flexbox 布局时可使用 CSS 属性 gap 控制 item 间隙
  • npm outdated 可查看当前项目中的过期 Package
  • 2021春运全国铁路、公路、水路、民航共发送旅客预计达到8.7亿人次,比2019年同期下降70.9%,比2020年同期下降40.8%。
  • 北京市文旅局推出12条赏花游主题线路,有迎春、玉兰、桃花、梅花、杏花等,详见 北京的春天去哪里看花?
  • 微信 Mac 桌面版开始支持朋友圈

开发利器

一、 bestofjs: 发现 Javascript 最好的框架与库

这里有 JS 生态最流行的库,实时刷新并推荐,并且可每周订阅

二、 Lorem Picsum: 随机一张指定尺寸图片 API

https://picsum.photos/200/200 将随机从 Unsplash 取一张指定尺寸的图片

三、 risingstars: 2020年 Javascript 明星项目

2021 年,JS 各个生态圈中最流行的框架及周边产物,如 React 生态圈、Vue 生态圈、GraphQL 生态圈、构建工具生态圈等

四、 User Agents: 关于 UA 的一切

User Agents

拥有大量 UA 的数据库及相关功能

  • 可获取任意平台的 UA (Mac/Windows/Android)
  • 可获取任意 Spider/Crawer 的 UA (Baidu/Google/Bing)
  • 可随机生成 UA
  • 可解析 UA

五、 Browser Logos: 浏览器高清分辨率 Logo

browser-logos

这是 Github 的一个仓库,你可以直接引用地址,找到任意浏览器高清分辨率的Logo。

如果引用 Github 地址比较慢的话,你可以试试 jsdelivr 的 CDN

文章推荐

一、 作者尤雨溪视频直播下一代前端构建工具 Vite讲解 (中英双语字幕,B站可看)

Vite 一个部分是基于 ESM 的利用 esbuild 的开发服务器,另一个部分是基于 Rollup 的配置化的打包器。视频中尤大将使用一个 Demo 进行演示,并讲解关于它的哲学思考。

视频已被热心小哥制作成双语字幕视频,并上传到了 B 站。

二、 字节商业变现团队 webpack5 业务实践

  1. FilesystemCache: 更快的二次构建
  2. Prepack: 更早的编译期计算,更小的体积
  3. Asset Modules: 资源加载内置
  4. Named ChunkID: 更强的永久缓存能力
  5. 深度 TreeShaking 能力
  6. 内置 Worker/WASM 构建能力
  7. Node Polyfill 去除,如 crypto、querystring 等

总结下来更快的打包速度、更小的打包体积

三、 腾讯企鹅辅导 webpack5 升级实践

  1. Module Federation: 多应用共享依赖打包,扔到 CDN 共享

与上边字节差不多,总结下来更快的打包速度、更小的打包体积。但是好在给出了数据

第一次打包

webpack版本第一次build时间第二次build时间第三次build时间
v419.6s6.8s7.4s
v514.8s1.6s1.5s

修改源码后,再次打包

webpack版本第一次build时间第二次build时间第三次build时间
v410.5s7.3s6.8s
v54.0s1.5s1.6s

打包大小对比

webpack版本build产生的文件的大小
v42.16M
v52.05M

四、 All in one:项目级 monorepo 策略最佳实践

目前 monorepo 已成为了 npm7、yarn 的标准功能,未来会有更多的 project/package 通过 monorepo 的方式维护,许多公共库如 babel、react 也通过 monorepo 维护。

通过 monorepo 可以更好地管理多 Pakcage 依赖,复用配置及公共的 devDep 等,现在快来学习吧。

五、 一文详解 CSS in JS

关于 CSS in JS 的历史

开源与库

一、 bytemd: 字节出品 Markdown 编辑器

bytemd 外观

字节出品的 Markdown 编辑器,由 Svelte 构建,同时支持 React/Vue 组件等,支持公式(math)、脚注(footnote)、流程图(mermaid)等复杂富文本内容。另外,掘金社区的编辑器也是基于此构建

bytemd 基于最流行的 Markdown 解析器 remark与 最受欢迎的便捷器 codemirror,基于流行库,拥有更强的扩展能力,你很容易扩展 Plugin,如微信脚注、多样主题等

二、 nodegui: 使用前端开发跨端桌面应用

使用前端技术基于 QT5 的桌面跨端解决方案,可以使用 React/Vue/Svelte 框架来开发跨端应用

三、 docusaurus: facebook 出品文档化工具

facebook 出品的文档化工具,在 Github 已经有两万颗星星,基于 React 可轻松扩展页面,定制能力较强。

四、 tinyhttp: 一个用以替代express的轻量web框架

tinyhttp 创建于九个月前,还是一代很年轻的 http 框架,因为没有任何历史包袱,同时支持 TS,并打包成原生 ESM。它有诸多优点

  1. 比 Express 快两倍
  2. 支持 Express 的所有中间件
  3. 没有历史包袱,支持 ESM 与 TS
  4. 预定常见中间件,如 logger、router 等

tinyhttp 能不能替代 express,让我们拭目以待吧 (应该不能)

五、 isbot: 判断请求是否一个机器人

能够有效识别蜘蛛、爬虫等,但不能识别伪装 UA 恶意爬取数据的机器人

版本发布

一、 esbuild v0.9.0

支持 package.json 中 exports 字段的支持

{
  "name": "your-pkg",
  "exports": {
    "import": "./imported.mjs",
    "require": "./required.cjs"
  }
}

关于山月

我是山月,下篇文章再会

社交:

Github知乎掘金博客

项目:

极客时间我的面试诗词集
开发者工具箱npm 在线执行前端周刊
查看原文

赞 6 收藏 4 评论 0

认证与成就

  • 获得 9 次点赞
  • 获得 6 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 6 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-07-07
个人主页被 1.3k 人浏览