今天需要将文本垂直居中，就是一行是垂直居中，多行也是垂直居中。 效果如下 实现代码（同事提供） <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .listDiv{ display: flex; width: 300px; height: 60px; padding: 10px; background: #cc…
今天需要将文本垂直居中，就是一行是垂直居中，多行也是垂直居中。 效果如下 实现代码（同事提供） <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .listDiv{ display: flex; width: 300px; height: 60px; padding: 10px; background: #cc…
IndexedDB是在浏览器中保存结构化数据的一种数据库，为了替换WebSQL（标准已废弃，但被广泛支持）而出现。IndexedDB使用NoSQL的形式来操作数据库，保存和读取是JavaScript对象，同时还支持查询及搜索。 下面由5个方面讲述： 1. 数据库初始化 2. 对象存储空间（ObjectStore） 3. 事务 4. 游标查询 5. 索引 数据库初始化 IndexedDB保存的是对象，而不是使用表保存数据。打开数据库使用indexDB.open方法，这方法有两个参数，第一个是数据库名称，第二个是数据版…
这几天在兴趣下翻看了钉钉（工作协同）应用的前端源码，分析其目录结构、构建工具及框架使用等，进行前端技术研究，分享我的总结成果。 PS：不知道这应用的没关系，因为总结出来是前端通用的东西。 PS：其应用样子。 前言 我研究的是PC桌面版的钉钉应用，应用是由“chrome内核容器+ web页面”构成的，也就是桌面的混合应用（跟手机Hybrid应用的原理一样），针对分析的也是其web页面部分。 首先它是一个单页面的应用，主体框架是用AngularJS，页面路由也是由AngularJS完成。由于框架是会主导着项目的开发方式…
利用浏览器缓存，可以使得页面加载速度提高，也减轻服务端压力。有几个比较重要点如下： 1. 浏览器是如何判断缓存是否过期？ 2. 服务端如何判断缓存已失效？ 3. 为什么有了Last-Modified还要Etag？ 4. 200 OK( from cache )和 304 Not Modified的区别？ 下面是我总结的页面利用浏览器缓存的过程（图示）： 浏览器是如何判断缓存是否过期？ 应该是根据Response Header里面的Cache-Control和Expires这两个属性，当两个都存在时，Cache-Co…
昨天写样式遇到个问题，如何让鼠标悬浮DIV后，显示DIV外的按钮，可以点击到按钮。 效果如下： 问题： 在DIV hover时候将按钮设为display: block，这是很直接的想法，但是这有个问题，就是在悬浮出现按钮后，鼠标要移到按钮上过程中，离开了DIV经过间距时，按钮就会消失。 解决办法： 1. 选择更大区域的DIV 这个时候hover出现的按钮，由于鼠标还在DIV（大区域）中，所以按钮是可以正常点到的。但这个方法问题在于扩大了触发区域，如果本意上是要最初的DIV来触发，那这个方法就不行。 2.增加一个不可…
最近在思考前端js文件该如何合并，当然不包括不能合并文件，而是我们能合并的文件，想了想应该也只有三种方式。 三个方式如下： 1. 一个大文件，所有js合并成一个大文件，所有页面都引用它。 2. 各个页面大文件，各自页面合并生成自己所需js的大文件。 3. 合并多个共用大文件，根据实践情况合并出多个共用js文件，每个页面引用多个共用大文件。 另外在我看来，合并有两个目的： 1. 为了减少请求数。 2. 代码安全考虑（文件分得越多，越容易被人看清）。 PS：注意我说的不是压缩混淆，只是合并 1. 一个大文件 这种方式就…
最近遇到SVG这个名词，于是查阅资料，做个笔记。 前言 图片的数字化。将图片存储为数据有两种方案。 位图。也被称为光栅图。即是以自然的光学的眼光将图片看成在平面上密集排布的点的集合。每个点发出的光有独立的频率和强度，反映在视觉上，就是颜色和亮度。这些信息有不同的编码方案，在互联网上最常见的就是RGB。根据需要，编码后的信息可以有不同的位(bit)数——位深。位数越高，颜色越清晰，对比度越高；占用的空间也越大。另一项决定位图的精细度的是其中点的数量。一个位图文件就是所有构成其的点的数据的集合，它的大小自然就等于点数乘…
“计算机科学只存在两个难题：缓存失效和命名。” ——Phil KarIton 前言 命名一直是我编程过程中很头痛的事，有时为了一个恰当的名称是想了又想，还忍不住Google一下。命名真是一门艺术，好的命名那叫一个高大上。今天总结一些前端命名的规范，梳理一份自己的命名想法，从以下4种代码风格的命名规范部分获取灵感： 1. Google JavaScript代码风格指南 2. Crockford代码规范 3. Dojo Javascript 编程规范 4. jQuery核心风格指南 PS：未列出来的，代表没对此种命名做…
在某些情况下，textarea是不够用的，我们还需要显示一些图标或者高亮元素，这就需要用富文本编辑器，而富文本编辑器本质上是HTML元素设置了contenteditable。 然后可能需要像input、textarea有placeholder的输入提示语，但contenteditable的元素，placeholder是没用的，需要另外办法。 例子： HTML： <div class="con" contenteditable="true"></div> CSS： .con{ width: 4…
原因 如下图，A域中有个B域的页面，但是B的页面的长度不确定，A无法去设置一个准确的高度。 PS:iframe高度设置auto是无效的 解决办法 如上图， （1）在B页面中加一个A的代理页面的iframe PS：这最里面的A页面能调用最外层A页面的方法，而B页面是调用不了最外层A的（因为跨域的安全限制）。 （2）当B页面加载完成时，修改A的agent.html所在iframe里src。 setTimeout(function(){ var _height = $("#vs-source").he…
COPYRIGHT © 2022 zhizhesoft. ALL RIGHTS RESERVED.