2018年07月_qiphon3650

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月 01月

转载 js高级技巧

js高级技巧安全的类型检测let data = [1,2,3,4]console.log(data instanceof Array)但是上面的方法在iframe下访问父窗口变量的时候会失败<iframe src="./iframe.html" frameborder="0"></iframe><script> let ...

2018-07-30 17:05:03 249

转载前端click事件及自定义事件

响应式页面开发常见的前端响应式开发有3套相应的解决方案：bootstrap 的 columns 布局： 2. 使用全局的rem （页面所有元素的宽高和字体都用rem等比缩放）使用阿里的flex box ，这种方法和第二种类似。不同点是，页面的字体用的是px前端click事件及自定义事件前端click事件在移动端会比较迟钝，但是touchstart会...

2018-07-30 15:20:09 6130

转载前端本地文件操作与上传视频/图片/音频

前端本地文件操作与上传前端无法像原生一样操作文件，否则打开网页就能把用户的东西偷光，所以只能通过以下三种方式触发： 1. 通过input的file选择本地文件 2. 通过拖拽方式把文件拖过来 3. 在编辑框里面复制粘贴&lt;body&gt; &lt;form action="" id="file-up"&gt; &

2018-07-30 09:51:40 7228 1

转载页面布局那些事

居中布局方法flex 方法的居中.nav { position:absolute; bottom:0; display:flex; align-item:center; justify-content:center; width:100%;}&amp;amp;lt;div class=&amp;quot;nav&amp;quot;&amp;amp;gt; &a

2018-07-25 19:06:43 171

转载同源策略和跨域

同源策略和跨域因为同源策略的限制，不同域名，协议（http/https）或者端口无法直接进行ajax请求。同源策略只针对浏览器端，浏览器一旦检测到跨域后会阻塞请求的结果。！！跨域的请求是可以发出去的，但是在相应的时候reponse被浏览器阻塞了跨域的ajax不会携带cookie 但是script/img/iframe 标签是支持跨域的（请求的时候会携带cookie...

2018-07-25 18:36:50 329

转载 canvas 图片灰度算法

canvas 图片灰度算法平均值Gray = ( Red + Green + Blue ) / 3按人眼对三原色的感知度：绿》红》蓝Gray = ( Red * 0.3 + Green * 0.59 + Blue * 0,11 )<!DOCTYPE html><html lang="en"><head> ...

2018-07-25 14:40:36 843

转载前端数据结构与算法

