- 博客(111)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 常见的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
875
原创 chrome设置http自动跳转https
输入网址：chrome://net-internals/#hsts，在下图的domain中输入需要修改的域名，如：aa.com，回车即可。
2022-01-17 10:19:11
2275
原创 修改host后chrome浏览器不能及时生效的解决办法
在开发调试时，经常需要在本地和测试域名间切换，而两者的区别在于一个是 http，一个是 https。因此我们需要修改 host 配置。但有时修改 host 配置后，刷新浏览器发现并不生效，只能开无痕浏览。以下即为解决刷新浏览器不生效的办法：浏览器中打开：chrome://net-internals/#sockets点击 Flush socket pools浏览器中输入需要测试的网址，此时提示“无法访问此网站”打开调试，切换到 network，在重新输入网址，回车即可附：chrome://chr
2020-12-08 16:54:31
10216
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
501
原创 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
1929
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
10632
原创 JS获取浏览器localStorage存储上限
基本思路：不断的给字符串增加字符，调用 localStorage.setItem 进行存储，直至其无法存储为止（exceeded the quota：超出限额）。注意事项：给定的字符串不能过小，否则 js 代码执行非常慢，也不能过大，否则会造成较大的误差。案例中误差控制在 1kb 以内。先按照 128kb 进行累加，无法存储时再 按照 8kb 进行累加，最后再 按照 1kb 进行累加。这样可以保证误差控制在 1kb 以内。不同的浏览器类型和版本，其对应的 localStorage 存储量可能不一致
2020-07-06 15:14:49
3345
原创 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
798
原创 离线存储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
689
原创 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
765
原创 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
338
原创 Vue中的UI组件发布至npm流程
本文提供的方式是将组件直接引入，不需要使用Vue.use()，即没有给组件添加install方法。步骤一注册npm账号，用于发布组件。// 注册后npm adduser // 添加用户（填写注册的用户名，密码，邮箱）npm whoami // 查看当前注册的用户附：注册npm需要确认邮箱，邮箱确认后需要重新登录npm，否则会一直提示邮箱未确认。步骤二构建一个vue项目vue ...
2019-01-26 17:46:08
899
原创 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
14209
原创 Vue中父子组件的生命周期函数的执行时机
问题背景：在子组件中mounted时经常发现无法获取到父组件传入的props属性值。生命周期函数执行顺序：父beforeCreate -&gt; 父created -&gt; 父beforeMount -&gt; 子beforeCreate -&gt; 子created -&gt; 子beforeMount -&gt; 子mounted -&gt; 父mounted// 父组件&
2018-12-28 17:08:30
921
原创 scoped的深入理解
scoped 属性作用：保证css样式只作用于当前组件，不会影响其他任何地方的样式。本质：设置 scoped 后，当前组件中的所有元素都会被添加一个 data-v- 的属性，所有设置的css样式都会添加该属性选择器。如：// 权重为 1 + 10input[data-v-656039f0] {...}// parent.vue<div> <input /&...
2018-12-06 10:52:05
1045
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
384
原创 使用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
3973
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
3459
原创 小程序实现左滑删除功能
小程序中实现左滑删除效果预览：// 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
1674
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
1014
原创 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
3728
原创 小程序开发工具命令行启动配置
在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
6660
原创 css精粹
1. 平滑滚动（1）设置属性：scroll-behavior: smooth;以前使用锚点跳转时总是快速的定位到指定位置，而使用平滑滚动后，页面会有一个滚动的过程，效果更好。设置时只需要给滚动的盒子设置scroll-behavior: smooth属性即可，也可以在 css reset 时给 body, html 设置。（2）除此之外，也可以使用JS提供的scrollIntoView()，...
2018-10-25 17:44:02
406
原创 JavaScript中原始值的理解
原始值：概念：原始类型的值就是原始值，即原始值有string,、number、boolean、null和undefined五种。valueOf() 和 toString() 方法的使用：null和undefined没有valueOf和toString方法，调用时报错。默认情况下调用的是valueOf方法：每个JavaScript对象的 valueOf 方法定义不同：...
2018-10-22 13:43:43
708
原创 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
4838
原创 JavaScript算法题
1. 给定一串数据将其转化为树形结构// 数据： let arr = [ { id: 1, name: 'js', parent:'前端' }, { id: 2, name: '前端' }, {...
2018-10-17 11:15:46
870
原创 React中setState的更新策略
React中setState的更新策略React中的setState有Batch模式(批量更新模式)和普通模式。普通模式下,setState能够即时更新state，重新调用 render 方法，然后把render方法所渲染的最新的内容显示到页面上。Batch模式下,React不会立刻修改state。而是把这个对象放到一个更新队列中，稍后才会从队列中把新的状态提取出来合并到 state中，然后...
2018-10-09 15:41:24
2814
原创 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
404
原创 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
1530
1
原创 了解NodeList、HTMLCollection以及NamedNodeMap的使用
这三个都是类数组对象。HTMLCollection只包含元素节点，而NodeList包含任何节点类型。HTMLCollection对象可以调用item()和namedItem()方法，NodeList对象只能调用item()方法。在获取元素时，两者都可以通过方括号的语法或item()方法。HTMLCollection对象允许通过namedItem()方法，传入一个name或id获取元素。一...
2018-09-26 15:35:07
1424
原创 JSX语法使用
深入了解JSX什么是JSX？事实上JSX就是React.createElement()方法的语法糖。JSX的优点：JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的，在编译过程中就能发现错误。使用 JSX 编写模板更加简单快速。// JSX语法：<MyButton color="blue" shadowSize={2}>Clic...
2018-09-25 19:28:16
1053
原创 ES6知识汇总
基础知识：ECMAScript中ECMA实际上是一个标准化组织。ECMAScript 方言有Jscript和ActionScript。JavaScript和ActionScript都是以ECMAScript为标准，但ActionScript是运用在flash软件中，是flash的脚本语言。ES6名词是一个泛指，指5.1版本以后的JavaScript的下一代标准，涵盖了ES2015、ES20...
2018-09-25 13:51:22
728
原创 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
294
原创 前端常用的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
260
原创 对闭包的理解
####概念：闭包：指能够读取其他函数内部变量的函数。特性：可以读取函数内部的变量可以使变量保存在内存中// 例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
215
原创 Git的基本使用与语法汇总
推荐学习Git的地址：https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000常用操作：例：拉取远程分支代码与本地分支代码合并：远程分支：feature/v1本地分支：feature/abc/v11. git checkout feature/v1 // 若本地没有fea...
2018-09-25 13:43:37
824
原创 Javascript中的defer属性和async属性的用法
为什么需要异步加载js文件：阻塞其他资源的下载，导致空白页面。（1）置于顶部的js脚本，浏览器在执行时需要花费时间去下载外链文件的代码并执行，此时会导致明显的延迟，显示为空白页面，用户无法浏览内容，也无法与页面进行交互。 （2）虽然IE8、Firefox3.5、Safari4、Chrome2都允许并行下载Javascript文件，脚本的下载过程不会互相影响，但页面的加载仍旧需要等到所有的...
2018-05-15 12:50:23
1022
原创 解决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
6120
2
空空如也
JavaScript中如何自定义实现apply方法？
2017-12-01
TA创建的收藏夹 TA关注的收藏夹
TA关注的人