一、阅读以下库
目前就想到这些,可以好好看一看原理,自己实现一下
- clipboard.js
- 复制粘贴库
- 能够实现点击一个按钮直接 copy 文字
- jquery.js
- jQuery 库
- 提高写原生项目的效率,$ 方法取元素更方便
- jquery.lazyload.js
- 懒加载库
- 图片懒加载时直接给它加一个 class=’lazy’ 即可
- swiper.js
- swiper 库
- 特别适用于移动端,可以做轮播、手势滑动
- axios.js
- axios 请求库
- 看一看拦截器怎么用
- masonry.js
- 瀑布流库
- 看一看怎么用
-
二、做几个实用的组件
原理就是提前写好 CSS 和 JS,使用时直接按使用方法复制 HTML 即可
栅格系统
- 轮播
- 分页
- 模态框
- Tab 切换
- 懒加载
- 瀑布流
- 木桶布局
- 点击回到顶部
- fullpages 全屏滚动
- 面包屑
- tips 提示框
可以参考这些一下组件体系比较完善的库,模仿着做
- Bootstrap:https://getbootstrap.com/
- Element:https://element.eleme.cn/
- Ant Design:https://ant.design/index-cn
2020/11/23 更新
目前简单做了这几个
- modal —— 模态框
- tooltip —— 气泡提示框
- suspension —— 悬浮框
还需要做
四、做几个有意义的项目
- 做一套原生 UI 组件库(Chax UI)以及 React 版(chax-react)、Vue 版(chax-vue),并持续更新
- 使用 WordPress 搭建一个博客系统
- 使用 Node.js 搭建一个博客系统
- 使用所学的前端、后端知识搭建一套电商系统,有用户展示页,也有后台管理页
「@浪里淘沙的小法师」