About me

November 03, 2022 2888

如果想了解我更多，那就点我噢！

😀对前端的认识

  • 前端是用户接触到的部分，融合了设计、编码以及一些整体的理念，还涉及接口请求、数据处理和交互等方面，具有一定的挑战性

  • 终端涵盖范围扩大，从PC端到移动端（H5、APP…）、智能设备等

  • 前端社区活跃，技术在不断的更新

    • 技术文档：MDN，W3School，菜鸟教程
    • 技术社区：Github，博客园，掘金，segmentfault（思否），极客时间，阮一峰的网络日志
    • 前端常用技术：HTML->HTML5，CSS->CSS3，JavaScript（ES6+），框架（Vue、React、Angular），jQuery（JavaScript工具库），Node.js（一种JavaScript的运行环境，能够使得其脱离浏览器运行），npm（安装依赖）

  • 有发展前景

  • 最主要的，个人感觉写前端更有成就感（想做一个技术girl）

😁 项目相关技术的了解

  • Vue

    • 构建用户界面的渐进式框架
    • 语法简单、容易上手
    • 组件化开发方便实现组件的复用

  • Vuex

    为Vue.js应用程序开发的状态管理模式，管理所有组件的状态（还可以实现组件间传值）

  • Element UI

    一套基于Vue2.0的桌面组件库

  • Uni-app

    一个使用Vue.js开发所有前端应用的框架，一套代码可以发布到多个平台

  • Node.js

    可以让Javascript运行于服务器

  • webpack

    前端资源模块化管理和打包工具

😅在项目过程中遇到的问题

  1. 页面自适应（响应式）

    • uni-app:单位使用rpx

    • 宽度单位不用绝对的，用百分比%或auto

    • 字体大小用相对字体大小rem

      字体大小是页面默认大小的100%，即16像素

    • 使用流动布局float

      整个区块的位置都是浮动的，不是固定不变的

    • 选择加载CSS

      CSS3引入的Media Query模块可以自动探测屏幕宽度，然后加载相应的CSS文件

    • CSS的@media和@media screen，媒体查询/匹配

      @media和@media screen两者在手机设备上没有区别，但@media screen的css在打印设备里是无效的，@media在打印设备里是有效的

    • viewport

      在移动设备上进行网页的重构和开发，让网页适配或响应各种不同分辨率的移动设备

      https://www.cnblogs.com/2050/p/3877280.html

  2. 性能优化

    • 减少HTTP请求

      一个完整的HTTP请求需要经历DNS查找，TCP握手，浏览器发出HTTP请求，服务器接收请求、服务器处理请求并发回响应，浏览器接收响应等过程

    • 将CSS放在文件头部，JavaScript文件放在底部

    • 降低CSS选择器的复杂性

    • 用flex模型替换浮动

    • 使用字体图标iconfont代替图片图标

    • 图片优化

      • 尽可能使用CSS效果代替图片
      • 图片懒加载
      • 对选用图片的格式类型进行选择
        • jpg：支持颜色比较丰富
        • png：支持复杂透明度
        • webp：谷歌新推出的专门用来表示图片的一种格式，具备其他图片格式的所有优点（兼容性不好）
        • base64：将图片使用base64编码，可以将图片转换为字符，一般用来显示需要和页面一起加载的图片

    • JavaScript性能优化

      • 作用域意识

        • 使用let、const变量替代全局变量var
        • 避免使用with语句（with语句会创建自己的作用域，会加长其中代码的作用域链）

      • 选择性能更佳的算法或解决问题的方法

        • 避免不必要的属性查找
        • 尽可能使用原生方法(Math对象上执行复杂数学运算的方法)
        • 将复杂的if-else语句转换成switch语句
        • 有选择性的将某些数学操作替换成位操作以提升复杂计算的效率（求模、逻辑AND与和逻辑OR或都很适合替代成位操作）

      • 语句最少化

        • 可以通过一条语句声明多个变量
        • 尽量把迭代值插入到上一条使用它的语句中
        • 使用数组和对象字面量（创建的同时进行初始化）

      • 优化DOM交互

        • 实时更新最小化

        • 使用innerHTML（适用于大量DOM更新）

          在页面中创建新DOM节点的方式：

          • DOM方法：createElement()和appendChild()

          • innerHTML

            PS:使用innerHTML会暴露巨大的XSS攻击面

        • 使用事件委托，可以减少对页面响应的影响

    • 善用缓存，不重复加载相同的资源

    • 减少重绘重排

  3. 使用vue时组件间传值

    主要用的props / $emit实现父子间的传值

    vuex实现各组件间数据处理和传递

  4. 合并代码时产生冲突

    代码规范和沟通真的好好好重要，遵循规范和提前沟通可以避免很多冲突

Ps: 官方文档真的是第一手教材

😆项目中的收获

  • 能力方面
    • 学习到了很多新东西以及他人解决问题的方式
      • uniapp、git、iconfont、fastmock、设计理念和设计流程、编码规范等等
      • 遇到了不会的内容应该积极利用搜索引擎查询
      • 遇到bug时可以通过一步一步检查验证找出问题所在
    • 学习能力和解决问题能力得到了提高
    • 团结协作能力和团队意识得到了提高
  • 意识方面
    • 学习应该主要从官方文档开始
    • 编码规范极其重要
      • 代码格式规范—->美观
      • 注释详细—->便于后期维护
    • 不能过于依赖组件
    • 实现一个功能应该深入了解其实现原理，这样才能便于提升自己能力
    • 团队成员之间的沟通交流很重要
    • 应该积极向他人学习
    • 学无止境

😏个人优势

  • 有一定的团队合作经验

    参与过团队项目，做项目过程中会定期进行交流讨论，编码过程遵循团队的规范，具有强烈的团队意识，会使用多种协作软件

  • 擅于总结和写文档

    在学习和实践过程中大大小小的学习文档写了不少

  • 对技术这方面很感兴趣

    愿意花时间去学习技术，自己写个东西出来会很有成就感

  • 自制力较强，生活作息规律

    基本每天大概7点左右起床出去自习晚上十点左右回寝室

  • 有一定的独立思考能力，学习目标明确

  • 学习态度端正并乐于学习

    会通过看视频讲解、官方文档、他人博客等解决自己遇到的问题，遇到自己无法解决的问题会主动向会的人请教，直到问题得到解决，问题被解决后会获得强烈的满足感。

😅个人不足

  • 掌握的知识缺乏深度

    能明显的感觉到自己学的东西不够深入，想实现什么功能一般是直接网上搜，然后修改运用到自己项目，很多时候不会去深究其中的原理

    PS：在技术实现方面逐渐培养自己打破砂锅问到底的意识

  • 基础知识还不够牢固

    没有进行系统性的学习，学习内容零零散散，需要用到什么才去学什么

    PS：开始了系统全面的学习，构建自己的知识框架

  • 算法能力有待提高

    算法接触得比较少

    PS：通过实例来了解学习各个常用算法，并做好相对应的笔记

😉兴趣爱好

  • 写博客文章

    喜欢将自己新学到的知识通过博客记录下来，能更好的掌握，同时方便自己之后进行查询（避免遗忘）

  • 打羽毛球

    最喜欢的锻炼方式没有之一

  • 摄影

    喜欢记录美好的生活瞬间

  • 追海贼王

    “我们是伙伴啊！”

查看评论