VS Code Resolving shell environment fails 提示

某次升级完 VS Code 之后,打开窗口便一直出现一个错误提示。如下所示。

1
2
Unable to resolve your shell environment in a reasonable time.
Please review your shell configuration.

点击错误提示下方的官方文档按钮,进入官方文档,查看如何解决。文档说是加载终端配置的时间太长了,才出现的错误;终端配置文件可能是 ~/.bashrc~/.zshrc

查看终端配置文件,发现我并没有 ~/.bashrc,猜想可能是该文件缺失导致的。

Read More

4-ts--TypeScript

TypeScript 是一种类型安全的 JavaScript 语言,以下使用 TS 进行代称,使用的 TS 的好处如下:

  • 引入静态类型声明,减少不必要的类型判断和文档注释;
  • 及早发现错误,静态类型检查 1 或编译时发现问题,不用等到运行;

    Read More

2-各种模块化标准

前端有各种模块化标注 AMD/CMD/CommonJS/ES6 module,各种模块化标准实现各有不同。

AMD

在声明依赖时,就加载。

CMD

在使用依赖时,才加载

CommonJS

针对服务端,运行时加载;值拷贝。

ES6 module

针对客户端,编译时加载;引用拷贝。

3-浏览器详解

浏览器对象

  • window 对象
    1.关注 window.onerror,用于前端错误收集和上报,ps 阿里云有免费的日志服务,可以收集前端错误,上报到阿里云服务器
    2.使用 setTimeout 替换 setInterval 用于定时器,setInterval 缺点是不能控制间隔时间,有可能浏览器重新获得焦点后会执行多次
    3.innerWidth 和 innerHeight 可以获取浏览器窗口的宽高,有些浏览器不支持,比如 IE,可以使用 document.body.clientWidth 和 document.body.clientHeight 获取

  • location 对象
    1.关注 location.href,用于获取当前页面的 url 和替换当前页面的 url,可回退
    2.关注 location.replace,用于替换当前页面的 url,不可回退

  • navigator 对象
    1.关注 navigator.userAgent,用于获取当前浏览器的 userAgent
    2.关注 navigator.language,用于获取当前浏览器的语言
    3.关注 navigator.onLine,用于获取当前网络是否连接

  • history 对象
    1.关注 history.pushState,用于替换当前页面的 url,可回退
    2.关注 history.replaceState,用于替换当前页面的 url,不可回退

Read More

1-了解 Promise

Promise 是 ES6 内置的对象,用一个对象实例表示某个操作最终是成功或者失败,并且将成功值或者原因暴露出来,它主要解决了异步编程过程中存在的两个问题:
1.回调地狱问题
2.信任问题

解决的问题

1.回调地狱问题

  • 传统异步编程
    传统异步编程中,如果需要多次将请求的返回结果当做下次请求的参数,便需要不断在回调函数中嵌套请求,形成回调地狱。回调地狱代码嵌套,可读性差。
1
2
3
4
5
6
7
ajax('/url1', {param: {}},  (res1) => {
ajax('/url2, {param: res1}, (res2) => {
ajax('/url3, {param: res2}, (res3) => {
// 继续回调
})
})
})

Read More

Hooks 组件的优点

Hooks 是 React 16.8 版本新出的功能,比 class 具有很多优点。

  • class 组件需要手动绑定 this 或者使用利用 class property 和箭头函数绑定
  • 抽象并复用状态逻辑
  • 替换逻辑复杂的高阶组件
  • useEffect 让相关的逻辑聚合