前端数据结构与算法递归递归就是自己调用自己，是前端中比较常用的算法。递归的优点：代码简单易懂缺点：效率上比不上非递归的实现方法var ids = [2324,2342,123](function sendReg(){ var id = ids.shift() if(id){ $.ajax({ url:"/ge...

2018-07-24 19:12:29 1142

转载 web sql indexedDB

了解sqlcookies 浏览器限制最大只能4klocalstorage/sessionstorage 适合小数据量的储存，firefox/chrome限制最大5m。 localStorage是以字符串形式存储的，存之前要先用 JSON.stringify 变成字符串，取出的时候使用JSON.parse 恢复成对应的格式复杂数据管理（webSQL...

2018-07-24 16:38:44 650

转载 Git 使用vi或vim命令打开、关闭、保存文件

vi & vim 有两种工作模式：（1）命令模式：接受、执行 vi & vim 操作命令的模式，打开文件后的默认模式；（2）编辑模式：对打开的文件内容进行增、删、改操作的模式；#在编辑模式下按下 ESC 键，回退到命令模式。创建、打开文件：$ vi [filename]（1）使用 vi 加文件路径（或文件名）的模式打开文件，如果文件存在则打开现有文...

2018-07-20 10:33:11 249

转载浏览器常用的图片优化雪碧图/实体字符/svg

雪碧图唯一的优点是减少请求数，HTTP/1.1下浏览器同时加载资源的数量是一定的，IE6个，chrome 6个，firefox 8个，而HTTP2 下是没有数量限制的雪碧图的制作方法：node 的一个包 css-sprite ，制作方便，只要将图标做好放到对应的文件夹里，写好配置文件运行就能生成相应图片的css雪碧图的缺点高清屏失真不方便变化雪碧图是一张静态图片，生...

2018-07-18 11:33:38 1343

原创 hash

#后面出现的任何字符，都会被浏览器解读为位置标识符。这意味着，这些字符都不会被发送到服务器端。改变#后的内容不会触发页面重载改变#会改变浏览器的访问历史每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置。这对于ajax应用程序特别有用，可以用不同的#值，表示不同的访问状态，然后向用户给出可以访问某个状态的链接。值得注意的是，上述规则...

2018-07-17 18:00:39 1259

原创 chrome调试技术

chrome devtool打印console.table() 通常打印都用console.log 但是console.log显示的数组或json不够美观，console.table会以表格形式输出内容(可以打印多维数组，和对象)console.dir（用于打印dom对象）是侧重于字符串化的打印，console.dir能递归所有的对象属性,console.log只能打印对应的...

2018-07-17 12:22:01 333

原创小程序滚动导航

备用的小程序样式，以后直接复制就好了，哈哈index.wxml<view class="container" bindtap="{{qiphon.bb(44,22)}}"> <view class='nav'> <scroll-view scroll-x scroll-with-animation="...

2018-07-16 19:25:46 1606

转载前端优化（《高效前端》）

浏览器渲染知识帧人眼感觉良好的帧率为60fps以上，这样才能看起来不卡顿，60fps为例，它要求一帧完成的事件为 1s/60 = 16.7ms . 浏览器显示页面的时候，要处理js逻辑，还要做渲染，每个片段执行不能操过16.67ms。实际上，浏览器内核支撑体系运行也需要一定的时间，所以留给我们的时间差不多只有10ms。在chrome开发文档《Rendering Perform...

2018-07-16 19:16:51 699

转载自定义浏览器滚动条样式

感谢刘洋的分享https://www.lyblog.net/detail/314.html自定义IE浏览器滚动条样式滚动条样式支持情况支持浏览器版本可否继承描述 scrollbar-3dlight-color IE特有属性 IE5.5+ y 设置滚动框的和滚动条箭头左上边缘的颜色 scrollbar-highlight-c...

2018-07-13 19:00:30 1379 1

原创伪类的使用

巧用css3伪类(尽可能地使用伪元素) 优点: 1.不会增加js的dom负担 2.不会增加浏览器对html的解析,加快浏览器加载html 3.对seo很有帮助注意：img、input 不能有伪类表单:focus 事件的使用 .input:focus + div{ display:block }:invalid 配合h5正则表单验...

2018-07-12 19:51:04 549

原创 css3 filter

2018-07-12 12:06:14 247

转载 form 的优点

form 优点1. 自动提交表单2. 回车键绑定3. 数据获取更轻松``` <div> <input id="user" /> <input id="password" /> </div> jQ 获取对应值的方式 $('user').val() ///这个看着挺简单的，但是性能损耗比...

2018-07-11 18:14:20 2229

原创 vs code编辑markdown 实时预览

方法很简单， 1、新建一个 readme.md 文件，用vs code打开 2、按 F1 输入 markdown 选择下图的选项即可

2018-07-11 16:00:53 56135 6

转载 pnpm更高效率的包管理工具

pnpm 优点： 1、效率更高 2、更小的空间占用 3、安全，与yarn一样，不会出现像npm那样的意外错误npm 命令在pnpm仍可以使用，以下的命令是pnpm重构的，install update uninstall link prune list install-test outdatedrebuild root help ...

2018-07-11 12:26:49 7691 2

原创小程序分享

微信分享的写法onShareAppMessage(){ return { title:"test", success:res=&gt;{ ///成功时返回 {errMsg: "shareAppMessage:ok"} console.log(res) // alert(res) }, fail:res=...

2018-07-10 12:30:53 638