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 格式到邮箱 2397923107@qq.com。

License

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

Name		Name	Last commit message	Last commit date
Latest commit History 161 Commits
CUGGZ		CUGGZ
Front-end-infrastructure-architecture		Front-end-infrastructure-architecture
JavaScript		JavaScript
JavaScript高级程序设计4/第一章		JavaScript高级程序设计4/第一章
es6		es6
front-end-interview		front-end-interview
git		git
img		img
interview		interview
theLog		theLog
vscode		vscode
vue-class-component		vue-class-component
vue-property-decorator		vue-property-decorator
vue-ts-element-webpack/vue-ts		vue-ts-element-webpack/vue-ts
vuex-module-decorators		vuex-module-decorators
webpack		webpack
前端百题斩		前端百题斩
大前端宝典		大前端宝典
LICENSE		LICENSE
README.md		README.md
Vue属性装饰器.md		Vue属性装饰器.md
面试1.md		面试1.md

License

weekCodeing/WebFamily

Folders and files

Latest commit

History

Repository files navigation

WebFamily

Hi there, I'm Jeskson! 👋

⚡ Technologies

📚1024bibib.com文章

📚力扣 (LeetCode)题目

📚ES6篇

📚掘金文章

📚😋Java文章

📚文章

🚩其它

技术论坛

打包工具

webpack 辅助工具、Loader 和插件

基础框架

框架

react 相关库

跨平台技术

基础组件库

包管理器

babel

前端解决方案

构建工具

脚手架

重学前端

数据可视化

日志记录心得

web前端工作内容

意见反馈

勘误及提问

参与贡献

License

About

Topics

Resources

License

Stars

Watchers

Forks

Languages