徐小夕

V1

2023/01/14阅读:31主题:默认主题

代码人生(赠送5本23年技术书刊)

  1. 一个好的旅行者没有固定的计划,也不打算到达。

  2. 学会为心动买单, 而不是为便宜买单。

今天我们不分享技术, 来聊一些关于技术的思考和解答, 以及春节前常规的送书活动, 作为技术人, 每年总得读5本技术书, 才能对得起日夜操劳的自己.

这篇文章只有2个部分, 阅读时间5-15分钟, 希望这段旅程, 对大家有所收获.

  • 关于技术的思考和解答
    • 前端组件拆分的依据究竟是复用性还是可测试性?
    • 初中级前端,每天晚上坚持做些什么,可以让一年后的自己受益匪浅?
    • Web 前端自学可以么?
    • 前端如何学习和实际操作才能通过布局把页面写好看一些?
    • 前端项目中的图片资源越来越多,怎么处理呢?
    • 前端开发代码越写越臃肿该怎么办?
    • 前端有哪些值得深入研究的小方向?
    • 用原生 JS 开发时,你遇到最头疼的问题是什么?
    • 怎么学习前端开发?求推荐学习路线?
    • 前后端同构和模板渲染的区别是什么呢?
    • 让程序员越来越优秀的底层思维
  • 分享并赠送5本2023年前端技术书籍

接下来我们开始正文.

1. 关于技术的思考和解答

1.1 前端组件拆分的依据究竟是复用性还是可测试性?

前端组件拆分我们团队一般会遵循如下原则:

  1. 跨页面多次使用的组件,一般放在公共组件里,一般src下的一级目录components里,封装公共组件一般会组件内部使用的props方便父组件使用。公共组件更多的是依据复用性,这样我们对组件写测试用例也比较方便。

  2. 对于只能在某一页面内使用的组件,我们一般放在页面内的组件文件夹中,这样可以方便子路由下的页面局部复用。比如我们在pages下有A目录,A目录对应A页面,那么我们可以在A目录下建立components,存放页面内部公共的组件,通过暴露属性和方法供页面传递和调用。这样是不需要使用redux的。

  3. 一般我们组件都不建议单独再使用redux,因为这违反的组件设计的原则,这样会增组件的副作用,对后期维护也很不方便。所以一般建议使用props来传递,更常用的做法是使用hooks来做,将组件粒度按照以上一二点所述的原则进行拆分。

1.2 初级前端,每天晚上坚持做些什么,可以让一年后的自己受益匪浅?

前端进阶这块很值得思考,关于如何从初级前端工程师进阶到能独挡一面的高级工程师,我花了两年时间,具体可以参考如下方法:

  1. 每天晚上花30-60分钟总结一天的工作,思考自己有没有写很多重复的代码,如何改进代码,如何抽离出公共的代码让后期的工作效率更好?

  2. 每隔1-3天学一个新的前端知识点,并坚持写学习总结。

  3. 坚持巩固基础,定期做js算法题,定期掌握一个设计模式。

  4. 学习数据结构与算法。这块是前端进阶必备知识。

  5. 抽出一段时间掌握前端工程化的知识,比如webpack,gulp,rollup, vite等,这块是前端架构的基础。

  6. 慢慢的学习nodeJs,了解后端内容。这样可以让你对前后端协作有个更好的认知。

坚持半年到1年,你的水平一定会飞速的发展。

1.3 Web 前端自学可以么?

