前端成长必经之路

核心 js css compontent 模块化
适配手机响应式rem

前端成长必经之路

2

0:42 30789988 1-1课程导学.mp4

组件化思维与技巧京东金融实战

WebComponents

课程特色组件化的思维方式及项目设计组件化和模块化不仅仅是JS也包括CSS如何将项目做出亮点，面试又该如何表现学会独立构建一个项目，做到独当一面

业务开发流程回顾技术选型分析工程构建安装项目设计及原理分析

0:32 117908628 2-1环境及知识准备.mp4

业务开发流程
技术选型
业务开发
测试验证
发布上线

0:39 63848462 3-1 技术选型分析.mp4

02:3技术选型分析构建工具MVVM框架选择模块化设计自适应方案设计代码维护及复用性设计的思考

gulp grunt 前俩分配管理 webpack fis prepack rollup

构建工具1、构建工具有哪些gulp grunt webpack fis prepack rollup2、为什么要构建工具资源压缩静态资源替换≤模块化处理编译处理3、我们用哪个构建工具webpacknpm scripts

0:39 66213043 3-2 工程构建安装.mp4

技术选型分析代码维护及复用性设计的思考产品迭代需求变更Bug定位新功能开发

https://github.com/cucygh/JDFinance

下载代码
git clone git@github.com:cucygh/JDFinance.git
安装调试
cd JDFinance
npm install
git checkout setup
npm start
测试验证
是不是安装正确
ESlint是不是能检查代码格式
是不是能编译Vue、ES6
是不是能编译scss和css
修改代码后浏览器能不能自动刷新 css模块化是不是正确

https://github.com/wuufeii/JDFinance.git

项目设计与原理分析CSS模块化设计JS组件设计自适应SPA设计构建设计上线指导

项目设计与原理分析CSS模块化设计1、设计原则a、可复用能继承要完整b、周期性迭代2、设计方法a、先整体后部分再颗粒化b、先抽象再具体

优秀的代码是模仿出来的

优秀的代码是设计出来的

优秀的代码是重构出来的

CSS模块化设计设计方法a、先整体后部分再颗粒化业务功能布局页面

CSS模块化设计 设计方法a、先抽象再具体

CSS模块化设计reset.scsslayout.scsselement.scss

@mixin @include reset.scss layout.scss element.scss

0:37 89007800 4-1 css模块化设计.mp4
0:41 51991815 4-2 css模块化设计（代码）.mp4
0:38 70218189 4-3 js组件化及自适应mp4.mp4

JS组件设计 设计原则a、高内聚低耦合b、周期性迭代

JS组件设计 设计方法a、先整体后部分再颗粒化

b、尽可能的抽象

项目设计与原理分析自适应1、基本概念a、CSS像素、设备像素、逻辑像素、设备像素比b、viewportc、rem

2、工作原理a、利用viewport和设备像素比调整基准像素b、利用px2rem自动转换css单位

https://github.com/jawil/blog/issues/21

自适应基本概念b、viewport-width：控制viewport的大小，可以指定的一个值，如600,或者特殊的值，如device-width为设备的宽度（单位为缩放为100%时的CSS的像素）。- height:和width 相对应，指定高度。- initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。-maximum-scale：允许用户缩放到的最大比例。-minimum-scale：允许用户缩放到的最小比例。-user-scalable：用户是否可以手动缩放

0:38 73420868 4-4 spa设计.mp4

SPA设计1、设计意义a、前后端分离b、减轻服务器压力c、增强用户体验d、Prerender预渲染优化SEO

history hash api

1 2 3 4 5

0:44 7102685 4-5 构建工具及上线指导.mp4
0:34 114873300 5-1 首页-抽象组件设计.mp4

0:29 140096658 5-2首页-抽象组件设计.mp4

