- 博客(31)
- 收藏
- 关注
RSS订阅原创 对象属性的遍历获取
js对象的属性遍历，通常使用的方法有：1、for…in可查询到对象自身和原型上的所有可枚举属性；2、Object.keys()返回一个数组，包含了对象自身所有的可枚举属性，不包括symbols属性；3、Reflect.ownkeys()返回一个数组，包含对象自身所有的可枚举和不可枚举属性，包括symbols属性4、Object.getOwnPropertyNames()返回一个数组，包含对象自身所有的可枚举和不可枚举属性，不包括symbols属性；5、Object.getOwnPrope
2021-03-25 11:03:21
218
原创 关于浏览器缓存
一、浏览器缓存的类型，浏览器决定存储地址1、service worker: 用户手动配置，自定义要缓存的文件；2、memory cache: 内存，存储小文件；3、disk cache: 磁盘存储，大文件；4、push cache： http/2新添加二、浏览器缓存策略： 强缓存与协商缓存1、强缓存：响应头参数Expires设置过期时间，在此之前都用缓存，依赖用户本地时间；Cache-control: 配置 no-cache或者 max-age,可设置是否缓存以及过期时间，精确到秒优先级高
2021-03-18 14:00:14
197
原创 跨域问题的一些总结
一、什么是跨域以及它产生的原因；浏览器出于安全考虑，有同源策略：如果请求的协议、域名或者端口有一个不同就是跨域， 请求会失败，浏览器会将响应拦截，并抛出错误。二、跨域的常用解决方案；1、表单提交：只用于get请求；2、JSONP：get请求，注册全局函数作为回调；3、CORS: 浏览器对跨域复杂的请求（请求头带了自定义参数、请求方法不是get/head/post之一、content-type不符合默认，上面三个请求不满足任意一个），会有options预检请求；解决方法是：服务端设置响应头，配置可允
2021-03-18 10:26:13
197
原创 react 模块化引入外部css文件不生效问题处理
react 中引入外部css/less文件时，如果直接引入 =》 import “./search.less”;在使用时直接使用className即可， 如下图：但是如果采用这种方式引入=》import styles from “./search.less”;则会发现样式并不生效，如下图：原因是，webpack配置css/less文件的loader时，默认不开启模块化，这种模块化方式引入需要更改下webpack的loader配置， 如下图：...
2020-06-30 10:03:41
10621
原创 移动端踩坑记录之ios系统橡皮筋效果处理
移动端项目经常碰到的一个问题是ios系统的橡皮筋效果处理，这个效果本身的体验还是挺不错的，但是当我们的应用出现遮罩层时，此时滑动页面，我们的预期是页面不进行滚动或者当前遮罩层内部滚动，而实际上滑动会触发橡皮筋效果，与预期不符。 这一次我们的移动端项目中毫不意外碰到了这个问题，通过一些实践，最终还算完美地...
2019-06-28 16:28:52
2472
原创 移动端开发踩坑记之输入框的自定义
最近做移动端项目，由于之前没太多经验，所以踩了挺多的坑，现在抽空总结下,防止以后重蹈覆辙，顺便给需要的人一些帮助。项目背景：使用react框架构建 企业微信应用程序遭遇问题：1、输入框在IOS系统中，键盘‘换行’改为‘搜索’实现方法：设置input标签type=‘search’，同时在input标签外加一个form标签，并设置action=‘javascript:void 0’（这是重点，...
2019-06-25 17:41:24
357
原创 JS通过WebSocket实现前后端通信实例
1、WebSocket是什么？ WebSocket是一种网络通信协议， 一种由HTML5 开始提供的、在单个 TCP 连接上进行全双工通讯的协议。它和HTTP协议的最大区别在于：HTTP 协议是一种无状态的、无连接的、单向的应用层协议当客户端想要知道服务端的变化时，HTTP协议必须使用“轮询”的方式，效率很低；而WebSock...
2018-12-28 19:07:34
33688
3
原创 构建一个Vue插件并生成npm包初体验
    vue的插件一般用来添加全局性的功能，具体可分为：添加全局方法或者属性；添加全局资源（指令、过滤器等）；通过全局 mixin 方法添加一些组件选项；在 Vue.prototype 上 添加 Vue 实例方法；创建一个库，提供自己的 API，同时提供上面提到的一个或多个功能；&nbsp