web前端自学的话完全没问题,但是要付出额外的努力和正确的学习路径。一般从入门到做项目至少2个月。综合笔者多年的前端从业经验,总结出如下学习路径:

  1. html,css(css3)基础。时间一般在2周-3周,期间需要注意多练习,多做一些代码的梳理和实战。目标是能写出基本的静态页面。

  2. javascript基础。时间一般在2-3周,需要掌握基本的js逻辑操作,循环,数据结构以及对象的基本用法。目标是能写出基本的js逻辑,比如数组去重,轮播图动画,倒计时效果,定时功能等。

  3. 基本框架的使用以及javascript深入。时间一般在2-4周,这块前期建议先学习vue,因为学习成本比较低,又能了解到主流框架的设计思路和实现方式,对数据驱动会有更多的想法,与此同时还能对js的对象,数据类型如数组,对象,深拷贝,浅拷贝等有一定的了解。学习目标是可以利用vue开发基本的应用程序,并会使用第三方UI组件如element

  4. 前端工程化相关的知识,比如webpackgulp,前端项目管理gitsvn的用法。时间一般在1-2周,时间虽然短但是需要我们充分了解他们的使用背景和优缺点。目标是可以修改项目脚手架,会用git提交自己的代码并熟悉分支管理策略。

  5. 熟悉小程序开发,node的基本使用。这块属于前端进阶的一部分,需要我们掌握一定的前端知识和后台知识。周期在2-3个月,目标是熟悉小程序基本的开发流程,并能独立负责某个模块的开发,掌握node的几个核心api并知道如何使用。

  6. 前端算法,数据结构,设计模式的学习。这块不是必要但是对后期发展很有帮助。

  7. webrtc, 跨平台技术flutter, react native , weex 等有一定的了解。(高级岗位)

  8. 熟悉前端基本组件库,类库的构建,发布,管理。(前端架构)。并能基于项目环境搭建适合的脚手架。

关于前端各个领域的知识笔者也在专栏《趣谈前端》有过很多项目的教程,可以参考了解一下。总之,多努力,相信自己才是最棒的.

1.4 前端如何学习和实际操作才能通过布局把页面写好看一些?

写页面其实很简单,掌握以下几点就好了:

  1. 掌握3种常用的css盒模型,如border-box, content-boxpadding-box等。

  2. 4 种布局方式,如百分比布局浮动布局flex布局grid布局

  3. 理解BFC(即块级格式化上下文)的用法和实现。

  4. css3媒介查询,过渡(transition),动画(animation),以及常用的样式。

  5. 浏览器样式兼容性。

  6. 熟悉 css 伪类和伪对象,这会让你写 css 更强大。

  7. 熟悉h5常用标签及语意化实现。

掌握了以上内容,90%的页面需求都能迎刃而解。

1.5 前端项目中的图片资源越来越多,怎么处理呢?

对于项目中图片资源不断增多的情况,为了提高打包速度和体积,针对你的情况,可以使用一下方法来优化:

  1. 图片资源单独打包,让业务代码的打包和图片打包并行,维护好相互之间的引用关系。

  2. 对公共库文件和框架使用webpackdll,可以避免每次都打包不变的库。

  3. webpackgulp结合使用,gulp专注于处理静态资源。

  4. 由于有多个活动页面的入口,我们可以使用环境变量,利用传参的方式控制只打包某一个入口的活动页面。当然这块也可以用shell脚本来实现。这样就不用每次都打包一遍所有的活动页面。

5.采用webpack多进程模式,这块有专门的插件可以使用,原理也是使用node的多进程模块。

6.使用oss或者其他对象存储服务器,将静态资源存放cdn,可以提高资源加载速度。由于浏览器http在同域下一次只能并发4-6条请求,用cdn则可以突破这个限制,加快首屏渲染速度。

1.6 前端开发代码越写越臃肿该怎么办?

代码越写越臃肿笔者总结主要的原因有以下几种原因:

  1. 前期没有考虑可扩展性,导致很多代码更多的采用面相过程式编程。这种情况的解决方案是写之前多思考一下,代码是否可复用,是否可以把逻辑抽象出来作为工具函数?这种建议多考虑用面向对象或者面向切面的方式编程。

  2. 产品需求不断变更,导致相关逻辑无法复用。这种情况的解决方案可以多和产品确认需求,团队形成一定的约定,在方案确定后再做需求。或者可以使用单例模式和单一职业原理,将业务逻辑解耦,这样就能在一定程度上避免牵一发而动全身。

  3. 在写代码时没有用到更优雅的方式解决问题。这种情况主要和程序员的编程经验有关,比如遇到很多条件判断时可以用 switch,三目运算和对象的方式去避免 if else,多采用函数式编程来降低代码复杂度和可读性,规范数据结构,让其更可复用。

笔者之前也重构过很多项目的代码,也当过接盘侠,所以建议可以多看看设计模式和函数式编程的知识,在写代码前多思考,不要一股脑的直接写代码。

1.7 前端有哪些值得深入研究的小方向?

