搜索到
802
篇与
的结果
-
-
HTTP缓存 前端缓存前端缓存可分为两大类：http缓存和浏览器缓存。我们今天重点讲的是http缓存，所以关于浏览器缓存大家自行去查阅。下面这张图是前端缓存的一个大致知识点： HTTP 缓存策略分为两种：强缓存 和 协商缓存 ，这两种缓存策略都是服务端设置 HTTP Header 来实现的（一）强缓存强缓存的意思很简单，直接从浏览器缓存过的本地进行读取，不会去请求服务器。例如请求一个图片，当缓存后，第二次访问，直接从本地去拿，不会再去请求这个资源，可以节省服务器资源。可以通过三种方式来设置强缓存Expires：服务端在响应头中设置一个 GMT 格式的到期时间。客户端的本地时间小于响应头的 Expires 时间，那么会从本地进行读取，不会去请求服务器。如果超过了，那么就去请求服务器去获取最新资源。但是就是因为根据本地时间进行判断，本地时间可以随便修改，所以这种缓存机制有漏洞，会与服务端时间有偏差，为了解决这个问题，就出现了下面的 Cache-contorlCache-control：他和Expires不一样，Expires是直接设置一个时间戳就行了，而Cache-control可以设置下面这几种属性：max-age：这个用于设置一个滑动时间，例如设置 max-age=30 表示客户端时间向后滑动30秒，在这30秒内都是强缓存，不会去请求服务器s-maxage：这个和上面的一样，只不过这个设置的是代理服务器的缓存时间privte：这个表示缓存只能被客户端的浏览器缓存，不能被代理服务器缓存public：这个表示缓存既可以被浏览器缓存，也可以被代理服务器缓存no-store：这个属性表示不缓存，在任何情况下，都是与服务器进行最新的交互no-cache：这个并非不缓存的意思，这个表示强制进行协商缓存，会在下面描述（二）协商缓存协商缓存表示在使用本地的缓存之前，会先向服务器发一个请求，与服务器协商当前浏览器的缓存是否已经过期了，如果没过期，那么就使用本地的资源，如果过期了就去请求最新资源。协商缓存主要是解决强缓存资源不能及时更新的问题，协商缓存服务端可以通过2种设置来实现：第一种：last-modified 配合 If-Modified-Since例如，客户端请求一个 03.jpg，服务端接收到这个请求后，会读取这个文件的最后修改时间，然后设置到响应头中，设置的参数就是 last-modified，参数值是文件最后修改的时间戳。客户端第二次请求 03.jpg 这个文件的时候，会带上一个 If-Modified-Since 参数，服务端能拿到这个参数与last-modified进行比对，如果一致，那么就返回304状态，否则就去请求最新的文件，使用nodejs实现这个代码：（注意协商缓存需要设置Cache-Control为no-cache，表示设置成协商缓存）... // 判断客户端请求的是03这个图片 if(pathname === '/img/03.jpg') { // 读取 03 图片的最后修改时间 const { mtime } = fs.statSync("./img/03.jpg") // 判断客户端发送过来的if-modified-since是否与mtime一致，如果一致就直接返回304 if(req.headers['if-modified-since'] === mtime.toUTCString()) { res.statusCode = 304 res.end() } else { // 如果不一致，那么就请求最新的资源返回给客户端 const data = fs.readFileSync("./img/03.jpg") // 这2句代码是设置协商缓存 res.setHeader("last-modified", mtime.toUTCString()) res.setHeader("Cache-Control", "no-cache") res.end(data) } } ...上面的 last-modified 配合 If-Modified-Since在使用时有些弊端，例如将03.jpg修改成04.jpg，再改回03.jpg。此时这个文件其实是没有变化的，但是最后修改时间更改了，因此客户端就需要重新请求，因此就出现了下面的第二种使用Etag的方式第二种：Etag 配合 If-None-MatchEtag实现的方式服务端是为文件生成一个指纹，类似于MD5字符串。接着响应头中塞进 Etag 参数，参数的值就是计算出的字符串，客户端接收到后，第二次请求会带上一个 If-None-Match 的参数，接着服务端和上面第一种方式一样进行比对，nodejs的实现代码如下：// 引入 etag 模块 const etag = reqiure("etag") ... if(pathname === '/img/03.jpg') { const data = fs.readFileSync("./img/03.jpg") // 获取生成的etag字符串 const etag = etag(data) // 判断客户端发送的 If-None-Match 与服务端是否一致 if(req.headers['if-none-match'] === etag) { res.statusCode = 304 res.end() } else { // 如果不一致，那么就请求最新的资源返回给客户端 const data = fs.readFileSync("./img/03.jpg") // 这2句代码是设置协商缓存 res.setHeader("etag", etag) res.setHeader("Cache-Control", "no-cache") res.end(data) } } ...
-
一些实用的函数 /** * @description: 校验身份证 * @param {*} * @return {*} */ export const validateIDCard = value => /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value); /** * @description: 校验支付宝账号 * @param {*} * @return {*} */ export const validateAlipay = value => /^1\d{10}$|^[a-zA-Z\d._-]*\@[a-zA-Z\d.-]{1,10}\.[a-zA-Z\d]{1,20}$/.test(value); /** * @description: 校验银行卡 * @param {*} * @return {*} */ export const validateBankCode = value => /^\d{13,19}$/.test(value); /** * @description: 校验手机号 * @param {*} * @return {*} */ export const validatePhone = value => /^1\d{10}$/.test(value); /** * @description: 函数节流 * @param {*} * @return {*} */ export const throttle = function (fn, delay = 1000) { let prev = 0; return function () { const now = Date.now(); if (now - prev > delay) { fn.apply(this, arguments); prev = Date.now(); } } } /** * @description: 获取随机字符串 * @param {*} * @return {*} */ export const randomString = () => Math.random().toString(36).substr(2); /** * @description: 将 BASE64 转换文件 * @param {*} * @return {*} */ export const dataURLtoFile = (dataurl, filename) => { const arr = dataurl.split(','); const mime = arr[0].match(/:(.*?);/)[1]; if (!filename) filename = `${Date.parse(new Date())}.jpg`; const bstr = window.atob(arr[1]); let n = bstr.length; const u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, { type: mime }); } /** * @description: 压缩图片 * @param {*} * @return {*} */ export const compressImg = file => { const fileSize = parseFloat(Number.parseInt(file.size, 10) / 1024 / 1024).toFixed(2); const reader = new FileReader(); reader.readAsDataURL(file); return new Promise((resolve) => { reader.onload = e => { const img = new Image(); img.src = e.target.result; img.onload = () => { const w = img.width; const h = img.height; const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); let base64; canvas.setAttribute('width', w); canvas.setAttribute('height', h); ctx.drawImage(img, 0, 0, w, h); if (fileSize <= 1) { base64 = canvas.toDataURL(file.type, 1); } else if (fileSize <= 3) { base64 = canvas.toDataURL(file.type, 0.8); } else if (fileSize <= 5) { base64 = canvas.toDataURL(file.type, 0.5); } else { base64 = canvas.toDataURL(file.type, 0.1); } let fileName = file.name; fileName = fileName.replace(/^(.+)\.(.+)$/, (fullName, name, suffix) => name + Math.floor(Math.random() * (9999 - 1000) + 1000) + '.' + suffix); resolve(dataURLtoFile(base64, fileName)); }; }; }); }
-
Typecho实现评论显示操作系统和评论来源 首先打开 functions.php 文件，粘贴下面的代码：// 获取浏览器信息 function getBrowser($agent) { if (preg_match('/MSIE\s([^\s|;]+)/i', $agent, $regs)) { $outputer = 'Internet Explore'; } else if (preg_match('/FireFox\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('Firefox/', $regs[0]); $FireFox_vern = explode('.', $str1[1]); $outputer = 'FireFox'; } else if (preg_match('/Maxthon([\d]*)\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('Maxthon/', $agent); $Maxthon_vern = explode('.', $str1[1]); $outputer = 'MicroSoft Edge'; } else if (preg_match('#360([a-zA-Z0-9.]+)#i', $agent, $regs)) { $outputer = '360 Fast Browser'; } else if (preg_match('/Edge([\d]*)\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('Edge/', $regs[0]); $Edge_vern = explode('.', $str1[1]); $outputer = 'MicroSoft Edge'; } else if (preg_match('/UC/i', $agent)) { $str1 = explode('rowser/', $agent); $UCBrowser_vern = explode('.', $str1[1]); $outputer = 'UC Browser'; } else if (preg_match('/QQ/i', $agent, $regs)||preg_match('/QQ Browser\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('rowser/', $agent); $QQ_vern = explode('.', $str1[1]); $outputer = 'QQ Browser'; } else if (preg_match('/UBrowser/i', $agent, $regs)) { $str1 = explode('rowser/', $agent); $UCBrowser_vern = explode('.', $str1[1]); $outputer = 'UC Browser'; } else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent, $regs)) { $outputer = 'Opera'; } else if (preg_match('/Chrome([\d]*)\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('Chrome/', $agent); $chrome_vern = explode('.', $str1[1]); $outputer = 'Google Chrome'; } else if (preg_match('/safari\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('Version/', $agent); $safari_vern = explode('.', $str1[1]); $outputer = 'Safari'; } else{ $outputer = 'Google Chrome'; } echo $outputer; } // 获取操作系统信息 function getOs($agent) { $os = false; if (preg_match('/win/i', $agent)) { if (preg_match('/nt 6.0/i', $agent)) { $os = 'Windows Vista · '; } else if (preg_match('/nt 6.1/i', $agent)) { $os = 'Windows 7 · '; } else if (preg_match('/nt 6.2/i', $agent)) { $os = 'Windows 8 · '; } else if(preg_match('/nt 6.3/i', $agent)) { $os = 'Windows 8.1 · '; } else if(preg_match('/nt 5.1/i', $agent)) { $os = 'Windows XP · '; } else if (preg_match('/nt 10.0/i', $agent)) { $os = 'Windows 10 · '; } else{ $os = 'Windows X64 · '; } } else if (preg_match('/android/i', $agent)) { if (preg_match('/android 9/i', $agent)) { $os = 'Android Pie · '; } else if (preg_match('/android 8/i', $agent)) { $os = 'Android Oreo · '; } else { $os = 'Android · '; } } else if (preg_match('/ubuntu/i', $agent)) { $os = 'Ubuntu · '; } else if (preg_match('/linux/i', $agent)) { $os = 'Linux · '; } else if (preg_match('/iPhone/i', $agent)) { $os = 'iPhone · '; } else if (preg_match('/mac/i', $agent)) { $os = 'MacOS · '; }else if (preg_match('/fusion/i', $agent)) { $os = 'Android · '; } else { $os = 'Linux · '; } echo $os; }comments.php 中找到合适位置（比如评论作者的后面）添加以下代码：<?php getOs($comments->agent); ?><?php getBrowser($comments->agent); ?>
-
-
Joe主题自定义搭配色教程 第一步打开主题外观设置 - 全局设置 - 自定义CSS，填写以下内容：body { --theme: #409eff; }填写完后如下图所示 第二步随便百度一个颜色网站，例如：https://www.5tu.cn/colors/yansebiao.html复制自己喜欢的颜色色彩值，例如珊瑚色：#f8aba6。接着替换掉上面填写的颜色即可，上面的代码就如下所示：body { --theme: #f8aba6; }接着保存，去前台刷新就能看见变化了，这里只是举一个栗子进行说明。到这里纯小白的教程结束，下面的内容是更加强大的全套主题色补充。完整版内容首先打开主题外观设置 - 全局设置 - 自定义CSS，填写以下内容：body { --theme: #409eff; --background: #fff; --main: #303133; --routine: #606266; --minor: #909399; --seat: #c0c4cc; --classA: #dcdfe6; --classB: #e4e7ed; --classC: #ebeef5; --classD: #f2f6fc; --radius-wrap: 8px; --radius-inner: 4px; --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); --box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22); }例如：--theme: #409eff;--theme 这个不能修改，固定的主题调用语法。--theme 冒号后面的是颜色的色彩值，这个色彩值可以用常见的颜色格式。例如 #ff6800、rgba(0,0,0,1) 等等都可以接下来对上面的每个属性做一个描述--theme顾名思义，主题色的意思，用于修改整个网站的主题色彩--background这个介绍不太好描述，用一个图形容下，比如下面这张图，他的背景色就是用的这个属性值（白色），如果想变成透明的话，可以填写 rgba 值，例如：rgba(255,255,255,0.5) 半透明--main这个是文字的颜色，颜色最深的--routine这个是文字的颜色，颜色稍微次于上面那个--minor这个是文字的颜色，颜色稍微次于上面那个--seat这个是文字的颜色，颜色稍微次于上面那个--classA这个主要用于横线、分割线用的颜色，颜色最深的--classB这个主要用于横线、分割线用的颜色，颜色稍微次于上面那个--classC这个主要用于横线、分割线用的颜色，颜色稍微次于上面那个--classD这个主要用于横线、分割线用的颜色，颜色稍微次于上面那个--radius-wrap这个主要用外层包裹的圆角度数的，如果不需要圆角，可以写0，例如--radius-inner这个主要用里层包裹的圆角度数的，如果不需要圆角，可以写0--text-shadow这个是文章标题的字体阴影，这个只在文章详情页用到，改不改区别不大--box-shadow这个是阴影，这个弄得好，网站炫酷的一批，例如拟态等都是通过这个实现的其他上面的设置都是控制主题白昼下的样式，黑夜模式的样式和这个修改方法一致
-
Typecho自定义后台编辑器功能 上面的增加按钮很简单，append一个li标签就可以实现，主要是在于向文本框中插入内容，以及输入键盘按键也能实现插入对应的功能。使用方法首先在你的主题 functions.php 里增加一个插件函数，这个函数的用途是在编辑文章和编辑页面里面引入自定义JSTypecho_Plugin::factory('admin/write-post.php')->bottom = array('Editor', 'edit'); Typecho_Plugin::factory('admin/write-page.php')->bottom = array('Editor', 'edit'); class Editor { public static function edit() { echo "<script src='" . Helper::options()->themeUrl . '/typecho/editor/joe.extend.js' . "'></script>"; echo "<script src='" . Helper::options()->themeUrl . '/typecho/editor/joe.editor.js' . "'></script>"; } }下面的 joe.extend.js 没压缩也没加密，下面是 joe.extend.js 源码(function ($) { $.fn.extend({ /* 按键盘实现插入内容 */ shortcuts: function () { this.keydown(function (e) { var _this = $(this); e.stopPropagation(); if (e.altKey) { switch (e.keyCode) { case 67: _this.insertContent('[code]' + _this.selectionRange() + '[/code]'); break; } } }); }, /* 插入内容 */ insertContent: function (myValue, t) { var $t = $(this)[0]; if (document.selection) { this.focus(); var sel = document.selection.createRange(); sel.text = myValue; this.focus(); sel.moveStart('character', -l); var wee = sel.text.length; if (arguments.length == 2) { var l = $t.value.length; sel.moveEnd('character', wee + t); t <= 0 ? sel.moveStart('character', wee - 2 * t - myValue.length) : sel.moveStart('character', wee - t - myValue.length); sel.select(); } } else if ($t.selectionStart || $t.selectionStart == '0') { var startPos = $t.selectionStart; var endPos = $t.selectionEnd; var scrollTop = $t.scrollTop; $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length); this.focus(); $t.selectionStart = startPos + myValue.length; $t.selectionEnd = startPos + myValue.length; $t.scrollTop = scrollTop; if (arguments.length == 2) { $t.setSelectionRange(startPos - t, $t.selectionEnd + t); this.focus(); } } else { this.value += myValue; this.focus(); } }, /* 选择 */ selectionRange: function (start, end) { var str = ''; var thisSrc = this[0]; if (start === undefined) { if (/input|textarea/i.test(thisSrc.tagName) && /firefox/i.test(navigator.userAgent)) str = thisSrc.value.substring(thisSrc.selectionStart, thisSrc.selectionEnd); else if (document.selection) str = document.selection.createRange().text; else str = document.getSelection().toString(); } else { if (!/input|textarea/.test(thisSrc.tagName.toLowerCase())) return false; end === undefined && (end = start); if (thisSrc.setSelectionRange) { thisSrc.setSelectionRange(start, end); this.focus(); } else { var range = thisSrc.createTextRange(); range.move('character', start); range.moveEnd('character', end - start); range.select(); } } if (start === undefined) return str; else return this; } }); })(jQuery);上面的shortcuts方法主要用于实现按下键盘插入内容接着看 joe.edit.js的内容/* 增加自定义功能 */ const items = [ { title: '回复可见', id: 'wmd-hide-button', svg: '<svg t="1612402690962" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15751" width="20" height="20"><path d="M554.666667 438.101333V277.333333h-85.333334v160.768L330.112 357.717333l-42.666667 73.898667L426.666667 512l-139.221334 80.384 42.666667 73.898667L469.333333 585.898667V746.666667h85.333334v-160.768l139.221333 80.384 42.666667-73.898667L597.333333 512l139.221334-80.384-42.666667-73.898667L554.666667 438.101333z" p-id="15752" fill="#9b9b9b"></path></svg>', text: '\n[@hide]这里的内容回复后才能看见[/hide]\n' } ]; items.forEach(_ => { let item = $(`<li class="wmd-button" id="${_.id}" title="${_.title}">${_.svg}</li>`); item.on('click', function () { $('#text').insertContent(_.text); }); $('#wmd-button-row').append(item); });
-
