【探究】当页面关闭时,不同浏览器对尚未完成的异步请求如何处理? | GCidea's blog

作者:JerryXia | 发表于 , 阅读 (17)
目录1. 前言2. Chrome3. Firefox4. IE
前言  以使用$.ajax()方法发出一个异步请求为例,探究当执行完发出异步请求的同步代码但尚未执行异步回调的函数的时候,关闭浏览器,不同浏览器对此有何处理。并且,这个问题是因为看到了一种不规范写法而发现的—场景是,执行完相关保存任务(异步请求)后关闭当前页面。这种写法把window.close()相关代码却写在了$ajax()的外面(后面)。违背了在成功保存的回调内关闭页面的做法。
Chrome  现有逻辑下(window.close写在外面)这个ajax请求会被丢弃,用fiddler抓包,没有”../mktools/customized-template-page!save.action?random=”+ new Date().getTime(),这个请求。
Firefox  同chrome 。但是如果在$.ajax上打个断点,是可以看到请求发出去了的,也好理解,因为还没执行到window.close,未完成的请求不会被抛弃。
IE  IE 即便不打断点,现有逻辑下(window.close写在外面),请求依...阅读全文

JavaScript中对象属性存在性及相关检测方法总结 | GCidea's blog

作者:JerryXia | 发表于 , 阅读 (21)
目录1. 前言2. in操作符2.1. 语法格式2.2. 是否查找原型链2.3. 所查找的属性是否必须满足可枚举(enumerable:true)2.4. 其他说明3. obj.hasOwnProperty(attr)3.1. 语法格式3.2. 是否查找原型链3.3. 所查找的属性是否必须满足可枚举(enumerable:true)3.4. 其他说明4. for(var k in obj)循环4.1. 语法格式4.2. 是否查找原型链4.3. 所查找的属性是否必须满足可枚举(enumerable:true)4.4. 其他说明5. obj.propertyIsEnumerable5.1. 语法格式5.2. 是否查找原型链5.3. 所查找的属性是否必须满足可枚举(enumerable:true)6. Object.getOwnPropertyNames(obj)6.1. 语法格式6.2. 是否查找原型链6.3. 所查找的属性是否必须满足可枚举(enumerable:true)7. Object.keys(obj)7.1. 语法格式7.2. 是否查找原型链7.3. 所查找的属性是否必须满足可...阅读全文

使用SwitchyOmega和Charles配置统一的开发和生产环境 | GCidea's blog

作者:JerryXia | 发表于 , 阅读 (13)
目录1. 前言2. Chrome插件SwitchyOmega3. Charles Web Debugging Proxy
本文是客户端代理配置的几种常见方式的一部分内容,主要针对SwitchyOmega和Charles两种工具。
前言  代理服务器是开发过程中的常用工具。通过配置代理,可以统一线上线下环境,在开发阶段也访问线上地址,只不过将请求流量代理到本地服务器,这样便于调试。
Chrome插件SwitchyOmega  该插件可以通过Chrome应用商店进行下载,典型的配置过程如下:1.新建情景模式,选择“代理服务器”2.填写内容如下,也就是想要代理到的服务器地址和端口3.新建情景模式,选择“自动切换模式”4.根据项目需要配置响应的路由规则
这样,在Chrome中调试时候选择“auto switch”,对于相应地址的请求就会根据规则进行转发
Charles Web Debugging Proxy  有了SwitchyOmega,可以应对大部分使用场景。但是,考虑如下情况,SwitchyOmega就不能进行良好的配置了:
线上地址不是根路径,也就是说除了域名、端口号外还有...阅读全文

React开发框架Dva.js项目结构简单小结 | GCidea's blog

作者:JerryXia | 发表于 , 阅读 (24)
srcassets项目静态资源目录(图片等)
components无状态组件目录。根据react组件化的要求,该目录下的组件是根据具体业务逻辑进行合理划分,细粒度的无状态组件,业务相关的state交付上层容器组件管理。(当然,在具体实践中,该目录下的组件也可以维护少量的仅组件内部使用的状态,不涉及与后端的业务逻辑交互)
configs配置文件目录。项目中可能会有一些配置项,统一写在这里方便管理。
models状态model目录。项目所有状态管理均在此目录。对应是redux概念中的store。
routes路由配置目录。路由是单页应用中的重要概念。这里统一配置整个项目的所有路由状态。
servicesservices层目录。这里就是一个“服务”层,负责对后端接口数据的请求和处理。在这里主要可以做两件事:1.发出异步请求(此处不是直接发出,而是调用了下面的utils层的工具,为的是便于管理http全局状态)2.对该接口返回的数据做数据适配adaptor,因为后端接口的数据格式、字段名等往往不一定与前端对应,便可以在这里对其做数据适配。
utils工具函数层。主要是异步请求,全局...阅读全文

移动端HTML5响应式布局适配解决方案 | GCidea's blog

作者:JerryXia | 发表于 , 阅读 (24)
目录1. 前言2. 基本概念2.1. 物理像素(physical pixel)2.2. 设备独立像素(density-independent pixel)2.3. 设备像素比(device pixel ratio,即简称dpr)2.4. viewport2.5. PPI(Pixels Per Inch)2.6. DPI(Dots Per Inch)2.7. 倍率与逻辑像素3. 依赖库 lib-flexible4. 使用实践4.1. 引入4.2. 对于长度、宽度等“距离”的写法(less文件)4.3. 对于文字字号大小的写法(less文件)5. 源码、原理分析6. 手淘团队相关文献参考
前言  移动端适配是一个十分重要的问题。在移动端页面中,其布局和交互方式可能相比于PC端少一些,但是由于设备的多样化,其适配问题就必须多加关注。设备情况种类繁多复杂,从网上的几张图中足以看出:
基本概念物理像素(physical pixel)一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。
设备独立像素(density-indepen...阅读全文