正儿八经 - 资深Java/React工程师

浪起来？技术博客与求职信息

0%

发表于 分类于

google的十大真理

金山-梦想与野心。

金山区别于其它中关村企业最核心的地方，金山是一家有野心的公司。

发表于 分类于

求伯君自己成功的经验三点：

  1. 天赋
  2. 个人的不懈努力
  3. 机遇，遇到了一个时代和一些人

发表于 分类于

背景

近段时间较焦虑， 因为职业生涯的第一个5年到了，但是回过头来看自己走过的这5年，倒是经历了很多捶打，个人成长了很多，但是在技术层面并没有多少成长，些许恐慌才下脑头又上了心头。对自己的未来没有把握太可怕了，所以要好好想想自己未来的路了。

开始思考

了解了腾讯、阿里的职级，本来以为职场发展的这条线够用了，直到看到了吴老师的《硅谷来信》，里面有关于职场上的内容，让我对职业层级有了更广阔的认知，对我触动很大，在此简单做的记录。

小结

对自己的标准会不由自主的降低以适应这个环境，减少自身与环境的冲突，在一个低标准下，自觉‘满意’的度过每一天

发表于 分类于

首先解释一下啊 ，这儿的猫头鹰表示，晚睡晚起一族，当然我就是晚睡晚起一族，那为什么我还要说我希望呢，因为我想实现的是文章中对猫头鹰的定义，很显然我还没达到那种境界，所以是希望。

文章中的这句话是需要划重点的。这就是我的目标，哈哈哈哈…虽然俗语说”早睡早起，健康、聪明又富有”，但有一项研究表明，”猫头鹰”跟”百灵鸟”一样健康，一样聪明，甚至更加富有。

其实从文章中我们可以提取到几点信息。

  1. 别听风就是雨的，实践见真知。
  2. 外国人挺闲（褒义）的，在我看来虽然不是什么高大上的课题，但是比我们所谓的国内专家靠谱多了，别人的出发点是探索，探索才能减少无知。
  3. 外国人看世界都是带着疑问、好奇、较真、求知的想法的，相比这一点我们国人太容易一刀切，这就是我认为当前我们的国人在认知上和欧美people最大的差距。
  4. 所谓实践见真知，是基于各种实验各种样本数据而得出的，不是你去炒了个番茄炒蛋，就能得出这应该是个荤菜的道理。

名词解释

百灵鸟

表面解释：早睡早起，深度解释请看文章。

猫头鹰

表面解释：晚睡晚起，深度解释请看文章。

发表于 分类于

最近生育基金的事闹得沸沸扬扬，更有甚者，江苏的《新华日报》携手，南京大学长江产业经济研究院 刘志彪、张 晔两位砖家，发表了不但应该缴生育基金还他么说了不生就只要老了才能取。

我就想说，这两位究竟平时吃什么，大脑那么奔放。我觉得马光远先生评论改事件的时候有句话很到位，“老百姓不是负责交税和交配的”

基本的问题是什么，自己心里没点数么？光让生不用养吗？养得起吗？养得好吗？能养活吗？

  1. 房价？光知道贷款、卖地，搞GDP有毛用啊，老百姓得到了什么？正经住的地方都没有还生？
  2. 孕妇权益？孕妇敢怀孕吗？一怀孕就失业。产假够么？报销能到位么？医院收么？
  3. 教育？都拿来盖房子,有盖学校的地么？幼儿教育规范么，有监管么？各种补习班开着，学校干嘛的？各种作业交给家长，老师干嘛的？
  4. 医疗？医疗设施跟上了么，有监管么？孕妇体检能保障么？生孩子能保障吗？
  5. 对企业的税收有考虑放松么？政策有考虑放宽么？企业紧巴巴，员工能好过么？

…….

一大堆根本上的问题不出方案，这种拍马屁不要脸的舔着上。

发表于 分类于

刚好这段时间对接其他产品，刚好处理了一下跨域的问题，借此机会稍微更加了解一下跨域(Cross-origin resource sharing)。

搬运搬运…

首先什么是同源策略？

同源策略是一种Web浏览器安全性机制，旨在防止网站相互攻击。

同源策略限制一个源上的脚本访问另一源的数据。源由URI方案，域和端口号组成。

同源策略是一种限制性的跨域规范，它限制了网站与源域外部资源进行交互的能力。起源于多年前的策略是针对潜在的恶意跨域交互（例如，一个网站从另一个网站窃取私人数据）做出的响应。通常，它允许一个域向其他域发出请求，但不允许访问响应。

同源策略它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指”协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

