开发流程
- 技术选型分析
- 构建工具
- 资源压缩 静态资源替换 模块化处理 编译处理
- gulp （任务管理，文件操作：流式，读一次，然后内存写入）
- grunt （任务管理，文件操作：输入输出，先读取，再写入，重复循环）当项目复杂后，IO效率就非常低
- webpack (编译，打包)
- fis （百度）
- prepack （脸书，及时编译工具，无DOM,BOM）
- rollup
- MVVM框架 (作者对Bug的处理速度)
- 原理能不能吃透
- Vue
- React
- Ag
- 模块化设计
- css
- js
- 自适应方案
- 一份代码，多设备适配
知识点
1、基本概念
- CSS像素、设备像素、逻辑像素、设备像素比
- viewport
- rem
2、工作原理
- 利用viewport和设备像素比调整基准像素
- 利用px2rem自动转换css单位
彩蛋：关于layout viewport ，visual viewport和 ideal viewport的区别：https://www.cnblogs.com/2050/p/3877280.html
- 代码维护及复用性设计
- 需求变更
- 产品迭代
- Bug变更
- 新功能开发
- 工程构建（业务开发）
- 测试验证
- 发布上线
CSS模块化设计
- 设计原则
- 可复用可继承要完整
- 周期性迭代 （根据项目要求来设计，重构，模仿）
- 设计方法
- 先整体后部分再颗粒化
- 先抽象再具体
JS模块化设计
- 原则
- 高内聚，低耦合
- 周期性迭代
- 方法
- 整体-部分-颗粒化
- 尽可能抽象
SPA设计
- 前后端分离
- 减轻服务器压力
- 增强用户体验，减少等待时间
- Prerender预渲染优化SEO
- 工作原理
- History API 优雅
- Hash 兼容性
<a href="" class="api a">a</a>
<a href="" class="api b">b</a>
<script type="text/javascript">
// 注册路由
document.querySelectorAll('.api').forEach(item=>{
item.addEventListener('click',(e) => {
e.preventDefault();
let link = item.textContent;
window.history.pushState({name:'api'},link,link);
}, false)
});
// 监听路由
window.addEventListener('popstate',(e) => {
console.log({
location:location.href,
state:e.state
});
}, false);
<a href="" class="hash a">a</a>
<a href="" class="hash b">b</a>
<script type="text/javascript">
// 注册路由
document.querySelectorAll('.hash').forEach(item => {
item.addEventListener('click', (e) => {
e.preventDefault();
let link = item.textContent;
location.hash = link;
}, false)
});
// 监听路由
window.addEventListener('hashchange', (e) => {
console.log({
location: location.href,
hash: location.hash
});
}, false);
</script>
Demo
- 需求分析
小知识点
- 优先使用背景图插入图片
- 没有数据驱动，而且复用次数低，复杂度过低的可以不抽象成组件
- APP页面使用flex布局的重要性
生产构建
抽取
npm run build
压缩
webpack文档
npm install uglifyjs-webpack-plugin --save-dev
cssloader ?minimize
发布部署
彩蛋：Atom推荐插件
随时随地看视频
