- 博客(83)
- 收藏
- 关注
RSS订阅
原创 可复用的代码 和 感想
1.监听到scroll事件的条件：父级元素定高，子元素高度比父元素高，滚动条是相对于父级元素的。对于某些浏览器来说，滚动元素是html，但是有些确实body。通用的获取页面的滚动元素的方法，document.scrollingElement2.video和audio不能做到自动播放，只能用户手动点击，才可以播放，video的全屏功能浏览器兼容性不好3.要想设置滚动条样式，设置-webkit...
2018-02-08 11:19:32
825
2
原创 axios 上传（上传既包括二进制文件，又包括json数据）、下载（下载流数据另存为数据，流数据转换为json）
下载axios配置function downloadPolicy(data) { return request({ url: '/api/invo/goods/downloadPolicy', method: 'post', data, responseType: 'blob' });}流数据转换为excel文件并下载到本地 downloadPolicy(data).then(res =
2020-08-12 10:46:17
1432
原创 border-left、border-right、border-top、border-bottom深入理解
一、有宽和高1.一个矩形的4个边的组成部分.box { border-right: 55px solid red; width: 200px; height: 200px; border-bottom: 55px solid blue; border-left: 55px solid yellow; border-top: 55px solid...
2019-04-17 18:44:20
9574
原创 兼容ios和android的带有输入框的底部悬浮按钮
需求：页面底部有个fixed的button，和一个处于正常文档流中的输入框，当尝试往输入框输入内容时，会唤起手机键盘。需求是唤起键盘的时候，fixed的按钮不希望被键盘顶上去，即不希望按钮在键盘上部，而是希望按钮仍旧在底部，被键盘盖住。现象：ios：按钮有时候会被键盘顶上去，有时候不会。安卓：一定会被键盘顶上去解决方法：android：产生此现象的原因是：页面的窗口发生了变...
2019-04-17 17:21:41
589
原创 常用的css
1.手机端：防止用户长按文字选中（user-select）兼容性：ios：加-webkit-前缀全部支持android：加-webkit-前缀全部支持2.手机端常用的transform（translate/scale/rotate）兼容性ios: ios8.1-8.4 要加上-webkit-前缀 其余系统版本支持android: 安卓4.4及以下要加上-webkit-...
2019-04-16 18:41:11
164
原创 angular权威教程(ng-book2)--第3章 Angular的工作原理
3.1 应用1.利用angular-cli创建一个项目1.ng new inventory_app #创建一个新的项目2.ng generate component product #新建一个组件2.一个组件的构建方法@Component({ selector: 'single-component', inputs: ['name', 'age'], ...
2019-03-18 18:23:39
636
原创 angular权威教程(ng-book 2)--第二章：TypeScript
第二章 TypeScript2.4 内置类型2.4.1字符串var name: string = 'wfz'2.4.2 数字var age: number = 452.4.3 布尔类型var married: boolean = true;2.4.4 数组var jobs: Array<string> = ['IBM', 'Microsoft...
2019-03-12 09:29:59
563
原创 阿里云oss h5页面上传实践
一、目的：将手机端的图片或者视频上传至阿里云oss服务器，同时返回资源url二、原理：https://help.aliyun.com/document_detail/31988.html?spm=a2c4g.11186623.2.13.2e2e350aF5un5N发送合法的content-type为multipart/form-data的post请求到阿里云服务器。一个合法的请求如下，...
2018-12-25 10:20:53
4711
原创 【swiper+audio】swiper轮播的同时，播放相应的音频
1.代码，每次轮播会播放对应音频<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel=&q
2018-12-04 19:09:43
1232
原创 inline-block按行排列有3px的误差
<div class="line"> <span class="item"></span> <span class="item"></span> <span class="item"></span><
2018-08-27 14:33:59
471
原创 使用于所有手机的0.5px的border
1px的线在手机上会影响美感，太粗，这个时候，需要兼容所有手机的0.5px的线。iphone手机支持.5px的设置，字体方面也是支持任何大小的字体。而安卓手机不支持.5px的设置，浏览器会渲染为1px。在字体方面，安卓手机最小支持8px的字体设置，如果设置的再小点，还是显示为8px的大小。（Webkit内核的适用范围较为广泛，Android原生浏览器、苹果的Safari、谷歌的Chrome(And...
2018-08-27 11:54:33
823
原创 flex布局：justify-content、aign-content、align-items
1.justify-content：弹性盒子在主轴方向上的排列方式，例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title> <style type
2018-08-20 14:16:26
5506
原创 git
本地仓库由git维护的3棵树组成，一个是工作目录，即为当前正在操作的文件，一个是暂存区，它是一个缓存区域，临时保存你的改动，最后是head，指向你最新一次的commit。git commit 指的是将改动保存到head里。远程仓库跟head是一致的。git pull = git fetch + git mergegit fetch: 将分支上的远程代码拉取到本地git merge: 将...
2018-07-31 10:51:34
210
转载 hybrid开发--app和内部的h5页面的通信方式
app和其内部的h5页面通过JSBridge来进行通信。JSBridge提供两者之间的双向通信。原理为：1.js调用native的方法：注入API注入 API 方式的主要原理是，通过 WebView 提供的接口，向 JavaScript 的 Context（window）中注入对象或者方法，让 JavaScript 调用时，直接执行相应的 Native 代码逻辑，达到 JavaScri...
2018-07-30 07:20:54
936
翻译 webpack学习--模块解析（https://webpack.js.org/concepts/module-resolution/）
Module Resolution解析器是通过绝对路径来定位一个模块的类库，一个模块可以依赖另一个模块：import foo from 'path/to/module';// orrequire('path/to/module');依赖的模块可以来自应用程序，或者第三方库。解析器帮助webpack找到require/import语句所需要打包的代码包。webpack利用enhan...
2018-07-25 10:10:05
745
原创 图解http（七）－web的攻击技术
第 11 章 Web 的攻击技术互联网上的攻击大都将 Web 站点作为目标。本章讲解具体有哪些攻击 Web 站点的手段,以及攻击会造成怎 样的影响。11.1 针对 Web 的攻击技术简单的 HTTP 协议本身并不存在安全性问题,因此协议本身几乎不会成为攻击的对象。应用 HTTP 协议的服务器和客户端,以及运行在服务器上的 Web 应用等资源才是攻击目标。目前,来自互联网的攻击大多是...
2018-07-19 11:02:42
534
原创 图解http（六）（确认访问用户身份的认证and基于http的功能追加协议、构建web内容的技术）
第8章 确认访问用户身份的认证8.1 何为认证http使用的认证方式：BASIC 认证、DIGEST认证、SSL客户端认证、FormBase认证8.2 BASIC认证 步骤 1: 当请求的资源需要 BASIC 认证时,服务器会随状态码 401 Authorization Required,返回带 WWW-Authenticate 首部字段的响应。该字段内包含认证的方式...
2018-07-16 15:06:53
574
原创 图解http协议－https协议（五）
第7章 确保web安全的https协议7.1 http的缺点1.通信使用明文，不加密，内容可能会被窃听2.不验证通信方的身份，因此有可能遭遇伪装3.无法证明报文的完整性，有可能被篡改。总结：通信双方的身份是假的、内容是假的、通信双方和内容是真的但是被第三方拿到了7.1.1 内容被盗解决办法：通信加密和内容加密http协议和ssl协议结合，ssl对通信加密，防止内容被窃听7.1.2 身份是假的无法...
2018-07-16 10:20:43
973
原创 图解http协议（四）(首部响应字段)
6.5 首部响应字段服务端向客户端返回响应报文使用的字段，用于补充响应的附加信息、服务器信息，以及对客户端的附加要求等信息。6.5.1 Accept-Rangesaccept-ranges用于服务器告诉客户端它是否支持范围请求，取值2种，bytes和none，一个代表可以接受范围请求，一个代表不支持。6.5.2 ageAge: 600首部字段 Age 能告知客户端,源服务器在多久前创建了响应。字段...
2018-07-12 11:46:52
691
原创 图解http协议（三）（通用首部字段、请求首部字段）
第6章 HTTP首部cache-control: 取值有哪些，分别代表什么意思，是怎么作用的？跟缓存有关系，取值比较常见的有no-cache，如果在响应头中，代表源服务器跟缓存服务器说，你可以使用缓存，但是每次使用都要通知我一下。如果在请求头中，代表客户端跟缓存服务器说，我不要缓存，你直接从源服务器上拿资源。1.no-cache指令2.no-store指令代表传输的信息是保密的，不允许存储。3....
2018-06-29 14:26:56
1814
1
原创 ssh key 创建步骤、git clone指定ssh key
一、什么是ssh key？ssh key是git远程服务器与本机通信所必须的密钥，每个git服务器对应本机上的一对密钥，包括私钥和公钥。存储位置为：~/.ssh二、为什么要生成ssh key？如果本机想要从远程服务器上拉取代码，必须将本机的公钥上传到远程服务器上。三、如何生成ssh key？可以用 ssh-keygen 来创建。该程序在 Linux/Mac 系统上由 SSH 包...
2018-06-26 18:38:55
10527
原创 ajax
// xhr的readystate有0-4，5种取值，代表5种状态。依次触发的条件：// 0: new XMLHttpRequest()执行// 1: open方法执行// 2: send方法执行，头部和状态已经可以获得// 3: loading: 下载中，responseText已经包含部分数据// 4: done: 下载完成// 每当xhr的readystate发生变化时，就会触发...
2018-06-08 11:51:17
107
原创 html
1.bdo标签，功能：可以改变文字的方向。inline<bdo dir="rtl">我是中国人</bdo> 输出：人国中是我2.small标签，功能： 让字体变小。inline<small>我是中国人</small>3.mark标签，功能： 高亮文字。输出：字体背景变黄4.display、visibility和background、img，是否触发请...
2018-06-07 15:14:33
189
原创 css 优先级
<!DOCTYPE html><html><head><style>/*1, answer: blue. 把li和ul调换顺序也一样*/ul { color: red;}li { color: blue;}/*1, answer: blue*/ul li { color: red;}#must-buy ...
2018-06-06 18:07:36
797
原创 从h5页面唤起相应app的方式总结
一、最新方法 // 如果是iphone，直接使用universal link if (/iPhone|iPod|iPad/g.test(navigator.userAgent)) { location.href = "//dpl.qyer.com/app/guide?act=" + this.strType + "Detail" + "&id=" + this.i...
2018-05-11 10:08:40
2735
原创 position: sticky实现吸顶操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title> </style></head><body&g
2018-04-28 17:16:10
1029
原创 js实现事件发射监听（观察－订阅模式）
var eventEmitter = { emit: function (eventName) { var callbackArr = events[eventName] if ( callbackArr && callbackArr.length) { for (var i = 0; i < callbackArr.len...
2018-04-27 11:42:09
1880
原创 js中的Array和String的所有方法
1.增Array.prototype.push2.删Array.prototype.splice()3.改3.1 共有的拼接函数concatArray.prototype.concat: 功能：合并2个或者多个数组，返回合并后的数组。语法：var new_array = old_array.concat(value1[,value2[,...]]])描述：对象引用（而不是实际对象）：concat将...
2018-04-25 11:53:10
499
原创 未知高度和宽度元素 上下左右居中
未知宽高元素水平垂直居中 .outer { position: fixed; width: 100%; height: 100%; top: 0; left: 0; } .inner { position: absolute; left: 50%; margin-left:
2018-04-19 09:59:38
883
原创 input事件--keydown、keypress、keyup、input、change事件
键盘事件keydown：当任意键按下时，（键盘上的F键不触发）keypress：当字符键按下时（上下左右箭头键不触发,shift ctrl option command都不触发）keyup：当键弹起时change：当input中的内容发生变化，并且失去焦点时触发。所有的dom都可以监听键盘事件。如果我们遇到需要根据文本框的内容的变化做处理的业务，比如：实时展示文本框内字符个...
2018-03-23 15:02:20
2359
原创 js基础题
1.var y = 1;if (function f(){}) { y += typeof f;}console.log(y); // 1undefined2.function foo(){ return foo; }console.log(new foo() instanceof foo); // false解析：当函数被当作构造函数调用时，遵从以下3个步骤：i)、...
2018-03-22 14:07:21
439
原创 0、''、undefined、null、NAN比较
用Boolean函数能将5个表达式(0、''、undefined、null、NAN)转换成false，其他的情况为true。if语句就是用Boolean函数转为true或者false，继而根据结果执行后面的语句的。非运算符也是先用Boolean函数将运算符后的表达式转换后才继续执行后续操作的。if (0) 等于if (Boolean(0))同理：if(!0) 等于if(!Boolean(0))与0...
2018-03-22 11:55:15
460
原创 前端踩坑
1.display遇上transition。需求：元素渐隐渐现，或者带有某种动画出现时，也就是说元素刚开始的样式display:none, opactiy: 0, transition: all ease 500。后续用js控制元素的样式让其渐现：ele.style.display='block', ele.style.opacity=1。会发现动画也就是opacity并没有生效。原因是因为：op...
2018-03-21 15:15:32
223
原创 css3
一、css3新特性1.position新增：sticky，表现为吸顶，当元素在视野范围内时，与position:relative，表现相同，当元素不在视野范围内时，与position：fixed表现相同。但是需要注意的一点是：sticky属性必须与top、left、bottom、right任意之一结合才可以生效。例子：<!DOCTYPE html><html lang="en"...
2018-03-07 11:43:47
135
原创 js编程题
1.将一个字符串的后四位显示，前面的字符用'#'表示function maskify(cc) { return cc.slice(0, -4).replace(/./g, '#') + cc.slice(-4);}function maskify(cc) { return cc.replace(/.(?=....)/g, '#');}2.有2个字符串，求2个字符串含有的所有不重复字符构...
2018-03-07 10:02:48
403
原创 图解HTTP读书笔记（二）
第2章：简单的HTTP协议2.1 http协议用于客户端和服务器的通信2.2 通过请求和响应的交换达成通信上图为某个客户端发送给服务器的请求报文，请求报文由请求方法、请求的uri、请求使用的协议及版本以及其它可能的请求首部字段和可能的内容实体组成。响应报文由协议版本、响应状态码以及对应的意义解释、可选的响应首部字段和响应主体组成。2.3 HTTP是不保存状态的协议http协议对于之前客户端和服务器...
2018-02-09 14:01:13
196
原创 前端性能优化
1.首屏时间 = DNS时间 + 建立连接时间 + 后端响应时间 + 网络传输时间 + 首屏页面渲染时间前端优化策略1、减少http请求：将图片、js、css合并，对于图片还可以使用lazy load5、将样式表放在顶部，这样能够更快的渲染页面结构，增加用户体验6、将脚本放在底部：不会阻止页面显示，也不会阻止组件下载8、使用外部JavaScript和css ：内联方式浏览器不会缓存，每次请求htm...
2018-02-09 10:01:08
211
原创 常用通用原生js函数
1. 获取视口宽度 getViewportWidth: function(){ var pageWidth = window.innerWidth; if (typeof pageWidth != "number"){ if (document.compatMode == "CSS1Compat"){ ...
2018-02-08 11:10:40
555
转载 vue and react
React 虚拟DOM（https://zhuanlan.zhihu.com/p/28562066）通过在 JS 和 DOM 之间增加一个新的抽象表示层，从而在需要更新时，对比这一表示层的 diff，最终差量更新 DOM。当有数据变化时，例如 list 变为了 [ { id: 1, text: 'Item 1' } ]，React 会执行如下三个步骤：接收到变更数据，整个 UI 被重新渲染为新的 ...
2018-02-08 11:05:15
837
原创 图解http读书笔记（一）
1.3 网络基础1.http协议属于tcp/ip协议簇中的一种，属于应用层协议。2.TCP/IP协议簇分为4层，从下往上依次为：数据链路层、网络层（IP）、传输层（TCP、UDP）、应用层（HTTP、FTP、DNS）。其中，数据链路层与物理硬件有关，比如电缆。网络层的处理对象为网络上的数据包，数据包是网络传输的最小单位，该层规定通过怎样的路径到达对方计算机，并把数据包传给对方。传输层的处理对象为上...
2018-02-07 17:40:48
254
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人