1
2
3
1.) Cookie、LocalStorage、IndexedDB 等存储
2.) DOM查询
3.) AJAX 请求

但是有三个标签是允许跨域加载资源：

1
2
3
4
5
<img src=XXX> 

<link href=XXX>

<script src=XXX>

常见跨域场景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
URL                                      说明                    是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js         同一域名，不同文件或路径           允许
http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js
http://www.domain.com/b.js         同一域名，不同端口                不允许
 
http://www.domain.com/a.js
https://www.domain.com/b.js        同一域名，不同协议                不允许
 
http://www.domain.com/a.js
http://192.168.4.12/b.js           域名和域名对应相同ip              不允许
 
http://www.domain.com/a.js
http://x.domain.com/b.js           主域相同，子域不同                不允许
http://domain.com/c.js
 
http://www.domain1.com/a.js
http://www.domain2.com/b.js        不同域名                         不允许

跨域解决方案

1、 通过jsonp跨域
2、 iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

比较抱歉的是我只用过nginx代理跨域、跨域资源共享（CORS）、WebSocket协议跨域…。

什么是CORS（跨域资源共享）？

在大多数情况下，在用户浏览器中运行的脚本仅需要访问源相同的资源（请考虑首先对服务JavaScript代码的同一后端进行API调用）。因此，JavaScript通常无法访问其他来源的资源，这对安全性而言是一件好事。但是有些情况下需要跨域请求的。例如，不同系统间的一些对接。解决该问题就需要实现CORS，跨域资源共享（CORS）是一种浏览器机制，可实现对位于给定域外部的资源的受控访问。

CORS如何运作

如果不需要cookie的话，整个CORS通信过程都是浏览器自动完成的，前端不需要做额外的编码。浏览器一旦发现请求跨源，就会自动添加一些附加的头信息，复杂请求还会多一次预检的请求，但我们是不用感知的。因此，实现CORS通信的关键是服务器开启CORS。

参考

本文引用的内容，如有侵权请联系我删除，给您带来的不便我很抱歉。

发表于 分类于

网上关于React的内容一抹多，我就不献丑了，我简单记录一下，主要是一些编程中不太注意的的点。

React

A JavaScript library for building user interfaces。React是MVC中作用于V的一种库，需要注意它不是一个框架只是一个库。

reacts to state changes，react是对页面状态变化做出反应的意思。

Component

Component is A piece of the UI，React App is Tree of component。组件的概念其实之前就有不过我是从React才开始了解的，即把一个前端应用拆分为一个个的组件。

React.createElement()

没看到有用React但是为什么还需要import React？

因为是JSX到JS这样编译后是需要React.createElement来创建元素的，所以需要引入

1
2
3
4
5
// This JSX:
React.render(<div id="msg">Hello World!</div>, mountNode);

// Is transformed to this JS:
React.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);

JSX

JavaScript XML

Why can’t JSX write If-Else

因为 JSX 只是函数调用和对象创建的语法糖，像一下的代码编译后是不合法的JS，没法识别。

1
2
3
4
5
 // This JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>

 // Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

Arrow Function

为什么箭头函数可以提代bind(this)，首先是因为JS中的一个实验特性Static class fields and private static methods，一个箭头函数没有它自己的 this，不过他使用的是封闭的执行上下文的 this 值。箭头函数在词法上绑定它们的上下文，所以 this 实际上指向最原始的上下文。

所以有个点我们需要明白，bind不是react要求的，而是因为JS的this对象的指向问题导致的。

bind(this)延伸阅读：react-binding-patterns-5-approaches-for-handling-this

setState

它接受一个对象或者函数作为参数，如果你想在 setState 之后使用新的 state 来做后续运算就需要使用到函数。

state 和 setstate：为什么不用直接用this.state.xxx=xxx;而必须用setState才能修改state，因为如果用this.state.xxx=xxx,React无法知道你修改了状态，所以需要调用setState通知到React你修改了状态，然后React会走它那一套更新状态的步奏。

props vs state

共同点：都可以决定组件的行为和显示形态。

react-state-vs-props-explained：

state可以理解为函数的局部变量，所以外部是不能访问和修改的，只有内部能维护。

props它是组件间对话的方式，让外部（父组件）数据和行为传入组件（子组件）内部达到更新内部组件的目的。

controlled vs uncontrolled

简单的理解了一下，受控组件这儿受控其实指的是通过props来控制data，非受控通常说的是自己内部维护data，大多数情况下我们都用的是受控组件

What are controlled components and uncontrolled components?

lifecycle hooks

延伸阅读：