WebFamily

Hi there, I'm Jeskson! 👋

😄 前端开发工程师
🏡 作品：达达前端 | 求星星 ✨
🌱 热爱分享 1024bibi.com
😺 趣讲技术：掘金魔王哪吒 | infoQ : infoQ 魔王哪吒
💬 微信：xiaoda0423
🤔 有问题欢迎私聊
👬 QQ 千人编程交流群2：634382181
💬 向我询问：如有问题可以点击（Ask me about）
📫 如何联系我wx: xiaoda0423（How to reach me）
⚡ 有趣的事实：我一直在倡导学习（Fun fact）

WebFamily 【每日学习打卡come on】一份涵盖大部分Web前端开发程序员所需要掌握的核心知识。前端技术博客仓库，Vue 源码解析，React 深度实践，TypeScript 进阶艺术，工程化，性能优化实践…… Leetcode 【Suggest 👍 ‍💻 Leetcode brush question & answers】leetcode题解，记录自己的leetcode解题之路……

已阅

vue实现预览功能（包括doc，pdf，图片，视频）https://www.cnblogs.com/lhy-555/p/10839750.html

2021.8.9

this.$refs.audio.play is not a function

2021.7.28

2021.7.22

史上最走心webpack4.0中级教程——配置之外你应该知道的事

2021.7.21

html meta no-cache不缓存数据

2021.7.18

ts 数组的类型

2021.7.15

vue实现PC端分辨率适配

项目基础配置使用 vue-cli2 生成
自适应方案核心：阿里可伸缩布局方案 lib-flexible
px转rem：px2rem，它有webpack的loader px2rem

2021.7.14

Vue中使用keepAlive不缓存问题（已解决）

2021.7.13

2021.7.12

JS 在已知的日期基础之上加N个月

2021.7.8

2021.7.5

2021.7.1

2021.6.30

2021.6.29

Languages and Tools:

⚡ Technologies

These are some of the technologies and tools that I work with:

【web面试+web学习指南】

一份涵盖大部分Web前端开发程序员所需要掌握的核心知识，是一个为开发者提供免费的学习资源整合社区。

哪吒人生信条：如果你所学的东西处于喜欢才会有强大的动力支撑。

我会认真去写这个系列，很多细节的点，可能想得不是很完善，大家可以去【公众号】(程序员哆啦A梦)获取或者加我【微信】提意见(别忘记Star哟)。

技术交流群：添加我微信 xiaoda0423 备注【姓名-工作年限/学校】即可

📚1024bibib.com文章

vue-axios-vuex-全家桶

📚力扣 (LeetCode)题目

📚ES6篇

📚掘金文章

📚😋Java文章

【2021年】小哪吒入门学习Java的第一天打卡

📚文章

刚刚，发布Webpack中级教程系列

🚩其它

Vue.js	前端框架	https://vuejs.org/
Vue-router	路由框架	https://router.vuejs.org/
Vuex	全局状态管理框架	https://vuex.vuejs.org/
Nuxt.js	创建服务端渲染 (SSR) 应用	https://zh.nuxtjs.org/
Element	前端ui框架	https://element.eleme.io
Axios	前端HTTP框架	https://github.com/axios/axios
Echarts	图表框架	www.echartsjs.com
CKEditor	富文本编辑器	https://ckeditor.com/
Highlight.js	代码语法高亮插件	https://github.com/highlightjs/highlight.js
Vditor	Markdown编辑器	https://github.com/Vanessa219/vditor
vue-cropper	图片裁剪组件	https://github.com/xyxiao001/vue-cropper
vue-image-crop-upload	vue图片剪裁上传组件	https://github.com/dai-siki/vue-image-crop-upload
vue-emoji-comment	Vue Emoji表情评论组件	https://github.com/pppercyWang/vue-emoji-comment
clipboard.js	现代化的拷贝文字	http://www.clipboardjs.cn/
js-beautify	美化JavaScript代码	https://github.com/beautify-web/js-beautify
FileSaver.js	保存文件在客户端	https://github.com/eligrey/FileSaver.js
SortableJS	功能强大的JavaScript 拖拽库	http://www.sortablejs.com/
vue-side-catalog	目录导航栏	https://github.com/yaowei9363/vue-side-catalog
uniapp	移动端跨平台语言	https://uniapp.dcloud.io/
colorUi	专注视觉的小程序组件库	https://github.com/weilanwl/ColorUI
showdown	用Javascript编写的Markdown 到Html转换器	https://github.com/showdownjs/showdown
turndown	用JavaScript编写的HTML到Markdown转换器	https://github.com/domchristie/turndown

技术论坛

打包工具

webpack - 打包项目。
rollup - 打包 npm 库。
parcel - webpack 竞品，但发展前景不乐观，再观察一段时间。
systemjs - 针对一些特殊场景会比较有用，比如云 ide，支付宝小程序 IDE 等。
microbundle - 基于 rollup，简化配置。
bili - 基于 rollup，同上。
father - 组件打包工具，提供 babel 和 rollup 两种打包方式。
vue-cli - vue 命令行工具。
create-react-app - react 官方脚手架。
prepack - 通过预先执行的方式优化打包结果。
lebab - 把 es5 代码转成 es6，反向 babel。
esm-to-cjs - 把 esm 转成 cjs。
tsdx - Zero-config CLI for TypeScript package development.

