前言
印象最深的就是模块化设计,自适应方案,SPA设计的讲解以及webpack如何自己构建的方法和思想。
自适应方案设计和CSS模块化绝对是特色内容。
组件化的现状
组件化缺乏方法论。组件化没有严格的定义。虽然大家都在用框架,但什么情况下定义一个组件,什么情况下不定义一个组件,缺乏方法论。
组件化的设计不合理。组件划分过细,组件数量很庞大;组件数量少,导致项目的抽象设计和复用性设计达不到理想的效果。
组件化的战斗力体现不足。我们开发的目的是:让开发的敏捷度更高、开发效率更高、复用性设计、业务开发的组合能力更强,给团队带来更大的战斗力。如果组件化的设计不合理,就...
本项目特色
组件化的思维方式及项目设计
组件化和模块化不仅仅是 js,也包括 css。
如何将项目作出两点,面试又如何表现
学会独立构建一个项目,做到独当一面
本项目内容
业务开发流程回顾
技术选型分析
工程构件安装
项目设计及原理分析
开发模块
首页开发
理财开发
白条开发
众筹开发
专题页开发(活动专题)
构建工具
项目收益
掌握CSS模块化技术及模块化设计
组件化的概念并不陌生,如何在一个复杂的项目中把组件化设计的灵活才重要
学习项目和vue的相关用法
学习前端项目的自动化构建
项目的开发环境及版本
前端行业里,最常用的技术栈是:HTML5/CSS3 + ES6 + vue/react + Webpack + Sass。
运行环境
1、nodejs:Node 8.9.1。建议使用 nvm 管理 Node版本。
nvm 的windows版:https://github.com/coreybutler/nvm-windows
nvm 的 mac 版:https://github.com/creationix/nvm
2、 Git。
Git简易基础:http://www.bootcss.com/p/git-guide/
3、chrome:v62+
4、Webpack 3.10.0。
- Webpack中文文档:https://doc.webpack-china.org/
构建环境
1、Webpack 3.10.0
2、npm scripts
3、babel。babel
是ES6必备的工具之一。
编辑器
1、Atom。
2、ESLint。代码的质量和规范检查的工具。
在Atom中可以安装如下插件:
linter-eslint
:语法检查Atom Beautify
:代码格式化
Emmet
:快速完成html的输入Snippets
快速生成 js 代码片段。
相关基础知识
1、ES6。
2、Sass。
3、Vue.js
业务开发流程
业务开发流程包括以下四个方面。
技术选型
1、构建工具:
构建工具包含;gulp、grunt、webpack、fis、prepack、rollup。
gulp、grunt、webpack三者的区别:
gulp或grunt:本质是做任务的分配和管理。webpack:本质是做编译和打包。
gulp或grunt编译的时候,其实还是调用的Webpack。
grunt比gulp问世要早。现在基本是用的gulp,因为gulp是做流处理,不会频繁的写文件和读文件。
fis
:是百度内部推荐的构建的集成方案。
prepack
: facebook的代码优化方案。有一些局限性,可以关注后续的动作。
rollup
:和prepack类似。但是现在webpack中也加入了rollup的功能。
为什么要用构建工具:资源压缩、静态资源替换、模块化处理、编译处理。(如果人工来做这些事情,会很繁琐,显然要用构建工具)
本项目用什么构建工具:用Webpack
做编译打包,用npm
scripts
做任务管理(可以对比下gulp)。
2、MVVM框架选择:
如果大家都是后端出身的,可以考虑用Angular。
看框架的作者维护的热度。如果框架本身有问题,首先需要他们来维护。
看业务是能达到业务和性能的要求。
3、模块化设计
CSS模块化设计:
20180308_1101.png
比如,两个按钮,都用了一个className。比如,代码怎么复用。
JS模块化设计:
20180308_1106.png
比如:
common.js
放账号登录的信息,这个是整个公司所有的大项目通用的。layout.js
:抽象出来的布局。给子类 page1 和 page2用。
4、自适应方案设计:
20180308_1110.png
如何用一套代码,让一份设计稿,在不同的浏览器上有相同的体验。
5、代码维护及复用性设计的思考:
需求变更
产品迭代
bug定位
新功能开发
业务开发
测试验证
发布上线
工程构建安装
下载工程文件
项目地址:https://github.com/cucygh/JDFinance
安装调试
(1)在node环境下,安装项目所依赖的package:
cd JDFinance
npm install
如果安装的很慢,可以使用淘宝的镜像。
(2)切换到setup分支:
git checkout setup
本项目所有的模块(setup、home等模块)都用分支管理。
(3)启动服务:
npm start
目的是:通过浏览器访问当前的页面。效果如下:
20180308_1145.png