IMG_9529.jpg
不要太在乎别人的目光,因为没人会注意你。

【实践经验】

1、前端最佳实践之可维护性

https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651236437&idx=1&sn=bb07aa8d673a394e121e78d7a40f361d

可维护的代码有几个特点。通常,说代码可维护就意味着它具备如下特点。

  • 容易理解:无需求助原始开发者,任何人一看代码就知道是干什么的,怎么实现的。
  • 符合常识:代码中的一切都显得自然而然,无论操作有多么复杂。
  • 容易适配:即使数据发生变化也不用完全重写。
  • 容易扩展:代码架构经过认真设计,支持未来扩展核心功能。
  • 容易调试:出问题时,代码可以给出明确的信息,通过它能直接定位问题。

能够写出可维护的JavaScript代码是一项重要的专业技能。这个技能是一个周末就拼凑一个网站的业余爱好者和对自己所做的一切都深思熟虑的专业开发者的重要区别。

2、转转Hybrid体系建设

https://mp.weixin.qq.com/s/jdCCKoOxeeJhdHxsU6RATw

转转整个 Hybrid 容器架构设计分为四层

  • 原生 Web 页面 这块就是大家常见的 Web 开发环境,可以通过 Vue、React 等实现。
  • Web 增强 包括像离线包和 Web 页面容器等。
  • 中间件层 中间件层使 Web 页面容器和转转底层框架有机结合起来,同时还提供各种生命周期机制、事件机制、扩展插件等内容。中间件层通过 JSBridge 将客户端以及中间件层提供的各种能力和 Web 前端代码进行联通。
  • 转转基础架构 主要包含 native 相关的能力架构

image.png
image.png

3、使用NodeJS实现JWT原理

https://mp.weixin.qq.com/s/RbDGbFaSk5BD0vTDaLiOWQ

JWT是json web token的简称,本文介绍它的原理,最后后端用nodejs自己实现如何为客户端生成令牌token和校验token

4、在 React 中实现 keep alive

https://zhuanlan.zhihu.com/p/214166951

从最简单的 DOM 隐藏,到用 Portals 实现 keep alive,还是有些新意的。

5、携程桌面应用的前端内存优化与监控

https://zhuanlan.zhihu.com/p/214051786

桌面应用的前端场景不同于传统前端,具有使用者停留时间长,功能复杂且高度聚集在单一页面等特征,因此带来了不同的技术挑战,其中内存问题是需要特别注意的。

【基础夯实】

1、细说 SOLID 原则

https://mp.weixin.qq.com/s/PwO4ymEKabk74a7J8lAhdg

在程序设计领域, SOLID 是由 Robert C. Martin(敏捷宣言作者之一,曾任敏捷联盟主席)在 21 世纪早期提出的便于记忆的首字母缩写,指代面向对象编程和面向对象设计的五个基本原则:单一功能开闭原则里氏替换接口隔离以及依赖反转。在这一篇中我们只关注这些原则各自的定位和它们之间的关系。见下图:
image.png

2、高级程序4:异步函数

https://mp.weixin.qq.com/s/2Sa9eLpNAyn7B0ID_z1rWg

长期以来,掌握单线程 JavaScript 运行时的异步行为一直都是个艰巨的任务。随着 ES6 新增了期约和 ES8 新增了异步函数,ECMAScript 的异步编程特性有了长足的进步。通过期约和 async/await,不仅 可以实现之前难以实现或不可能实现的任务,而且也能写出更清晰、简洁,并且容易理解、调试的代码。
期约的主要功能是为异步代码提供了清晰的抽象。可以用期约表示异步执行的代码块,也可以用期 约表示异步计算的值。在需要串行异步代码时,期约的价值最为突出。作为可塑性极强的一种结构,期约可以被序列化、连锁使用、复合、扩展和重组。
异步函数是将期约应用于 JavaScript 函数的结果。异步函数可以暂停执行,而不阻塞主线程。无论 是编写基于期约的代码,还是组织串行或平行执行的异步代码,使用异步函数都非常得心应手。异步函数可以说是现代 JavaScript 工具箱中最重要的工具之一。

3、一文掌握开发利器:正则表达式

https://mp.weixin.qq.com/s/wkCHL_QzAJwWEg9JZaZnCQ

正则表达式具有伟大技术发明的一切特点,它简单、优美、功能强大、妙用无穷。对于很多实际工作来讲,正则表达式简直是灵丹妙药,能够成百倍地提高开发效率和程序质量。

4、10 个你可能还不知道 VS Code 使用技巧

https://mp.weixin.qq.com/s/ulY4c90Jd6uIOa322pwBhw

5、vue-cli4 全面配置(持续更新)