前端研究热门方向:

  1. 数据可视化

  2. IOT前端架构

  3. 跨平台技术,flutter, weex, rn

  4. 前端智能组件技术

  5. WebRTC实时音视频技术

  6. Serverless 技术

7.跨端小程序,小游戏

  1. Css 环境感应技术

  2. javascript 面向硬件编程

  3. 同构架构

  4. web3.0

1.8 用原生 JS 开发时,你遇到最头疼的问题是什么?

首先,框架的出现是为了简化我们使用javascript的逻辑,以一种更简洁,更高效,更工程化的模式开发我们的应用。

我们从几个金典的javascript框架和库,来分析使用原生javascript将会遇到的问题。

  1. 首先从jquery开始。jquery是前端界出现的比较早,也是最经典的js库之一,它的出现极大的简化了我们操作dom的难度,并且提供了不同浏览器之间domjs的兼容,使得我们不用再写一大堆兼容性代码来兼容不同浏览器。另一方面,它使用原型链和闭包等方式,让jquery本身拥有了更多的扩展性和作用域之间的隔离。基于jquery的插件市场应孕而生,我们业务中出现的很多问题和需求,都可以在插件市场中找到,不需要我们繁琐的再去人工手写一堆代码。jquery的生态链一步步扩大,意味着我们手写js业务的场景越来越少,我们更加关注业务场景而不是具体的交互的实现,更加适合团队协作和高效开发。

  2. vue/react/angular等数据驱动的框架出现。(这些框架笔者都有应用于公司的不同系统下,虽然目前主要用react,因为它有更高的灵活性)。它们更多的是提供一种工程化规范,基于一定的设计模式,来让我们更灵活,更高效的开发复杂应用。我们只需要关注数据之间的流转,极大的避免了频繁操作dom的场景(虚拟dom)。其底层使用的设计模式如观察者模式,原型继承以及事件代理机制,很值得我们学习。

还有很多优秀的库,大部分都是为了让我们操作javascript更加高效和简洁,比如lodash, rxjs等,所以我这里总结一下原生javascript写代码的一些弊端和优势:

  • 面向浏览器编程,需要写很多兼容性代码
  • 操作dom更繁琐,复杂交互需要频繁操作dom,且代码不够友好。
  • 可扩展性和可维护性没有保证。
  • 团队协作困难。
  • 开发效率低下。

不过原生还是有很多优点,如果你对js很熟悉的话,也可以自己实现一个类库或者框架,原生操作对于简单的场景性能还是高的。笔者在《趣谈前端》专栏也有很多性能和工程化的探索,可以探索一下。

1.9 怎么学习前端开发?求推荐学习路线?

学习前端需要分阶段,通过阶段性的学习才能快的掌握前端技能.

前端基础是第一步,笔者从初学前端到成长为一名架构师,也经历了很多波折,唯一不变的就是坚持,成长,与反思. 前端学习的方法很重要,笔者特地总结了学习前端的三个阶段,如下图所示:

每个阶段都有不同的技术需要理解和掌握, 这些技能的掌握不能仅仅通过书籍和理论的学习,更多的是要实战, 前端框架如react, vue这些,要想做项目和理解它,一定要深入项目中去,去结构化,双向的去学习.比如项目中遇到的问题,通过自己的探索和查找,可以对这块知识有更好的理解,或者自己做一个独立的项目,发布到github上开源,这也是一种成长,笔者就开源了很多插件和全栈项目到github,通过和前端工程师的沟通,自己也收获了很多知识.

所以做前端或者学前端,一定要有正确的方法论和格局,多去交流, 多实战,才能让自己知道哪些应该研究, 什么样的学习路径是自己需要的.希望通过笔者对前端学习路径的总结,能帮助到还在迷茫的各位.

2.0 前后端同构和模板渲染的区别是什么呢?

要想说明前后端同构和模版渲染的区别,首先笔者先解释一下两者的概念。

1.前后端同构

