Skip to content

humeng1010/web-front-end-developer-guide

Repository files navigation

前端学习日记

用行动证明从最基础开始学习前端和前端主流的技术框架需要多长时间,给大家一个参考建议以及一个学习前端的路线,希望对大家有帮助 (^▽^)谢谢 ,该仓库记录了学习过程中的代码。

  • Markdown笔记已经整理到blogs文件夹下(内容可能有未更新的)

可以到我的博客中查看最新的笔记: 点击前往

记录: 2022年11月06日-2023年01月15日.

  • 2022年11月06日:3个小时-完成html基本标签的学习
  • 2022年11月07日:5个小时-完成css选择器、字体、文本、复合选择器、元素显示模式以及js入门的学习
  • 2022年11月08日:3个小时-完成css背景、盒子模型和js变量的学习
  • 2022年11月09日:2个小时-完成css浮动、js数据类型的学习
  • 2022年11月10日:2个小时-完成css定位、js运算符的学习
  • 2022年11月11日:4个小时-完成精灵图、字体图标、三角、用户界面、溢出文字、小技巧以及js分支流程控制的学习
  • 2022年11月12日:3个小时-完成h5c3提高以及js循环的学习
  • 2022年11月13日:4个小时-完成c3 2d转换、动画、3d转换以及js数组的学习
  • 2022年11月14日:2个小时-完成移动端流式布局的学习以及京东首页的制作(50%)
  • 2022年11月15日:1个小时-完成移动端京东首页的制作
  • 2022年11月16日:4个小时-完成flex布局和携程网案例
  • 2022年11月17日:2个小时-完成rem、媒体查询、less基础的学习
  • 2022年11月18日:4个小时-完成苏宁移动端首页两种响应式方案
  • 2022年11月19日:5个小时-完成BootStrap基础学习以及响应式页面阿里百秀的制作
  • 2022年11月20日:3个小时-完成js函数、作用域、预解析、对象的学习
  • 2022年11月21日:3个小时-完成js内置对象Math,Date,Array,String的基本学习
  • 2022年11月22日:3个小时-完成webAPIs获取元素、添加事件、修改内容属性样式的学习
  • 2022年11月23日:3个小时-完成js操作元素,获取节点,创建元素的学习
  • 2022年11月24日:3个小时-完成js节点操作,注册事件,事件流(事件冒泡,事件委托),事件对象的学习
  • 2022年11月25日:4个小时-完成js的window常见的事件对象,js的执行机制,location对象,history对象的学习
  • 2022年11月26日:3个小时-完成js的offsetWidth,clientWidth,立即执行函数,flexible源码分析,scroll系列,mouseenter和mouseover区别的学习
  • 2022年11月27日:5个小时-完成动画原理,缓动动画的封装,回调函数,轮播图的学习
  • 2022年11月28日:2个小时-完成移动端触摸事件和移动端轮播图第一部分(可以通过transitionend事件监听元素过渡是否完成)的学习
  • 2022年11月29日:2个小时-使用swiper制作轮播图
  • 2022年11月30日:3个小时-jQuery基本使用
  • 2022年12月01日:3个小时-jQuery基础完结,ajax的基本使用
  • 2022年12月02日:2个小时-ES6 let const 解构赋值 模板字符串 对象的简化写法 箭头函数 的使用
  • 2022年12月03日:4个小时-ES6 函数形参的默认值 rest参数 扩展运算符 Symbol数据类型 迭代器 生成器Promise 集合 对象 的学习
  • 2022年12月04日:7个小时-JS高级-面向对象语法,面向对象案例,原型,数组的方法,Object.defineproperty方法
  • 2022年12月05日:4个小时-JS高级-使用call,apply,bind改变函数内部的this指向,闭包,递归,浅拷贝和深拷贝
  • 2022年12月06日:1个小时-正则表达式
  • 2022年12月07日:2个小时-ES6-ES11新特性继续,class类后续,模块化,async和await的使用
  • 2022年12月08日:3个小时-axios和fetch的学习
  • 2022年12月09日:1个小时-nodejs内置模块fs和path的基本使用
  • 2022年12月10日:1个小时-node内置http模块的学习(暂时停更4天,到12月15日继续(^▽^))
  • 2022年12月15日:1个小时-node.js中的模块化
  • 2022年12月16日:3个小时-npm包管理工具的使用和React的入门
  • 2022年12月17日:6个小时-React的组件和组件实例的三大属性-state、props、refs的学习
  • 2022年12月18日:7个小时-React的事件处理,收集表单数据,组件的生命周期
  • 2022年12月19日:7个小时-React的Diffing算法和key的作用,脚手架的使用和todoList案例
  • 2022年12月20日:6个小时-React的配置代理解决跨域,github的搜索案例练习axios和pubsub消息订阅与发布和fetch的使用
  • 2022年12月21日:9个小时-react-router-dom的学习
  • 2022年12月22日:6个小时-Redux的使用
  • 2022年12月23日:7个小时-react-redux的使用
  • 2022年12月24日:6个小时-react的扩展(setState的两种写法,路由组件的懒加载,3种hook,Fragment标签,PureComponent优化各个组件的render,renderProps组件插槽,ErrorBoundary错误边界防止整个页面不能显示)
  • 2022年12月25日:4个小时-react-route@6版本的学习
  • 2022年12月31日:1个小时-初识Vue
  • 2023年01月01日:3个小时-vue的模板语法和数据绑定以及数据代理和事件处理
  • 2023年01月02日:5个小时-vue的计算属性,侦听属性,绑定样式,条件渲染,列表渲染,Vue监测数据改变原理
  • 2023年01月03日:4个小时-vue收集表单数据,过滤器,内置指令和自定义指令
  • 2023年01月04日:8个小时-vue的生命周期,非单文件组件和单文件组件,vue脚手架创建项目,ref,props,mixin,plugins,scoped,todolist案例
  • 2023年01月05日:6个小时-vue组件自定义事件,全局事件总线,pubsub,nextTick,过渡动画,配置代理服务器,github搜索案例,默认插槽、具名插槽、作用域插槽
  • 2023年01月06日:10个小时-vuex和vue-router
  • 2023年01月07日:7个小时-vue3-setup组合 api 的舞台、ref 函数实现数据响应式返回 RefImpl、reactive 函数实现对象响应式返回 Proxy、vue3 的响应式原理通过 Proxy 和 Reflect 两个原生方法实现、setup 接收的两个参数 props 和 context、computed 计算属性api、watch 函数 api 多种写法注意区别、watch 时的 value 问题本质是监视的是什么类型的 RefImpl 需要 value 或者开启 deep 而 Proxy 不需要 value 并且强制深度监视、watchEffect 类似计算属性但无需返回值会根据回调函数中变化的值重新执行该函数、生命周期 onBefore...和on...ed、hooks 类似 mixin把组合 api 进行封装方便多次使用。
  • 2023年01月08日:7个小时-vue3-toRef和 toRefs:toRef创建一个 ref 对象,其 value 值指向另一个对象中的某个属性,主要将响应式对象中的某个属性单独提供给外部使用,toRefs 可以批量创建多个ref 对象;shallowRef 和 shallowReactive:shallowRef 只处理基本类型的数据,shallowReactive 浅层次的响应式只考虑对象的第一层;shallowReadonly 和 readonly:分别是浅层次的只读和完全只读;toRaw 和 markRaw:分别是把一个响应式对象变为原始对象只能处理 reactive 缔造的对象,markRaw 是把一个原始的对象标记为原始对象即不对其进行响应式的操作;customRef:自定义 ref,定义函数该函数需要返回 customRef,并且参数是一个工厂函数,该函数可以接收到两个参数分别是追踪track 和触发trigger,该工厂函数需要返回一个对象对象中含有 getter 和 setter进行自定义 ref;provide(提供) 和 inject(注入):适用于祖组件给后代组件传递数据;teleport传送:可以让里面的结构进行传送到指定的选择器中;Suspense:可以配合 defineAsyncComponent 引入组件进行异步渲染,并且该组件 setup 可以返回 Promise 对象了,因为使用 Suspense 进行包裹就会让 Suspense 来管理这个组件的加载。
  • 2023年01月09日:8个小时-对vue-router@4版本的变化进行了解并使用;vuex@4 版本的使用;以及了解并使用新的 Vue 的专属状态管理库Pinia。
  • 2023年01月10日:9个小时-vue3-博客文档小项目页面的基本结构的搭建;TypeScript-类型基础的学习
  • 2023年01月11日:8个小时-ts接口,函数,类,泛型的学习;webpack的第一天
  • 2023年01月12日:10个小时webpack背景图片打包,babel-loader,公共引入的代码抽离。vite的学习-什么是构建工具?vite的预加载和依赖预构建;配置文件的语法提示,开发环境的处理问题;vite的环境变量配置;vite是怎么让浏览器识别.vue 的文件的?
  • 2023年01月13日:6个小时vite构建工具的学习day02:css模块化的配置,less的配置,postcss后置处理器
  • 2023年01月14日:8个小时-vite处理静态资源,配置路径别名,静态资源生产环境的配置,vite插件:vite-aliases,vite-plugin-html,vite-plugin-mock;vite与ts的结合以及让ts可以使用import.meta.env环境变量;vite跨域的处理

About

web前端开发人员指南。用实践证明2023年从0开始学习前端主流的技术框架需要多长时间。该仓库记录了学习的代码以及记录的笔记

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published