![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端知识
肖ZE
这个作者很懒,什么都没留下…
展开
-
秒表计时器(Timeout 实现 Interval)
问题:setInterval 定时器不准确解决:const timerIdList = {};mySetInterval(fn: (time: number) => void, delay: number) { const key = Symbol(); const interval = () => { const start = Date.now(); this.timerIdList[key] = setTimeout(() => { con原创 2021-04-28 21:35:01 · 1321 阅读 · 0 评论 -
element-ui 的 dialog 实现拖拽、水平伸缩、双击头部放大
import Vue from 'vue';/* * 使用: * elementUI 的 dialog 上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。 * 给 dialog 设置 :close-on-click-modal="false" , 禁止点击遮罩层关闭弹出层 * 如果是 form 表单,不要将提交等按钮放置 el-form-item,以免在上下拉伸时被隐藏 */// v-dialogDrag: 弹窗拖拽+水平方向伸缩Vue.directive('d原创 2021-01-19 12:12:01 · 1781 阅读 · 0 评论 -
Charles抓包与改写
一、 电脑端和手机端抓包MAC电脑端:1.打开charles,点击“proxy”—“proxy setting”;2.端口输入7777,点击“ok”: 3.点击“proxy”-“SSL Proxying Setting”;4.点击add,录入“*”后,点击“ok”;5.点击“Help”—“SSL Proxying”-“Install Charles Root Certificate”,录入管理员密...转载 2020-08-24 20:03:42 · 821 阅读 · 0 评论 -
百度、高德地图
导航const [startLngLat, endLngLat] = [[jd1, wd1], [jd2,wd2]];const url = flag ? `http://uri.amap.com/navigation?from=${startLngLat[0]},${startLngLat[1]}&to=${endLngLat[0]},${endLngLat[1]}&mo...原创 2020-04-19 16:43:28 · 615 阅读 · 0 评论 -
前端埋点实现及原理分析
正如在宏观介绍的博客中写到的,做用户行为分析的方式有“前端埋点”和“后端埋点”的区分,真好今天敲了一个坤哥整理的“前端埋点”的程序,理解了之后结合demo来简单讲解“前端埋点”如何做。前端埋点原理图:如上所示,从broswer到page,再到javascript以及后端backend,浏览器返回正常程序运行结果,本地文件中返回最终的log,这很像是在用户程序中埋下了一段“暗代码”,无形之中“...转载 2020-01-01 20:57:57 · 24498 阅读 · 3 评论 -
初识 three.js
认识 three.js官方文档安装yarn add three引入import * as THREE from 'three'使用 threeAnimation() { const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.in...原创 2019-11-15 10:59:33 · 459 阅读 · 0 评论 -
Styled-Components
它是通过JavaScript改变CSS编写方式的解决方案之一,从根本上解决常规CSS编写的一些弊端。通过JavaScript来为CSS赋能,我们能达到常规CSS所不好处理的逻辑复杂、函数方法、复用、避免干扰。尽管像SASS、LESS这种预处理语言添加了很多用用的特性,但是他们依旧没有对改变CSS的混乱有太大的帮助。因此组织工作交给了像 BEM这样的方法,虽然比较有用,但是它完全是自选方案,不...转载 2019-10-17 22:32:47 · 607 阅读 · 0 评论 -
__dirname、__filename、process.cwd()
__dirname当前文件所在完整目录路径(不包括文件名)__filename当前文件所在完整目录路径(包括文件名)实例:// 配置 aliasconst path = require('path')alias: { // 获取当前目录前一级的 src 目录 '@': path.resolve(__dirname, '../src')}...原创 2019-10-16 23:39:21 · 338 阅读 · 0 评论 -
中文转换为n进制或Unicode
在给后端传递变量的的值中有汉字,可能由于编码的原因,传递到后端后变为乱码了。所以有时候为了省事或者其它特殊要求的时候,会把传递的汉字转换成Unicode编码后再进行传递。toChinese:function toChinese(str) { const matches = str.match(/(\\\d{3}){3}/g); if (matches) matches.fo...原创 2018-12-02 11:25:25 · 521 阅读 · 0 评论 -
art-template 模板引擎
art-template 模板引擎官网:Art-Template模板引擎的实现方式有很多,最简单的是“置换型”模板引擎,这类模板引擎只是将指定模板内容(字符串)中的特定标记(子字符串)替换一下便生成了最终需要的业务数据(比如网页)。<!DOCTYPE html><html lang="en"><head> <meta charset="UT...原创 2018-11-10 11:08:42 · 836 阅读 · 0 评论 -
JS 的标准代码风格
相对严谨的代码风格:Airbnb JavaScript Style相对松散一点的标准代码风格:JavaScript Standard Style原创 2018-11-09 19:53:40 · 240 阅读 · 0 评论 -
购物车点击添加
点击添加事件:addToShopCar(){ let goodsinfo = { id: 商品的id, count: 要购买的数量, price: 商品的单价, selected: false 或 true }; // 调用 store 中的 mutations 来将商品加入购物车 this.$st...原创 2018-11-04 09:43:48 · 3083 阅读 · 0 评论 -
在安卓手机中调试网站
尝试在手机上 去进行项目的预览和测试要保证自己的手机可以正常运行;要保证 手机 和 开发项目的电脑 处于同一个 WIFI 环境中,也就是说 手机 可以 访问到 电脑的 IP打开自己的 项目中 package.json 文件,在 dev 脚本中,添加一个 --host 指令, 把 当前 电脑的 WIFI IP地址, 设置为 --host 的指令值;如何查看自己电脑所处 WIFI 的IP...原创 2018-10-31 18:25:49 · 665 阅读 · 0 评论 -
项目 和 api 接口说明文档
注意:所有api的域名为: http://----- 如果后面文档中,有的域名地址和这里不一样,以这里的为主;获取图文资讯:地址/api/getnewlist作用描述主要用来获取点击首页上的“新闻资讯”后进入到的图文列表页面的数据,大家在做的时候可以使用ajax请求这个地址获取json数据后展示到页面上请求方式Get传入 api 的参数无返回数...原创 2018-10-29 21:13:08 · 10936 阅读 · 4 评论 -
js——分享QQ、QQ空间、微信、微博
转载出处:https://blog.csdn.net/csdnwangjianxin/article/details/51799235//分享QQ好友 function qq(title,url,pic) { var p = { url: 'http://test.qicheyitiao.com',/*获取URL,可加上来自分享到QQ标识,方...原创 2018-08-19 10:47:28 · 4835 阅读 · 0 评论 -
URL 链接中 井号#、问号?、连接符& 分别有什么作用?
#,井号:表示网页中的一个位置,被称之为锚点,常用于某个网页间不同位置的跳转,简单的说就是在一个网页中,URL 不变的情况下,通过添加“#buy”的字符在 URL 最后可以跳转到当前网页中已经定义好的锚点(id=”buy”)位置;同样#的改变也会增加浏览器的历史记录,也就是说我们可以通过“后退”按钮回到上一个位置,而熟悉网页开发的朋友们可能也会用于 ajax 的一些操作中,以此来实现不同的访问状态...转载 2018-08-19 11:28:47 · 34630 阅读 · 2 评论 -
eslint / prettier 检查格式配置、husky / lint-staged 强制校验、tslint 配置
module.exports = { "extends": "eslint:recommended", // "extends": "plugin:prettier/recommended", "parser":"babel-eslint", "parserOptions":{ "sourceType":"module", "ecma...原创 2019-09-25 11:16:20 · 4408 阅读 · 2 评论 -
制作 npm 包
1.npm是什么?npm 是Node 的模块管理器,功能极其强大。 它是Node 获得成功的重要原因之一。 正因为有了npm,我们只要一行命令,就能安装别人写好的模块。npm的基础知识这边就不做表述的,下面提供一些npm基础知识的参考npm官网npm 模块安装机制简介那么下面来介绍一下,如何创建自己的第一个node模块,并把这个模块上传到npm上面,让别人可以用我们的模块2.创建第一个...转载 2019-09-26 10:19:53 · 1017 阅读 · 0 评论 -
常用链接
icon-Material Design(vuetify中用的 icon 库):Material Designdribbble(ui 设计):dribbbleeasyicon(icon 的 ico 和 png 下载):easyiconcubic-bezier(transition 的 cubic-bezier 缓动动画效果):cubic-beziersmallpdf(文件转换):small...原创 2018-12-02 14:11:32 · 203 阅读 · 1 评论 -
后台暴露IP给前端(前后端测试)
用防火墙暴露出 IP暴露80端口(我服务器默认打开的端口)之后一路下一步将自己的 IP 给前端查询自己以太网IP:ipconfig如果前端之间访问 IP 出现的页面不是你想传的,而是一些阻止,则可能是服务器本身有阻止,需要额外配置服务器之后就可以通过ip后面拼接的 /login 之类的给前端用来数据对接测试...原创 2018-12-07 10:50:50 · 4919 阅读 · 0 评论 -
npm(cnpm)、yarn、cmd 命令
ipconfig:查询网络IP,网管,掩码之类的netstat:查询本地活动地址,端口之类的netstat -an:查询端口号(更快)cd /d E:…:进入对应目录下原创 2018-12-07 10:58:54 · 1973 阅读 · 0 评论 -
MVC、MVP 和 MVVM
MVC程序可分为三个部分:模型 (Model):数据保存视图(View):用户界面控制器(Controller):业务逻辑各部分通信方式:ViewControllerModelView 传送指令到 ControllerController 完成业务逻辑后,要求 Model 改变状态Model 将新的数据发送到 View实例:Backbone 的 View 很厚重,主要代...原创 2019-07-31 22:48:47 · 89 阅读 · 0 评论 -
控制台报错 Value below was evaluated just now
今天循环下面的嵌套对象数组for (let j = 0; j < a.length; j++) { for (let i = 0; i < a[i].b.length; i++) { }}发现一个问题展开数组后发现:出现了 Value below was evaluated just now 没展开的值。究其原因,其实是 Chrome Console.log() 点击展...原创 2019-07-06 14:00:31 · 9486 阅读 · 1 评论 -
事件监听兼容写法——EventUtil
// EventUtil const EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { //DOM2级 element....原创 2019-06-21 16:08:54 · 300 阅读 · 0 评论 -
前端面试问题整理
JavaScript中基本数据类型和引用数据类型的区别:https://www.cnblogs.com/cxying93/p/6106469.html原创 2019-05-05 14:29:16 · 1717 阅读 · 0 评论 -
mock.js 数据模拟 / axios 封装接口
mock.js安装npm install mockjs --savenpm install axios --save使用main.js 中引入require('./mock')// 引入 mockmock.jsimport Mock from 'mockjs' // 引入mockjs const Random = Mock.Random // Mock.Random 是一个...原创 2019-04-07 09:11:04 · 842 阅读 · 0 评论 -
Restful
REST(英文:Representational State Transfer,简称REST)描述了一个架构样式的网络系统,比如 web 应用程序。它首次出现在 2000 年 Roy Fielding 的博士论文中,Roy Fielding是 HTTP 规范的主要编写者之一。在目前主流的三种Web服务交互方案中,REST相比于SOAP(Simple Object Access protocol,...原创 2019-03-07 09:26:11 · 125 阅读 · 0 评论 -
material-design-icons-iconfont 图标引入
安装:cnpm i -D material-design-icons-iconfont引入:// Ensure you are using css-loaderimport 'material-design-icons-iconfont/dist/material-design-icons.css'使用:&lt;i class="material-icons"&gt;face&lt...原创 2019-03-05 17:56:11 · 7669 阅读 · 0 评论 -
快速删除 node_modules 文件
npm i rimraf -grimraf node_modules原创 2019-03-05 16:59:54 · 123 阅读 · 0 评论 -
json-server 详解
JSON-Server 是一个 Node 模块,运行 Express 服务器,你可以指定一个 json 文件作为 api 的数据源。安装json-servernpm install -g json-server启动 json-serverjson-server可以直接把一个json文件托管成一个具备全RESTful风格的API,并支持跨域、jsonp、路由订制、数据快照保存等功能的 we...原创 2019-03-02 10:34:48 · 2021 阅读 · 0 评论 -
OSS阿里云上传文件 前端 js 下载 url 跨域问题
场景:后端上传文件至阿里云OSS,返回得到一个URL。前端用这个URL下载文件,ajax请求异常:No ‘Access-Control-Allow-Origin’ header is present on the requested resource.使用html &amp;lt;a&amp;gt; 标签直接可以下载分析原因:js和ajax什么的是看不见的易出错的,需要安全保护,用&amp;...原创 2019-02-14 13:46:08 · 4173 阅读 · 0 评论 -
FileReader:读取文件内容
FileReader:读取文件内容readerAsText():读取文本文件(可以使用txt打开的文件),返回文本字符串,默认编码是UTF-8readAsBinaryString():读取任意类型的文件,返回二进制字符串。这个方法不是用来读取文件展示给客户看,而是储存文件。例如:读取文件的内容,获取二进制数据,传递给后台,后台接收了数据之后,再将数据储存readAsDataURL():读取...原创 2019-01-28 12:49:54 · 7189 阅读 · 0 评论 -
token简单的使用
这里对token的简单的使用进行测试和描述其原理就不在这里描述了!具体测试流程:用户在前端请求登录——&amp;amp;gt;在后台验证通过后根据用户ID生成token——&amp;amp;gt;请求返回时将token带给前端并存在前端——&amp;amp;gt;以后前端再次请求时需要带上token——&amp;amp;gt;后台接受到token并验证,如果验证通过,返回true,否则false(实际情况下就是验证通过,这次请求成功,否则转载 2019-01-24 09:19:34 · 5034 阅读 · 0 评论 -
浅谈session,cookie,sessionStorage,localStorage的区别及应用场景
浅谈session,cookie,sessionStorage,localStorage的区别及应用场景 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互。一、cookie和sessioncookie和session都是用来跟踪浏览器用户身份的会话方式。区别:1、保持状态:cookie保存在浏览器端,se...转载 2019-01-18 21:44:03 · 309 阅读 · 1 评论 -
input 的 file 中 accept 判断常见属性
audio/* 接受所有的声音文件video/* 接受所有的视频文件image/* 接受所有的图像文件accept=“application/msexcel”accept=“application/msword”accept=“application/pdf”accept=“application/poscript”accept=“application/rtf”accept=“a...原创 2019-01-09 22:08:15 · 1700 阅读 · 0 评论 -
js 判断浏览器设备信息
if (/Android|webOS|iPhone|iPod|BlackBerry/g.test(navigator.userAgent)) { window.location.href = "http://phone";} else { window.location.href = "http://computer";}原创 2018-12-24 22:32:21 · 369 阅读 · 0 评论 -
FormData
一.创建一个formData对象实例的方式1、创建一个空对象var formData = new FormData();//通过append方法添加数据2、使用已有表单来初始化对象//表单示例&amp;lt;form id=&quot;myForm&quot; action=&quot;&quot; method=&quot;post&quot;&amp;gt;原创 2018-12-22 12:21:34 · 983 阅读 · 0 评论