2018-12-03-2

 一、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数据流动方案

你可能感兴趣的:(2018-12-03-2)