https://zhuanlan.zhihu.com/p/109952157

这是一篇细致全面的 vue-cli4 配置,涵盖了使用 vue-cli 开发过程中大部分配置需求。

  • 配置多环境变量
  • 配置基础 vue.config.js
  • 配置 proxy 跨域
  • 修复 HMR(热更新)失效
  • 添加别名 alias
  • 压缩图片
  • 自动生成雪碧图
  • SVG 转 font 字体
  • ….


6、为什么采用Proxy重构响应系统 | Vue3源码系列

https://mp.weixin.qq.com/s/AKEKQ32WWfiIt5Bdq3N4bg

本篇文章先是介绍了Proxy的基本语法,然后阐述了Proxy的应用场景,最后回归到核心问题为什么要用Proxy重构,以下是文中的几点总结:

  • Proxy 作为新标准将受到浏览器厂商重点持续的性能优化
  • Proxy 能观察的类型比 defineProperty 更丰富
  • Object.definedProperty 是劫持对象的属性,新增元素需要再次 definedProperty。而 Proxy 劫持的是整个对象,不需要做特殊处理

7、一份不可多得的 TS 学习指南

https://juejin.im/post/6872111128135073806

本文作者将从 16 个方面入手,带你一步步学习 TypeScript,感兴趣的小伙伴不要错过哦~
image.png

8、15 张精美动图全面讲解 CORS

https://mp.weixin.qq.com/s/MhIQNBIU5bIefi_tKZA4cw

本文翻译自 Lydia Hallie小姐姐写的 CS Visualized: CORS,她用了大量的动图去解释 CORS 这个概念,作者在原文的理解上翻译了本文并修改了一些错误,希望能帮到大家~

9、一行 CSS 为网页添加暗黑模式支持

https://mp.weixin.qq.com/s/1Rr-t-M6E5kJr7_2h1GPCA

10、关于 JavaScript 错误处理的最完整指南

https://juejin.im/post/6872867757407338509

【动态与研究关注】

1、Vue.js 3.0 “One Piece” 正式版发布

https://mp.weixin.qq.com/s/ihNeKjm-MktoZxXC5AxPAQ

image.png
https://github.com/vuejs/vue-next/releases
本次主版本更新包含性能的改进,更小的 bundle 体积,对 TypeScript 更好的支持,用于处理大规模用例的全新 API,以及为框架未来的长期迭代奠定了夯实的基础。

2、现代 Web 开发的现状与未来(JSDC 2019 演讲全文)

https://zhuanlan.zhihu.com/p/88616149

JS 能在最近十多年里爆炸式发展到今天的程度,主要原因之一就是它建立在 Open Web 技术之上,这种技术是全行业在平台技术上最大最主要的交集和共识,JS 作为 Web 的原生语言,能力是跟 Web 本身一起不断发展的,而在 JS 生态的影响下,Web 本身和 Web 开发也都已经跟过去非常不同
我想通过几个主题来说明,如果把 Modern Web —— 也就是『现代 Web 开发』,而非『传统 Web 开发』——看作一种独立的技术范式和专业领域,它的现状是怎样的,有哪些重要趋势,未来会怎样,希望对大家有帮助
image.png

3、Flash 终将谢幕:微软将于年底停止对 Flash 的支持

https://mp.weixin.qq.com/s/e_Ul3MeOJgx4F-d3OdhNMw

近日,微软宣布将于今年 12 月终止对 Adobe Flash Player 的支持,届时,微软旗下所有浏览器都将无法使用 Flash,Adobe 也不会在今年 12 月后发布安全更新。早在 2017 年,Adobe、Apple、Facebook、Google 和 Mozilla 就已经宣布将于 2020 年 12 月停止对 Flash 的支持。

4、逐行分析鸿蒙系统的 JavaScript 框架

https://juejin.im/post/6872639403102208014

文中的所有代码都基于鸿蒙的当前最新版(版本为 677ed06,提交日期为 2020-09-10)。
鸿蒙系统使用 JavaScript 开发 GUI 是一种类似于微信小程序、轻应用的模式。而这个 MVVM 模式中,V 其实是由 C++ 来承担的。JavaScript 代码只是其中的 ViewModel 层。

5、Vue Router 4 值得期待的新特性

https://mp.weixin.qq.com/s/ZGnb9C_a4DP2yuXTHdwTmw

  • Vue Router 4引入了 createRouter API,可以创建一个可与Vue 3一起安装的路由器实例
  • 在之前的Vue Router版本中,你可以设置 mode 选项设置导航的模式。在Vue Router 4中,这些模式已被抽象到模块中,可以将其导入并分配给新的 history 选项
  • 当路由使用新的 .addRoute 方法运行时,Vue Router 4将允许你添加动态路由。
  • 导航守卫可以返回值而不是next