0:25 155186257 5-3 首页-header组件.mp4
0:15 202468177 5-4 首页-slider组件.mp4
0:41 54838443 5-5 首页-slider组件bug修复及总计_213053.mp4
0:43 20245234 5-6 首页-新手特权（1）.mp4
0:43 27960396 5-7 首页-新手特权（2）.mp4
0:18 179418077 5-8 首页-新手特权（3）.mp4
0:36 89946490 5-9 首页-新手特权（4）.mp4

0:23 159051126 5-10 首页-极速借贷-理财精选（1）.mp4
0:39 57311399 5-11 首页-极速借贷-理财精选（2）.mp4
0:35 90961584 5-12 首页-极速借贷-理财精选（3）.mp4
0:20 167688600 5-13 首页-新品推荐.mp4
0:30 122710921 5-14 首页-生活服务.mp4
0:18 181272512 5-15 首页-公司信息.mp4
0:27 147421682 5-16 首页-导航条.mp4

0:15 186702748 6-1 理财（1）mp4.mp4
0:30 126315873 6-2 理财（2）.mp4
0:22 167055026 6-3 理财（3）.mp4
0:25 152882575 7-1 白条（白条福利）.mp4
0:29 129718106 7-2 白条（更多服务）.mp4
0:11 237831952 8-1 众筹-轮播图.mp4
0:39 61205335 8-2 众筹-每日签到.mp4
0:27 150872515 8-3 众筹-in推荐（1）mp4.mp4
0:11 217321302 8-4 众筹-in推荐（2）.mp4
0:32 116077792 8-5 众筹-更多福利.mp4
0:35 95145885 9-1 活动页（1）.mp4

文案图片居中等比缩放按钮

0:34 104377579 9-2 活动页（2）.mp4

0:20 175451756 10-1 上线指导.mp4

上线指导生产构建合并、抽取、压缩、调试发布部署提交、部署、开启gzip压缩、更新CDN

生产构建style合并javascript抽取样式要从JavaScript中抽取出来压缩JS、CSS都要压缩调试开启sourceMap

上线日寸发布部署提交使用Git提交代码，管理线上版本部署php、java等从git仓库拉取代码，通过小流量、跨机房、全量部署开启gzip 开启gzip压缩更新CDN不要忘了更新cdn

0:44 15552782 12-1 面试回顾.mp4

面试回顾同学做过哪些项目啊….…为什么用这样的框架呢.….在项目中的角色是什么？解决过哪些难题.….通过这个项目学到了什么……

0:42 50354333 12-2 面试分析.mp4

面试分析二面在考什么?项目要怎么准备?项目该怎么介绍?沟通有哪些技巧?

pr面试官 引导自己长处。。。

q2

二面在考什么?技术深度架构能力项目经验

面试分析项目要怎么准备?1、梳理历史项目2、打造一个较满意的项目3、问答设计4、更多思考

项目该怎么介绍？项目背景项目收益项目设计项目总结

沟通有哪些技巧?强逻辑要谦虚知进退善总结

0:43 21977780 12-3 面试演练.mp4

面试知识点与技巧面试演练为什么选择Vue框架?Vue的双向绑定是如何实现的?有没有使用CSS Module，基本原理是什么，Vue该如何做?开启CSS Module之后如何使用第三方样式库?

Vue的安装包有几个版本，遇到问题如何解决的?

面试演练为什么选择Webpack构建工具？项目是如何使用Webpack的?dev-server的原理是什么?有没有实现一个webpack的loader?如何做任务管理的？

面试演练你的项目有什么特色?解决过什么问题，怎么解决的？用的什么技术方案?你对自己的项目是否满意，有改进空间吗?如果这个项目现在让你重新设计，你会怎么思考?

面试演练自适应方案应该怎么做，原理是什么rem和em的区别前后端分离是如何做的?前端的路由是什么原理

项目设计如何抽象设计组件?如何设计模块化?如何独立构建项目?如何上线?

0:43 22432990 13-1 课程总结.mp4

方案原理最完美的自适应方案如何做?路由的工作原理?Vue的相关用法