codingmeup

7、请求相关

1

--- fetch --- 之前在项目中用到了这个fetch 来代替Ajax 进行网络请求。也踩了不少的坑，在这边列举出来以及他的解决方法。 ## 如何保持每次请求的会话一致 在用fetch进行网络请求的时候，发现每次请求到服务端的时候，他的sessionId 都是不一样的，后面排查原来是在请求的时候fetch默认是不会带上本地jsessionId，以至于服务端无法接收到，所以会重新创建一个新的session。 ```js 解决办法： var init = { credentials: 'include' // 请求带上cookies，是每次请求保持会话一直 ... } ``` ## 兼容性，支持IE10+、谷歌、火狐等 由于fetch是一个新技术，有些旧的浏览器对它并不支持，这时候要怎么兼容？ 解决办法： 引入一个额外的补丁es6-promise.js可以使它很好的支持IE9以上的版本，那IE8呢？IE8 需要改fetch.js源码才能支持 fetch.js...

21、第三方相关API接入

1

### 百度地图SDK接入指南 > 在自组网设备管理后台项目中，需要接入百度地图显示设备地理位置，在接入过程中遇到了地理坐标偏移的问题，故有此文。 ## SDK脚本引入 百度地图SDK是通过链接给出的，而不是npm package，所以不支持`require/import`，而只能通过``引入。 ### 静态引入 ```html ``` 如果在中加载（异步），要注意必须载入完成之后才能使用SDK。 缺点：页面载入时就加载脚本。 对于只有部分页面使用到地图的，可以使用动态加载的方式，即动态引入的方式 ### 动态引入 通过类似于[`scriptjs`](https://github.com/ded/script.js/blob/master/README.md)等工具可以方便的动态载入脚本，且能知道何时载入完毕。 但是百度地图脚本实际上是分成了两步加载的，请求脚本时，第一次请求到的脚本内容为： ```javascript (function () { window.BMap_loadScriptTime = (new Date).getTime(); document.write(''); })(); ```...

20、前端路由实现与 react-router 源码分析

1

## 一个极简前端路由实现 说一下前端路由实现的简要原理，以 hash 形式（也可以使用 History API 来处理）为例，当 url 的 hash 发生变化时，触发 hashchange 注册的回调，回调中去进行不同的操作，进行不同的内容的展示。直接看代码或许更直观 ```js function Router() { this.routes = {}; this.currentUrl = ''; } Router.prototype.route = function(path, callback) {...

19、移动Web

3

- 像素piexl相关 逻辑像素与物理像素的关系 px逻辑像素：浏览器使用的抽象单位 dp，pt物理像素：设备无关像素 dpr：设备像素缩放比 计算公式：1px = (dpr)^2 * dp iphone5的 dpr = 2； DPI:打印机每英寸可以喷的墨汁点（印刷行业） PPI:屏幕每英寸的像素数量，即单位英寸内的像素密度 目前，在计算机显示设备参数描述上，二者意思一致 计算公式：以iphone5为例：ppi = √（1136^2 + 640^2）/4 = 326ppi（视网膜retina屏） 注意：单位为硬件像素（物理像素），非px PPI越高，像素数越高，图像越清晰。但可视度月低（小），系统默认缩放比越大。 retina屏（高清屏）：dpr都是>=2。 - 视口viewport相关...

在JavaScript的学习中，我们经常会遇到JavaScript的事件机制，例如，事件绑定、事件监听、事件委托（事件代理）等。这些名词是什么意思呢，有什么作用呢？ 事件绑定 要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。 在JavaScript中，有三种常用的绑定事件的方法： - 在DOM元素中直接绑定； - 在JavaScript代码中绑定； - 绑定事件监听函数。 #### 在DOM中直接绑定事件 我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等。好多不一一列出了。如果想知道更多事件类型请查看，DOM事件。 ```js function hello(){ alert("hello world!"); } ``` #### 在JavaScript代码中绑定事件 ```js document.getElementById("btn").onclick = function(){...

### 区别 #### 12中也有说到 BFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。如何产生BFC？ float的值不为none。 overflow的值不为visible。 position的值不为relative和static。 display的值为table-cell, table-caption, inline-block中的任何一个。 那BFC一般有什么用呢？比如常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。 #### IFC(Inline Formatting Contexts)直译为"内联格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响) IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个ifc下的多个line box高度会不同。 IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。 那么IFC一般有什么用呢？ -...

10、PostCSS

3

### 1. 它本质上是一个什么东西？ #### 直观的理解为: 平台 我们直接用它，感觉不能干什么事情，但是如果让一些插件在它上面跑，那么将会很强大。css -> css parser -> plugin system -> stringify -> css ### 组成 - CSS Parset - CSS 节点树API - source map 生产 -...

什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入：、、、等dom标签，还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。 什么是同源策略？ 同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指”协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。 同源策略限制以下几种行为： 1.) Cookie、LocalStorage 和 IndexDB 无法读取 2.) DOM 和 Js对象无法获得 3.) AJAX 请求不能发送 常见跨域场景...

首先要分清的是，cookies，sessionStroage和localStorage是在客户端，session是在服务器端。服务器端的session机制， session 对象数据保存在服务器上。实现上，服务器和浏览器之间仅需传递session id即可，服务器根据session id找到对应用户的session对象。会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期。服务器session存储数据安全一些，一般存放用户信息，浏览器只适合存储一般数据其次，是cookies，sessionStroage和localStorage三者的区别 （1）cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。 （2）存储大小限制也不同，cookie数据不能超过4k，同时因为每次Http请求都会携带cookie（这里可能还会追问，cookie是在http报文什么地方，答:cookie是携带在http请求头上的），所以cookie只适合保存很小的数据，比如会话标识sessionStroage和localstroage虽然也有大小限制，但是比cookie大很多，可以达到5M； （3） 数据有效期也不同，cookie在设置的有效期（服务端设置）内有效，不管窗口或者浏览器是否关闭，sessionStroage仅在当前浏览器窗口关闭前有效（也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁）；localStroage始终有效，窗口或者浏览器关闭也一直保存； （4） Web storage 支持事件通知机制，可以将数据更新的通知发送给监听者。如下： window.addEventListener("storage", function (e) { alert(e.newValue); }); #### Web Storage带来的好处： 减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。 快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。 临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。