6、⏰ Moment.js 宣布停止开发,现在该用什么?

https://juejin.im/post/6873268471329898509

现在,Moment.js 停止开发了,那我们接下来该用什么呢?
官方给了 3 种替代方案:
1. 不使用库
对于一些简单的时间处理需求,其实 JavaScript 自带的 DateIntl 对象完全可以满足。强大的 Intl 对象可以展示不同时区不同语言的时间日期格式,在多数现代浏览器上已经有很好的支持。
2. Temporal
也许今后的某一天,我们再也不需要使用任何库,被看作是未来的全新内置的时间日期方案 Temporal 很值得期待。这是一个 JS 语言内置的重新设计的时间和日期 API,现在可以通过实验性的 polyfill 来尝试 Temporal,但离生产上大规模可用还有很长的路要走。
3. 其他替代库
官方推荐了 Luxon,Day.js,date-fns 等更先进设计更优秀的时间日期库。相比之下可能 Day.js 是最值得尝试的一个。

7、Electron 10正式发布:终止对 7.xy 的支持

https://mp.weixin.qq.com/s/Kme3dIvu-8ftz8fVOyV7MA

Electron 团队宣布 Electron 10.0.0 正式发布!该版本包含很多升级、修复和新功能。你可以通过 npm install electro@latest 安装,或从发布网站下载:https://electronjs.org/releases/stable

8、React 17 RC 版发布:无新特性,却有新期待!

https://www.yuque.com/itchina110/goodfe/cag9em

这篇文章介绍此版本的意义,它值得期待的变更以及试用指南~

9、智能UI:面向未来的UI开发技术

https://mp.weixin.qq.com/s/1RNEQb8N68Muu6YmFa-QrQ

随着机器学习和人工智能渗入到各行各业,随着你画我猜、智能推荐、以图搜图、尬舞……渗入生活的方方面面,前端作为编程领域的一支,也必将迎来更多变化和挑战。 Alibaba开源了http://github.com/alibaba/pipcook 带给前端机器学习的能力,提供了 http://imgcook.com 开放平台带给前端设计稿生成代码的能力。
image.png

【实用工具】

1、网站优化,这些神级工具你一定用得上

https://mp.weixin.qq.com/s/ZM4ZbqpFptgmyRd6FN99iw

文中介绍了三种网站优化的“神级”工具,下图为LightHouse的生成报告

image.png

2、25 个实用前端网站工具推荐

https://mp.weixin.qq.com/s/czUiozC-5GyOsk_AgTNZtQ

该篇整理了 25 个前端相关的学习网站和一些靠谱的小工具,包括一些小游戏、教程、社区网站和博客,以及一些资源网站,希望可以帮助到大家~

3、小程序瘦身工具

https://github.com/wechat-miniprogram/miniprogram-slim

通过剔除无用文件、压缩图片、复用代码等方式减少小程序代码包体积。
功能:

  • 依赖分析,查找无用文件
  • 代码相似度比较
  • 生成雪碧图代码
  • 图片压缩


4、前端一键自动部署工具🛠

https://juejin.im/post/6872914108979609614

【程序之外】

1、浅谈如何搭建知识体系

https://mp.weixin.qq.com/s/E0u7LmT__x4R9mWNxfDDjA

查理芒格曾经说过:“在手拿铁锤的人看来,世界就像一颗钉子。”因为你的手上只有铁锤,所以你只能用处理钉子的方式去处理一切,用铁锤去旋转螺丝钉,用铁锤去炒菜。 很多时候我们并不是不会解决问题,而是缺少解决问题的方法,构建知识体系也是如此。
image.png

2、复杂信息的处理方式

https://mp.weixin.qq.com/s/Bg6qvDdf2B-VoVU7dQMl2A

本次分享意在描述设计过程中,如何将信息从复杂转化为简单易懂,便于理解传播。以下将分享三种思路:前置拆解复杂、明确信息主次、降低用户理解门槛,希望可以帮助大家更好的对复杂信息进行转化。

3、程序员:写作能收获什么?

https://mp.weixin.qq.com/s/M4OfVTUNDJoVg_x8DdgsrA

很多程序员已经通过自己的个人博客或者公众号来进行技术沉淀,记录自己的成长。越来越多的程序员们也开始意识到了写作的重要性。程序员为什么需要写作?写作能带来什么收获?又有哪些额外的惊喜?本文介绍三位长期坚持写作的程序员,分享他们在写作道路上的心得和收获,希望对同学们有所启发。

更多精彩资讯,欢迎扫码入群交流~🚀**🚀🚀**
扫码入群.png

注:所有资讯均来自网络,不代表编者观点。