来篇博文求指点(涉及 网络安全,React ReactCSSTransitionGroup,域名,求大神指点)
发布于 9 年前 作者 Tonyce 4651 次浏览 最后一次编辑是 8 年前 来自 问答

Fuck Experience,项目慢慢来

项目应经开始了一周了,进度是比较慢。而且项目的结构也是随着做的时候另外想的:这样有个好处是不必再想好后开始,同样也有个很大问题是:结构混乱,没有整体规划,一个新冒的点子或想法就推翻了之前几天的工作。昨天就遇到了:因为知识盲点,而导致三天的工作就全部重来。所以,一般项目,尤其是企业团队项目一定得先规划好,再三讨论。确定了就别再改了,不然成本相当大。(自己玩的就随便啦)。

这篇没有什么新的知识点,就简单记下自己在做 Fuck Experience 项目时的不大了解的东西或者坑。

首先是 React 的动画使用。感觉这是一个坑。

自己现在在使用 ReactCSSTransitionGroup 过程中感觉中感觉:React 提供的这个动画并不是很好,首先是没有很明确的文档。一些用法根本无法查文档。看源码倒是一种方案,但是如果这样的话,感觉还不如自己定义 css 3.0 动画来的更快。还有就是动画中的组件的状态,感觉在动画切换过程中,state是无法访问的。因为在动画执行过程中,state 里的东西都是undefined,但UI还在使用,这时候就会造成错误,和崩溃。我的做法是新定义一个变量,并且在render中有如下代码:

	···
	render() {
		let a = this.state.arr ? this.state.arr : []
		return(
			···
		)
	}
	···

这样会解决上述问题,但感觉还是不好。也就先这样用了。自己对 ReactCSSTransitionGroup 的用法了解还不是很多,也希望大牛能给些建议。谢谢。

另外是单页面OAuth的问题。

Fuck Experience 期初就是以模仿Google IO 2015为目标开始的。所以很多都想做的跟 Google IO 2015 一样或类似。当时在做Github OAuth登陆时就一直想:单页面要怎么完成认证登陆?因为OAuth是必须有一步页面跳转的,单页面跳转出去的话,难免感觉怪怪的,所以就想Google是怎么做的呢,能这么的快速顺滑的登陆?

去想了。总归是会有答案的:Google是不是通过监听cookie或其它能设置在本地的东西来进行登陆的呢?后来经过在 Google IO 2015 下反复的登陆和 clear cookie 后得出:Google IO 2015 就是监听了本地的某些东西,不然我clear cookie 她也不会就退出了。后来便顺着这个思路,在OAuth认证的时候打开一个新的页面,OAuth认证的过程全部在这个页面里实现,认证完成之后设置loaclStore和完成一些cookie或其它的设置并自动关闭这个页面(window.close())。期初是想着能不能监听cookie。stackoverflow上有网友说是可以,在MDN上也有相关API的叙述,可是无奈于自己的愚笨,没理清。所以就使用了localStore,这个比较简单的监听。最后效果还是粗糙的有了,在这里也希望大牛能给些指点。

另外还有就是整个安全问题。首先是http要换成https就不多说了。另外就是感觉自己的现在写的cookie设置跟验证也存在很多问题。简单说一下,希望能得到大牛的指点。

现在就是开启一个新的页面,做了OAuth认证,成功之后,设置本地cookie,和一些信息到本地cookie(方便单页面那里读取),然后设置localStore用于单页面的监听。这样以后跟服务器的通信便有了cookie。自己还不太懂这方面的知识。也希望得到大牛的指点和建议。谢谢。

还申请个域名:www.tonyce.top。这里谢谢 @凡熊 。这里也有个问题就是在浏览器中直接tonyce.top 是找不到服务器的,并需得有www。上图:

<img style=“width: 90%” src=“http://7o4yzj.com1.z0.glb.clouddn.com/屏幕快照 2016-01-24 下午5.48.20.png” /> <img style=“width: 90%” src=“http://7o4yzj.com1.z0.glb.clouddn.com/屏幕快照 2016-01-24 下午5.49.13.png” /> <img style=“width: 90%” src=“http://7o4yzj.com1.z0.glb.clouddn.com/屏幕快照 2016-01-24 下午5.49.39.png” />

希望大牛指点下。

现在暂时就这些。

如有纰漏和错误还请指正。谢谢

附上demo 和 Github
Fuck Experience ps:js使用UglifyJs 还有290+k 。也希望得到指点。
GitHub

文章比较糙。还望多包涵

8 回复

地址已改成 tonyce.top 将记录修改成@就好了

@leapon 为什么?

@Tonyce f word, four letter word

我用react都是自己写css3动画。。然后通过 className={this.state.animClass} 这样来控制的= =

@gjc9620 恩 感觉还是自己写的来得更快些

回到顶部