- 博客(48)
- 收藏
- 关注
RSS订阅转载 Vertical-Align，你应该知道的一切
我们聊聊vertical-align。这个属性主要目的用于将相邻的文本与元素对齐。而实际上，verticle-algin可以在不同上下文中灵活地对齐元素，以及进行细粒度的控制，不必知道元素的大小。元素仍然在文档流中，因而其他元素可以根据它们大小的变化进行相应的调整。一个有用的例子就是居中图标与旁边的文本。Vertical-Align是个怪物可是，vertic...
2018-11-07 13:14:00
124
转载 Chrome等浏览器下出现net::ERR_BLOCKED_BY_CLIENT的解决办法
当我们在做开发时，调试页面图片会出现部分图片无法正常显示，并且确认图片的地址正确；按F12 Debug查看报错原因，提示net::ERR_BLOCKED_BY_CLIENT错误，但当我们点击图片地址发现，图片地址并无错误；遇到这类情况，一般都是浏览器安装的某个第三方扩展程序已阻止对此网页的访问，例如下图：解决办法：...
2018-11-02 10:09:00
323
转载 document.readyState和document.DOMContentLoaded判断DOM的加载完成
document.readyState:判断文档是否加载完成。firefox不支持。这个属性是只读的，传回值有以下的可能：0-UNINITIALIZED：XML 对象被产生，但没有任何文件被加载。1-LOADING：加载程序进行中，但文件尚未开始解析。2-LOADED：部分的文件已经加载且进行解析，但对象模型尚未生效。3-INTERACTIVE：仅对已加载的部分文件有效，...
2018-03-08 11:37:00
261
转载 CSS实现进度条
进度条经常运用于网页，即使我们意识到不是所有的东西都将瞬间被加载完成，这些进度条用于提醒使用者关于网页上具体的任务进程，譬如上传，下载，加载应用程序等。以前如果想要创建一个进度条的动画效果，没有使用JavaScript是不可能实现的。然而感谢CSS3的出现，我们现在能够在div里执行动画，添加梯度和彩色元素。事实上，HTML5为实现此目的也创建了一个特殊的进度条元素。 当你看完这个教...
2018-01-30 10:16:00
326
转载 H5案例分享：移动端滑屏 touch事件
移动端滑屏 touch事件移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛，类似于PC端的图片轮播，但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。以下是四种touch事件touchstart: //触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。touchmove: //在...
2017-12-11 14:24:00
207
转载 Passive Event Listeners——让页面滑动更加流畅的新特性
Passive Event Listeners - 被动事件监听器在写webapp页面的时候，Chrome 提醒 code1<code>[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider ma...
2017-12-08 15:55:00
165
转载 禁止蒙层底部页面跟随滚动
场景概述弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。那么，如何阻止呢？请看以下分析：方案分析方案一打开蒙层时，给body添加样式：overflow: hidden;h...
2017-12-08 15:52:00
98
转载 跨域Ajax请求时是否带Cookie的设置
1. 无关Cookie跨域Ajax请求客户端以 Jquery 的 ajax 为例：$.ajax({ url : 'http://remote.domain.com/corsrequest', data : data, dataType: 'json', type : 'POST', cr...
2017-10-19 20:25:00
116
转载 HTML5 元素拖动 - 实现元素左右拖动， 或更改自身排序
1、拖放（Drag 和 drop）是 HTML5 标准的组成部分。 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 浏览器支持：Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放（注：在 Safari 5.1.2 中...
2017-09-21 19:27:00
550
转载 浅谈程序员的英语学习
浅谈程序员的英语学习原文链接：http://www.cnblogs.com/haoyifei/p/5687235.html作为在中国工作的程序员，不懂得英语似乎也不妨碍找到好工作，升职加薪。但程序员这个工种则稍有不同，因为程序，尤其是高级语言，基本上都是由英语和数字表达式构成的。英语对于程序员十分重要。我的大学本科全部采用...
2017-09-13 14:10:00
156
转载 Vue响应式原理
原文链接：http://www.cnblogs.com/xiaohuochai/p/7371743.html前面的话 Vue最显著的特性之一便是不太引人注意的响应式系统(reactivity system)。模型层(model)只是普通JS对象，修改它则更新视图(view)。这会让状态管理变得非常简单且直观，不过理解它...
2017-09-09 16:46:00
77
转载 Vue实例生命周期
前面的话 Vue实例在创建时有一系列的初始化步骤，例如建立数据观察，编译模板，创建数据绑定等。在此过程中，我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑。本文将详细介绍Vue实例的生命周期图示 下图是Vue实例生命周期的图示解释 接下来，根据提供的生命周期钩子，对Vue实例各个阶段的情况进行详细说明【beforeCreate】...
2017-09-09 16:43:00
58
转载 [js高手之路]性能优化技巧 - 缓存与函数重载实战
所谓缓存，通俗点讲就是把已经做过的事情结果先暂时存起来，下次再做同样的事情，不用再重新去做，只要把之前的存的结果拿出来用即可，很明显大大提升了效率。他的应用场景非常广泛。如：1、缓存ajax结果，大多数网站都会有产品推荐功能，比如按热销推荐，简单低效的做法，每次点击切换的时候，都要通过ajax去数据库中取出结果，其实他的结果并不是要实时去获取，完全可以用缓存技术保...
2017-09-08 17:34:00
101
转载 nginx之location配置
nginx语法规则：location [=|~|~*|^~] /uri/ { … }=开头表示精确匹配^~开头表示uri以某个常规字符串开头，理解为匹配 url路径即可。nginx不对url做编码，因此请求为/static/20%/aa，可以被规则^~ /static/ /aa匹配到（注意是空格）。~开头表示区分大小写的正则匹配~* 开头表示不区...
2017-09-08 16:56:00
119
转载 document.cookie的使用
设置cookie每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给document.cookie：document.cookie="userId=828";如果要一次存储多个名/值对，可以使用分号加空格（; ）隔开，例如：document.cookie="userId=828;userName=hulk";在...
2017-09-08 16:22:00
72
转载 HTMl5的sessionStorage和localStorage
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的...
2017-09-06 13:59:00
58
转载 优雅地使用 VSCode 来编辑 vue 文件
javascriptvisual-studio-codevue.js当然 vscode 对 vue 也不是原生支持的，今天来扒一扒如何配置 vscode 以便优雅地编辑 vue 文件先来扒一扒使用 PHPStorm 遇到的问题：vue文件虽然可以通过插件来解决高亮...
2017-08-08 09:45:00
151
转载 入门 Webpack，看这篇就够
写在前面的话阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，而你又你对webpack感兴趣，那...
2017-08-07 17:21:00
91
转载 表单验证<AngularJs>
常用的表单验证指令1. 必填项验证某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：<input type="text" required /> 2. 最小长度验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"：<input type...
2017-08-07 14:03:00
51
转载 TortoiseGit配置私钥关联github
1.使用Git 命令行生成公钥和私钥找到Git安装目录（我的安装目录是 D:\DevelopSoft\Git），打开git-bash.exe。输入命令 回车ssh-keygen -t rsa -C "你的github邮箱账号"1<span style="font-size: 18p...
2017-08-04 17:44:00
86
转载 【转】github上值得关注的前端项目
综合/资源frontend-dev-bookmarks一个巨大的前端开发资源清单。star:15000front-end-collect分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者。star:860Front-end-Interview-questions史上最全前端开发面试问题及答案f2e-hub包...
2017-06-29 15:54:00
94
转载 JS实现继承的几种方式
前言JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。那么如何在JS中实现继承呢？让我们拭目以待。JS继承的实现方式既然要实现继承，那么首先我们得有一个父类，代码如下： 1 // 定义一个动物类 2 function Animal (name) { 3 // 属性 4 this.name = name || 'Animal';...
2017-06-29 14:35:00
47
转载 学习方法论
理解能力能提高吗？♣什么是理解力？♣如何促进思考？♣如何促进整合？声明：此文是建立在你已经了解如何思考和学习的本质的基础上，进一步探讨如何提高理解能力。（如果想了解“思考”和“学习的本质”，可以看这两篇：我何尝不想主动思考？ 低层次“努力学习”和学习的本质） 对于理解吸收能力，有人说是智商问题，这里我抛却这个因素（其实我也不想去研究这个因素，...
2017-06-29 09:15:00
92
转载 js模版引擎开发实战以及对eval函数的改进
简介 前段时间，想着自己写一个简单的模版引擎，便于自己平时开发demo时使用，同时也算是之前学习的知识的一种总结吧！ 首先我们先了解一下模版引擎的工作原理吧！ 1. 模版引擎其实就是将指定标签的内容根据固定规则，解析为可执行语句字符串； 2. 执行可执行解析后的语句字符串，即生成我们想要的页面结构。具体实现方法：1. 最终效果...
2017-06-29 09:07:00
70
转载 webpack3
6月20号webpack推出了3.0版本，官方也发布了公告。根据公告介绍，webpack团队将未来版本的改动聚焦在社区提出的功能需求，同时将保持一个快速、稳定的发布节奏。本文主要依据公告内容，简单介绍一下webpack3的新特性，以及在实际项目中的应用。升级到webpack3升级到webpack3，只需要通过npm安装即可：1...
2017-06-26 16:46:00
89
转载 多 “维” 优化——前端高并发策略的更深层思考
WeTest 导读一项指标的变好，总少不了相应优化策略的实施。优化并不是简单的一蹴而就，而是个不断迭代与推翻的过程。更深层的优化方案，往往是在某种思维策略之下，对问题场景和基本策略优缺的深刻理解后做出的当下最优的权衡结果。本文笔者从前端高并发优化这一具体点出发，逐步向大家阐述笔者在优化的“术”之上思维层面的一些思考。希望能给各位带来共鸣和感悟。背景...
2017-06-26 16:42:00
90
转载 JS数据类型
阅读目录一、js数据类型二、 js数据类型转换三、js数据类型判断一、js数据类型string、number、Boolean、Array、object、Null、Undefined1. js拥有动态类型 相同的变量可以用作不同的类型var x // x 为 undefinedvar x = 6; ...
2017-06-26 16:38:00
50
转载 ES6的开发环境搭建
在搭建es6开发环境之前，先简单介绍一下es6。ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。我们为什么要使用es6？es6有什么优点？......，我会在后面写一个es6专题系列...
2017-06-26 16:34:00
72
转载 CSS Why
前面的话 在CSS学习目录中，已经详细地介绍了CSS如何使用。知其然，还要知其所以然。本文将介绍CSS各部分出现的原因，仅限个人理解，如有不妥，欢迎交流Why CSS 早期的大多数网站标记几乎完全由表格和font元素组成，且对于所要表现的内容不能传达任何实际含义，使文档可用性降低，且不易于维护。于是1995年，W3C发布了CSS草案，试图解决结构与样式...
2017-06-26 16:29:00
72
转载 chrome谷歌浏览器-DevTool开发者工具-详细总结
一、概述 1.官方文档 2.打开方法： 3.前言：二、九个模块： 1.设备模式Device Mode 2.元素面板Elements 3.控制台面板Console 4.源代码面板Sources 5.网络面板Network 6.性能面板Performance以前的版本叫Timeline 7.内存面板...
2017-06-26 16:24:00
6037
转载 浏览器的故事
很久很久以前有一个浏览器名字叫 NCSA Mosaic很久很久以前有一个浏览器名字叫 NCSA Mosaic紧接着也出现了一个 Mozilla 的浏览器 (Mozilla 的意思是 Mosaic 终结者)后来 Mozilla 的正式发布版本是 Netscape 它把自己标称为Mozilla/1.0 (Win3.1)由于 Netscape支持框架显示，后来框架在大家中间流行起来了，但Mos...
2017-06-26 16:21:00
104
转载 angularJS和requireJS和angularAMD
最近因为要用到angularJS开发项目，因为涉及到的静态资源比较多，所以想把js文件通过requireJS来按需加载，这两个框架以前都使用过，但是结合到一起还没有用过，那就试一下，看能否达到目的。requireJS是为了实现js文件异步加载和管理模块之间依赖性的框架，详情请看阮一峰 require.js的用法和RequireJS 中文网这里就不做介绍了。我们先来创建模...
2017-04-07 18:04:00
100
转载 CSS3新属性之---flex box布局实例
flex box布局实例flex的强大之处在于不管什么布局，几行命令即可实现/*本节模板div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。*/<div class="box"><span class="item"></span><...
2017-04-01 14:50:00
88
转载 史上最全Html和CSS布局技巧
单列布局水平居中水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素）使用inline-block 和 text-align实现.parent{text-align: center;}.child{displ...
2017-04-01 14:45:00
64
转载 windows下安装sass，以及常见错误和解决办法
简介：sass依赖于ruby环境，安装sass之前得先装ruby。1、安装ruby1.1、下载地址：http://rubyinstaller.org/downloads1.2、注意事项：安装时，最好勾选Add Ruby executables to your PATH这个选项，添加环境变量。1.3、查看ruby是否正确安装：命令提示符ruby -v显示版本...
2017-03-31 11:35:00
141
转载 NodeJS学习笔记之Connect中间件应用实例
一，开篇分析大家好哦，大熊君又来了，昨天因为有点个人的事没有写博客，今天又出来了一篇，这篇主要是写一个记事本的小应用，前面的文章，我也介绍过“Connect”中间件的使用以及“Mongodb”的用法，今天就结合这两个中间件，写个实际的例子，不断完善和重构，已达到充分学习的目的。好了，废话不说了，直接进入主题。二，需求分析（1），用户注册，登录功能（没...
2017-03-29 09:51:00
86
转载 NodeJS学习笔记之Connect中间件模块（二）
一，开篇分析大家好，今天这篇文章主要是对"Connect"中间件以及相关辅助中间件，做一个源码分析系列，我想上一篇文章大家也看了，介绍了使用方式及用途，而这篇也是出于本人的兴趣，让读者对其有一个更深入的认识，如在分析阶段有什么不正确的地方，请大家多多指教，好了！老规矩然我们进入正题。先来看一个例子，结合会用引入分析，如下：复制代码代码如下:var connec...
2017-03-29 09:49:00
98
转载 NodeJS学习笔记之Connect中间件模块（一）
什么是“Connect”,中间件又当如何理解，带着问题来看今天的文章。如何理解 "中间件" ?我的理解是这样的，中间件就是类似于一个过滤器的东西，在客户端和应用程序之间的一个处理请求和响应的的方法。如果把一个http处理过程比作是污水处理，中间件就像是一层层的过滤网。每个中间件在http处理过程中通过改写request或（和）response的数据，状态，实现了特定的...
2017-03-29 09:48:00
101
转载 前端构建工具gulpjs的使用介绍及技巧
gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，那就尝试一下gulp吧。本文导航：gulp的安装开始使用gulpgulp的API介绍...
2017-03-29 09:46:00
48
转载 将less编译成css的gulp插件
简介：gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript/coffee/sass/less/html/image/css...
2017-03-29 09:44:00
116
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人