think
think copied to clipboard
bytemofan
think in fe
最近帮助一个同学在调试问题的时候，`console.log()`的输出真的让我诧异了一把，因为它竟然会出现异步输出的情况，因而误导了我们的判断，找错了方向，耽误了很多时间，所以这里记录一下遇到的这个问题，加深印象。 #### 问题现象： 正常输出：  异常输出：  我们可以发现，异常输出的时候，没展开的时候，显示的name值是`Tom`，点击箭头展开对象里的name则是`Jack`，而且，此时的输出值`Jack`执行语句，明显是在赋值语句`obj.per.name = 'Jack'`之前调用的，展开的时候，却变成了`Jack`，明显有些异常，是不是很神奇？我刚遇到这个问题的时候，也是懵逼状态的。 为什么会出现这个异常输出呢？ #### 异常出现原因分析 在分析之前，我们得知道一点，JS中对象是引用类型，每次使用对象时，都只是使用了对象在堆中的引用。 当我们在使用`obj.per.name = 'Jack'`改变了对象的属性值时，它在堆中name的值也变成了`'Jack'`，而当我们不展开对象看的时候，`console.log`打印的是对象当时的快照，所以我们看到的`name`属性值是没改变之前的`'Tom'`，展开对象时，它其实是重新去内存中读取对象的属性值，所以当我们展开对象后看到的`name`属性值是`Jack`。 #### 浏览器或者可以说是开发者工具为什么会有这样的表现？ 这个问题在《你不知道的javascript中卷》第二部分异步和性能1.1节异步控制台部分有提及： >There is no specification or set of requirements around how...
我们使用ajax请求时，由于浏览器的[同源策略](https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy)的影响偶尔会遇到跨域的情况。通常我们有以下几种跨域的解决方案： - 设置document.domain - 通过有src属性的标签实现跨域（如：script, img, iframe等） - jsonp（其实也是利用了script标签的src属性） - navigator对象（ie6/7的iframe之间，navigator对象共享） - 跨域资源共享（CORS） - window.postMessage - WebSocket - window.name 详细跨域方式参考： [Web开发中跨域的几种解决方案](http://harttle.com/2015/10/10/cross-origin.html) [前端跨域问题及解决方案](https://github.com/wengjq/Blog/issues/2) [如何解决 Ajax 跨域请求不到的问题？](https://www.zhihu.com/question/19618769) 跨域方式有那么多种，但如果遇到以下场景，该怎么解决呢？ > 我在a站点，想要跨域访问b站点的某一个接口，而b站点的这个接口要成功获取数据需要在a站点发起请求的时候带上一些Cookie信息 在node端，我们是可以通过修改request的headers的Cookie信息来实现（代理转发），但在浏览器端，跨域请求是不会携带[Cookie](https://tools.ietf.org/html/rfc6265)的，但鉴于 Cookie...
我之前一直使用的React，最近到了新公司，需要使用Vue，虽然之前自己写过一些小demo，但是缺乏系统的学习，且之前自己看的vue1.x的内容，好多都过时了，现在补充一下vue2.x的相关知识。 ### 基础知识： - vue的生命周期： `beforeCreate/created`、`beforeMount/mounted`、`beforeUpdate/updated`、`beforeDestory/destoryed` - vue常用指令： `v-for`、`v-bind`（缩写形式`:prop`）、`v-on`(缩写形式`@click=’sss'`)、`v-if/v-else/v-else-if`、`v-model`、`v-once`、`v-html`、`v-show`... - vue自定义组件：`Vue.component(‘componentName',{ props:[‘p1’,’p2’], template: ‘{{ p1 }}' })` - vue常用实例方法和属性: `data/$data`、`methods/$methods`、`$el`、`computed`(计算属性)、`$watch`、`$set`、`$event`、`$emit`... - 如果需要更新的属性需要缓存，则使用计算属性的方式，否则可以使用`methods`里的方法来更新属性（`methods`里的方法每次重新渲染都会执行） - 计算属性默认提供了`getter`，你还可以给它设置`setter` - 当你数据变化是异步或者开销较大时，可以使用`watch`侦听器来响应数据的变化 - `v-bind:class`的值可以是一个对象，可实现类似`react`中`classnames`模块的功能 - 自定义组件上的`class`会被渲染拼接到`template`的根节点的`class`属性上（自定义组件上可使用`v-bind:class`来做class的判断显示逻辑）...
[什么是session?](#什么是session?) - [cookie的工作原理](#cookie的工作原理) - [session的工作原理](#session的工作原理) [如何使用session？](#如何使用session？) [什么是SSO？](#什么是SSO？) [SSO的原理是什么？](#SSO的原理是什么？) 最近在开发nodejs项目，使用到了express-session中间件，且需要对接公司的SSO，对接过程中，对session了解的不够深入，一定程度上影响了效率，遂在此做点总结，加深印象。 ### 什么是session？ session就是一次客户端和服务端的会话。 广义的会话是啥？也就是客户端发一次请求到服务端，服务端响应后给客户端一个回复，就完成了一次会话。 那么问题来了，我们知道，http请求是无状态的，也就是不做任何记录，那我下一次客户端请求服务器，这次请求和上一次隔得时间很短，且是同一个用户的请求，如果这个请求是登录的话，我们是不是就认为它们是两次会话，那是不是得登录两次？ 明显不可能是吧，那就需要我们记住请求的状态信息，把一段时间内的某些请求，认为是同一次会话。就像打电话一样，A打给B，接通后，聊了很多东西，直达挂断电话之后，这次会话才算完成。所以狭义的会话就是指： > 浏览器和服务端建立连接后，服务端会存储一个状态信息，只要这个存储信息还没有被销毁或者失效，那么会话就会一直持续，状态有效期内，无论发了多少次请求，都被认为是一次会话。 而这个状态信息怎么存储呢？用的就是session。 同样的，cookie也可以用来存储http状态，不过一般cookie是用于客户端存储用户信息的，session则是用于服务端存储用户信息的。一般来说，session是一个抽象概念，cookie才是实际存在的东西，session的实现需要借助cookie来实现（cookie禁用时，session可能会没法用，但也有其它办法实现，比如借助URL等）。 要了解session的实现，我们先来了解一下cookie的工作原理。 #### cookie的工作原理  如图所示，cookie是在服务端创建的，但保存在浏览器端。在cookie有效期内，后续的浏览器的请求就会带上对应的cookie，服务端识别cookie后就可以知道当前发起请求的用户是哪一个，而且，浏览器下次再次需要相同信息时，比如用户名什么的，可以直接从cookie里取得，而不用再次发起请求获取。 cookie有如下特点： - 每一个cookie文件大小超过4kb浏览器不识别 - 浏览器保存cookie的数量有限，至多300个 -...
https://medium.freecodecamp.org/the-12-things-you-need-to-consider-when-evaluating-any-new-javascript-library-3908c4ed3f49
### 吞吐率（Requests per second），缩写RPS 计算公式： ``` 吞吐率 = 总请求数 / 处理这些请求的总完成时间 Requests per second = Complete requests / Time taken for tests ``` 吞吐率是服务器并发处理能力的量化描述，单位是reqs/s，指的是某个并发用户数下单位时间内处理的请求数。 某个并发用户数下单位时间内能处理的最大的请求数，称之为`最大吞吐率`。 ### QPS、每秒查询率（Query Per Second） 计算公式：...
## Thirft是什么？ Thirft是一种接口描述语言与二进制通讯协议，它被用来创建和定义跨语言的服务。 服务端常用RPC的方式进行服务之间的调用。Thirft就是facebook为“大规模语言服务开发”而开发的一个服务端RPC调用框架。它通过一个代码生成引擎联合了一个软件栈，来创建不同程度的、无缝的跨平台高效服务，支持多种后端语言，例如：Java、Go、C++、C#、C、Python，PHP、NodeJS等等。 ### Thirft架构 Thrift包含一套完整的栈来创建客户端和服务端程序。顶层部分是由Thrift定义生成的代码。而服务则由这个文件客户端和处理器代码生成。在生成的代码里会创建不同于内建类型的数据结构，并将其作为结果发送。协议和传输层是运行时库的一部分。 有了Thirft，就可以定义就可以定义一个服务或改变通讯和传输协议，而无需重新编译代码。除了客户端部分之外，Thrift还包括服务器基础设施来集成协议和传输，如阻塞、非阻塞及多线程服务器。栈中作为I/O基础的部分对于不同的语言则有不同的实现。 Thirft的API CS架构图：  其中，黄色部分是用户实现的业务代码。 褐色部分是根据 Thrift 定义的服务接口描述文件生成的客户端和服务器端代码框架。 红色部分是根据 Thrift 文件生成代码实现数据的读写操作。 红色部分以下是 Thrift 的传输体系、协议以及底层 I/O 通信，使用 Thrift 可以很方便的定义一个服务并且选择不同的传输协议和传输层而不用重新生成代码。 ### Thirft定义接口描述文件时可使用的数据类型 - 基本类型 -...
React Native中组件通信方式有三种： - props - state - RCTDeviceEventEmitter RCTDeviceEventEmitter主要是用于完全没有直接父子关系的多个组件之间的通信。类似发布订阅模式的使用方式。 无论是接收方和发送事件的一方都要引入这个模块： ```javascript import RCTDeviceEventEmitter from 'RCTDeviceEventEmitter' ; ``` 发布一个事件： ``` RCTDeviceEventEmitter.emit('事件名',value); ``` 接收(订阅)一个事件： ``` componentDidMount(){ this.listener = RCTDeviceEventEmitter.addListener('事件名',(value)=>{ // 接受到通知后的处理 });...