阶段性技术啰嗦(二)

记得上次阶段性啰嗦是在5月份,转眼间,就到九月了,时间过的好快,又过得好漫长,两点一线的生活,充实的生活,也懒到了一定的境界,甚是乏累。今天公司网络升级改造,所以早早就回来,就想起写点啥,虽然经验少,肚子里没墨水也想挣扎一番。Let me see !

说下最近都在忙啥吧:
七月份开始一直到现在一直在弄Approve项目,推迟了上线时间,因为尝试用了React新框架,遇到的问题也挺多了,禅道的Bug可真不是一般的多的。所以,一直解决Bug中。负责这个项目的我们三个人就这么Coding。说到底,项目逻辑的复杂度不是一般的复杂。刚毕业那会工作,主要前端开发的一般偏向UI方面,所以,交互,数据方面一般处理的比较少甚至基本都是交于后端处理,这方面比较薄弱,经过以前的面试洗礼,有个面试官说,我们只要做JS交互方面的,才下定决心一定要坚持在这方向努力学习才行。不过,也很感叹,一开始以为切切图的码畜,原来常挂嘴里的切图,自从遇到了公司了一位设计转UI切图的资深女同事才发现,原来切图人家真的到了一定的境界,让我好生佩服。

说说最近的一些问题:
刚开始我们老大说项目重构,要用React,所以,很正常,很多人肯定没接触了,都要从0开始,毕竟,在Ag横行的年代,也是还是有一些牛逼的技术栈并行。记得6月份就说要用了,然后自己也看了FB官网的API,东西也不多,但是,React 只是负责V层面上的东西,伴随它有用的东西就一个stateprops, 以及一些生命周期,在React中,数据的流向是单向的,基于react + redux的模式开发配合着ES6(ES6很多东西写着确实不错,就那么些,Babel就帮你搞定了,加上Webpack可以把你代码转为兼容低版本的ES3或者是ES5之类的代码)就这么孕育而生。

Redux 官网
1
2
3
1. store 是应用的状态管理中心,保存着是应用的状态(state),当收到状态的更新时,会触发视觉组件进行更新。
2. container 是视觉组件的容器,负责把传入的状态变量渲染成视觉组件,在浏览器显示出来。
3. reducer 是动作(action)的处理中心, 负责处理各种动作并产生新的状态(state),返回给store。
nvm Github

我Mac是直接用了nvm进行node版本的控制,切换node版本的时候 是直接 nvm use 6.2.1 或者是 nvm use 4.4.5 之类的不同版本切换,如果需要用到的情况下。不过也有其他东西类似的版本控制。

ES6

历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6(亦称 ECMAScript Harmony,简称 ES6)终于在 2015 年 6 月正式发布。自从上一个标准版本 ES5 在 2009 年发布以后,ES6 就一直以新语法、新特性的优越性吸引著众多 JavaScript 开发者,驱使他们积极尝鲜。

阮一峰的《ECMAScript 6 入门》
InfoQ上的 《深入浅出ES6》

一般都是都是看这两个 比较全, 不过一般用到才去看下或者查下,一般常用的就是箭头函数,或者是解构或者是新增加的一些方法,比较方便,比如Object.assign() 项目里也用的比较多,

1
2
Object.assign(target, ...sources)
Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。

直接戳MDN

类似的字符串模板也不过 比如:

1
2
3
4
const names = `一喵呜`;
console.log(`${names} binjs.com`);
result: 一喵呜 binjs.com

1
2
3
4
5
Spread:
export function getSelCCuser(options) {
const { approveId, ...others } = options;
return httpUtil.post(`/api/approve/w1/approves/${approveId}/cc`, {...others} );
}
1
2
const { detail, name } = this,props
const { names } = this.state

还有比如,项目遇到一个前端模糊搜索匹配问题,想到正则比较麻烦,还好,想到ES6有includes() 这个东西,一切就好办了。

之类的 等等,还是不错的。

Ant-Design 官网

项目UI基于蚂蚁金服的ant进行组件开发,项目里需要用到一个抽屉组件,一开始,真不知道怎么搞,不过,最后不知道怎么纠结,最后,把抽屉小组件写了整合进ant项目里,发布到npm,供以后公司项目其他项目模块重构可以服用,不过蚂蚁金服确实很赞,但是还是也还是遇到很多问题,真的操碎心。

这几天,发现基于React Nactivemobile ant组件出来了,虽然没用过不过还是很好奇的。Mobile官网

之前Leader说一人写几个组件,然后因为组件要整合的太多,因为React都是很多一个个小组件,UI样式也没,最后就直接用蚂蚁金服这个来复用开发,还有类似的很多 比如: Amaze-UIMaterial-UI,但后面这两个确实不行。哈。

React 组件间的通信,纯粹自己理解就是:

1
2
1. 父级 --> 子级 : props
2. 子级 --> 父级: callback

lodash 官网

Approve项目还引入了一个工具库,算是对JS的一个扩充吧。有些API用着还是不错的。

Promise

Promise这个水好深,反正现在就是我只知道的理解就是异步的处理 ,then的类似回调。不过看了这篇文章还是太难过了。比较稚嫩 , 抽根烟先去睡觉。后面好好学习。 再做补充。

保存个书签:
Promise迷你书(中文版)
[翻译] We have a problem with promises

0%