2018-09-09 17:18:03
649
原创 一个贴近实际的原型链继承的列子
自从四月份换工作后，一方面要适应新的环境，另一方面也是自己的惰性作怪，已经好长时间没写博客了，整个人都松懈了下来；刚好最近工作不忙，新环境也适应好了，感觉还是得给自己充充电，趁着业余时间多学点东西，顺便也总结下工作中的一些经验，那就从这篇博客开始吧！ 众所周知，原型与原型链是js中重要的一个知识点，掌...
2018-09-01 21:02:27
438
2
原创 vue-router实现单页面路由原理
本文参考总结于： 1、vue-router原理分析 - https://www.cnblogs.com/yanze/p/7644631.html 2、location.hash详解 - http://blog.csdn.net/baidu_31333625/article/details/54288223 3、使用HTML5的History API - https://www.cnblogs...
2018-03-14 10:35:24
10495
1
原创 CSS居中方式总结
一、水平居中1、行内元素或者display为inline的块级元素，前提是子元素没有float; 对父元素设置：text-align：center;2、块级元素(已知宽高)： 1)、元素自身设置为 margin:0 auto; 2)、利用绝对定位和margin结合的方式：.elem { position: absolute; width: 宽度值;...
2018-03-13 19:41:41
222
原创 js中的深拷贝与浅拷贝
今天面试被问到js中深浅拷贝的问题，当时回答的并不好，回来搜索了一波，现做下总结： js中针对引用类型的拷贝分为两种：深拷贝和浅拷贝；浅拷贝比较简单，分为两类，一类是直接对源对象进行拷贝，实际上就是引用类型的赋值，拷贝的仅仅是对象引用，如：var obj = {a:1,b:2,c:3};var newObj = obj;newObj.a = 4;console.log(obj.a...
2018-03-12 20:12:40
170
原创 jquery标签页切换导致轮播混乱（“动画累积”）问题解析
用jquery写了一个轮播页面，该页面的自动轮播和点击跳转一切正常；但后来发现一个奇怪的现象，当我切换到另一个标签页并在此停留一段时间后，再次返回轮播页，发现该页面的轮播效果混乱了，图片在快速的切换，但此时的指示器却是正常运转的；过了一段时间才变成正常的轮播效果； 开始时觉得百思不得其解（毕竟我是个菜鸟），自己试着调了调，没找到解决方法（我果然是个菜鸟）；于是只好求助某搜索工具了，在某乎找到
2018-02-05 15:10:22
1817
原创 vue中引入vue-i18n实现国际化时与ElementUI库的兼容性问题解决方法
vue(v2.3.3)项目中引入了vue-i18n（v7.0.5）插件实现国际化多语言；同时项目中使用了ElementUI（v1.3.7）库的时间选择控件‘date-picker’，该控件的文字也需要实现国际化，Element本身具有国际化功能；但问题是Element的官方文档中提到： Element 兼容 vue-i18n@5.x，搭配使用能更方便地实现多语言切换。 默认不支持 6
2018-01-29 10:56:15
16025
原创 js实现常见的几种算法（数组去重、字符统计、二分查找等）
1、数组去重：利用对象属性进行筛选 function filter(arr){ let obj={}; let newArr=[]; for (let i=0;i<arr.length;i++){ if (!obj[arr[i]]) { obj[arr[i]]=true; newArr.push(arr[i]);
2018-01-05 15:44:09
662
原创 js实现常见的三种排序方法（冒泡排序、快速排序、归并排序）
1、冒泡排序(升序): 比较相邻的数,依次找出较大的数往后放；具体原理：冒泡排序原理function popSort(arr){ let length = arr.length; if(length>1){ //n个数的数组需要排序（n-1）轮 for(let i=0;i<length-1;i++){ //每一轮比较的次数逐次递减 for(l
2018-01-04 19:26:23
921
原创 echarts 多个series图表的tooltip自定义
在使用echarts制作数据图表时，由于一张图表中包含多个series并且是多种类型数据（折线图，散点图，自定义图等），最初所有数据都是在各自的series.tooltip中定义提示信息，这种情况下默认tooltip的触发方式是‘item’的方式，但是折线图在这种方式下的使用就很蛋疼了，必须要点中数据点，提示才会出来，但是数据点又比较小，很难点中，用户反馈很不好用； 为了用户体验更好，只
2017-12-22 16:53:42
20579
原创 vue中引入mousewheel事件及其兼容性处理
项目实现过程中需要对一个已经有纵向滚动条的table表格增加鼠标滚轮（mousewheel）事件，方便查看数据；其实现原理与我上一篇博客中的拖动事件类似，利用模拟出来的同一个滚动条来实现，滚动条设置的要点在于：1、滚动条与滚动槽的高度比例 应该等于 内容区（动态变化）和可视区的高度比例；滚动槽与可视区平齐，高度一样，；滚动条的高度则根据内容的高度等比例计算；2、各元素的定位采用绝对定位，其父元素采
2017-12-15 14:08:04
11921
原创 vue中引入mousedown事件和document的mousemove事件模拟table滚动条
vue项目中需要模拟表格的滚动条效果，涉及的事件就是mousedown、mouseup、mousemove；其中mousedown事件是绑定在滚动条上的，但是mousemove和mouseup事件则应该是绑定在document上，这样才能很好地实现滚动条的拖动； 首先在组件methods中定义两个函数：1、获取鼠标位置坐标： getPos(ev){ let scro
2017-12-14 19:21:13
38379
1
原创 vue-resource中设置全局拦截器遇到的两个问题
1、vue项目，在main.js中设置了vue-resource的全局拦截器；某一页面采用定时器实现长连接，项目需求是获取当前页面的请求，在离开页面时将请求清除；因为要将请求存储到stroe中，所以需要在拦截器中使用对应组件的this,但使用时却发现，获取到的this并不是对应的组件实例；最终采用了在VUE的原型上定义函数，并在拦截器中调用该函数，这样就能正确获取到this，实现方式如下let
2017-11-28 09:08:29
2693
原创 IE浏览器中的ajax缓存问题与new Date()兼容性问题的解决方法
1、 最近项目做兼容性测试时发现，IE11下采用ajax发送请求更新数据时页面数据始终保持不变，刷新页面也没用，退出后重新登录网站才能获得最新的数据； 网上搜索后才发现原因是：IE浏览器中存在AJAX缓存，当请求地址和参数不变时（‘GET请求’），直接从缓存中获取数据，并不会发送请求，因此数据无法更新；POST请求因为参数发生变化了，因此能正常发送； 解决方法就是：在每一次GET请求中加
2017-11-17 15:45:36
815
原创 js获取、比较浏览器名称和版本号的简便方法
1、对浏览器的UA进行查询，获取当前浏览器的名称和版本号： getBrowserInfo(){ let agent = navigator.userAgent.toLowerCase() ; let regStr_ie = /msie [\d.]+;/gi ; let regStr_ff = /firefox\/[\d.]+/gi let regStr_chr
2017-11-17 10:18:56
1485
原创 vue引入element-ui 2.0 后报错问题解决措施
按照element-ui官网提供的方法在vue中引入element2.0 后报错如下：错误提示说element-icons引用出错，找不到合适的loader；去看依赖包目录时发现引用的文件如下： 后来才发现file-loader默认处理文件格式是不包含'.tff'和'.woff'的; 于是在webpack.config.js中将目录中的文件格式加上：这
2017-10-29 17:42:16
3268
原创 JS高程知识点总结-6（面向对象）
一、对象的概念1、js中对象：无序属性的集合，键值对，其内部属性（无法直接访问）有：数据属性和访问器属性；数据属性的4个特性（描述符）： [[Configurable]]:决定能否修改删除属性，默认true; [[Enumerable]]:决定是否可枚举（能否用for-in返回），默认true； [[Writable]]:属性值能否修改，默认true； [[Valu
2017-10-25 16:21:02
234
原创 JS高程知识点总结-5（引用类型）
一、对象类型1、js中访问对象属性时一般用点表示法，还可以使用方括号表示法，使用方括号时，要访问的属性要使用字符串的形式； alert(preson.name); alert(person["name"]); 方括号的优势在于可以使用变量访问属性； var personName = "name"; alert(parson[personName]); 其
2017-10-24 15:07:26
228
原创 Git 常用命令与操作基础知识
1、初始化一个Git仓库，使用git init命令。2、添加文件到Git仓库，分两步：第一步，使用命令git add ，注意，可反复多次使用，添加多个文件；第二步，使用命令git commit，完成。3、HEAD指向的版本就是当前版本，因此，Git允许我们在版本的历史之间穿梭，使用命令git reset --hard commit_id。
2017-10-15 18:25:47
217
原创 vue 后台数据获取与组件渲染、页面刷新数据消失的问题小结
1、使用Vue完成项目，从后台获取数据绑定到页面时，无法确保页面能在组件渲染前获取到所需的数据； 在下面两种情况中遇到过这个问题： 1）、子组件页面需要绑定后台数据到视图层： 解决方法：在父页面提前进行数据获取，用Vuex保存，然后子页面computed属性中返回该参数，即可保证渲染不出错； PS：之前尝试过在子页面mount
2017-08-07 10:03:02
21467
1
原创 vue与vue-i18n结合实现后台数据的多语言切换
在XXX.js文件中定义函数： getUser(context,info){ context.$http.get(SERVER_URL+'/users',info).then(function(data){ let err =data.body.error; if(err===0){ let dataObj = data.body.userL
2017-07-26 14:24:35
12629
5
原创 vue-router 与 elementUI导航栏 配合实现路由设置小技巧
{ path:'/home', component:Home, name:'导航一', iconCls: 'el-icon-menu', children: [ { path: '/table', component: table, name: '表格'}, { path: '/carousel', component:
2017-07-24 15:02:33
7277
1
原创 Vuex state 中数据的实时监控与响应
computed:{ getLanguage(){ return this.$store.state.language; } }, watch:{ getLanguage(val){ this.user = this.$t('user'); this.pas = this.$t(
2017-07-24 10:16:32
2926
原创 ES6 与 ECMAScript2015
JavaScript ：浏览器脚本语言，创造者 Netscape 公司； ECMAScript: 1996年由Netscape 公司提交给国际标准化组织ECMA，次年完成的针对JavaScript 的语言标准1.0版； ES6： 2011年ECMA决定在ECMAScript5.1版后，每年6月发布一次，ES6在广义范围上指的是下一代的JavaScript 语言标准；
2017-07-17 09:30:52
371
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人