- 博客(23)
- 收藏
- 关注
RSS订阅原创 前端学习：前端基本介绍
初识前端：前端基本介绍最近整理了一些前端学习的内容，结合自己的前端学习过程，略微总结了一些前端学习的方法，便在此分享一下。要学习前端内容，首先我们要知道什么是前端，或者说前端工程师需要做什么。前端开发是什么？首先前端开发是由网页制作发展过来的，如果很早就接触互联网不难发现以前网页的内容基本都是静态的（以图片文字为主，没有后台数据库、不含程序和不可交互的网页称为静态网页，比较突出的特点就是改变网页中内容状态，如删除某些内容后，再刷新页面并不会保留我们的操作内容，通俗点讲就是说他的内容是写“死”的，不去
2020-08-10 11:36:21
777
原创 虚拟DOM与diff算法
VUE之虚拟DOM与diff算法我们的学习是个不断循序渐进的过程，所以在这学习应用过程之中，我们需要了解一些关于底层与原理的内容，因为自己接触vue比较多，所以这次写点关于vue的虚拟DOM与diff算法，谈些个人理解，希望能帮助理解。要想明白虚拟dom，我们首先要知道浏览器页面的渲染过程，我们都知道浏览器不能直接识别解析类似于vue、sass等文件，所以VUE项目最终运行需要我们将其打包成浏览器所能识别的html、js、css文件，下面就是浏览器页面渲染此的一般过程：1、解析html源码，然后创建一
2020-07-27 17:43:34
228
原创 js中数组常用方法总结
js中数组常用方法总结因为数组方法有很多，不同场景有不同的最优解，有几种方法平时不常用，所以去查询了相关内容，方便查阅：1、Array.map()此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组let arr = [1, 2, 3, 4, 5] let newArr = arr.map(x => x*2) //arr= [1, 2, 3, 4, 5] 原数组保持不变 //newArr = [2, 4, 6, 8, 10]
2020-07-20 16:16:30
239
原创 前端处理页面多次提交请求问题
前端处理页面多次提交请求问题在实际工作中我们常会遇到需要进行内容提交的场景，常用的表单就是其中的一种。在此类过程中我们一般会向后台发送ajax请求，其中因某些原因页面短时间内多次提交同一请求是一个常会遇到的问题。尽管我们可以通过后台做一些处理来限定提交的重复内容只有一次可以生效（例如重名验证等），但是前端页面在短时间内多次提交重复请求浪费了很多性能和流量，同时如果后台没做处理也会造成一些不可预估的错误，本文就是通过一些简单的前端处理方法来解决此问题。首先上述问题一般出现于电脑卡顿严重或网络延迟较高的时候
2020-07-20 15:57:01
3006
原创 关于数字的正则验证
数字正则验证自己在实际工作过程中，发现正则用到的地方很多，而且写的好的正则表达式可以在达到同样效果的情况下更简洁美观，性能也更佳。本人对于正则是十分推崇喜爱的，也一直在学习此的过程中，其中也有一些心得体会，借此分享给大家。正则的基础语法我就不多介绍，可以参阅菜鸟正教程，也可以看看百度正则词条来直接学习使用正则语法。在日常使用过程中，很多时候我们需要对数字进行正则，数字正则看似简单，实则里面也有很多门道。常见的，有匹配身份证号的...
2020-07-17 16:59:19
1012
原创 前端常用VUE打包相关命令（SVN、NPM相关）
常用VUE打包相关命令（SVN相关）写在前面目的常用SVN指令合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入写在前面前段时间因为一些变故和个人原因，久久没有更新博客，现在工作之余有了些许闲暇，又加上想与大家分享一些经验，故又开始不定期更
2020-07-16 17:21:49
4918
1
原创 前端表格的增改删——原生JS
前端表格的增改删css文件：*{ margin: 0; padding: 0;}.form{ margin: 0 auto; width: 1200px; height: 390px; position: relative;}.name{ position: absolute; left: 250px; top: 70px; font-size: 20px;}....
2019-06-03 15:51:24
521
原创 vue生命周期理解
VUE的生命周期关于VUE面试，最常问到的就是VUE的生命周期，也看过很多关于如何回答过这个问题的解答，自己也有所总结，就简单写写自己的看法。首先我们先来到VUE的官网看看他是如何解释的VUE官网对生命周期描述主要就是体现在这个图上这里我们看到整个的VUE生命周期——从New一个VUE开始到destroyed结束为止的整个过程。引用VUE1.0的解释图解，如下：可以看出生命周期中有8个...
2019-05-29 15:53:08
1832
原创 jQuery实现点击下拉与隐藏菜单
使用jQuery实现点击下拉与隐藏菜单具体效果图如下：点击的时候打开下拉菜单，同时关闭其他已经打开的下拉菜单，再次点击关闭下拉菜单；以下是代码部分：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <sty...
2019-05-29 10:52:21
5577
原创 原生JS写带缩略图的无限平移轮播
带缩略图的简单的轮播效果图效果图如下：下面是代码：html部分：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="c...
2019-05-28 16:05:23
1037
原创 简单的多级hover
简单的多级hover效果以下是效果图：效果十分简单就不解释了，下面是代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> ...
2019-05-28 15:41:09
356
原创 JavaScript归纳总结
JavaScript归纳总结学习JavaScript过程中学了很多东西，简短用Xming进行了归纳总结，今后也会陆续对里面的内容进行更加详细的总结，因为不支持文件传输所以用的是图片，如果想要完整版的Xmind软件可以去我的github下载。https://github.com/yinseliming/yingseliming下面是图：...
2019-03-08 15:55:16
187
原创 JS写一个简单的五星评价
JS写一个简单的五星评价在做前端网页页面的时候很多时候回有遇到星级评价的模块，用到的地方挺多所以自己就上传下方便大家和自己使用（不支持半星评价因为没有半星的图）。效果图如下：下面是我们的代码：<html> <head> <meta charset="utf-8" /> <title></title> </hea..
2019-03-07 16:19:33
1444
原创 VUE写一个简单的增改删列表
VUE做一个简单增改删表格最近在学VUE的过程中需要做一个简单的增改删表格，通过表格练习能更加直观深入了解VUE的使用方法，便于我们学习，下面是效果图：下面是代码：//css部分*{ margin: 0; padding: 0;}.form{ margin: 0 auto; width: 1200px; height: 390px; position: relative;...
2019-03-07 11:34:22
1123
原创 原生JS写AJAX请求
原生JS写AJAX请求虽然jQuery中有关于AJAX请求，而且具有强大的兼容性和功能，但在学习过程中还是要从最简单的开始，所以这里提供下网页编辑学习入门时最基本原生JS写的AJAX请求：<script type="text/javascript"> function ajax(method, url, data, fn) { let htp = null; ...
2019-03-05 13:51:47
678
原创 JQuery写一个很简单的计算器
JQuery实现计算器最近在写东西的时候遇到要用JQuery实现计算器，发现还蛮有意思的，这里就发下代码希望在思路上对大家有所帮助。下面是代码：计算器+-*/c123456789.0= <script src="js/jquery-1.11.1.min.js" type="text/jav...
2019-02-27 12:28:59
1836
原创 原生JS实现全屏滚动（无滚动条）
原生JS实现全屏滚动（无滚动条）写一种十分简单易懂的原生JS实现全屏滚动（无滚动条）动画，不多说直接写代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="tex
2019-01-09 11:21:36
4250
3
原创 生成器yield关键字作用和理解
生成器yield关键字作用和理解yield关键字的一个功能就是能有效地降低迭代的内存开销。如果使用range函数的话，那么函数的内部实现会存储每个迭代的过程，即每个中间变量有个内存空间，这样首先程序使用的内存空间就大了，而且分配内存、回收内存都会导致程序的运行时间加长。但是使用yield实现的xrange函数的话，里面所有中间变量都会只使用一个内存￥i,这样需要的时间和空间都会变小。在了解y...
2019-01-08 12:08:28
561
原创 图片太大时不会出现横向滚动条
两种方法实现图片超过分辨率但不出现横向滚动条我们在进行网页页面布局的时候经常会遇到图片大于屏幕的分辨率的问题，如果不进行处理就会出现横向滚动条，十分影响用户的体验，而如果直接将图片宽度设置为屏幕的100%时在进行页面的放大缩小时或者在不同分辨率下图片就会被拉长或者锯断，十分难看，本文就对此提出两种十分简单的解决方法。第一种简单的思路，就是在img图外层“包”一层（或者多层）标签，然后使这个容器...
2019-01-08 10:34:35
2269
原创 HbuildX（绿版）开启对less等的预编译
HbuildX开启对less的预编译在使用HbuildX十分（绿色的版本）的时候安装less，sass等插件后发现每次保存less文件后一定要从文档中应用外部命令才会使我们的CSS文件发生对应改变，十分的浪费时间，然后网上找HbuildX开启对less的预编译，发现搜到的都是Hbuilder（红色的版本）怎么开启less的预编译，而绿版的根本找不到，本文就是为了解决绿版HbuildX如何开启对l...
2019-01-08 10:25:07
1324
原创 取消事件进一步捕获或者冒泡
取消事件的捕获与冒泡在浏览器发展到第四代时开发团队遇到一个很有意思的问题：页面的哪一部分会拥有某个特定的事件？怎么理解这个问题，举个形象的例子，先在纸上画多个同心圆，然后把手指向圆心，那么问题来了，当前指的是哪个圆的圆心？具体到我们在写JS事件的时候，先在body里面写一个有范围的div，然后在JS里面写div的onclick事件，同时也写上document的onclick事件，那么当我们点击...
2018-12-28 15:36:55
417
原创 JS实现二维数组的深拷贝及插件代码
深拷贝与浅拷贝的介绍在写代码前先简短介绍下JS中浅拷贝与深拷贝的区别。JavaScript中有两种类型的对象拷贝：浅拷贝(Shallow Copy)、深拷贝(Deep Copy)：深复制和浅复制最根本的区别在于是否是真正获取了一个对象的复制实体，而不是引用。浅拷贝——只是拷贝了基本类型的数据，而引用类型数据，复制后也是会发生引用，我们把这种拷贝叫做“浅拷贝（浅复制）”，也就是说，浅复制仅仅...
2018-12-13 11:17:22
1362
原创 HTML绝对定位与相对定位
HTML绝对定位与相对定位一开始接触HTML和CSS时，不可避免地会遇到定位的问题，这时会很难分清楚绝对定位和相对定位区别，导致很多时候自己在用的时也是两者都试试看，哪个好用哪个，这是不可取的。下面讲述一下两者的区别，并以自己过来人的身份提供一种简单易记的方法。首先先在这里引入W3C官方对这两者的定义：CSS 相对定位相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现...
2018-12-07 08:47:01
889
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人