标签: 学习笔记

记录点滴,修炼自己。
0

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

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

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

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

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

Bootstrap等前端框架栅格系统的原理

栅格系统基本使用方法基本原理  Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。  栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap

0

客户端浏览器检测

前言  几种web浏览器在实现相关标准时会有一些差异和区别,这可能会给开发带来一些问题。此时就会需要进行客户端检测从而给出不同的方案。但是,从根本上来讲,只要能够找到更通用的方法,就应该优先采用更通用的方法,先设计最通用的方案,然后再使用特定于浏览器的技术增强该方案。《JavaScript权威指南》相关描述如下: 检测方法与主要参数navigator对象的主要参数 方法 主流浏览器的userAg

0

JavaScript的预加载与懒加载

预加载目的  增强用户的体验,当用户需要查看时可直接从本地缓存中渲染。。否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白。但会加载服务器的负担。并且,如果不设置预加载,那么当需要渲染十分大的图片时,可能就会有“逐行扫描渲染”的感觉,用户体验不好。使用预加载的话,我们可以在图片完整渲染完成之前在页面上设置“loading”类的图标提示,而当图片数据完全获取后一次

0

使用AngularJs封装Tabs选项卡组件

angular-table使用AngularJs封装Tabs选项卡组件 功能描述  该组件是管理系统中很常用的功能,平台使用者可能会同时使用不同模块的功能,这时候需要打开多个模块,Tabs组件是一种类似浏览器多标签页的效果。可以: 可以在多个模块的页面间进行切换 在某个页面上右键关闭 附带收起侧边栏功能 … 实现 demo源码托管于github,详见Github gcidea/angula

0

CSS预处理---Less使用案例

前言示例12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152@import "../../assets/less/common";.countDownAd { &:extend(.flexLayout); padding: 30rem /

0

使用AngularJs封装表格内容渲染(含分页)组件

功能描述  该组件是管理系统中很常用的功能,管理系统的典型使用是批量数据的处理,表格展示是最直接的方式。该插件实现: 批量数据的列表展示 每行数据提供操作项(修改,删除等)接口 翻页查询接口 每页显示条数修改 点击表头排序 列表宽度自定义 … 实现 demo源码托管于github,详见Github gcidea/angular-table html结构  承载该表格插件的主要html结