- 博客(41)
- 收藏
- 关注
RSS订阅
1原创 常用dom操作（查找，创建，修改，属性操作，样式操作）
节点查找APIdocument.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个； document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。注意兼容性为IE9+（含）。另外，不仅仅是document，其它元素也支持 getElementsByClassName 方法； document.getElementsByTagName ：根据标签查找元素， * 表示查询所有标
2020-09-29 21:59:00
600
原创 前端优化之最小化http请求
前端性能优化之最小化http请求关于前端性能优化的总结，随处都可以看到这方面的文章，而优化方法，也无外乎那些“固定”方面，当然，有些方面已经过时，所以，在这里，我主要是针对于一点去做出了总结也是能为了加深印象。一、什么是前端性能优化（what）？从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。二、为什么要做前端性能优化（why）？在构建web站点的过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化
2020-09-28 23:11:30
313
原创 前端优化问题（1）
一、 你对优化这块了解多少?大体常见的手段了解.比如从客户端着手的:压缩代码(JS/CSS),压缩图片合并一些小图片(css sprite)若是打包的代码尽可能切割成多个 chunk,减少单一 chunk过大静态文件采用 cdn 引入HTTP的缓存头使用的合理减小第三方库的依赖对于代码应该考虑性能来编写,比如使用requestAnimationFrame绘制动画,尽可能减少页面重绘(DOM 改变)渐进升级,引入preload这些预加载资源看情况用service worker来缓存资源
2020-09-24 21:55:39
189
原创 关于兼容问题的小总结（1）
一.Polyfill是什么?Polyfill的准确意思为：用于实现浏览器并不支持的原生API的代码。例如，querySelectorAll是很多现代浏览器都支持的原生Web API，但是有些古老的浏览器并不支持，那么假设有人写了库，只要用了这个库， 你就可以在古老的浏览器里面使用document.querySelectorAll，使用方法跟现代浏览器原生API无异。那么这个库就可以称为Polyfill或者Polyfiller。那么问题就来了。jQuery是不是一个Polyfill?答案是No。因为它并
2020-09-23 22:59:53
161
转载 什么是虚拟Dom
一、前言虚拟DOM概念随着react的诞生而诞生，由facebook提出，其卓越的性能很快得到广大开发者的认可；继react之后vue2.0也在其核心引入了虚拟DOM的概念，本文将以vue2.0使用的snabbdom入手，来介绍虚拟DOM的主要实现原理。二、虚拟DOM在开始介绍snabbdom之前我们想来想两个问题，（1）什么是虚拟DOM？vdom可以看作是一个使用javascript模拟了DOM结构的树形结构，这个树结构包含整个DOM结构的信息，如下图： 可见左边的DOM结构，不论是标签名称
2020-09-22 21:23:00
850
转载 vue路由或者前端路由的实现原理
一、什么是前端路由？前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。也就是说，通过改变浏览器地址URL，在不重新请求页面的情况下，更新页面视图二、单页应用与多页应用单页应用即 第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了。原理：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来
2020-09-21 22:02:05
305
原创 微信小程序支付功能
学习目标：例如：学习微信支付 流程学习内容：一、微信支付开发可用场景线下支付公众号支付小程序支付pc网站支付手机app支付企业内部使用微信资金流动 ## 不同场景可用支付类型 //首
2020-09-17 22:00:15
174
原创 前端面试题[“1“,“2“,“3“].map(parseInt)?
[“1”,“2”,“3”].map(parseInt)得到什么？输出结果：1，NaN，NaN。先抛出一个关于结果的概念，也是这为什么是这三个值的原因：map函数传递参数的定义。parseInt函数正对于radix的理解。二进制中没有3这个数码。好了，有了这样一个最基础的概念我们来具体分析这个问题：我没猜错大多数人都会先想到结果是[“1”,“2”,“3”] 为什么会产生这样一个想法？因为我们通常使用map函数都会传一个函数，这个函数一般只使用1-2个参数，如下所示var arr =
2020-09-16 21:41:45
223
原创 XSS攻击的预防
XSS攻击的预防结合上一篇文章知道了XSS的基本攻击方式和基本概念，这里就主要讲一下如何预防XSS的攻击。上面是我在网上找的一个可以作为简单理解的概念图，如果不理解可以根据顺序参照理解。预防储存型和反射型XSS攻击存储型和反射型 XSS 都是在服务端取出恶意代码后，插入到响应 HTML 里的，攻击者刻意编写的“数据”被内嵌到“代码”中，被浏览器所执行。预防这两种漏洞，有两种常见做法：改成纯前端渲染，把代码和数据分隔开。对 HTML 做充分转义。纯前端渲染纯前端渲染的过程：浏览器先加载一
2020-09-15 19:43:01
477
原创 2020-09-14
一、echarts1、安装：npm install echarts -S2、引入： import echarts from 'echarts'; Vue.prototype.$echarts = echarts在官网可以查看更多样式https://echarts.apache.org/zh/download.htmlhtml<template> <div class="sj"> <el-card> <!-- 2.为Echa
2020-09-14 21:51:03
301
原创 水平垂直居中十种方法
方法第一种通过绝对定位的方式 absolute + 负margin首先知道子元素的宽高，给子元素设置top：50%；left：50%，但绝对定位是基于子元素的左上角，我们所希望的效果是子元素的中心居中显示。。。。借助外边距的负值，负的外边距可以让元素向相反方向定位，通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了**优点：**比较好理解，兼容性好**缺点：**需要知道子元素的宽高第二种：也是通过绝对定位的方式 absolute + margin auto这个是需要将各个方向
2020-09-09 23:06:45
669
原创 原生图片懒加载
学习目标：掌握原生图片懒加载学习内容：1、 掌握原生图片懒加载2、 分析js代码3、 搜索熟悉陌生单词用法4、 掌握懒加载概念什么是懒加载 懒加载顾名思义突出一个“懒”字，懒字就是拖延的意思，说白就是延迟加载。比如我们进入一个新的页面进行加载的时候，这个页面很长超过了屏幕可视区域的时候，那么懒加载就会优先加载我们可视区域可见的内容,剩余部分是当进入到可视区域之后再进行加载。为什么要懒加载？懒加载是一种优化网页性能的一种方式，它极大的提高了用户的体验。举
2020-09-08 22:07:19
169
原创 Mock:模拟数据
mockjs官网：http://mockjs.com/mockjs官方文档：https://github.com/nuysoft/Mock/wiki/Getting-Started一、第一步 安装mockjsnpm install mockjs第二步 创建一个mock目录生成mock数据mock目录下创建course.js文件内容如下：//引入mockimport Mock from "mockjs";//mock课程数据var result=Mock.mock({ code.
2020-09-07 20:54:02
316
原创 CSRF
CSRF，即 Cross Site Request Forgery，中译是跨站请求伪造，是一种劫持受信任用户向服务器发送非预期请求的攻击方式。举个例子：小明在刷gmail，突然看到一条链接，好奇点开了发现是个空白链接，就不管他，继续刷其他的。看似没有什么事情发生，但实际上攻击者利用这个所谓的空白页给小明偷偷设置了一个过滤规则，这个规则使他收到的邮件都转发给了攻击者。1、攻击特点攻击一般发起在第三方网站，而不是被攻击的网站。被攻击的网站无法防止攻击发生。攻击利用受害者在被攻击网站的登录凭证，冒充受害
2020-09-04 23:52:37
437
原创 ES6 2015 （1）
let和const:let是定义变量 ， const定义常量const 自身常量不能改 但如果是对象的形式可以改属性和值2.symbol：是ES6新增的基本数据类型symbol:定义的值是唯一性3.扩展运算符( … )可以展开数组和对象1.将数组转换成数据列表 [a,b,c,d]--->a,b,c,d例如：var arr1=[666,777,888]var arr2=['hello','vuejs']var result=[...arr1,...arr2]2.将数据列表转换成
2020-09-03 23:35:54
158
原创 vue watch用法
watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{//深度监听，可监听到对象、数组的变化 handler(val, oldVal){
2020-09-03 02:32:59
100
转载 GET 和 POST 的区别
GET在浏览器回退时是无害的，而POST会再次提交请求。GET请求会被浏览器主动cache，而POST不会，除非手动设置。GET请求只能进行url编码，而POST支持多种编码方式。GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。GET请求大小一般是(1024字节)，http协议并没有限制，而与服务器，操作系统有关，POST理论上来说没有大小限制，http协议规范也没有进行大小限制，但实际上post所能传递的数据量根据取决于服务器的设置和内存大小。对参数的数据类型，GE
2020-09-01 22:34:34
139
原创 防抖 节流
防抖(debounce)1.在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms ，然后：如果在200ms内没有再次触发滚动事件，那么就执行函数如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时效果：如果短时间内大量触发同一事件，只会执行一次函数。实现：：既然前面都提到了计时，那实现的关键就在于setTimeOut这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现：//func 是函数 ，wait是等待的时间function
2020-08-31 22:30:58
101
原创 js指向
首先this作为关键字，它的作用就是引用，并且它通常只写在函数内部就是函数体内，在js中this的引用对象随着函数的使用环境变化而变化，好在具体的使用环境并不多，基本就四种。永远指向其所在函数的所有者，如果没有所有者，指向window;普通函数执行，首先看函数名前面是否有"."，有的话"."前面是谁就是谁；没有的话this就是windowfunction fn(){ console.log(this); }var obj = {fn: fn};fn(); //this->windowobj
2020-08-29 02:06:25
253
原创 为什么从上家公司离职的原因
在上家公司，你为什么离职，请相信，百分之八十的面试官（要么是HR要么是技术负责人），或多或少都会问到的问题，如果问你这个问题，你该如何回答？举几个不太恰当的例子，大家尽量不要用下面的理由，我是感觉不太好：1、因为上家公司不能办公室谈恋爱，我就离职了2、因为上家公司加班太多，受不了加班3、因为上家公司工资太低，感觉付出和收获不能成正比4、我是一心扑到事业上的男人，老板娘却经常约我去她家里做客吃饭，果断辞职5、世界那么大，我想去看看……总归来说，频繁跳槽本身就是一个让人看了很减分的事情，尤其对于
2020-08-28 00:02:21
6399
原创 Axios.post 和.get 请求参数 和headers配置
.get axios.get("http://xxx.com/xxx/xxx/xxx?",{ params:{id:this.kemuid}, headers:{token:Cookies.get('token'), platform: 'web'} }).then((res)=>{ console.log(res)
2020-08-26 22:14:03
439
转载 vue动态添加style样式
注意:凡是有-的style属性名都要变成驼峰式，比如font-size要变成fontSize除了绑定值，其他的属性名的值要用引号括起来，比如backgroundColor:’#00a2ff’ 而不是 backgroundColor:#00a2ff【对象】html :style="{ color: activeColor, fontSize: fontSize + ‘px’ }"html :style="{color:(index==0?conFontColor:’#000’)}"【数组】htm
2020-08-24 23:28:10
779
原创 js 知识
if 判断： if(){}; if(){} else{}while 循环：while(){} do{}while()switch判断：switch(){ case: }错误捕获：try{} catch (error){} finally{} // finally 可有可无,try,catch则必须要有try {有可能错误的代码}catch (err) {如果try代码块的逻辑出错，catch就会捕获try抛出的错误，保存在err里}finally {不管代码有没有错误，始终
2020-08-21 21:44:31
97
原创 Vue时间过滤器
<div id="app"> <!--datah和formatetime是我们要过滤的--> <h1>当前时间:{{date|formateTime}}</h1></div><script> //格式化后的时间格式：年-月-日 时：分：秒的 var parseDate=function(datetime){ return datetime<10?'0'+datetime:datetime; } va.
2020-08-20 22:44:47
150
原创 vue自动切换测试和线上环境 配置
一、首先将统一的环境分开例如：原本在 env.js 文件里的开发环境和测试环境分别写到config文件夹 dev.js 和 prod.js里第二步再安装cross-env插件： npm install cross-env -D之后 分别在运行和打包的指令 分别配置测试 和 生产 （加深绿色代码段）第三步项目目录创建vue.config.js 文件配置chainWebpack : config => { config.plugin("define").tap(args
2020-08-20 00:17:20
641
原创 vue项目整理
安装vue-cli3.0版的项目vue create 项目名字default 是默认的体量最小Manually select features 可以选择默认安装插件剩下的配置在用vue ui显示（没有要配置没有截图）然后到下个页面上面是最后的配置如果lint不会配置用不好则在项目目录里创建vue.config.js文件module.exports = { lintOnSave:false, //禁用ESlint }...
2020-08-19 23:02:41
134
原创 Vue cli从2.9.6版 到3.0版 问题
vue cli2.9.6卸载使用官方法npm uninstall vue-cli -g显示再次检查 vue -V发现还是原来版本问题原因：1.node.js 在安装时没有和脚手架安装在一起2.C盘没有更改授权解决方法将nodejs 下载到其他盘里在下载好的nodejs的主文件夹里创建两个文件夹 node_cache 和 node_global创建完后在命令框输入npm config set prefix “D:\nodejs\node_cache”npm config set c
2020-08-18 23:31:42
272
原创 webpack封装脚手架
一、webpack 是什么是一个现在javaScript 的静态模块打包器如何使用webpack搭建前端环境首先安装node.js然后创建package.json文件npm init -y安装webpack和webpack-cli没有插件在package.json文件配置最后一行配置webpack文件默认配置文件名：webpack.config.js也可以用webpack --config webpack.dev.config.js例如：//引入webpack,主要用于对w
2020-08-17 22:40:09
391
原创 微信小程序总结
我做内容有三个一. 一个是商品详情页在样式中用到了富文本解析的插件wxParse功能有:1.添加购物车2.收藏以及取消收藏3.立即购买后会到下单页面4.还有加入购物车时可以选择数量5.购物车小角标的数量以及点击跳转购物车页面我用的后台接口是自己封装的用三个js文件分别是env.js(环境开发)api.js(接口的封装 调用请求的ajax)request.js(封装的ajax请求promise函数)遇到过的问题有：功能的执行顺序 有的功能需要在特定的生命周期调用比如获取数据
2020-08-15 23:55:03
184
原创 面试题笔记1
一、js原生问题function Foo(){ getName=function(){alert(1);} return this}//先进行预加载Foo.getName = function(){alert(2);};Foo.prototype.getName =function(){alert(3);};var getName = function(){alert(4);};function getName(){alert(5);}; //先进行预加载问题 后接执
2020-08-14 23:48:52
152
原创 小程序的研究
apifm-wxap今天在自主分装了api后又找到了更方便的api分装工具安装：npm install apifm-wxapi如果你的项目还不支持 npm (检查根目录下有没有 package.json 文件)，请先初始化：npm init接下来就可以在任意小程序的 js 文件中使用：1、头部引入： const WXAPI = require('apifm-wxapi') WXAPI.init('gooking')2、直接调用方法： WXAPI.banners().then(
2020-08-14 00:21:51
215
原创 微信小程序报错：Bad attr ‘wx 解决方法
转载 原地址:https://blog.csdn.net/baidu_39418435/article/details/103821828、今天写代码第一次遇到了Bad attr 'wx 报错解决全部的方法在上面的链接里我主要遇到了第三种在同一标签内写入了wx:for 和wx:if 在同一级标签写入wx:else 会报错错误例子：正确例子：...
2020-08-12 23:02:13
1531
原创 微信小程序的登录流程
在小程序中在wxml文件通过button标签 <button open-type="getUserInfo" bindgetuserinfo="processLogin">允许</button>在js文件//引入auth.jsconst AUTH = require('../../utils/auth')processLogin(e) { // console.log('我的页面获取用户信息:',e.detail.userInfo) //this为该页
2020-08-11 23:36:38
201
原创 小程序的登录注册
步骤一完成页面排版以及配制好接口数据我的思路是在一个文件夹里创建三个js文件分别是env.js(环境配置)module.exports={ //开发环境 dev:{ baseUrl:"" }, //生产环境 prod:{ baseUrl:'https://api.it120.cc' }, //测试环境 test:{ baseUrl:'' }}request.js(ajax封装)// 引入环境const { baseUrl }
2020-08-10 21:03:08
235
原创 微信小程序的api封装思路 和 电商项目的登录思路
一 、微信小程序的api封装思路总体分为三大块环境地址的统一//env.jsmodule.exports={ //开发环境 dev:{ baseUrl:'http://127.0.0.1:8080' }, //生产环境 prod:{ baseUrl:'https://api.it120.cc' }, //测试环境 test:{ baseUrl:'https://api.1909A.com' }}业务数据的请求的方法统一//
2020-08-09 00:21:36
250
原创 开始小程序项目
今天项目接口获取到了数组内容是html标签 在网上查到了别人封装的将html标签转为wxml标签的方法 地址：https://github.com/icindy/wxParse 引入必要的文件后 还需要进行数据的配置在wxml引入 <!-- // 引入模板 --> <import src="../../wxParse/wxParse.wxml" /> <!-- //这里data中article为bindName --> <temp
2020-08-07 23:19:01
335
原创 今天继续微信小程序学习
微信小程序的组件的使用今天的项目需要使用 scroll-view组件， 在微信小程序文档中横向滚动的效果在我的页面上无法演示 。光看代码也不知道怎么使用 ，我就把所有代码写入开发程序里发现 ，只需将要横向滚动的内容渲染到scroll-view标签中 例：<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%" scroll-left='0' bindscroll="getleft"> <view
2020-08-06 19:15:38
168
原创 继续学习微信小程序
路由跳转传参有两种方式通过标签<navigator url=`要跳转的路径?id=${id}`>编程式触发wx.navigateTo() 带历史回退wx.redirectTo() 不保留历史，跳转到另一个页面，不能返回到上一页面wx.switchTab() 只跳转到tabBar页面，不带回退wx.reLaunch() 即能跳转到tabBar页面，也能跳转到非tabBar页面，不带历史回退、3.今天遇到问题在使用wx.navigateTo()传参时报错(in pr
2020-08-05 22:27:45
222
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人