content.json

[{"title":"换地方更新","date":"2019-04-06T23:59:59.000Z","path":"2019/04/07/更新说明/","text":"这个博客是之前还在长沙的时候折腾的 挂在github里（经常加载会很慢），后面来深圳找了工作之后用自己er567.cn这个域名和基友学生身份买的阿里云服务器基于typecho另外搭了一个，主题的话稍微找了下 无意间发现了Pinghsu还挺好看的，于是就换了过去。中间服务器还重置过一次东西都没备份…","tags":[]},{"title":"面试记录","date":"2018-07-21T22:44:21.000Z","path":"2018/07/22/面试记录/","text":"webpack有哪些配置？用过哪些webpack插件？ jq插件用过哪些？封装jq插件，原理 html5提供了什么存储方式？cookie / localStorage 和 sessionStorage区别 共同点：都是保存在浏览器端、且同源的 cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下 存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的 web Storage支持事件通知机制，可以将数据更新的通知发送给监听者 web Storage的api接口使用更方便 vue有哪些修饰符，阻止默认事件 v-model.trim v-model.number v-model.lazy @click.self @submit.prevent @click.stop @keyup.enter/.13 v-if v-show区别，重绘重排区别 如何加速首页的加载速度,优化点 vue双向绑定的原理以及具体实现 实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。（forEach遍历data属性值，递归；get推入Dep订阅器数组,set数据更新通知所有订阅者） 实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。 实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。事件是在compile的里面挂载的。 bus传递参数的方法，以及原理 vue源码解析之事件机制原理）（$on $emit的原理） Vue组件是什么数据类型（是个构造函数） Vuex state修改有哪些方法？能不能在全局修改state? Vuex的mutation action dispatch区别？在mutation使用异步会发生什么？会报错吗？（区分严格模式） es6 import和require用法和区别 加载方式 规范 命令 特点 运行时加载 CommonJS/AMD require 社区方案，非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量，无法进行静态优化。 编译时加载 es6 import 语言规格层面支持模块功能。支持编译时静态分析，便于JS引入宏和类型检验。动态绑定。 Vue mixins混入的几种情况，重名了怎么办？ 实现一个闭包和一个构造函数 圣杯布局的原理以及实现 css 画三角形的实现和原理（border-width:0 10px 10px 10px; 四条边框的宽度） rem自适应原理，根据根元素的字体大小来自适应（html) XSS 与 CSRF 两种跨站攻击以及如何防范（cookie的隐患） 常见正则表达式 关于this的题 12345678910111213141516var num = 10;var obj = { num:8, inner: { num: 6, print: function () { console.log(\"num: \"+num+\" , this.num: \"+this.num); } }}num = 888;obj.inner.print(); //num: 888 , this.num: 6var fn = obj.inner.print;fn(); //num: 888 , this.num: 888, this: Window(obj.inner.print)(); //num: 888 , this.num: 6(obj.inner.print = obj.inner.print)(); //num: 888 , this.num: 888 总结\b感觉从长沙出来还是比较仓促，没有好好复习面试题做准备 基础原理方面还是有所欠缺，还是像以前在学校一样裸考肯定是不行..\b\u001e面了4天累得不行（还是有几个offer）\b可能是身体有点虚QAQ\b~总的来说问的问题有基础的知识，也有深入到框架的原理，还有业务中的兼容和性能/安全问题，还是都要了解的拉。","tags":[{"name":"css","slug":"css","permalink":"oohyo.github.io/tags/css/"},{"name":"js","slug":"js","permalink":"oohyo.github.io/tags/js/"},{"name":"兼容","slug":"兼容","permalink":"oohyo.github.io/tags/兼容/"},{"name":"框架","slug":"框架","permalink":"oohyo.github.io/tags/框架/"}]},{"title":"一个简易多栏tab组件,以及npm发布","date":"2018-05-01T00:00:00.000Z","path":"2018/05/01/vue学习记录/","text":"介绍之前h5移动端项目有一个顶部tab栏的组件,那个是基于jq的各种操作dom,现在项目用vue重构,所以便想用vue重构下这个组件. 思路 先理清需求,把需要自定义配置的参数列出来(tab栏数量,tab栏文字,active颜色,tab栏点击事件..) 在App.vue里将需要的参数传入组件,在组件内用数据渲染成需要的结构 最后再完善样式 使用 安装 1npm install mm-vue-tab 引用 123import Vue from 'vue'import Tab from 'mm-vue-tab'Vue.use(Tab); 使用demo 1234<mm-vue-tab :options=\"option\"> <div slot=\"bd-1\">...</div> <div slot=\"bd-2\">...</div></mm-vue-tab> 12345678option:{ name: ['导航一','导航二'], //导航名称 lineColor: '', //默认 #f95d5b slotName: ['bd-0','bd-1'], //插槽名称 tabClick:function(){ //触发导航 console.log('click tab') }} 踩坑 关于npm发布,需要先将项目打包到lib,并且配置好package.json “private”: false, //设置为开源 “main”: “lib/index.js” //打包路径 如果你切换过npm源,发布的时候需要在npm login前切换回来. 在你决定正式发布之前应该在本地写demo测试几遍 附录Demo源码","tags":[{"name":"vue","slug":"vue","permalink":"oohyo.github.io/tags/vue/"},{"name":"js","slug":"js","permalink":"oohyo.github.io/tags/js/"},{"name":"npm","slug":"npm","permalink":"oohyo.github.io/tags/npm/"}]},{"title":"黑色星期五-环境爆炸","date":"2018-03-30T23:59:59.000Z","path":"2018/03/31/环境爆炸/","text":"环境爆炸了,原因疑似npm install哪个依赖包出了问题,导致webpack resolve alias不生效了,报错信息说很多依赖没有找到。后续:去掉了package.json里的一些无关紧要依赖,将包版本号前面的^去掉了(因为他会去自动下载当前大版本最新的),然后项目缺少的依赖单独安装.tips:看一下有没有少装vue-loader","tags":[{"name":"vue","slug":"vue","permalink":"oohyo.github.io/tags/vue/"},{"name":"小程序","slug":"小程序","permalink":"oohyo.github.io/tags/小程序/"},{"name":"项目环境","slug":"项目环境","permalink":"oohyo.github.io/tags/项目环境/"}]},{"title":"Linux折腾记录(一)","date":"2018-03-28T22:00:00.000Z","path":"2018/03/29/Linux_1/","text":"起因,想在服务器启一个定时任务,每天晚上9点自动去github上拉取最新的代码,然后vue-build编译,想试试水,弄了一下还是踩了蛮多坑的TAT 1.linux下安装git环境 yum -y install git 2.给git账户配置密钥 //生成密钥:ssh-keygen -t rsa -C “邮箱地址” cd ~/.ssh/ cat id_rsa.pub //将密钥复制添加到你的git账户 3.clone项目,安装依赖 4.写python脚本(路径要写绝对路径) 5.添加定时任务(crontab命令) 6.执行crond 遇到的一些问题1.crontab添加了定时任务之后没有crond start启动 /sbin/service crond start //启动服务 /sbin/service crond stop //关闭服务 /sbin/service crond restart //重启服务 /sbin/service crond reload //重新载入配置 /sbin/service crond status //查看状态 在执行crond 时提示cron: can’t lock /var/run/crond.pid, otherpid may be 2699: Resource temporarily unavailable;解决方案 rm -rf /var/run/crond.pid重启即可 /etc/init.d/crond restart 2.在定时任务跑python脚本没有环境变量搜索了一下,采用shell脚本来执行.. 3.关于shell脚本注意要写成绝对路径;注意.sh文件的文件格式(我在window下编辑好上传了一个shell脚本,然后运行报错了,最后发现是文件格式的问题)可以使用:set ff=unix转换文件格式.","tags":[{"name":"linux","slug":"linux","permalink":"oohyo.github.io/tags/linux/"},{"name":"centos","slug":"centos","permalink":"oohyo.github.io/tags/centos/"},{"name":"定时任务","slug":"定时任务","permalink":"oohyo.github.io/tags/定时任务/"}]},{"title":"常见基础&原理问题记录","date":"2018-03-17T17:30:15.000Z","path":"2018/03/18/基础&原理/","text":"一、js 1.JS引擎2.本地储存和离线缓存3.Javascript实现几种常用的排序算法4.v8sort排序5.闭包,继承,es6,异步 二、css 1.垂直居中方法2.盒模型3.什么是BFC 三、git 理解merge/rebase的区别分支合并有冲突的情况与解决方法 四、vue 1.双向绑定原理2.虚拟dom原理3.Vue的SSR原理(nuxt)4.webpack异步原理/代码分割 五、算法 1.实现一个JSON.stringify方法2.数组去重/复杂度","tags":[{"name":"css","slug":"css","permalink":"oohyo.github.io/tags/css/"},{"name":"vue","slug":"vue","permalink":"oohyo.github.io/tags/vue/"},{"name":"js","slug":"js","permalink":"oohyo.github.io/tags/js/"},{"name":"浏览器","slug":"浏览器","permalink":"oohyo.github.io/tags/浏览器/"}]},{"title":"hexo yilia添加相册","date":"2018-03-04T00:30:00.000Z","path":"2018/03/04/hexo-yilia主题添加相册/","text":"最终效果：https://er567.cn/photos 参考连接：http://lawlite.me/ 有什么问题可以在下面留言评论或者左边的联系方式问我 下面大概说一下实现步骤 1.创建图床你可以用你自己的服务器搭一个，也可以使用七牛云，最方便当然还是直接在git上建一个仓库用来存放图片，缺点就是一次性添加图片过多的时候上传会有点慢。 2.压缩图片并整理图片信息这一步需要读取文件，你可以用nodejs,python,php等等都行。主题的作者是用的nodejs,我参考使用的是python。大概实现的功能就是读取原图，压缩图片，将原图和压缩过的图片的信息都整理好存到一个json文件中以便于hexo 主题模板渲染页面使用。 3.在blog目录中渲染相册页面拿到了图片信息json文件后需要编辑相册页面模板，你也可以自定义一些样式。在source目录中创建photos文件夹，在里面编辑ejs,js,css 4.部署以上这些都弄完没问题之后就可以部署上去了(每次更新图片需要跑一下脚本更新json) 遇到的问题在运行python脚本时候你可能会没有环境，简单，对照官网安装配置环境就好了。 安装PIL => pip install Pillow //图像处理库 然后还遇到里字符编码问题，保存的json文件中无法存中文。 因为Python2中默认的编码方式一般是GBK,需要在处理的中文字符串后.decode(‘gbk’) //将gbk编码的字符串转换成unicode编码 图片无法显示： 1.图片后缀是否保存正确2.控制台查看引用的路径是否正确3.图片是否已经成功上传到，并在仓库设置开启git pages","tags":[{"name":"hexo","slug":"hexo","permalink":"oohyo.github.io/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"oohyo.github.io/tags/yilia/"},{"name":"hexo主题","slug":"hexo主题","permalink":"oohyo.github.io/tags/hexo主题/"}]},{"title":"不要随便监听改变浏览记录！","date":"2018-01-30T19:00:00.000Z","path":"2018/01/31/别改变浏览器访问历史记录/","text":"最近在项目中遇到的坑，已填平=-=以后还是尽量别手动强跳页面打乱浏览器访问记录，尽量用原生的返回，性能体验比较好(返回后有缓存除外。 监听浏览器返回事件 1234window.history.pushState(null, null, null);//兼容window.addEventListener(\"popstate\", function(e) { //do something },false); 注意：ios8会有bug，页面加载的时候会直接执行监听的内容。 原因：浏览器版本，导致进页面就默认触发了popstate，导致了代码段执行，可以用下面的代码解决。 123456789101112var obj = { params:{isRun: false}, backTo:{ //图一代码段 }, initBack:{ var self = this; self.param.isRun = false; setTimeout(function () { self.param.isRun = true; }, 1000); //延迟1秒 防止微信返回立即执行popstate事件 self.backTo(); }} 浏览器缓存问题1.如是跳转页面 可以加时间戳12//调用timestamp(getReferrer()) 123456789101112131415161718192021222324252627282930313233//定义函数function getReferrer() { var referrer = ''; try { referrer = window.top.document.referrer; } catch (e) { if (window.parent) { try { referrer = window.parent.document.referrer; } catch (e2) { referrer = ''; } } } if (referrer === '') { referrer = document.referrer; } return referrer;};function timestamp(url) { var getTimestamp = new Date().getTime(); if (url.indexOf(\"&timestamp\") > -1) { url = url.split(\"&timestamp\")[0] + \"&timestamp=\" + getTimestamp; } else { if(url.indexOf(\"?\") > -1){ url = url + \"&timestamp=\" + getTimestamp }else{ url = url + \"?timestamp=\" + getTimestamp } } return url;} 2.可以在前页设置cookie或者session，设置标识判断123456cookie.set('isDelateBack', '1');//前页 设置cookieif(cookie.get('isDelateBack')=='1'){//后页 监听cookie,刷新页面(重置状态或清空cookie) cookie.set('isDelateBack','0') window.location.reload();} 3.缓存机制是浏览器自带的， 不会发起请求和执行js代码。pageshow方法是无效的 后续 微信小程序自带返回在ios和安卓的区别。 新坑，ios11以上，position：fixed弹窗上弹出键盘输入，会导致定位的弹窗错位以及光标错位；换成absolute就好 更新于2018.02.09 20:10 (小年夜)","tags":[{"name":"小程序","slug":"小程序","permalink":"oohyo.github.io/tags/小程序/"},{"name":"h5","slug":"h5","permalink":"oohyo.github.io/tags/h5/"}]},{"title":"小程序嵌h5","date":"2018-01-26T20:02:58.000Z","path":"2018/01/27/小程序内嵌h5/","text":"小程序嵌h5<web-view src="https://www.xxx.com?parmes=data&token=token"></web-view> 在内嵌的h5页面中通过if(window.__wxjs_environment === ‘miniprogram’){}判断当前环境是在h5还是小程序//需要引用JSSDK 1.3.1 以上版本然后在进行相关的逻辑操作，最后带参数返回小程序 通过url传参wx.miniProgram.navigateTo({url:'https:xxx.com?parmes=1&key=2'}) onLoad: function (options) { console.log(options);//{parmes=1,key=2} } 当前小程序不支持h5支付流程，只好调相关支付小程序或其他方法 目前往里跳转的页面路径最多只能十层 待续","tags":[{"name":"小程序","slug":"小程序","permalink":"oohyo.github.io/tags/小程序/"},{"name":"h5","slug":"h5","permalink":"oohyo.github.io/tags/h5/"}]},{"title":"移动端动画","date":"2018-01-20T23:50:00.000Z","path":"2018/01/21/移动端动画卡顿/","text":"一丶jq/zepto animate()方法 可以细化操作，回调方法，但是在移动端（安卓）卡顿 二丶css3 animation 可以用@keyframes细化过渡效果，没有回调操作，只能监控animation/transition是否已完成。 三丶transform 过渡top/left 导致重绘，手机性能不好时依然卡顿 使用绝对位置定位页面上的动画元素，将其脱离文档流，可以有效的防止重排。 使用transform:translateY/X来移动元素 scale()缩放元素 加上 -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); 开启GPU硬件加速 [参考链接]http://blog.csdn.net/majun0007/article/details/70049070 四丶RequestAnimationFrame如果你需要细化过渡效果，但是使用setTimeout可能在性能不够的手机上还是会出现卡顿的情况，我就遇到了这样的情况。 setTimeout会存在过度绘制，会造成帧丢失，继而导致动画断续显示。这也是setTimeout的定时器值推荐最小使用16.7ms的原因（16.7 = 1000 / 60, 即每秒60帧）。而requestAnimationFrame是跟着浏览器绘制来的，不会存在过度绘制，也就不会出现动画卡顿的情况。参考链接代码 五丶遇到的坑 元素display:none的时候是拿不到transform的值（其他属性没试），解决办法：用visibility: hidden; 过渡动画的时候，先让元素display:block 马上执行css3动画，结果浏览器直接忽略过渡动画，渲染最后的结果。 解决办法：使用延时器，延迟一点css3动画的执行。","tags":[{"name":"兼容性","slug":"兼容性","permalink":"oohyo.github.io/tags/兼容性/"},{"name":"css3","slug":"css3","permalink":"oohyo.github.io/tags/css3/"},{"name":"动画","slug":"动画","permalink":"oohyo.github.io/tags/动画/"}]},{"title":"window nginx配置https相关问题","date":"2017-12-11T18:00:01.000Z","path":"2017/12/12/nginx-https/","text":"[emerg] BIO_new_file(“/usr/local/nginx/conf/cert/214291778530222.pem”) failed (SSL: error:02001002:system library:fopen:No such file or directory:fopen(‘/usr/local/nginx/conf/cert/214291778530222.pem’,’r’) error:2006D080:BIO routines:BIO_new_file:no such file) failed. =>原因未知，将证书和key的路径改成相对路径就可以了 [emerg] shared zone “SSL” has no equal addresses: 02CC0000 vs 02CB0000 =>错误原因：ssl_protocols SSLv2 SSLv3 TLSv1 应该是协议配置的问题=>解决办法：ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2; 如果是include vhost里的配置，则vhost里的conf配置也要加上listen 443;","tags":[{"name":"前端","slug":"前端","permalink":"oohyo.github.io/tags/前端/"},{"name":"nginx","slug":"nginx","permalink":"oohyo.github.io/tags/nginx/"}]},{"title":"解决 Windows 下 VSCode 运行 Python 程序的中文乱码问题","date":"2017-11-28T18:30:00.000Z","path":"2017/11/29/VScode终端乱码/","text":"原因Windows 下的 cmd 和 powershell 默认是 GBK 编码显示输出内容， 这导致使用 UTF-8 的 Python 程序中的中文内容（包括注释、文档、和字符串字面量）会以不正确的解码方式输出成乱码内容。 解决办法Windows 内置了一个叫 “chcp” 的命令，它可以修改要显示的字符集编码的编号。UTF-8 的编号是 65001，所以启动 cmd 或者 powershell 以后可以手动输入：chcp 65001来改变编码。 启动 powershell 的时候带上修改编码的参数: “chcp.com 65001” 即可做到自动设置编码。设置如下:选择：文件 - 首选项 - 用户设置，粘贴下面的配置键值到 json 中保存： "terminal.integrated.shellArgs.windows": ["-NoExit", "/c", "chcp 65001"] 但是注意：仅靠修改代码页编号在 cmd 下仍然无法正常显示中文，需要进一步修改字体（有待考证）。ps:(当我用默认的cmd,没换成poweshell时候,)所以没有管 cmd 了，因为在 powershell 下是正常的。 修改 Terminal 选择：文件 - 首选项 - 用户设置，粘贴下面的配置键值到 json 中保存： "terminal.integrated.shell.windows": "C:\\\\WINDOWS\\\\sysnative\\\\WindowsPowerShell\\\\v1.0\\\\powershell.exe" 附参考链接：蓝雨博客","tags":[{"name":"python","slug":"python","permalink":"oohyo.github.io/tags/python/"}]},{"title":"Python学习笔记(一)","date":"2017-11-24T16:42:00.000Z","path":"2017/11/25/pyhton学习笔记(一)/","text":"一、环境搭建基础环境https://www.python.org/ 下载python3.x安装包 安装好，并添加至系统环境变量。 虚拟环境virtualenv pip install virtualenv cd 到一个你想创建的目录路径 virtualenv venv 环境名称 二、基本语法python对缩进要求非常严格， 如果格式有误则会抛出类似‘IndentationError: unexpected indent’的错误。 空格与tab不能混用，否则会报错。所以还是用两个空格吧>< 数字 正常的+，-，*，/，取余%和js都是一样的； 除法（/）永远返回一个浮点数 15/3=5.0 如果想取整可以使用（//）运算符 17//3=5 计算幂乘方使用（**） 5**2=25 交互模式中，最近一个表达式的值会赋给变量（_），这是一个系统内置变量 字符串 和js一样，单引号‘’，双引号“”都可以表示字符串，\\ 用来转义。 print() 函数生成可读性更好的输出, 它会省去引号并且打印出转义后的特殊字符 如果字符串中的\\字符被当作特殊字符，可以使用原始字符串，在第一个引号前加r >>> print(‘C:\\some\\name’) # here \\n means newline!C:\\someame>>> print(r’C:\\some\\name’) # note the r before the quoteC:\\some\\name 三个引号表示多行字符串文本，行尾的换行符会被自动包含在字符串中，可以在行尾加\\来避免换行。 字符串拼接用+，重复字符串用*； >>> 3 * ‘un’ + ‘ium’‘unununium’ python相邻的字符串会自动连接，但字符串和变量不会自动连。 >>> text = (‘Put several strings within parentheses ‘‘to have them joined together.’)>>> text‘Put several strings within parentheses to have them joined together.’ 字符串自带索引，左边从0开始，负数则从最后一个字符开始。 字符串自带切片,’Python’[0:2] = ‘Py’; s[:i] + s[i:] 永远等于 s ; ‘Python’[:2] + ‘Python’[2:] = ‘Python’ len(str) 内置函数返回字符串长度","tags":[{"name":"python","slug":"python","permalink":"oohyo.github.io/tags/python/"}]},{"title":"ibeacons管理后台","date":"2017-11-11T11:11:11.000Z","path":"2017/11/11/ibeacons后台/","text":"       最近写了一个ibeacons管理后台,用到了很多新的东西，也踩了很多坑，就写下来记录回顾一下吧。 效果图: 1、Techniques used layui (phper推荐的,mmp) context.js (自定义右键菜单) highcharts,echarts (可视化图表) 等等还有一些其他东西 2、Problem layui自称是一个模块化框架，首先引用它就和我们用的RequireJS模块加载器冲突了。 解决办法：在app.js里需要配置路径，然后shim导出，然后在文件中还需要配置layui的指向1234layui.config({ dir: '//s1.bbgstatic.com/beacon-manager/js/plug/layui/', debug: false //}); layui里一些东西无法灵活的配置，满足你的需求，这个没办法，不好用就不用呗 柱状图x轴条数过多，倾斜，默认超出会自适应的滚动条的 123456789101112xAxis: { min: 0, max :10, type: 'category', labels: { rotation: -45, style: { fontSize: '13px', fontFamily: 'Verdana, sans-serif' } }} 一些正则和逻辑判断，continue break return 123456789101112131415161718for(var i in urlData.conf){ var _weight = urlData.conf[i].urlList[0].weights; var _url = urlData.conf[i].urlList[0].url; if(_weight==''&&_url==''){//为空就跳过，验证下一行 continue; }else{ if(_weight<0||_weight>100||!(/^\\d+$/.test(_weight))){ weightBoolean = false;break; }else{ weightBoolean = true; if(!/https?:\\/{2}[^\\s]*/.test(_url)){ urlBoolean = false;break; }else{ urlBoolean = true;continue; } } }} if(!weightBoolean){ layer.msg('权重请输入1-100的正整数！', { icon: 5}) return; } if(!urlBoolean){ layer.msg('url格式输入有误，请检查后重新输入！', { icon: 5}) return; } 总结       技术选型很重要，以后不要选layui这种啦。","tags":[{"name":"layui","slug":"layui","permalink":"oohyo.github.io/tags/layui/"},{"name":"后台","slug":"后台","permalink":"oohyo.github.io/tags/后台/"}]},{"title":"绝地求生攻略","date":"2017-09-20T18:00:00.000Z","path":"2017/09/21/chiji/","text":"资源&载具 基础操作 跳伞未开伞，视角往下按住W加速垂直下落，可以比其他人提前到达。 跳伞未开伞，视角向前，保持125km/h速度，按住w，可以尽量飞得远。 松开W按等号键自动奔跑，按住ALt键自由观看，可以在自动奔跑时观察周围。 V切换第一/第三人称，第一人称更适合瞄准，第三人称适合观察。 持枪单击右键使用第一人称瞄准（使用瞄准镜的话只有单击右键才能看到）按住右键虚拟准星第三人称瞄准。 滚轮可以切换武器。 Tab键可以捡周围物品，右键点击周围物品快速拾取，在东西杂乱的地方好用。 右键背包里的配件可以自动装在武器栏配件里。 Q，E可以微微探头。 丢物品时按住ctrl可以选择数量。 密位Pg，up，Pg，down可以在有倍数瞄准镜的情况下调整校正。 拿到枪要换子弹..此时不能奔跑。 T是附近/队伍语音。 开镜/机瞄时按shift屏息，稳定准星，无倍数镜时增加微量放大倍数。必须在静止不动时使用（神迹，用全息红点也能打很准很远）也可以用做望远镜。 步行时ctrl静步,游泳时ctrl下降空格上浮，游泳也可以用等号自动游。 驾驶车辆，快艇时按shift提速，会微微增加油耗。 载具中，ctrl+1/2/3/4在车里切换座位，1为驾驶2为副驾驶，行驶中亦可使用，主要用于队友司机被击倒之后恢复对车辆控制。 投掷类右键瞄准拉环，左键丢出，请不要按住右键不放手。 1、7条旁边有队友时候请格外小心。 B切换枪的单发和连射模式，突击步枪蹲人的时候切换成连发比较占便宜，但是后坐力很大。 枪支&&配件狙击枪： AWM：伤害和射程之王，三级头也是一枪倒。 M24：不输AWM的一把狙击，二级头及以下一枪。 Kar98(karabiner，98，Kruz)：二战手动步枪，每一发.射击后要拉栓，一级及无.头一枪击杀，2级头一发99。 SKS：连狙，打头的击杀能力与Kar98差不多，身体要略逊一筹，10发弹匣，对枪法有自信的人近战可以当AK用。 除AWM用.300马格南，其他都是7.26。 AWM，与M24只能在补给箱获得。 狙击枪：你一个新手还能拿到？拿到能用就行啦。 突击步枪： AKM口径大，伤害最高。 M16A4，射速最快。 M416，配件项目最多。 SCAR没有最好的地方，各项数据平均。 新手玩家推荐： 优先级 手枪P1911 霰弹枪S12K 冲锋枪UMP9 突击步枪：有什么拿什么兄弟！ 手枪： R1895：与AK一样口径的手枪，威力直追AK，缺点是怕3级防具与换弹速度慢。枪法自信的人可以初期清理附近的人使用，初期没有高级护甲2-3枪可以杀人。 P1911：很平均，新手可用，.45子弹。 P92：伤害最低射速最快，如果能中三枪，枪法好的人可用，不过初期杀人要三枪打底。 霰弹枪： S686：两发一个弹匣，有少量的中距离能力，大概在一个房子的距离之内。 S1897：亮点在于五发弹匣，伤害很足，距离和稳定性差，打纯优势战斗（对方实力不足/单发手枪/S686）的时候可以用，冲房子的时候推荐S12K。 S12K：五发弹匣，连喷，有中距离能力，近战之王，最多两枪一个，推荐清屋子，巷战侧翼包抄使用。 冲锋枪： Uzi：乌兹，总体数据不如UMP9，射速稍快，而且较为稀有，不推荐，不过经常看到Uzi的枪托。 UMP9：中规中矩，近战打头拼命伤害还是很足的，2级头三枪撂倒。 汤普森：.45手枪子弹，射速全游戏最高，100弹匣，有效范围直追突击步枪，适合近中距离作战，只能在补给里获得。 握把 垂直握把减少枪口的上下后坐力，直角握把能减少上下的后坐力与左右飘的后坐力，但是没有垂直效果明显，不知道为什么游戏数据装配垂直握把会没有增强属性，战术握把，M416专用，增加稳定性。 枪尾 子弹袋，分为Kar98用和霰弹枪用，作用和QuickDraw，相同，减少换弹时间和取枪速度，托腮板，增加稳定性，应该是只有狙击有这个。 瞄准镜我就不细说了，15x只有补给有，8x4x和无倍数都能在各处找到。红点和全息我推荐红点，全息的圈圈阻挡视野。 枪口： 消焰器、消音器、补偿器、扼流圈 消焰器顾名思义，消除枪口火焰，让你更难被发现，同时开高配时候机瞄会有枪口火焰阻挡视野，可以增加击杀几率，讲道理，低配真的没用。 消音器，效果非常好，然而找。到合适的真的很难，这游戏由于做了超音速子弹音效，本身就比较难靠枪声判定方位，加了消音器几乎是隐身击杀 扼流圈，只有霰弹枪能用，集中射击范围，相当于勉强增加了射程，有就带上。 补偿器，降低后坐力，连发时效果中等。 消音>补偿>消焰 弹夹 QuickDraw，单看属性，加的是射速，但实际上，是增加换弹速度，和，取枪速度。 快速弹夹，提高换弹速度。 扩容弹夹，能给百分之三十的容量，扩充，其实很有用，连续作战能力好。 双弹夹，是兼容，两项的，好东西，优先级，一定是，双弹夹>，扩容，快速","tags":[{"name":"随笔","slug":"随笔","permalink":"oohyo.github.io/tags/随笔/"}]},{"title":"css4新特性","date":"2017-08-23T13:50:00.000Z","path":"2017/08/23/css4/","text":":not 1E:not(s1, s2, ...) {} 在css3中仅能匹配一个选择器,css4中可以匹配多个; :not([data-xxx=”xx”],[data-xxx=”xxx”]); 可以用:not()来提高优先级 e.g .negation:not(p){ color:blue; } .negation { color: black; } 仅支持safari :matches 123E:matches(s1, s2) {}E:-webkit-any(s1, s2, ...) {}E:-moz-any(s1, s2, ...) {} 意义与:not()相反,匹配对应选择器,简化重复的规则 :matches(span, div) :matches(span, div) {} 支持大部分主流浏览器,不支持ie和Edge(win10内置浏览器) :has 1E:has(rs1, rs2, ...) 包含伪类选择器,匹配选择器 暂时没有浏览器支持 E:[foo=”bar” i] 1E:[foo=\"bar\" i]{} 属性选择器,忽略大小写 不支持ie,Edge和Chrome for Mobile :dir 1E:dir(ltr/rtl){} 根据文本方向匹配,从左到右或者从右到左 [dir=…]无法匹配到没显示声明 dir 的元素,:dir()可以 仅支持Firefox :lang 1E:lang(*-CA) {} 在css2中就被添加,css4中新增了通配符 暂时木有浏览器支持 :any-link 123E:any-link {}E:-webkit-any-link {}E:-moz-any-link {} 超链接伪类选择器,只要a有href就能匹配,在以前只能a[href=value] 支持大部分主流浏览器,不支持ie和Edge :scope 1E:scope() {} 样式范围伪类选择器,style scope的父元素以内的范围 持大部分主流浏览器,不支持ie和Edge :current / :past / :future 123E:current(s1, s2, ...) {}E:past(s1, s2, ...) {}E:future(s1, s2, ...) {} 匹配当前,过去和未来的伪类选择器,类似歌词/字幕 给媒体元素规定外部文本轨道，当媒体播放时，这些文件可见暂时没有浏览器支持 :drop 1E:drop(active || valid || invalid) {} 匹配被拖动元素覆盖的元素(状态) 暂时没有浏览器支持 :indeterminate 1:indeterminate {} 匹配不确定的元素,如Checkbox & radio,默认只有两种状态checked unchecked,需要用js赋第三种状态document.querySelector(‘#id’).indeterminate = true;支持所有主流浏览器 :default 1E:default {} 匹配默认元素的伪类选择器,一组相近的ui元素中默认的,form表单的第一个按钮 不支持ie和Edge浏览器 Validity 12E:valid {}E:invalid {} 匹配input&form元素有效还是无效,e.g input type=’mail’ > input type=’tel’ 兼容所有主流浏览器 Range 12E:in-range {}E:out-of-range {} 匹配input的值是否在规定范围区间 兼容主流浏览器,除了ie Optionality可选性 12E:required {}E:optional {} 可选性伪类选择器,匹配表单内input是否必选 兼容所有主流浏览器 :user-error 1E:user-error {} 匹配:invalid, :out-of-range, or empty :required,当用户与元素有了交互才能生效 不兼容所有浏览器. :read-only / :read-write 12E:read-only {}E:read-write {} 前者匹配不能编辑的元素比如p,span,h1,h2..;后者匹配可编辑元素 contenteditable=”true”的元素.input textarea等 不支持ie和Safari for mobile,Opera for mobile Placeholder-Shown 1234E:placeholder-shown { /* Style properties */ }E::-webkit-input-placeholder { /* Chrome, Safari, Opera */ }E::-moz-placeholder { /* Firefox */ }E:-ms-input-placeholder { /* IE */ } 匹配有占位字符的输入框,给占位字符设置样式 兼容所有主流浏览器 :blank 12E:blank {} E:-moz-only-whitespace { /* Firefox */ } 与css3中的:empty类似,区别是:empty中不能有元素,:blank中可以有;匹配空格,tab和段落换行 仅支持火狐,需兼容写法 Grid-Structural 123E:column(selector) {}E:nth-column(an + b) {}E:nth-last-column(an + b) {} 匹配对应列的所有元素,:nth-last-column是从后往前数 暂不支持所有浏览器 附参考资料：文档 Demo","tags":[{"name":"css","slug":"css","permalink":"oohyo.github.io/tags/css/"},{"name":"布局","slug":"布局","permalink":"oohyo.github.io/tags/布局/"},{"name":"兼容性","slug":"兼容性","permalink":"oohyo.github.io/tags/兼容性/"}]},{"title":"hexo--d部署失败","date":"2017-08-10T16:08:00.000Z","path":"2017/08/11/hexo-d 部署失败/","text":"fatal: in unpopulated submodule ‘.deploy_git’ 遇到这个错误首先可以先尝试重新安装hexo-deployer-git依赖 npm install hexo-deployer-git –save 如果还是无法部署，可以尝试将.deploy_git文件夹删除，重新hexo g hexo d","tags":[{"name":"hexo","slug":"hexo","permalink":"oohyo.github.io/tags/hexo/"},{"name":"deployer","slug":"deployer","permalink":"oohyo.github.io/tags/deployer/"},{"name":"git","slug":"git","permalink":"oohyo.github.io/tags/git/"}]},{"title":"BFC","date":"2017-08-01T13:00:00.000Z","path":"2017/08/01/BFC-块级格式化上下文/","text":"       前段时间,在写一个积分规则的静态页面时(如图),想了一下便用了最容易想到的方法实现了…之后code review的时候便被指了出来= = 因为前面有一个点,然后下面一行需要和第一行的文字对齐,便选择用白点占位… 效果图: 代码:        显然这么写是不行的,增加了许多没意义的标签,可维护性也不好!整个文本就应该用一个标签包起来,这样也方便维护,所以就了解到了BFC(块级格式化上下文) 1、触发BFC的条件float元素； overflow:auto,scroll,hidden, display :inline-block,table,table-caotion position:absolute,fixed 2、布局规则 里面元素不影响外面，完全独立 从上到下，同一父BFC内margin重叠 BFC不与浮动元素重叠，浮动参与高度计算、 内部BFC margin 贴紧 外部border 左或右 注意: 在这里是用到了第3条.overflow:hidden触发了BFC,导致自己内部浮动元素高度参与计算,从而避免了高度塌陷. 改完之后: <ul> <li> <i class="dot"></i> <div>积分金额指有效真实消费，仅计算使用现金、信用卡、借记卡、步步高商务卡付款等实际付款金额。</div> </li> <li> <i class="dot"></i> <div>健身卡、课程卡、礼品卡、购买商务卡、优惠券（代金券）等礼券类付款部分、促销活动立减部分及积分抵扣部分、特殊品牌（详见门店公告）不参与积分。</div> </li> </ul> 前面的dot需要浮动,文本段加上overflow:hidden即可 总结       平时写代码的时候最好不要图快,抱着实现就可以了的想法,做到扩展性强,可读性好,方便维护.","tags":[{"name":"css","slug":"css","permalink":"oohyo.github.io/tags/css/"},{"name":"布局","slug":"布局","permalink":"oohyo.github.io/tags/布局/"}]},{"title":"湄江游记","date":"2017-07-16T23:59:00.000Z","path":"2017/07/17/湄江/","text":"旅游 [图1]湄江水库大坝 ————————[图1]十里画壁———————————–[图2]大坝眺望——————-[图3]大江口——–        这里就放这几张图吧,本来我也挺喜欢旅游的,只是因为太懒了,以为没有什么比呆在家里更nice~但这次小旅行改变我的看法.一起爬观音崖,一起去大坝下面找螃蟹,乘船遨游大江口,参观博物馆,爬香炉山…除了这些之外还有一个有意思的项目就是狼人杀了,一直玩到凌晨都舍不得去睡… 猫       最近一直想样一只小猫,原因有很多,没有立马行动也是因为有一些其他顾虑…但是相信不久之后,或者说等工作稳定了,便会立刻去领养一只并对它负责一生吧// 书       看书的话,最近在看[解忧杂货店],之前就看了一半了,计划这个月看完,然后下个月看亲密关系 电视剧       国产的楚乔传,冲着颖宝和林狗去看的,没看过小说,剧情有点拖沓,勉强能看;美剧-权利的游戏第7季终于在7-17开更了…据说只有第七季和第八季了,龙妈和异鬼在两边杀,所以发便当的速度会非常快~总而言之,这是一部非常值得一看的剧~ 结束","tags":[{"name":"随笔","slug":"随笔","permalink":"oohyo.github.io/tags/随笔/"}]},{"title":"WebPack学习笔记","date":"2017-06-15T16:50:00.000Z","path":"2017/06/16/webpack学习笔记/","text":"什么是WebPack?webpack是一个模块打包工具，其可以兼容多种js书写规范，且可以处理模块间的依赖关系，具有更强大的js模块化的功能。 为什么是WebPack1.模块化 将复杂的程序细分成小模块,通过可以将其他资源转换成 JavaScript 的加载器，实现一切皆模块 对 CommonJS 、 AMD 、ES6的语法做了兼容，以及特殊模块的 Shim 处理(shim:为那些没有使用define()来声明依赖关系、设置模块的”浏览器全局变量注入”型脚本做依赖和导出配置。) CommonJS模块必须通过 module.exports 导出对外的变量或接口，通过 require() 来导入其他模块的输出到当前模块作用域中 异步加载,模块通过 define 函数定义在闭包中,return返回 2.开发便捷 能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等 对 JS、CSS、图片等资源文件都支持打包，配合 loader 加载器，也可以支持 Sass，Less 等 CSS 预处理器 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，通过 babel-loader 就可以直接使用 ES6 的模块机制 具有强大的 Plugin 接口，大多是内部插件，使用起来比较灵活。 3.性能更优 基于配置智能分析打包多个文件，实现公共模块按需加载 在内存中打包，性能更快 使用异步io,并具有多级缓存 4.区别于gulp&&grunt Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。 Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件 文件目录|—— app | |—— Greeter.js | |__ main.js | |__ module.js | |__ color.scss | |__ module.js | |—— public | |—— bundle.js | |__ index.html | |—— node_modules //依赖 |__ package.json //环境配置 |__ webpack.config.js //参数配置 WebPack安装与配置npm install -g webpack //全局安装 npm install --save-dev webpack //当前项目中安装 npm install //安装依赖 npm install -g webpack-dev-server //安装webpack开发服务器 插件1.css - ExtractTextPlugin WebPack常用命令 webpack 最基本的启动webpack命令 webpack -w 提供watch方法，实时进行打包更新 webpack -p 对打包后的文件进行压缩 webpack -d 提供SourceMaps，方便调试 webpack-dev-server –open 静态资源服务器 静态资源服务器npm install -g webpack-dev-server //安装webpack开发服务器 从WebPack 1.X 迁移到 WebPack 2.X1.Resolveresolve.extensions 不再需要传入空字符串，extensions: [‘’, ‘js’] -> extensions: [‘js’]。 2.Module 取消了在模块名中自动添加 -loader 后缀module.loaders 修改为 module.rules 。// 为了兼容旧版，module.loaders 语法仍然有效，旧的属性名依然可以被解析Loaders 需要添加 -loader，如 babel -> babel-loader 。 module: { rules: [ { use: [ //"style", "style-loader", //"css", "css-loader", //"less", "less-loader", ] } ] } 3.链式 loaders与 v1 版本相同，loaders 可以链式调用，上一个 loader 的输出被作为输入传给下一个 loader。使用 rule.use 配置项，use 可以设置为一个 loaders 的列表。在 v1 版本中，loaders 通常被用 ! 连写。这一写法在新版中只在使用旧的 module.loaders 时有效。 4.Extract-Text-Webpack-Pluginmodule: { rules: [ test: /.css$/, //loader: ExtractTextPlugin.extract("style-loader", "css-loader", { publicPath: "/dist" }) loader: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: "css-loader", publicPath: "/dist" }) ] } 567…参考资料 官方文档(https://webpack.js.org/guides/get-started/) 中文文档(https://doc.webpack-china.org/guides/get-started/)","tags":[{"name":"js","slug":"js","permalink":"oohyo.github.io/tags/js/"},{"name":"WebPack","slug":"WebPack","permalink":"oohyo.github.io/tags/WebPack/"}]},{"title":"蜜汁四月","date":"2017-04-23T22:56:33.000Z","path":"2017/04/24/蜜汁四月/","text":":)先秀一波新入的肉吧~ 计划  不知不觉四月已经快过完了，毕业设计还没开始动手，只能我先出手了…学习方面还是没有走什么计划，所以这一次决定定一波计划~1.毕业论文2.PHP入门，操作数据库3.模拟接口(php/nodejs) New Knowledgechrome控制台调试方法1.Sources 打断点2.Preserve log 保留日志3.Sources - Watch 单步调试，跟踪变量的一生 loading… 附参考资料：Sources拾遗","tags":[{"name":"css","slug":"css","permalink":"oohyo.github.io/tags/css/"},{"name":"js","slug":"js","permalink":"oohyo.github.io/tags/js/"},{"name":"template","slug":"template","permalink":"oohyo.github.io/tags/template/"}]},{"title":"学习笔记","date":"2017-03-29T16:42:00.000Z","path":"2017/03/30/学习笔记/","text":"SSI 服务器端包含SSI指令基本格式程序代码：说明：1．\\；是HTML语法中表示注释，当WEB服务器不支持SSI时，会忽略这些信息。 2．#include 为SSI指令之一。 3．file 为include的参数，info.htm为参数值，在本指令中指将要包含的文档名。 注意：1．\\<!–与#号间无空格，只有SSI指令与参数间存在空格。 2．上面的标点=””，一个也不能少。 3．SSI指令是大小写敏感的，因此参数必须是小写才会起作用。 include指令详解 Virtual：给出到服务器端某个文档的虚拟路径。(相对于网站根目录的路径） File：给出当前目录的相对路径其中不能使用”../“，也不能使用绝对路径。(相对于服务器根目录的路径） SSI的include对SEO有没有影响？ 除了服务器需要多做一些工作外，通过include和直接写在页面上对外提供的页面内容是相同的，也就不会影响SEO. 但是不能把头部一些内容比如titile,keywords与description也公用,这样对搜索引擎十分不友好 参考链接:使用include对搜索引擎收录是否有影响? 联调-接口接口文档是根据RAP生成的,根据接口文档上的url和字段就可以写ajax请求了大致格式:接口说明: 描述url:XX/XX/XX入参:字段名-字段说明出参:字段名-字段说明","tags":[{"name":"css","slug":"css","permalink":"oohyo.github.io/tags/css/"},{"name":"js","slug":"js","permalink":"oohyo.github.io/tags/js/"},{"name":"移动端","slug":"移动端","permalink":"oohyo.github.io/tags/移动端/"}]},{"title":"前后端联调","date":"2017-03-09T01:46:00.000Z","path":"2017/03/09/前后端联调/","text":"Task One:修改links  首先是调链接,将原来的项目clone下来,替换掉部分链接… 看似十分简单的任务,但是我却也GG了几次~MMP,先是链接没有完全改完,漏掉了js文件里的几个没有改,但是这并不重要,重要的是根本就没有发布 - -//  最后,经过一顿折终于是发布到了测试环境上让java老哥跑了起来~ Task Two:添加dom元素  嗨呀,改这个并没有什么难度..但还是遇到了几个问题,比如在没有服务器环境的情况下如何看到修改后页面的效果,mootools和jq的冲突啊,等等…调试问题是用Fiddler解决的,具体方法:1.用Fiddler查看页面的数据流列表，找到这个需要修改文件的session2.将文件保存到本地3.开启Fiddler的请求自动重定向功能4.创建重定向规则，将目标是这个文件网上url请求重定向到本地文件5.修改本地文件，进行测试 冲突问题用jQuery.noConflict()1.原因是mootools或其他js插件库的$起了冲突2.先引用jq,然后插入 var jq = jQuery.noConflict() 之后再引用mootools或其他js插件库;还有要注意的就是如果你还要使用jq的插件的话,记得手动把插件里的$符都改成jq !!! 使用编辑器的快捷键1S就搞定了,这里就不多提了~3.用jq操作dom的时候和平时用一样,只不过将$换成jq罢了 面临的问题 获取数据是不是也要用mootools模版 省市区控件(到底是否可以引入JQ),dom操作能不能用jq 接口格式不知道..java老哥说和之前的不一样 mock数据具体操作 怎么模拟接口数据让fiddler抓取 附参考资料：Mock 假数据模拟冲突的解决办法","tags":[{"name":"Mootools","slug":"Mootools","permalink":"oohyo.github.io/tags/Mootools/"},{"name":"联调","slug":"联调","permalink":"oohyo.github.io/tags/联调/"}]},{"title":"关于移动端适配","date":"2017-02-28T23:42:10.000Z","path":"2017/03/01/关于移动端适配/","text":"设备的像素比(device pixel ratio)简称DPR1.物理像素(physical pixel)我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒（物理像素）组成的。 2.逻辑像素是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。 DPR = 物理像素 / 逻辑像素 方法:利用js计算当前设备的DPR，动态设置在html标签上，并动态设置html的font-size，利用css的选择器根据DPR来设置不同DPR下的字体大小->下面贴代码 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155!function(win, lib) {var timer, doc = win.document, docElem = doc.documentElement, vpMeta = doc.querySelector('meta[name=\"viewport\"]'), flexMeta = doc.querySelector('meta[name=\"flexible\"]'), dpr = 0, scale = 0, flexible = lib.flexible || (lib.flexible = {});// 设置了 viewport metaif (vpMeta) { console.warn(\"将根据已有的meta标签来设置缩放比例\"); var initial = vpMeta.getAttribute(\"content\").match(/initial\\-scale=([\\d\\.]+)/); if (initial) { scale = parseFloat(initial[1]); // 已设置的 initialScale dpr = parseInt(1 / scale); // 设备像素比 devicePixelRatio }}// 设置了 flexible Metaelse if (flexMeta) { var flexMetaContent = flexMeta.getAttribute(\"content\"); if (flexMetaContent) { var initial = flexMetaContent.match(/initial\\-dpr=([\\d\\.]+)/), maximum = flexMetaContent.match(/maximum\\-dpr=([\\d\\.]+)/); if (initial) { dpr = parseFloat(initial[1]); scale = parseFloat((1 / dpr).toFixed(2)); } if (maximum) { dpr = parseFloat(maximum[1]); scale = parseFloat((1 / dpr).toFixed(2)); } }}// viewport 或 flexible// meta 均未设置if (!dpr && !scale) { // QST // 这里的 第一句有什么用 ? // 和 Android 有毛关系 ? var u = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)), _dpr = win.devicePixelRatio; // 所以这里似乎是将所有 Android 设备都设置为 1 了 dpr = u ? ( (_dpr >= 3 && (!dpr || dpr >= 3)) ? 3 : (_dpr >= 2 && (!dpr || dpr >= 2)) ? 2 : 1 ) : 1; scale = 1 / dpr;}docElem.setAttribute(\"data-dpr\", dpr);// 插入 viewport metaif (!vpMeta) { vpMeta = doc.createElement(\"meta\"); vpMeta.setAttribute(\"name\", \"viewport\"); vpMeta.setAttribute(\"content\", \"initial-scale=\" + scale + \", maximum-scale=\" + scale + \", minimum-scale=\" + scale + \", user-scalable=no\"); if (docElem.firstElementChild) { docElem.firstElementChild.appendChild(vpMeta) } else { var div = doc.createElement(\"div\"); div.appendChild(vpMeta); doc.write(div.innerHTML); }}function setFontSize() { var winWidth = docElem.getBoundingClientRect().width; if (winWidth / dpr > 540) { (winWidth = 540 * dpr); } // 根节点 fontSize 根据宽度决定 var baseSize = winWidth / 10; docElem.style.fontSize = baseSize + \"px\"; flexible.rem = win.rem = baseSize;}// 调整窗口时重置win.addEventListener(\"resize\", function() { clearTimeout(timer); timer = setTimeout(setFontSize, 300);}, false); // 这一段是我自己加的// orientationchange 时也需要重算下吧win.addEventListener(\"orientationchange\", function() { clearTimeout(timer); timer = setTimeout(setFontSize, 300);}, false);// pageshow// keyword: 倒退 缓存相关win.addEventListener(\"pageshow\", function(e) { if (e.persisted) { clearTimeout(timer); timer = setTimeout(setFontSize, 300); }}, false);// 设置基准字体if (\"complete\" === doc.readyState) { doc.body.style.fontSize = 12 * dpr + \"px\";} else { doc.addEventListener(\"DOMContentLoaded\", function() { doc.body.style.fontSize = 12 * dpr + \"px\"; }, false);}setFontSize();flexible.dpr = win.dpr = dpr;flexible.refreshRem = setFontSize;flexible.rem2px = function(d) { var c = parseFloat(d) * this.rem; if (\"string\" == typeof d && d.match(/rem$/)) { c += \"px\"; } return c;};flexible.px2rem = function(d) { var c = parseFloat(d) / this.rem; if (\"string\" == typeof d && d.match(/px$/)) { c += \"rem\"; } return c;}}(window, window.lib || (window.lib = {})); 今天自己写适配的时候,把头文件大概都看了一下 最后，由于本人还是前端路上的小菜鸟，见识有限，才疏学浅，有表述错误的地方，还请指正，以上。 附参考资料：淘宝移动端适配方案","tags":[{"name":"学习笔记","slug":"学习笔记","permalink":"oohyo.github.io/tags/学习笔记/"}]},{"title":"皮皮虾,我们走","date":"2017-02-27T23:34:37.000Z","path":"2017/02/28/皮皮虾-我们走/","text":"曾经的多肉 黄金万年草 小黄花-照波 红宝石 吉娃娃 小雪莲 姬玉露 观音莲 桃蛋 白熊童子 收获在这半年里,学会了很多关于养护植物的知识,觉得这些小植物也挺有意思的,虽然跑来跑去拿快递有点麻烦… 邮件(zgc7788#gmail.com, 把#换成@) QQ: 839153198 weibo: @er_567","tags":[{"name":"随笔","slug":"随笔","permalink":"oohyo.github.io/tags/随笔/"}]}]