webpack 辅助工具、Loader 和插件

webpack-dev-server - webpack 开发服务器。
webpack-dev-middleware - webpack 中间件。
webpack-merge - 合并 webpack 配置。
webpack-chain - 通过 chain 风格 api 的方式修改 webpack 配置。
svgr - svg 转 react 组件。
postcss - CSS 界的 babel。
autoprefixer - 为 CSS 选择权自动加 prefix。
cssnano - CSS 压缩，也有类 preset 的概念。
mini-css-extract-plugin - 提取 CSS 为单独文件。
webpackbar - webpack 进度条。
webpack-bundle-analyzer - 构建产物占比分析。
uglifyjs-webpack-plugin - JS 压缩，产物为 ES5 语法。
terser-webpack-plugin - JS 压缩，产物为 ES6 语法。
webpack-manifest-plugin - 生成 manifest.json。
copy-webpack-plugin - 复制额外的文件到输出目录。
case-sensitive-paths-webpack-plugin - 大小写敏感检测，能规避一些问题，但构建时性能消耗较大。
css-hot-loader - CSS 热更新，搭配 mini-css-extract-plugin 使用。
duplicate-package-checker-webpack-plugin - 重复依赖检测。
fork-ts-checker-webpack-plugin - ts 语法检测。
speed-measure-webpack-plugin - 统计 webpack 各阶段耗时。

基础框架

框架

next.js
nuxt.js
gastby
umi - 蚂蚁金服的前端框架
rekit - IDE and toolkit for building scalable web applications with React, Redux and React-router.
choo - dva 最初的 API 是参考这个实现的，已经不怎么发展了，再关注一段时间。
taro - 用 React 写小程序，适配微信和支付宝等。
after.js
mint - 提供了语言层方案的框架。
quasar - 基于 vue，一套代码多处适用。

react 相关库

preact - 轻量级 React 实现。
inferno - 轻量级 React 实现。
react-router - React 路由方案。
reach-router - React 路由方案，较新，优势是可访问性。
router5 - 通用的路由方案。
react-loadable - 按需加载 react 组件。
ant-design - 蚂蚁金服的 React UI 库。
material-ui - UI 库。
react-intl - React 的国际化方案。
react-dnd - 拖拽实现。
react-helmet - 修改 html 的 header 内容。
react-jsonschema-form - A React component for building Web forms from JSON Schema.

跨平台技术

基础组件库

包管理器

babel

babel
babel-plugin-dynamic-import-node - 有些场景下会需要禁用 import() 语法。
babel-plugin-macros - 前端文件写 node 逻辑。
babel-plugin-rawest - React 的 DOM 直出方案。
babel-plugin-react-require - 自动为 jsx 语法加 react 引用。
babel-plugin-transform-react-remove-prop-types - 删除 prop-types，生产环境用。

前端解决方案

构建工具

脚手架

重学前端

数据可视化

日志记录心得

web前端工作内容

web前端工作内容都有哪些？需要再次进步需要学习什么？就来讲述一下web前端工作者的工作内容。

职责一：

1、结合页面和系统功能，完成桌面或移动端页面/微信H5/小程序的开发、调试等工作，高效、高质地完成代码编写，确保符合前端代码规范;

2、与后端开发团队紧密配合，完成接口对接，确保前后端有效交互;

3、综合运用客户端和服务器端构建与优化方案、模块化开发等手段，提升开发效率和系统性能;

4、了解并结合业务需求，设计满足用户需要、符合用户习惯、运用大数据分析能力、体现大数据特色的系统。

职责二：

1、根据业务需求，完成产品的前端页面及交互实现;

2、对现有前端开发框架进行深入了解，并参与持续改进;

3、通过开发工具、改进流程，保证前端业务开发的高效性;

4、关注前端技术前沿，及时把新技术转化为业务开发中的生产力;

5、完成业务界面交互和独自设计组件开发。

职责三：

1、根据项目或者产品需求负责实现PC端及移动页面的设计和开发;

2、持续优化前端应用，改善用户交互以及视觉，保证前端网页的兼容性以及页面响应速度并负责前端代码的维护，

3、配合后台开发人员共同完成项目或者产品;

4、负责前端开发文档的编写;

职责四：

1、根据产品经理和UX/UI设计的关键需求进行前端架构设计工作;

2、承担前端核心模块的设计、实现工作;

3、承担主要开发工作，对代码质量及进度负责;

4、参与进行关键技术验证以及技术架构选型工作;

5、和产品经理和UE设计师沟通并确定产品开发需求;

6、与后台开发工程师配合，完成开发任务和上线。

意见反馈

若内容有做得不到位的地方，请及时联系我们进行整改即可，会在第一时间进行处理。

勘误及提问

如果有疑问或者发现错误，可以在相应的 issues 进行提问或勘误。

如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。

参与贡献

如果您对本项目有任何建议或发现文中内容有误的，欢迎提交 issues 进行指正。
对于文中我没有涉及到知识点，欢迎提交 PR。
如果您有文章推荐请以 markdown 格式到邮箱 [email protected]。

License

所有文章采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行许可。

webVueBlog/WebFamily

webVueBlog

Reviews

Repository Details