- 博客(111)
- 问答 (2)
- 收藏
- 关注
原创 常见的shell用法
基础#!/bin/sh # 指解释此脚本的shell路径为/bin/sh,如果没有声明,则脚本将在默认的shell中执行set -e # 返回值非0脚本退出,如:当访问一个不存在的文件时,脚本将会退出,而不是继续执行,从而出现一些意外的情况sh test.sh p1 p2$1 # shell的第一个参数,此处为p1$2 # shell的第二个参数,此处为p2$# # shell参数个数,此处为2mkdir -p dir1/dir2 # 递归创建文件夹tar -zxvf package
2022-01-17 19:17:00
825
原创 chrome设置http自动跳转https
输入网址:chrome://net-internals/#hsts,在下图的domain中输入需要修改的域名,如:aa.com,回车即可。
2022-01-17 10:19:11
2147
原创 修改host后chrome浏览器不能及时生效的解决办法
在开发调试时,经常需要在本地和测试域名间切换,而两者的区别在于一个是 http,一个是 https。因此我们需要修改 host 配置。但有时修改 host 配置后,刷新浏览器发现并不生效,只能开无痕浏览。以下即为解决刷新浏览器不生效的办法:浏览器中打开:chrome://net-internals/#sockets点击 Flush socket pools浏览器中输入需要测试的网址,此时提示“无法访问此网站”打开调试,切换到 network,在重新输入网址,回车即可附:chrome://chr
2020-12-08 16:54:31
9207
2
原创 JavaScript实现内容复制
使用 document.execCommand(‘copy’) 实现内容的复制。情况:复制表单元素,如 input textarea元素中的内容。复制如 div,span 元素中的内容。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
2020-10-19 14:34:07
438
原创 node实现图片上传至oss
描述:前端使用 input="file 上传图片。后端实现图片上传接口,图片上传至 oss 并将上传的 url 返回给前端。// node 实现let OSS = require('ali-oss')let client = new OSS({ // 连接OSS实例 region: '', accessKeyId: '', accessKeySecret: '', bucket: '',});// 实现上传的 upload 接口// 图片以 base64 的方式传输a
2020-07-21 12:24:04
1834
1
原创 前端解析后端返回的buffer或binary或base64类型的图片数据
描述:使用 node 作为后端,读取本地图片,将其转为 buffer 或 binary 或 base64 返回给前端。github案例:https://github.com/qinchao888/picture后端处理buffer 类型的图片// node 代码app.get('/source', async (req, res) => { const result = fs.readFileSync('./images/1.jpg') // 如果指定了 encoding 选项,则
2020-07-21 12:00:56
9831
原创 JS获取浏览器localStorage存储上限
基本思路:不断的给字符串增加字符,调用 localStorage.setItem 进行存储,直至其无法存储为止(exceeded the quota:超出限额)。注意事项:给定的字符串不能过小,否则 js 代码执行非常慢,也不能过大,否则会造成较大的误差。案例中误差控制在 1kb 以内。先按照 128kb 进行累加,无法存储时再 按照 8kb 进行累加,最后再 按照 1kb 进行累加。这样可以保证误差控制在 1kb 以内。不同的浏览器类型和版本,其对应的 localStorage 存储量可能不一致
2020-07-06 15:14:49
3104
原创 npm WARN checkPermissions Missing write access...
当我们使用 npm uninstall 或 cnpm uninstall 时经常会出现这样的错误。事实上这个并不是由于权限问题导致的。在安装模块时我们经常使用 --save 或 --save-dev。安装:cnpm install express --save // 安装到 dependencies中cnpm install express -S // 等价于 --savecnpm install express --save-dev // 安装到 devDependencies中cnpm in
2020-06-29 14:31:48
740
原创 离线存储manifest的基础用法
源码地址H5的离线存储需要配合服务端一起使用,在这里我们使用 node 启动一个简单的服务。服务端使用 node + express 启动服务const express = require('express')const app = express()const ejs = require('ejs')app.engine('html', ejs.__express)app.set('view engine', 'html')app.use(express.static('public'
2020-06-23 15:43:33
634
原创 a 链接设置顺序及原理
设置顺序 a:link a:visited a:hover a:active或 a:visited a:link a:hover a:active其中 hover 和 active 的顺序必须设置 link 和 visited 之后,active 必须设置在 hover 之后。原因:当鼠标移入时会同时触发 link 和 hover 或同时触发 visited 和 hover。如果没有点击过链接,则同时触发 link 和 hover,因此要求 hover 设置在 link 之后,如果点击过
2020-06-12 10:59:44
711
原创 JavaScript类型比较和转化规则
Number的转化规则:1.原始类型值Number(123) // 123Number('123') // 123Number('123abc') // NaNNumber('') // 0Number(true) // 1Number(false) // 0Number(null) // 0Number(undefined) // NaNNumber('\t\n\r123\...
2019-02-13 15:58:57
289
原创 Vue中的UI组件发布至npm流程
本文提供的方式是将组件直接引入,不需要使用Vue.use(),即没有给组件添加install方法。步骤一注册npm账号,用于发布组件。// 注册后npm adduser // 添加用户(填写注册的用户名,密码,邮箱)npm whoami // 查看当前注册的用户附:注册npm需要确认邮箱,邮箱确认后需要重新登录npm,否则会一直提示邮箱未确认。步骤二构建一个vue项目vue ...
2019-01-26 17:46:08
842
原创 Vue项目启动时自动获取本机IP地址
前言在启动vue项目时,我们发现需要自己配置启动的ip地址,这样在多人开发便显得很不方便。解决方案:使用vue-cli构建项目:(其他配置类似)vue init webpack myproject1.在当前的build目录下新建一个get-ip.js文件用来获取本机ip地址// build/get-ip.jsvar os = require('os'), ip = '', ifa...
2019-01-26 15:07:08
13983
原创 Vue中父子组件的生命周期函数的执行时机
问题背景:在子组件中mounted时经常发现无法获取到父组件传入的props属性值。生命周期函数执行顺序:父beforeCreate -&gt; 父created -&gt; 父beforeMount -&gt; 子beforeCreate -&gt; 子created -&gt; 子beforeMount -&gt; 子mounted -&gt; 父mounted// 父组件&
2018-12-28 17:08:30
819
原创 scoped的深入理解
scoped 属性作用:保证css样式只作用于当前组件,不会影响其他任何地方的样式。本质:设置 scoped 后,当前组件中的所有元素都会被添加一个 data-v- 的属性,所有设置的css样式都会添加该属性选择器。如:// 权重为 1 + 10input[data-v-656039f0] {...}// parent.vue<div> <input /&...
2018-12-06 10:52:05
991
1
原创 实现移动端的 css stickyfooter
描述:在移动端经常有这样的效果,当页面内容高度不足视口高度时footer固定在底部,而页面内容高度高于视口高度时,footer随内容向下移动。方法一: 使用 calc 实现(不推荐)// html&amp;lt;body&amp;gt; &amp;lt;div class=&quot;container&quot;&amp;gt; &amp;lt;div class=&a
2018-11-30 17:05:02
327
原创 使用padding-bottom和margin-bottom实现两栏等高布局原理
声明:以下均为个人见解,若有错误请指出。效果预览:&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;demo&lt;/title&gt; &lt;style type="text/css"&am
2018-11-28 11:05:54
3887
2
原创 JS中数组方法的底层实现
源码地址:https://github.com/v8/v8/blob/ad82a40509c5b5b4680d4299c8f08d6c6d31af3c/src/js/array.js数组变异方法(即改变原数组):shift、unshift、splice、push、pop、sort、reverse。下述代码均为类似实现:push向数组的末尾添加一个或更多元素,并返回新的长度。Array....
2018-11-27 13:19:50
3402
原创 小程序实现左滑删除功能
小程序中实现左滑删除效果预览:// wxml<view class="delete_list"> <view class="list" wx:for="{{listData}}" wx:key="{{index}}}" bindtouchstart="touchstart" bindtouchmove="touchmove" bindt
2018-11-20 17:14:20
1577
1
原创 小程序功能实现案例
实现自定义的checkbox效果图:// wxml&lt;view class="container"&gt; &lt;checkbox-group bindchange="checkboxChange"&gt; &lt;view class="checkbox_item" wx:for=&qu
2018-11-06 13:23:12
951
原创 html、body元素的高度问题
首先:html元素和body元素均为块级元素。例1:&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;demo&amp;lt;/title&amp;gt; &amp;lt;style type=&quot;text/css&quot;&
2018-10-31 14:40:16
3627
原创 小程序开发工具命令行启动配置
在cmd窗口中使用命令启动指定的小程序项目命令形如: wechat -o miniapp-shops1.自定义一个 wechat.bat 文件,输入以下代码:@echo offcall C:"\Program Files (x86)\Tencent\微信web开发者工具\"cli.bat %1 %2路径为开发工具的路径2.修改 “C:\Program Files (x86)\Tenc...
2018-10-31 11:41:52
6386
原创 css精粹
1. 平滑滚动(1)设置属性:scroll-behavior: smooth;以前使用锚点跳转时总是快速的定位到指定位置,而使用平滑滚动后,页面会有一个滚动的过程,效果更好。设置时只需要给滚动的盒子设置scroll-behavior: smooth属性即可,也可以在 css reset 时给 body, html 设置。(2)除此之外,也可以使用JS提供的scrollIntoView(),...
2018-10-25 17:44:02
359
原创 JavaScript中原始值的理解
原始值:概念:原始类型的值就是原始值,即原始值有string,、number、boolean、null和undefined五种。valueOf() 和 toString() 方法的使用:null和undefined没有valueOf和toString方法,调用时报错。默认情况下调用的是valueOf方法:每个JavaScript对象的 valueOf 方法定义不同:...
2018-10-22 13:43:43
648
原创 Web前端面试题
1. DOCTYPE 作用,标准模式与兼容模式(怪异模式)的区别?&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;
2018-10-19 10:53:53
4713
原创 JavaScript算法题
1. 给定一串数据将其转化为树形结构// 数据: let arr = [ { id: 1, name: 'js', parent:'前端' }, { id: 2, name: '前端' }, {...
2018-10-17 11:15:46
783
原创 React中setState的更新策略
React中setState的更新策略React中的setState有Batch模式(批量更新模式)和普通模式。普通模式下,setState能够即时更新state,重新调用 render 方法,然后把render方法所渲染的最新的内容显示到页面上。Batch模式下,React不会立刻修改state。而是把这个对象放到一个更新队列中,稍后才会从队列中把新的状态提取出来合并到 state中,然后...
2018-10-09 15:41:24
2739
原创 JavaScript中常用的一些方法
一. 数组reduce() :对数组中的数据进行累计操作。传入四个参数:累计值,数组每一项的值,索引,数组本身。var arr = [1, 2, 3, 4];var res = arr.reduce(function (total, val, index, arr){ return total + val;});// 第一次的total值为数组第一项的值,即1,val为数组第二项的...
2018-10-08 13:21:46
358
原创 JavaScript实现DOM树的深度优先遍历和广度优先遍历
深度优先遍历// 非递归,首次传入的node值为DOM树中的根元素点,即html// 调用:deep(document.documentElement)function deep (node) { var res = []; // 存储访问过的节点 if (node != null) { var nodeList = []; // 存储需要被访问的节点 nodeLis...
2018-09-27 19:59:26
1488
1
原创 了解NodeList、HTMLCollection以及NamedNodeMap的使用
这三个都是类数组对象。HTMLCollection只包含元素节点,而NodeList包含任何节点类型。HTMLCollection对象可以调用item()和namedItem()方法,NodeList对象只能调用item()方法。在获取元素时,两者都可以通过方括号的语法或item()方法。HTMLCollection对象允许通过namedItem()方法,传入一个name或id获取元素。一...
2018-09-26 15:35:07
1367
原创 JSX语法使用
深入了解JSX什么是JSX?事实上JSX就是React.createElement()方法的语法糖。JSX的优点:JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的,在编译过程中就能发现错误。使用 JSX 编写模板更加简单快速。// JSX语法:<MyButton color="blue" shadowSize={2}>Clic...
2018-09-25 19:28:16
984
原创 ES6知识汇总
基础知识:ECMAScript中ECMA实际上是一个标准化组织。ECMAScript 方言有Jscript和ActionScript。JavaScript和ActionScript都是以ECMAScript为标准,但ActionScript是运用在flash软件中,是flash的脚本语言。ES6名词是一个泛指,指5.1版本以后的JavaScript的下一代标准,涵盖了ES2015、ES20...
2018-09-25 13:51:22
668
原创 Sublime快捷键用法
Sublime快捷键用法查看默认key的绑定:Perferences -> Key Bindingsctrl + d:重复选择相同的词。alt + f3:一次性选中所有相同的词。ctrl + f3:选中单个相同的词,即从选中一个词到选中另一个相同的词。ctrl + k + b :侧边栏的显示与隐藏。ctrl + n:打开新页面。ctrl + l:选中当前行。ctrl + j...
2018-09-25 13:49:50
259
原创 前端常用的JavaScript操作
1.删除字符串中指定的一段字符例:删除&quot;10km&quot;中的kmvar str = &quot;10km&quot;//方法一:var res = str.replace('km', '')//方法二:var res = str.split('km').join('')//join方法不传参默认使用逗号作为分隔符2.数组去重var arr = [1, 2, 3, 1, 2]/
2018-09-25 13:46:19
212
原创 对闭包的理解
####概念:闭包:指能够读取其他函数内部变量的函数。特性:可以读取函数内部的变量可以使变量保存在内存中// 例1:function f() { var n = 1; return function () { console.log(n); }}var res = f();res(); // 1(可以读取f函数内部变量n的值)//例2:function f1...
2018-09-25 13:44:44
182
原创 Git的基本使用与语法汇总
推荐学习Git的地址:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000常用操作:例:拉取远程分支代码与本地分支代码合并:远程分支:feature/v1本地分支:feature/abc/v11. git checkout feature/v1 // 若本地没有fea...
2018-09-25 13:43:37
778
原创 Javascript中的defer属性和async属性的用法
为什么需要异步加载js文件:阻塞其他资源的下载,导致空白页面。(1)置于顶部的js脚本,浏览器在执行时需要花费时间去下载外链文件的代码并执行,此时会导致明显的延迟,显示为空白页面,用户无法浏览内容,也无法与页面进行交互。 (2)虽然IE8、Firefox3.5、Safari4、Chrome2都允许并行下载Javascript文件,脚本的下载过程不会互相影响,但页面的加载仍旧需要等到所有的...
2018-05-15 12:50:23
965
原创 解决webstorm打开项目后卡顿问题
第一步:File -> Settings -> Build,Execution,Deployment ->Deployment -> Options 在Exclude items by name中添加:node_modules 第二步:File -> Settings -> Directories选中自己项目的node_modules,点击...
2018-04-03 17:09:49
5880
2
空空如也
JavaScript中如何自定义实现apply方法?
2017-12-01
TA创建的收藏夹 TA关注的收藏夹
TA关注的人