一、SMS项目
项目描述:
工作内容:
1.HTML结合css完成静态页面编写,页面布局,高度还原设计图;
2.JavaScript语言配合angularjs框架,添加交互效果,数据渲染(数据绑定),完成业务逻辑开发;
3.ajax+json($http服务)与后台进行数据交互;
4.requirejs实现模块化开发,按功能划分模块;
5.grunt打包编译;
6.ng-router路由系统,单页面应用;
7.promise处理异步请求,避免‘回调地域’
requirejs代码依赖和加载
git版本管理
bug调试
grunt编译发布
开发工具:webstorm
总结:这个项目是首次使用框架,对以下知识点有了很多的理解, 体会到了相对于jQuery, dom操作的便利,数据渲染的便利,
对双向数据绑定,自定义服务,依赖注入,控制器,MVC设计模式,前端路由,指令系统,事件委托机制,
对于如何把数据与视图的转换有了更多的经验;
二、Vision项目:
项目描述:
一站式全生命周期管理服务平台,提供“需求->开发->测试->发布->运维->运营”的端到端协同服务。
提供一个平台用于管理“需求”、“问题单”
因为这个项目是公司内部使用且不用考虑兼容性,所以几乎都是用的比较新的技术。
工作描述:
1.开发环境搭建(IDE配置,webpack配置,添加依赖包,mock server搭建,代理配置等等)
2.JSX语法结合ES6进行React组件开发
3.使用Redux,React-Redux实现组件间的通信及整个应用的状态管理
4.使用React-Router为应用添加动态路由
5.使用 Axios 从后台请求数据
6.通过redux-thunk中间件把异步请求和复杂业务逻辑抽离到action函数中处理,简化组件
7.通过ES6的模块功能解决组件和包的依赖关系
8.封装高阶组件优化代码,提高组件的复用性
1.开发环境搭建(IDE配置,添加依赖包,webpack配置,babel配置,mock server搭建,热加载,代理配置等等)
2.界面开发(编写react组件,redux状态管理,)
JSX语法结合ES6进行React组件及业务逻辑的编写
3.redux状态管理
4.react-router搭建项目路由
5.axios数据请求
当使用的redux-thunk之后,这个action就可以返回一个函数了,在这个函数里面我们就可以做异步的操作了。
6.通过es6的模块功能解决拼接组件和包的依赖关系
webpack打包编译
使用了Sass扩展语言来增强css,
使用了Sass的变量,嵌套,混合,继承,Mixin,函数等功能来提高CSS的便利性,复用性,可维护性
使用了CSS3的边框阴影,
项目测试阶段可以自己用node连接数据库进行接口对接和数据渲染模拟,测试功能模块 是否完善,逻辑处理是否正确。
项目测试阶段可以自己用node连接数据库进行接口对接和数据渲染模拟,测试功能模块 是否完善,逻辑处理是否正确。
cookie缓存机制,登录模块
登录模块通过localStorage缓存机制保存用户登录信息,节省带宽
装饰器优化
性能优化(定制shouldComponentUpdate)
es6常用语法
使用imoocForm高阶组件优化代码,
中间件机制
难点:
主要是redux的使用比较抽象,以及环境配置有很多莫名其妙的问题,最后通过反复阅读文档,查看报错信息,断点调试,抓包分析等方式定位问题,然后通过查看文档以及stackoverflow等论坛找到解决方法
很多技术是首次实践,遇到很多坑。state设计,拆分组件
react庞大的体系,react整个技术栈的使用上,感觉到难度
你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系。想要发挥它的威力,整个技术栈都要配合它改造。你要学习一整套解决方案,从后端到前端,都是全新的做法。
总结:
通过这个项目,对前端工程化,组件化开发,等前端领域的新概念以及新技术等都有了一个具体的照面,实践经验,
对中间件,高阶组件等概念的实践,更加深刻地理解了JavaScript编程语言,掌握了一系列提高开发效率的方法。
react, redux,react-router,webpack,中间件,高阶组件,flux架构,函数式编程,虚拟dom,diff算法,性能优化
Flux数据流动方案