前端学习
关注
分享
扫一扫
文章平均质量分 54
前端学习
小丁冲鸭！
你若盛开，鲜花自来。
展开
-
在nodejs项目中引入babel，支持使用import和export
前言由于nodejs环境采用的是CommonJS的模块化规范，使用require引入模块，module.exports导出模块，但使用有点不习惯，所以引入babel转义支持，通过babel进行编译，支持impirt和export以及一些es6、es7的新语法。一、安装npm --save-dev install babel-cli二、创建.babelrc文件在根目录下创建.babelrc文件{ "presets": [ "es2015", ".原创 2022-03-21 16:03:21 · 2513 阅读 · 0 评论 -
前端码农babel入门学习
一、babel是什么Babel官网上是这样说的：Babel 是一个通用的多用途 JavaScript 编译器。通过 Babel 你可以使用（并创建）下一代的 JavaScript，以及下一代的 JavaScript 工具。作为一种语言，JavaScript 在不断发展，新的标准／提案和新的特性层出不穷。 在得到广泛普及之前，Babel 能够让你提前（甚至数年）使用它们。Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。 这一过程叫做“源码到源码”编译，原创 2021-04-08 15:49:52 · 1088 阅读 · 0 评论 -
HTML5中的data-*属性
HTML5中的data属性原创 2021-04-06 16:58:44 · 6919 阅读 · 6 评论 -
前端路由简介及简单实现
前言：转载 2021-02-18 16:44:21 · 214 阅读 · 0 评论 -
点击button会自动刷新页面??
为什么点击button会自动刷新页面原创 2021-01-06 15:56:55 · 2825 阅读 · 0 评论 -
用原生html与js写一个dialog
实现效果：HTML代码：<body> <button onclick="showDialog()">点击展示dialog</button> <dialog class="dialog"> <div class="dialog-header"> 这是标题 <div class="close-btn" onclick="closeDialog()">原创 2021-01-06 14:54:35 · 2053 阅读 · 0 评论 -
git中远程新建的分支在本地看不到&修改代码后需要提交到其他分支
问题一：远程的仓库新建了分支，而本地看不到这分支怎么办？解决办法：使用如下指令即可更新远程分支到本地git remote update origin --prune 问题二：修改代码后需要提交到其他分支解决办法：在当前分支git stash暂存自己的修改，然后git checkout dev(要切换的分支名)，切换分支，在git stash pop 弹出自己的暂存的代码，就可以愉快的继续提交啦！不过在git stash pop 之前最后git pull一下，防止出现冲突哦原创 2020-05-25 18:59:34 · 4333 阅读 · 0 评论 -
浏览器缓存策略之强缓存与协商缓存
前言：web中有些场景下很多内容是不需要更改的，如果每次请求都向服务器请求那些一段时间内不会变动的内容数据，会造成不必要的带宽浪费。有时候网络较差时，请求这些内容就需要花费很长时间来打开页面。因此通过浏览器的缓存机制，协同服务器让浏览器缓存那些不需要频繁变动的资源就可以有效地降低流量消耗和响应时间。一、什么是http缓存http缓存指的是：当客户端向服务器请求资源时，会先查...原创 2020-04-11 16:45:25 · 7797 阅读 · 1 评论 -
Dom的javascript原生操作总结
1、创建节点document.createElement(标签名)// 创建了一个p标签的新节点let new = document.createElement('p');2、插入节点在parent内的最后插入节点，若我们插入的js节点已经存在于当前的dom树，则这个节点首先会从原先的位置删除，再插入到新的位置// 将child插入到parent节点内的最后一个let ...原创 2020-01-16 16:29:47 · 768 阅读 · 0 评论 -
text-overflow文本省略部分内容
在开发中有时候会遇到文本展示时，内容太多不能全部展示而需要省略的情况，下面是一行和多行的省略方法（其中一种）。一行文本.content { overflow: hidden; text-overflow: ellipsis; /*以省略号的形式省略内容*/ white-space:nowrap; /*不换行*/}实现效果：多行文本 (此方法只适用于web...原创 2020-01-13 11:25:36 · 883 阅读 · 0 评论 -
Ajax的js原生实现
一、Ajax简介Ajax全称是，Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，是现有技术集合成的一个方法。当使用结合了这些技术的AJAX模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。Ajax的工作原理相当于在用户和服务器之间加了—个中间层(...原创 2019-12-16 11:28:32 · 771 阅读 · 0 评论 -
.*和.*?的区别
.*是贪婪模式，.*?是懒惰模式，称非贪婪模式。话不多说，上代码：一、.*let a = 'aababaa';let re = /a.*b/;console.log(a.match(re)); //[ 'aabab', index: 0, input: 'aababaa', groups: undefined ]二、.*?let a = 'aababaa';let ...原创 2019-12-13 18:36:57 · 2529 阅读 · 0 评论 -
jQuery的链式调用
一、什么是链式？$('div').click(function () { $(this).find(".b").addClass("css");})上面代码实现的是在点击div后，找到div内的类名为class的dom节点，给他们添加名为css的class。二、jQuery怎么实现的链式？上源码：jQuery.fn.extend( { addClass: f...原创 2019-12-13 11:33:31 · 1549 阅读 · 0 评论 -
MVC与MVVM的理解
MVC,MVP,MVVM是三种常见的前端架构模式，通过分离关注点来改进代码组织方式。MVC模式是MVP,MVVM模式的基础，这两种模式更像是MVC模式的优化改良版,他们三个的MV即Model，view都是相同的，不同的是MV之间的桥梁连接部分。本文是对https://www.kancloud.cn/lixianshengdezhanghao/interview/904696的一个总结。...原创 2019-12-10 11:29:06 · 917 阅读 · 0 评论 -
setTimeout前端面试题
昨天去了某真香互联网公司面试，面试官写了一段setTimeout的代码（见下文），问我打印出来什么，其实特别简单，是基础知识，我......脑袋里排山倒海般，各种想法在脑袋里打架，就是不知道正确答案，所以今天自己码了一下。题目 for (var i = 0; i < 5; i++) { setTimeout(function() { console.lo...原创 2019-10-26 13:58:28 · 756 阅读 · 0 评论 -
HTML实现自动刷新
当做网页时，我们经常会遇到这样的情况：想让自己做的网页自动不停的刷新，或者过一段时间自动跳转到另外一个自己设定的页面，下面是三种超级简单、方便的刷新方法。一、在头部<head>中添加如下代码实现页面自动刷新<!--其中10指每隔10秒刷新一次页面--><meta http-equiv="refresh" content="10">二、在头部&...原创 2019-10-12 16:13:21 · 1859 阅读 · 0 评论 -
H5中的LocalStorage和sessionStorage
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。一、Web StorageWeb Storage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的Web Storage存储机制。本地数据库是HTML5中新增的一个功能，使用它可以在客户端本地...原创 2019-09-12 10:08:17 · 498 阅读 · 0 评论 -
关于jQuery获取不到动态添加的元素对象的问题
一、问题描述功能：点击添加按钮，动态生成一条规格及参数的输入框，点击每一条后边的X即可删除该条数据。问题：在添加多条规格、参数数据后，发现不能使用$('.close').click()获取动态添加的元素，只能获取到在原html中写死的元素。<!-- 部分html--><div class="ad"> <div class="weui-cell-...原创 2019-09-17 10:30:13 · 3212 阅读 · 0 评论 -
需要了解的常见的HTTP状态码
状态码当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。HTTP状态码分类HTTP状态码分为以下5种类别：分类 分类描述 1** 信息，服务器收到请求，需要请求者继续执行操作 2** 成功，操作被成功接收并...原创 2019-09-23 09:24:21 · 498 阅读 · 0 评论 -
Flex布局之学习笔记（一）
一、什么是Flex布局？Flex布局（弹性盒子）是 CSS3 的一种新的布局模式。Flexible Box，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。二、 使用任意容器.box { display:flex;}行内元素....原创 2019-09-25 15:52:28 · 437 阅读 · 0 评论 -
Flex布局之学习笔记（二）
实现效果实现方法整体布局由header、footer、content三部分组成，由绝对定位实现（position:absolute），header和footer部分设置高，中间部分自适应高度。其中content又分成left、right、middle三部分，由Flex布局实现，左右两边设置宽度，中间内容自适应宽度。代码HTML部分<div class="con...原创 2019-09-26 09:39:04 · 828 阅读 · 0 评论 -
Flex布局之学习（三）
此篇文章是上一篇文章Flex布局之学习（二）的进一步完善，加入了每一块中的内容，并实现内容水平垂直居中。实现效果实现方法在Header和Footer中比较简单，只需要设置text-align: center; <!--水平居中-->line-height: 68px; <!--垂直居中-->在content中则不能用此方法，因为其高度是不...原创 2019-09-26 14:12:57 · 358 阅读 · 0 评论 -
轮播图的实现
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...原创 2019-09-11 18:04:43 · 385 阅读 · 0 评论