前端知识
关注
分享
扫一扫
肖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 · 1419 阅读 · 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 · 1954 阅读 · 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 · 910 阅读 · 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 · 733 阅读 · 0 评论 -
前端埋点实现及原理分析
正如在宏观介绍的博客中写到的，做用户行为分析的方式有“前端埋点”和“后端埋点”的区分，真好今天敲了一个坤哥整理的“前端埋点”的程序，理解了之后结合demo来简单讲解“前端埋点”如何做。前端埋点原理图：如上所示，从broswer到page，再到javascript以及后端backend，浏览器返回正常程序运行结果，本地文件中返回最终的log，这很像是在用户程序中埋下了一段“暗代码”，无形之中“...转载 2020-01-01 20:57:57 · 25365 阅读 · 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 · 558 阅读 · 0 评论 -
Styled-Components
它是通过JavaScript改变CSS编写方式的解决方案之一，从根本上解决常规CSS编写的一些弊端。通过JavaScript来为CSS赋能，我们能达到常规CSS所不好处理的逻辑复杂、函数方法、复用、避免干扰。尽管像SASS、LESS这种预处理语言添加了很多用用的特性，但是他们依旧没有对改变CSS的混乱有太大的帮助。因此组织工作交给了像 BEM这样的方法，虽然比较有用，但是它完全是自选方案，不...转载 2019-10-17 22:32:47 · 676 阅读 · 0 评论 -
__dirname、__filename、process.cwd()
__dirname当前文件所在完整目录路径（不包括文件名）__filename当前文件所在完整目录路径（包括文件名）实例：// 配置 aliasconst path = require('path')alias: { // 获取当前目录前一级的 src 目录 '@': path.resolve(__dirname, '../src')}...原创 2019-10-16 23:39:21 · 389 阅读 · 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 · 567 阅读 · 0 评论 -
art-template 模板引擎
art-template 模板引擎官网：Art-Template模板引擎的实现方式有很多，最简单的是“置换型”模板引擎，这类模板引擎只是将指定模板内容（字符串）中的特定标记（子字符串）替换一下便生成了最终需要的业务数据（比如网页）。<!DOCTYPE html><html lang="en"><head> <meta charset="UT...原创 2018-11-10 11:08:42 · 898 阅读 · 0 评论 -
JS 的标准代码风格
相对严谨的代码风格：Airbnb JavaScript Style相对松散一点的标准代码风格：JavaScript Standard Style原创 2018-11-09 19:53:40 · 296 阅读 · 0 评论 -
购物车点击添加
点击添加事件：addToShopCar(){ let goodsinfo = { id: 商品的id, count: 要购买的数量, price: 商品的单价, selected: false 或 true }; // 调用 store 中的 mutations 来将商品加入购物车 this.$st...原创 2018-11-04 09:43:48 · 3131 阅读 · 0 评论 -
在安卓手机中调试网站
尝试在手机上 去进行项目的预览和测试要保证自己的手机可以正常运行；要保证 手机 和 开发项目的电脑 处于同一个 WIFI 环境中，也就是说 手机 可以 访问到 电脑的 IP打开自己的 项目中 package.json 文件，在 dev 脚本中，添加一个 --host 指令， 把 当前 电脑的 WIFI IP地址， 设置为 --host 的指令值；如何查看自己电脑所处 WIFI 的IP...原创 2018-10-31 18:25:49 · 719 阅读 · 0 评论 -
项目 和 api 接口说明文档
注意：所有api的域名为： http://----- 如果后面文档中，有的域名地址和这里不一样，以这里的为主；获取图文资讯：地址/api/getnewlist作用描述主要用来获取点击首页上的“新闻资讯”后进入到的图文列表页面的数据，大家在做的时候可以使用ajax请求这个地址获取json数据后展示到页面上请求方式Get传入 api 的参数无返回数...原创 2018-10-29 21:13:08 · 11057 阅读 · 4 评论 -
js——分享QQ、QQ空间、微信、微博
转载出处：https://blog.youkuaiyun.com/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 · 4936 阅读 · 0 评论 -
URL 链接中 井号#、问号?、连接符& 分别有什么作用？
#，井号：表示网页中的一个位置，被称之为锚点，常用于某个网页间不同位置的跳转，简单的说就是在一个网页中，URL 不变的情况下，通过添加“#buy”的字符在 URL 最后可以跳转到当前网页中已经定义好的锚点（id=”buy”）位置；同样#的改变也会增加浏览器的历史记录，也就是说我们可以通过“后退”按钮回到上一个位置，而熟悉网页开发的朋友们可能也会用于 ajax 的一些操作中，以此来实现不同的访问状态...转载 2018-08-19 11:28:47 · 37410 阅读 · 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 · 4527 阅读 · 2 评论 -
制作 npm 包
1.npm是什么？npm 是Node 的模块管理器，功能极其强大。 它是Node 获得成功的重要原因之一。 正因为有了npm，我们只要一行命令，就能安装别人写好的模块。npm的基础知识这边就不做表述的,下面提供一些npm基础知识的参考npm官网npm 模块安装机制简介那么下面来介绍一下,如何创建自己的第一个node模块,并把这个模块上传到npm上面,让别人可以用我们的模块2.创建第一个...转载 2019-09-26 10:19:53 · 1071 阅读 · 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 · 239 阅读 · 1 评论 -
后台暴露IP给前端（前后端测试）
用防火墙暴露出 IP暴露80端口（我服务器默认打开的端口）之后一路下一步将自己的 IP 给前端查询自己以太网IP：ipconfig如果前端之间访问 IP 出现的页面不是你想传的，而是一些阻止，则可能是服务器本身有阻止，需要额外配置服务器之后就可以通过ip后面拼接的 /login 之类的给前端用来数据对接测试...原创 2018-12-07 10:50:50 · 5117 阅读 · 0 评论 -
npm（cnpm）、yarn、cmd 命令
ipconfig：查询网络IP，网管，掩码之类的netstat：查询本地活动地址，端口之类的netstat -an：查询端口号（更快）cd /d E:…：进入对应目录下原创 2018-12-07 10:58:54 · 2041 阅读 · 0 评论 -
MVC、MVP 和 MVVM
MVC程序可分为三个部分：模型 （Model）：数据保存视图（View）：用户界面控制器（Controller）：业务逻辑各部分通信方式：ViewControllerModelView 传送指令到 ControllerController 完成业务逻辑后，要求 Model 改变状态Model 将新的数据发送到 View实例：Backbone 的 View 很厚重，主要代...原创 2019-07-31 22:48:47 · 113 阅读 · 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 · 9620 阅读 · 1 评论 -
事件监听兼容写法——EventUtil
// EventUtil const EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { //DOM2级 element....原创 2019-06-21 16:08:54 · 349 阅读 · 0 评论 -
前端面试问题整理
JavaScript中基本数据类型和引用数据类型的区别：https://www.cnblogs.com/cxying93/p/6106469.html原创 2019-05-05 14:29:16 · 1797 阅读 · 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 · 897 阅读 · 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 · 152 阅读 · 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 · 7806 阅读 · 0 评论 -
快速删除 node_modules 文件
npm i rimraf -grimraf node_modules原创 2019-03-05 16:59:54 · 159 阅读 · 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 · 2098 阅读 · 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 · 4265 阅读 · 0 评论 -
FileReader：读取文件内容
FileReader：读取文件内容readerAsText()：读取文本文件（可以使用txt打开的文件），返回文本字符串，默认编码是UTF-8readAsBinaryString()：读取任意类型的文件，返回二进制字符串。这个方法不是用来读取文件展示给客户看，而是储存文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据储存readAsDataURL()：读取...原创 2019-01-28 12:49:54 · 7340 阅读 · 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 · 5164 阅读 · 0 评论 -
浅谈session,cookie,sessionStorage,localStorage的区别及应用场景
浅谈session,cookie,sessionStorage,localStorage的区别及应用场景 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据交互。一、cookie和sessioncookie和session都是用来跟踪浏览器用户身份的会话方式。区别：1、保持状态：cookie保存在浏览器端，se...转载 2019-01-18 21:44:03 · 339 阅读 · 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 · 1767 阅读 · 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 · 419 阅读 · 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 · 1038 阅读 · 0 评论