首页

记录点滴,修炼自己。
0

PWA-渐进式Web应用探究

定义 Progressive Web Apps are experiences that combine the best of the web and the best of apps.They are useful to users from the very first visit in a browser tab, no install required.As the user prog

0

移动端HTML5响应式布局适配解决方案

前言  移动端适配是一个十分重要的问题。在移动端页面中,其布局和交互方式可能相比于PC端少一些,但是由于设备的多样化,其适配问题就必须多加关注。设备情况种类繁多复杂,从网上的几张图中足以看出: 基本概念物理像素(physical pixel)一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。 设备独立像素(density-inde

0

使用SwitchyOmega和Charles配置统一的开发和生产环境

本文是客户端代理配置的几种常见方式的一部分内容,主要针对SwitchyOmega和Charles两种工具。 前言  代理服务器是开发过程中的常用工具。通过配置代理,可以统一线上线下环境,在开发阶段也访问线上地址,只不过将请求流量代理到本地服务器,这样便于调试。 Chrome插件SwitchyOmega  该插件可以通过Chrome应用商店进行下载,典型的配置过程如下:1.新建情景模式,选择

0

React开发框架Dva.js项目结构简单小结

前言  本篇简单对Dva.js项目的工程结构进行说明,具体的概念,设计,文档,详见Dva.js官网 项目结构 mock属于前后端分离的一种实践,在后端接口未完全实现时,前端可通过mock数据的方式自测。 node_modules项目依赖采用npm管理,所以来包均在此目录。 srcassets项目静态资源目录(图片等) components无状态组件目录。根据react组件化的要求,该目录下

0

git merge 与 git rebase 的对比分析

相关概念  以下概念和示例参考http://blog.csdn.net/wh_19910525/article/details/7554489 背景假设现在基于远程分支”origin”,创建一个叫”mywork”的分支。$ git checkout -b mywork origin假设远程分支”origin”已经有了2个提交,那么新创建的mywork分支在现在未修改的状态下是和origin具有相

0

JavaScript中比较运算的详细总结

前言  在javascript开发中,比较操作是十分常见的。由于显式/隐式强制类型转换机制的存在,我们在使用比较运算时显得过于随意,也许表面上看并没有什么错误(比如在if()语句中判断两值相等时顺手就写成 == ),但是这可能会埋下很多不易发现的隐患。对于比较操作(相等关系和不等关系),在javascript中其实是有一套完善的机制的。本文依据ES5规范《ECMAScript Language

0

JavaScript中对象属性存在性及相关检测方法总结

前言  访问一个对象中的某个属性时,返回的结果可能是undefined,这有可能是本身该属性存储的值就是undefined,也有可能是该属性在对象中不存在。对此,就产生了判断属性存在性的相关问题和解决方法。 in操作符语法格式1234567var obj = { name : "Bob", age : 24};("name" in obj); //true("sex" i

0

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

前言  以使用$.ajax()方法发出一个异步请求为例,探究当执行完发出异步请求的同步代码但尚未执行异步回调的函数的时候,关闭浏览器,不同浏览器对此有何处理。并且,这个问题是因为看到了一种不规范写法而发现的—场景是,执行完相关保存任务(异步请求)后关闭当前页面。这种写法把window.close()相关代码却写在了$ajax()的外面(后面)。违背了在成功保存的回调内关闭页面的做法。 Chro

0

常见数据格式的正则表达式验证

前言  正则表达式是一种强大的工具,可以在很多场景下对我们需要的内容进行快速匹配过滤。比如,在前端提交表单时,就可以通过编写合理的正则表达式对用户输入进行首次过滤(当然服务端程序在接收到数据后一样要进行严格的数据检查,保证程序正常运行,防止通过postman等工具绕过前端验证进行恶意攻击。) 正则表达式的学习  网上有很多系统学习正则表达式的资源,掌握基本的语法和相关机制是实现常见数据格式验证的

0

前端优化:[dns-prefetch] DNS预解析

背景  对提升网页性能,提高加载速度和用户体验的不断重视。 定义与优势  DNS Prefetch,即DNS预获取,是前端优化的一部分。当你浏览网页时,浏览器会在加载网页时对网页中的域名进行解析缓存,这样在你单击当前网页中的连接时就无需进行 DNS 的解析,减少用户等待时间,提高用户体验。一般来说,在前端优化中与 DNS 有关的有两点: 减少DNS的请求次数 进行DNS预获取 现在大多数

0

React的state初始化及其在dva框架中的具体表现

前言  本篇结合在使用dva框架进行React应用开发过程中遇到的问题,简要分析React中state的机制和Redux对state的状态管理。 使用dva框架开发时遇到的一个问题  关于dva框架的基本结构和开发模式,在之前的文章中已经有所提及,见React开发框架Dva.js项目结构简单小结。下面的描述直接基于框架中的概念。 问题现象描述确定接口所需数据结构  在进行一个应用模块的开发,与

0

JavaScript中的对象、constructor属性、prototype属性对比分析

前言  首先想说的是,这篇文章的题目准确怎么定我就考虑了不少时间。想过“JavaScript中的对象及其constructor属性和prototype属性”,想过“JavaScript中的对象、构造函数对象(constructor)和原型对象(prototype)”等等,但总觉得不够清楚。说实话现有的这个题目也不一定是很好的,只是相比较之下,选择一个“三者相对独立”的说法,这样就不会有先入为主的

0

JavaScript中值传递和引用传递的典例探究

概述  在Javascript中,基本类型(null, undefined, number, string, boolean, symbol)是通过值传递方式进行,而复合类型(object, array, function)则是通过引用传递方式进行。  但是,由于Javascript工作机制所决定,在js中,引用指向的其实是值,而无法指向其他引用,这和其他语言中的指针并不相同。  其实,两者都可

0

JavaScript中创建对象的7种模式和实现继承的6种方式

前言  JavaScript是一种面向对象(OO)的语言,但由于ECMAScript没有类的概念(ES6引入关键字class),所以在js中创建对象的方法也与其他基于类的语言有所不同。本篇总结在JavaScript中创建对象的7种方法;并在此基础上,总结实现继承的6种方式。 JavaScript中对象的基本概念创建对象的2种基本方法 创建一个Object实例123456var person =

0

关于JavaScript生成器generator和yield的一些理解

综述  Generator(生成器)函数是ES6提供的一种异步编程解决方案,而yield则是配合生成器函数使用的。 Generator函数定义  function* 声明(function关键字后跟一个星号)定义一个generator(生成器)函数,返回一个Generator对象。 语法function* name([param[, param[, ... param]]]) { statem

0

Base64编码探究

概念  Base64编码是网络传输中的一种常见编码方式。可用于传输任意的8bit(字节Byte)数据,经过编码后的数据不是直接可读的,但也由此保证了一定的安全性和很好的可移植性。这种编解码的算法十分简单,编码后的数据大小仅增加三分之一左右(原因后续讲到),因而不会对传输造成过大压力。  我们需要明确的概念是,Base64编码本质上是将二进制数据编码为文本字符。而这些二进制数据的来源则可能有很多,

0

使用WebStorm创建webpack工作流的前端项目

前言  webpack是一款极为灵活的前端模块打包构建工具。其诞生和流行主要是由于以下这几个发展趋势: 为了完成更加复杂的交互逻辑,一个网页中使用的js代码数量越来越多; 即便有了更多代码,却要求使用中有更少的整页面重新加载; 现代浏览器提供了更多的API接口。   基于这样的情况,大量代码就需要能够被良好地管理起来,像webpack这样的模块系统就为我们将代码切分为若干模块提供了很好的选择

0

JavaScript中的__proto__、[[prototype]]和prototype

前言  proto、[[prototype]]和prototype三个概念及相关内容是javascript比较复杂且容易混淆的内容。本文尝试进行总结和分析。 prototype相关介绍  待续。 __proto__与[[prototype]]相关介绍  待续。 一张图分析三者的关系 一系列案例分析12345function Foo(){ console.log(1);}

0

CSS居中问题总结

前言  本篇集中对CSS中的各种居中问题进行总结。整体上需要居中的元素可以分为两大类-内联元素和块级元素,而居中方式又要考虑水平和垂直两个方向。 内联元素居中水平居中 使用”text-align:center”根据以下W3C的官方文档: 属性“text-align”用于描述块级元素中的行内内容如何布局。我们知道,块级元素的显示占据一整行,而行内元素可以在一行内并列显示,常用的行内元素有<

0

【阿里云ECS】GitLab的搭建配置过程和GitLab-CI服务的使用

前言  GitHub是一个十分著名并相当活跃的社区,每天有世界各地的程序员在这里分享与交流。作为开源项目或者技术分享,我们当然可以将代码维护在这里。但是对于内部项目,我们应该具备私有仓库来进行维护。GitLab就是一个很好的选择。本文主要包括以下几个方面: Git安装与使用 GitLab相关知识介绍 GitLab搭建配置的完整过程 GitLab-CI相关知识介绍 GitLab-CI安装配置的完