指的是前后端使用共同的javascript,在页面首次渲染时通过nodeJs直接返回html给浏览器,强调的是前后端共有的一部分代码。 前后端同构核心思想就是把一部分代码拿到服务端来执行,以此来实现在不同端(浏览器/服务器)复用代码,并能分而治之。我们可以在服务端来请求数据并渲染成html字符串直接返回给浏览器端,在浏览器端可以直接渲染html并且将权利转移给浏览器端执行后续富应用的能力。其好处就是提高首屏渲染性能和SEO,并且服务端专注于首次渲染收据,客户端专注于交互。但是其也有很多直接的缺点,就是虽然能复用部分代码,但是由于服务端和浏览器端环境的不同,我们仍然需要维护不同的代码来处理不同环境下的交互和业务逻辑。另一方面如果一个页面需要调用不同接口获取不同数据,比如可视化图表和用户数据,那么完全等到服务器拿到数据后在渲染反而会增加首屏渲染的时间。所以类似React/Vue的服务端渲染方案是一种同构的尝试,但是仍然不是一种通用的方案,需要根据具体需求来采用。

2.模版渲染

对于node的模版渲染,比如ejsjade等模版引擎,更像是传统PHPJava后端渲染,虽然能达到首屏优势,但是对于富应用和复杂应用来说,模版语法显然不利于维护和管理,并且编写成本较高。对于博客或者简单型/展示型方案来说可以一试。

目前的前端渲染方案,仍然是主流的开发方式,我们可以通过爬虫和静态模版来解决SEO的问题,对于首屏渲染,也可以通过懒加载和分块来进行一定程度的优化,但是大方向笔者还是更倾向于真正的同构技术。

2.1 让程序员越来越优秀的底层思维

灰度思维

判断一个人成熟与否的一个标准就是:面对事情的时候不要以非黑即白的简化思维,而是用灰度思维(考虑事情的第三种可能性)去思考。

双赢思维

从长远来看,输或赢的结果,往往是两败俱伤。 只有双赢模式,让双方达成共赢, 才是长期相互依赖环境中唯一可行的交往模式。

奥卡姆剃刀

如无必要,勿增实体。

叔本华说:“一个明智的人就是一个不会被表面现象所欺骗的人,他甚至预见到了事情将往哪一方向变化。”

生活中,只有看清事物的本质,找到问题的根源,才能彻底而有效地去解决问题。

卢维斯定理

谦虚不是把自己想得很糟糕,而是完全不想自己。

生活中,不少人会陷入这样的误区:以为谦虚就是,把自己想得或者说得很糟。

但这种所谓的谦虚,并不是真正的谦虚,充其量只是一种彩色谎言,作为特定环境下社交的润滑剂。

真正的谦虚,不是不自尊、不自爱,也不是自卑,而是刻意地忘记你是谁,你的资历深浅,专注做一个倾听者、分析者。

我们要有意识地进行视角切换,调用自身的元认知,以旁观者来看待自己,从而不过多地受自我本能的干扰。

复盘思维

复盘,并不是要求我们一定要每一次都将过去的事情重做一遍。

它更多的是一种思维上对事件的重现,通过对过去的思维和行为进行回顾、反思,从而发现问题,吸取经验,最终实现能力的提升。

好了, 技术先分享到这里, 如果大家有其他问题, 可以在和我反馈, 后续陆续做一些解答.

2. 分享并赠送5本2023年前端技术书籍

接下来到了我们2023年技术书籍清单分享环节, 今年赠送的书单如下:

  1. 《vue.js设计与实现》

适合对象: 中高级前端, 喜欢使用vue开发项目并想深入研究vue3的朋友

  1. 《Vue.js 3.0 企业级管理后台开发实战》

适合对象: 初中级前端, 想学习使用vue3.0完整开发中后端管理系统的朋友

  1. 《React设计原理》

适合对象: 中高级前端, 想深入研究react设计原理的朋友

  1. 《现代JavaScript库开发》

适合对象: 想深入理解 javascript 及其库设计模式的朋友

  1. 《狼书 - Nodejs高级技术》

适合对象: 中高级前端, 想学习全栈开发的朋友.

好啦, 图书就分享到这里, 今年赠送这五本书, 由于书籍有限, 我会提出一个问题, 大家把答案发提交即可, 我会筛选出5位幸运的粉丝朋友, 将书籍免费寄送过去, 由于书籍是免费送, 所以邮费需要大家到付哈, 望理解.

分类:

前端

标签:

前端

作者介绍

徐小夕
V1

H5-Dooring低代码作者