- 博客(29)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 我的码云博客地址
我码云博客的地址，前端就该有前端的亚子，所以今后准备主要在这上面更新了。欢迎访问：https://bishaoxia.gitee.io/
2020-06-05 18:36:40
343
原创 prototype和__proto__的关系
prototype是函数独有的属性。当我们使用关键词new并且将函数作为构造函数来构造对象的时候，它被用来构建对象的__proto__属性。当你创建函数时，JS会为这个函数自动添加prototype属性，值是一个有 constructor 属性的对象。而一旦你把这个函数当作构造函数（constructor）调用（即通过new关键字调用），那么JS就会帮你创建该构造函数的实例，实例继承构造函数prototype的所有属性和方法（实例通过设置自己的__proto__指向承构造函数的prototype来实现这
2020-05-29 19:01:25
230
原创 路由懒加载import和require用法的区别
vue-router同步和异步普通用法：// 普通import同步加载用法import HelloWorld from "@/components/HelloWorld.vue"export default new Router({ routes:[ { path: "/", name: "HelloWorld", component: HelloWorld } ]})// import 异步加载用法export default
2020-05-26 15:04:22
2821
原创 vue-jsx写法笔记
jsx语法不是很常用，部分语法和平时写template有点不太一样，用到的时候可能会忘记，官网的文档又特别简单，这里整理一下常用的一些语法含义，方便以后使用。vue的jsx基础插件依赖（高版本cli已经自带，无需再次安装了）。babel-plugin-syntax-jsx: 提供对 jsx 语法的基本支持，这个并非由 vue 提供和维护，react 也依赖于这个插件 babel-helper-vue-jsx-merge-props: 提供了 vue 属性合并的工具函数，用于支持 jsx 里的.
2020-05-22 18:30:21
1218
原创 javascript中的!~是什么意思
element-ui的switch组件源码有这样一个判断if (!~[this.activeValue, this.inactiveValue].indexOf(this.value)) { this.$emit('input', this.inactiveValue);}这个用法比较新颖，因为默认的写法都是 ['xx', 'yy'].indexOf(who) >= 0...
2020-04-28 16:28:01
1552
1
原创 element-ui解决el-dialog的闪烁问题
之前的项目都是网站项目，一般都是要自己写UI，最近开发后台项目使用element-ui，也遇到了一些坑，譬如在使用is动态组件的时候，两个动态组件都是dialog，切换的时候会闪烁，查了半天原因发现是dialog打开和关闭动画造成的。简单粗暴的解决方法是直接在dialog加v-if="visible" 这样就没有关闭动画了，解决闪烁。在优化一点的方案是把dialog在独立成一个组件，在di...
2020-04-14 16:41:49
6792
原创 Axios拦截器之error参数
我们都知道Axios的响应拦截器axios.interceptors.response.use( function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });...
2020-04-13 14:03:01
2942
原创 vue打包 使用UglifyJsPlugin减少体积，以及使用cdn、路由懒加载减少加载时间
直接上代码了vue.config.jsconst UglifyJsPlugin = require('uglifyjs-webpack-plugin');module.exports = { publicPath: './', //文件名hash filenameHashing: false, //生成source map productionSourceMap...
2020-04-02 16:53:39
4100
原创 记录国产浏览器flex-basis的蜜汁bug
使用element-ui开发的时候遇到了坑，在chrome、Firefox、就连IE都正常的情况下，国产浏览器（极速内核）却有问题。大概的布局是这个意思：<!-- body已经设置height:100% --><el-container style="height: 100%;"> <el-container> <el-...
2020-04-01 18:28:59
330
原创 position:sticky实现吸顶效果以及兼容性
在开发时遇到一个吸顶效果的需求，先看一下最终实现的效果：收到这个需求的时候，其实也知道position:stricky这个属性，现在重新介绍一下：这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。 如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父...
2020-03-26 18:31:42
6014
原创 记录我用的vscode插件
主题插件monokai pro，很喜欢里面的monokai classic主题，算是自带主题monokai的增强版，喜欢monokai的不要错过。Vetur 用了vscode打开vue文件自动推荐的插件，代码变色提示什么的都很棒，用来开发vue-cli脚手架创建的项目很合适。Document This 缺少个注释的插件就下载了这个，感觉还行，也没有太好的替代品。快捷键两...
2020-03-18 19:26:04
410
原创 实现一行或多行文本溢出省略效果 常用方法汇总
纯CSS方案单行比较简单：/* css部分 */.ellipsis{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}<!-- html部分 --><div class="ellipsis" style="width:100px">hello worl...
2020-03-18 19:09:48
177
原创 opacity: 0、visibility: hidden、display: none 优劣和适用场景
素display:noneDOM 结构：元素完全从渲染树中消失，不占据空间； 子节点：不会被子节点继承，子节点设置display:block也无法显示； 性能：改变此属性时会引起重排和回流，性能较差；但由于修改被隐藏的子节点时不会进行重排，所以在大量修改子节点样式时，先隐藏修改完在显示会有较好的性能； Event事件：无法进行 DOM 事件监听、无法被选中； transition：tra...
2020-03-18 17:49:22
323
原创 html中如何处理中文输入
在处理用户输入<input>标签的文本时，平时我们都是用input/propertychange事件进行操作和过滤，但有时候会出现处理中文的情况，在中文输入时，用户还没有输入他想输入的中文，只是输入了几个拼音字符，但 input 事件也被触发了，提示长度超过上限。那有没有更好的方法避免这种情况呢？可以采用compositionstart和compositionend来捕获IME（i...
2020-03-18 16:58:29
778
原创 Vue子组件为什么不可以修改父组件传递的Prop？
Vue提倡单项数据流，主要是项目越来越复杂时，组件互相影响加上复用会使debug 的成本会非常高。引自VUE中文官网的话：“所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。”那为修改props的时候，vue是如何能够知道是子组...
2020-03-18 16:06:20
2209
原创 准备使用vue制作开始一个的单机挂机放置类小游戏
因为疫情的原因，工作有点难找，在家呆着无聊打算做点啥，准备开工一个个人小游戏，一方面是热爱游戏，一方面是想做个项目提升一下对vue的熟练度和掌握能力。想了许久，打算做一个传奇主题的战斗无止境，刚开始工作的时候玩过战斗无止境（算是挂机游戏鼻祖吧），一直想做个类似的挂机游戏，且热血传奇是我心中网游的经典。所以这个小项目就这么平淡的开工了。目前搭了一天的界面：界面丑是抽了点，但咱又不会美术，...
2020-03-10 15:01:44
5235
1
原创 震惊，Object.hasOwnProperty的正确调用方法
今天在家写一个Vue的项目时使用Object.hasOwnProperty时出现一个错误，代码差不多如下：let data = {a:1, b:2};for(let key in data) { if (data.hasOwnProperty(key) { //todo... }}在执行类似上述代码时直接报错：为啥hasOwnProperty都...
2020-03-10 11:52:05
813
原创 ES6事件循环机制：浏览器中的宏任务和微任务
面试也是一个增长知识点的过程。就像我昨天面试时被问到一个没有听过的名词：简单阐述一下宏任务和微任务，不知道答案的我直接就被问住了，今天在网上翻阅了很多文章终于算是弄懂了，也自己总结一下。首先，我们都知道JavaScript 是一个单线程、异步、非阻塞的语言，那我们怎么来理解这句话呢，先看一段代码：console.log(1);setTimeout(function() { co...
2020-03-04 21:33:30
1287
3
原创 一段让JavaScript模仿其他语言类的语法去写的有趣的代码
先上源码：JS = {};// 这个是库的源代码;JS.Class = function(classDefinition) { //返回目标类的真正构造器 function getClassBase() { return function() { //它在里面执行用户传入的构造器construct //preventJSBaseConstruc...
2020-03-01 19:08:12
134
原创 简单聊聊Web优化
HTTP缓存 使用缓存的优劣因为Web的访问时下载特性，使用缓存可以有效避免每次访问都下载资源给服务器造成带宽压力、同时减少Web加载时间。但缓存使用不当，会造成用户无法看到最新的内容或者显示问题。浏览器缓存机制根据http协议，在 http 1.0 时代，给客户端设定缓存方式一般通过两个字段 Pragma 和 Expires:<meta http-equ...
2019-08-21 17:13:28
183
原创 谈一谈JS数字精度的问题
首先看一下JavaScript数字类型的说明，教科书上是这么说的，JS 遵循 IEEE 754 规范，采用双精度存储（double precision），占用 64 bit。如图1是符号位，用来表示数字正负，11是尾数位最大是 52 位，因此Javascript中能精准表示的最高整数是 Math.pow(2, 53) - 1，十进制即 9007199254740991（但Javascr...
2019-08-16 11:56:04
1088
原创 Vue-cli开发一时爽，却如何面对SEO需求，列举几种常见的模式
很久没有上博客了，最近决定还是重新开始更新。之前公司的项目中有很多SEO的要求，之前对SEO这块了解的也不是很多，后来也看了很多SEO相关的知识。因为公司的web还是传统套模板的开发模式，SEO方面的各种变态要求都可以实现，但有很多小活动页面我都是用Vue去实现的，还好这些活动都不需要SEO，为了以后着想，我还是决定要研究一下。1.可以满足简单的SEO要求的，prerender-spa-plu...
2019-08-14 17:48:18
275
原创 如何全局防止ajax重复提交
在开发中一定有这种情况：一个简易的需求，点一个按钮，则向服务器请求资源，不作处理时，多次点击后会有很多个请求在等待。最粗暴的解决方式是点一次就将按钮disable掉，比如$("input[type=submit]").attr('disabled',false)但这种形式缺点也很多，还有稍微优雅一点的方式完全由JS来控制，就是使用一个变量来保存状态：var post_flag = false; ...
2018-05-17 10:42:03
3443
原创 WEB开发 十进制RGB颜色转化为标准代码或十六进制
今天做web交互的时候对服务器下发的rgb色百思不得其解，竟然是一串数字而且还有负数，后来观察了几列数据后发现其白色有可能为16777215或-1，那么意味着当数字小于0时会加上16777216，于是我百度了一下这个数字顿时茅塞顿开，原来是rgb所能表达的最大颜色(256 * 256 * 256)，但是网页肯定必须使用rgb或者十六进制来表示，那么就写了个函数来转换一下：// 转化为...
2018-04-18 21:15:20
2100
原创 hmailserver + afterlogic 搭建webmail
公司的邮箱系统一直是我在维护，最近公司有webmail的需求（之前都是用邮件客户端连的），其实大部分我也是按照网上的教程来的，但基本都比较老了，有些地方略有不同，也踩到了坑。我在这里就说一下我的安装步骤吧。环境：Windows Sever 2008 && php 5.4.0 && apache && mysql && hmailserver 5.6.6（安装webmail之前升
2017-03-02 11:47:51
13071
1
原创 JavaScript的 new function () {} 写法
今天研读大神们的JS代码时，看到一个很诡异的写法：var abc = new function () { var self = this; this.xx = function (x) { //x //more... }}();这和普通的闭包方法有何不同呢？百度了一下资料也比较少，我们只知道var fun1 = new Function ('a', 'retur
2017-02-27 14:23:40
4958
原创 javascript运算符优先级速查表
地址是：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence自己做个记录，背一背应该会比较有用优先级运算类型关联性运算符19圆括号n/a( … )18
2017-02-25 18:39:46
373
原创 基于flex弹性布局实现“头尾固定，中间滚动”的页面（纯CSS实现）
之前写过一个小项目，首先这个页面布局是这个样子滴，举个栗子，京东的首页：这算是一种还算常见的页面样式吧，头部和底部固定（或者底部固定没有头、头部固定没有底），有的会用fixed去做，但有在很多手机上会出现很多的奇葩的问题。思前想后，后来我决定使用弹性布局去做，至少在手机浏览器中都是支持的，虽然写法上可能为了考虑老版本要多谢一些兼容性的无用CSS，配合HTML5 history AP
2017-02-23 14:14:19
20551
原创 领淘金币网站如何实现个人的研究
想了很久，我也做了有一段时间的程序猿了，平时工作写的也不少、看文章看的也不少，可是始终觉得自己没有太大的进步，思维过于局限，有时候想得很好却写着写着又开始很糟糕，于是我决定开始写博客记笔记，只有将自己在开发和平时思考中遇到的点点滴滴累积起来，才能有所提升。这算是我的第一篇自己写的博客，仅此鼓励自己。由于电商这两年比较火爆，大家都在买买买，所以最近领淘金币的网站比较火，虽然个人觉得部分商品支持使
2017-02-22 23:20:15
649
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人