前端
文章平均质量分 70
up阳光正好
六年工作经验的前端老人,不为了卷而卷的前端主管
展开
-
强缓存和协商缓存
什么是浏览器缓存?怎么区分强缓存和协商缓存?原创 2024-03-18 10:13:43 · 1066 阅读 · 0 评论 -
前端vscode插件bito
GPT-4和ChatGPT越来越火,前端人员是否也能在日常工作中尝试体验其带来的乐趣呢?答案是可以的!安排!!今天介绍一款vscode的插件 【bito】。原创 2023-05-30 09:08:48 · 1286 阅读 · 0 评论 -
CSS选择器世界
张鑫旭在《CSS选择器世界》原创 2023-05-11 08:23:54 · 550 阅读 · 0 评论 -
vscode配置代码片段,自动生成vue(基于ts)的模板
打开vue.json配置vue模板内容使用新建一个.vue文件输入vue回车后,自动生成代码附赠:vue.json里的代码{ "Print to console": { "prefix": "vue", "body": [ "<template>", "", "</template>", "", "<script lang=\"ts\">", "import { Component, V原创 2021-01-21 19:41:41 · 1886 阅读 · 0 评论 -
从js单线程到浏览器多线程与多进程,再到JS的事件循环
为什么js是单线程js最大的特点就是单线程,即同一个时间只能做一件事。那么为啥js不能多线程呢?多线程后效率不是更高吗?普遍性在 GUI 编程里,单一线程控制 GUI,是一个非常普遍的做法。js 最初就是用在网页上的,早期设计了 js 只能单线程运行,沿袭普遍做法,也就显得非常顺理成章了。用途作为浏览器脚本语言,js的主要用途就是与用户互动、操作DOM,如果js同时有2个线程在跑,A线程在某个DOM上添加节点,B线程删除了这个DOM节点,这时浏览器应该以哪个线程为准?这就乱套了。为了简单起见,js原创 2020-10-09 11:30:42 · 266 阅读 · 0 评论 -
你真的知道npm执行脚本的顺序吗
来自灵魂的拷问npm 可以执行多个脚本,但是你真的知道它的执行顺序吗???直接上干货吧”&“ ,指的是并发执行,不存在依赖关系”&&“,指的是继发执行,先执行完前面的再执行后面的,有依赖关系// 并行"update": "bs subBuild & bs patch & npm publish"// 继发"update": "bs subBuild && bs patch && npm publish"两者是原创 2020-09-15 17:03:16 · 670 阅读 · 0 评论 -
vue混入mixin浅析
mixin基础混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。局部混入// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mi原创 2020-09-02 18:00:41 · 406 阅读 · 0 评论 -
windows下安装nvm成功,但是node -v报错
需求描述windows下的需要支持不同的node环境,需要安装不同的node版本安装nvm下载地址:nvm官网下载地址安装:双击nvm-setup.exe进行安装注意:如果在安装nvm之前,电脑上就已经安装有node的,会询问你是否用nvm管理已经存在的node版本,选‘是’,这个弹窗可能会出现好几次,都点是就可以了。验证是否安装成功nvm -v安装指定版本的node,比如我要安装10.15.1版本的nodenvm install 10.15.1查看已经安装的node原创 2020-09-01 16:37:39 · 3769 阅读 · 2 评论 -
vscode中.vue文件的template添加注释出错问题解决(已安装vetur)
1. 现象已经安装了vetur,但是给.vue文件的template添加注释还是有问题,网上查的说是插件冲突,卸载后重新安装依然无效;还有的是在settings.js里配置一堆东西,尝试了也是无效。2. 解决方法尝试了这个办法后,终于生效了,在vscde的settings.json里添加如下代码:"files.associations": { "*.vue": "html"}喜大普奔,生效了!3. 其他功夫不负有心人,开心最重要。...原创 2020-08-24 10:30:26 · 7075 阅读 · 3 评论 -
数组去重&对象数组根据某个属性去重
function uniqueFunc(...args) { const paramsLength = arguments.length; if(paramsLength == 1) { return [...new Set(arr)]; } else { const res = new Map(); const flag = arguments[1]; return arg...原创 2019-08-05 18:04:43 · 2517 阅读 · 0 评论 -
布局神器-Flex附例子
网页布局(layout)可以说是 CSS 中的一个重点应用,原创 2019-07-30 16:44:24 · 205 阅读 · 0 评论 -
由scrollLeft想起的周边
scrollLeft、scrollTopscrollLeft : 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离- scrollLeft 可以是任意整数- 如果元素不能滚动(比如:元素没有溢出),那么scrollLeft 的值是0- 如果给scrollLeft 设置的值小于0,那么scrollLeft 的值将变为0。 如果给scrollLeft- 设置的值大于元素内容最...原创 2019-07-30 11:35:48 · 142 阅读 · 0 评论 -
ng2-file-upload动态设置url和额外参数
调用setOptions()方法,可以动态设置参数let global = this;let url = 'your request url'; this.uploader.setOptions({url: url, additionalParameter: param});//动态添加url和设置额外参数this.uploader.queue[0].upload(); // 开始上传t...原创 2019-03-04 21:18:44 · 1579 阅读 · 0 评论 -
iview表头中添加图标悬浮提示错位问题
问题描述iview表格里,renderHeader中写的tooltip错位关键参数 ( transfer : true )iview的Tooltip组件里,有一个属性transfer,表示:是否将弹层放置于 body 内,在 Tabs、带有 fixed 的 Table 列内使用时,建议添加此属性,它将不受父级样式影响,从而达到更好的效果,renderHeader中写的tooltip错位问题解...原创 2019-03-07 11:29:15 · 3936 阅读 · 0 评论 -
windows下使用Vue CLI 3初始化VUE项目报错
初始化项目D:\demo&gt;vue create hello-world报错: You are using Node v8.6.0, but this version of vue-cli requires Node &gt;=8.9.Please upgrade your Node version.更新nodewhere node //查看当前的node安装目录去node中文...原创 2018-10-30 20:36:20 · 1237 阅读 · 0 评论 -
常用的纯CSS实现的等高布局
1. margin + padding由于背景是在padding区域显示的,设置一个大数值的padding-bottom,再设置相同数值的负的margin-bottom,使背景色铺满元素区域,实现视觉上的等高效果。缺点在于,如果页面中使用锚点跳转时,将会隐藏部分文字信息;如果页面中的背景图片定位到底部,将会看不到背景图片。&lt;!DOCTYPE html&gt;&lt;html lang...原创 2018-10-24 23:20:17 · 193 阅读 · 0 评论 -
升级node版本后VUE项目启动报错
查看node版本:node -v原来的node版本是8.11.3升级后的node版本是10.13.0启动VUE项目 npm run dev报错:fs.js:129throw new ERR_INVALID_CALLBACK();^TypeError [ERR_INVALID_CALLBACK]: Callback must be a functionat maybeCa...原创 2018-10-31 15:27:33 · 6556 阅读 · 0 评论 -
绘制轨迹设置途经点,并添加信息窗口
1. 使用的工具百度地图API2. 需求当鼠标悬浮在(mouseover)起点、终点、途经点时,显示信息窗口; 鼠标离开时(mouseout),隐藏信息窗口。3. 实现原理首先根据百度api提供的现成的接口将起点、终点、途径点画出来;给这些点添加覆盖物;为这些点的覆盖物添加信息窗口;4. 实现步骤1. 基本模型:先将起点、终点、途经点画出来原创 2016-12-06 20:18:00 · 1037 阅读 · 0 评论 -
jQuery中的ready和load事件(源码解析)
1. jQuery有3种针对文档加载的方法,分别是:$(document).ready(function() { //你的代码})//document ready的简写$(function() { //你的代码})$(document).load(function() { //你的代码})那么, jQuery 中的 ready 和 load 事件哪原创 2016-12-08 09:44:55 · 655 阅读 · 0 评论 -
给热力图上的点添加事件
1. 用到的工具百度地图API (web开发 javascript ) 使用到的图片:这是测试图片,背景色是紫红色 2. 需求给热力图上的点添加点击事件 3. 遇到的问题原始的热力图上的点不能点击4. 解决方法首先绘制热力图,HTML代码如下:html>head> meta http-equiv="Content-Type" c原创 2016-11-28 10:51:42 · 8623 阅读 · 15 评论 -
javaScript去除数组中的相同元素
1. js代码2.运行结果原创 2017-02-17 19:13:20 · 1217 阅读 · 0 评论 -
动态下拉框
双击左边的选项,会将该选项移动到右边的下拉列表框中,双击右边的下拉列表框会将该选项移动到左边的下拉列表框中。原创 2017-02-20 11:18:41 · 592 阅读 · 0 评论 -
javascript 事件
1. 内联HTML属性法2. 元素属性法3. DOM 事件监听器4. 捕捉法和冒泡法5. 防止默认行为6. 神奇的IE原创 2017-02-20 15:05:48 · 121 阅读 · 0 评论 -
javascript 内建属性
ECMAScript中有两种属性:数据属性和访问器属性1. 数据属性2. 访问器属性 3. 获取Configurable值 4. 面试题原创 2017-02-20 15:17:39 · 583 阅读 · 0 评论 -
javascript 的 DOM 操作
1. 访问兄弟节点2. 访问首尾节点3. 遍历DOM4. 修改DOM节点内容5. 修改样式6. 新建和插入DOM节点7. 克隆节点(cloneNode())8. 移除节点(removeChild())9. 替换节点(replaceChild())原创 2017-02-20 15:21:36 · 536 阅读 · 0 评论 -
javascript 继承详解
一、原型链法(仿传统)事先定义三个对象:Shape、TwoDShape、Triangle基本形式如下:Child.prototype = new Parent();实例如下:function Shape() { this.name = "shape"; this.toString = function() { return this.name; }}function TwoDS原创 2017-02-20 15:31:15 · 419 阅读 · 0 评论 -
border 和 outline 实现简单的缝边效果
1. 关键知识点2. 实现效果3. 实现代码原创 2017-02-13 15:35:07 · 1797 阅读 · 0 评论 -
前端开发工程师-阿里内推一面
1. 自我介绍2. 项目介绍3. CSS1.介绍一下css盒模型盒模型基本成了面试必问的问题,有W3C的盒模型和IE浏览器下的盒模型,盒模型从外到里包括:margin、border、padding、content。 W3C盒模型的宽度 = content的宽度 IE盒模型的宽度 = border+padding+content的宽度2.css的选择符原创 2017-04-16 16:08:19 · 3577 阅读 · 0 评论 -
较为详细的一次this总结
1. 内联式绑定Dom元素的事件处理函数<script type="text/javascript"> function sayHi(){ alert("当前点击的元素是" + this.tagName); } script><input id="btnTest" type="button" value="点击我" onclick="sayHi()">打印出来原创 2017-12-27 19:40:23 · 311 阅读 · 0 评论 -
表头固定,随内容可水平拖动的超简单实现
1. 设计思路两个table实现,有三个div,最外侧一个,控制全局,一个控制表头,一个控制表身。 2. 注意事项最外侧的div,需要用overflow-x来控制最横向滚动,因为overflow-x、y在IE中存在兼容性问题,当overflow-x/overflow-y其中之一被设置成’scroll’、’auto’、’hidden’时,另一个还是’visible’,不会被设置为原创 2017-12-27 19:15:24 · 4281 阅读 · 0 评论 -
前后端联调-Nginx转发请求
这里写自luyou定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢...原创 2018-10-17 14:23:40 · 3310 阅读 · 0 评论 -
JavaScript 数组详解
1. 数组的定义Array() 是一个用来创建数组对象的构造器var arr = new Array(1,2,3);当然,我么也可以使用数组标识法var arr = [1,2,3];如果我们传递给 Array() 构造器的是一个数字,该数字就回被设为数组的长度,构造器会根据该长度创建数组,并将每个元素位置以 undefined 填充。var arr = new Array(3);a.length;原创 2016-12-10 10:26:36 · 340 阅读 · 0 评论