- 博客(35)
- 资源 (1)
- 收藏
- 关注
RSS订阅
转载 js实现图片懒加载
引用链接背景：页面图片多，加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个1M大小的图片，并发情况下，达到1000并发，即同时有1000个人访问，就会产生1个G的带宽。为了解决以上问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。1.懒加载原理一张图片就是一个<img>标签，浏览器是否发起请求图片是根据<img>的src属性，所以实现懒加载的关键就是：在图片没有进入可视区域
2020-08-24 23:43:20
156
原创 vue页面滚动条分页加载数据
mounted() { //监听页面滚动事件 window.addEventListener("scroll", this.handleScroll); } //methods里面的方法handleScroll() { //窗口滚要做的操作写这里 let sh = document.documentElement.scrollHeight || document.body.scrollHeight; // 滚动条高度 let st = document.d
2020-05-19 12:14:53
2455
原创 vue+js+css实现可左右移动横向时间轴
vue+js+css实现可滑动横向时间轴网上查了一圈都没有合适的组件实现横向时间轴，自己写了一个简单的。实现功能如下图所示：鼠标移到点上，颜色改变，显示tooltip信息，鼠标移开消失。当数据少的时候可以全排列，根据自己的屏幕自由修改当数据多的时候，可左右点击滑动查看，中间展示固定个数代码自取：https://github.com/zcl1111/timeLineCase...
2020-01-09 11:07:13
6732
3
原创 js对url进行编码和解码（三种方式区别）以及获取url参数函数
一、js对url进行编码和解码方法（三种方式区别）只有 0-9[a-Z] $ - _ . + ! * ’ ( ) , 以及某些保留字，才能不经过编码直接用于 URL。1、escape 和 unescape原理：对除ASCII字母、数字、标点符号 @ * _ + - . / 以外的其他字符进行编码。编码：`escape('http://www.baidu.com?name=zhang@xiao@jie&order=1')`结果：`"http%3A//www.baidu.c
2020-10-14 16:57:56
1785
原创 设计模式（理论四）：抽象类与接口
抽象类和接口是面向对象四大特性，以及很多设计模式、设计思想、设计原则编程实现的基础。抽象类与接口的区别：抽象类的语法特性：Java中通过abstract关键字定义抽象类不允许被实例化，只能被继承。也就是说，你不能 new 一个抽象类的对象出来。抽象类可以包含属性和方法。方法既可以包含代码实现，也可以不包含代码实现。不包含代码实现的方法叫作抽象方法。子类继承抽象类，必须实现抽象类中的所有抽象方法。接口的语法特性：Java中通过interface关键字定义接口不能包含属性（也就是成员变量）。
2020-09-21 11:06:05
379
原创 设计模式（理论三）：面向对象与面向过程
面向对象编程与面向过程编程的区别：面向对象：面向对象编程是一种编程范式或编程风格。它以类或对象作为组织代码的基本单元，并将封装、抽象、继承、多态四个特性，作为代码设计和实现的基石 。面向对象编程语言是支持类或对象的语法机制，并有现成的语法机制，能方便地实现面向对象编程四大特性（封装、抽象、继承、多态）的编程语言。面向过程：面向过程编程也是一种编程范式或编程风格。它以过程（可以理解为方法、函数、操作）作为组织代码的基本单元，以数据（可以理解为成员变量、属性）与方法相分离为最主要的特点。面向过程
2020-09-20 12:02:34
506
原创 CSS技巧-水平垂直居中
最基本的两个嵌套块级元素，父元素parent和子元素child<div class="parent"> <div class="child"></div></div>定位实现1.1 子元素设置 绝对定位+负margin.parent{ position: relative;}.chile{ position: absolute; top:50%; left:50%; margin-left:-50px; /* 子元素宽度
2020-09-16 16:20:07
82
原创 设计模式（理论二）：四大特性
面向对象编程的四大特性：封装、抽象、继承、多态。分别可以解决哪些编程问题？1. 关于封装特性封装也叫作信息隐藏或者数据访问保护。类通过暴露有限的访问接口，授权外部仅能通过类提供的方式来访问内部信息或者数据。它需要编程语言提供权限访问控制语法来支持，例如 Java 中的 private、protected、public 关键字。封装特性存在的意义，一方面是保护数据不被随意修改，提高代码的可维护性；另一方面是仅暴露有限的必要接口，提高类的易用性。2. 关于抽象特性封装主要讲如何隐藏信息、保护数据
2020-09-16 15:28:38
184
原创 设计模式（理论一）：面向对象
当讨论面向对象的时候，我们到底在讨论什么？1、什么是面向对象编程？面向对象编程是一种编程范式或编程风格，以类或对象作为组织代码的基本单元，并将封装、抽象、继承、多态四个特性，作为代码设计和实现的基石。2. 什么是面向对象编程语言？面向对象编程语言是支持类或对象的语法机制，并有现成的语法机制，能方便地实现面向对象编程四大特性（封装、抽象、继承、多态）的编程语言。3. 如何判定一个编程语言是否是面向对象编程语言？如果按照严格的的定义，需要有现成的语法支持类、对象、四大特性才能叫作面向对象编
2020-09-16 15:10:10
108
原创 消息推送技术
参考：https://88250.b3log.org/web-message-pushhttps://www.cnblogs.com/gitnull/p/10728653.html一、web层消息推送1、基于HTTP请求轮询，位于应用层的单工通讯。根据轮询时间、请求处理方式分为简单轮询、长轮询、HTTP流。1.1、简单轮询：原理：客户端定时发起请求，服务端处理返回响应。优点：实现简单，可调整轮询时间间隔；缺点：服务端需要处理大量请求，资源消耗。1.2、 长轮询：原理：客户端发起请求
2020-09-15 17:01:19
591
原创 前端性能优化总结
参考https://zhuanlan.zhihu.com/p/65065472window.performance对象可以查看加载和解析过程中的关键时间点。1、重定向优化。重定向的类型分三种，301（永久重定向），302（临时重定向），304（Not Modified）。304是用来优化缓存，非常有用，而前两种应该尽可能的避免，凡是遇到需要重定向跳转代码的代码，可以把重定向之后的地址直接写到前端的html或JS中，可以减少客户端与服务端的通信过程，节省重定向耗时。2、DNS优化一般来说，在前端
2020-09-14 13:28:50
91
原创 前端数据埋点
为了统计到所需要的指标，应用中的所有页面、事件都被唯一标记，用户的信息、设备的信息，时间参数以及符合业务需要的参数具体内容被附加上报，就是埋点。统计指标：1、页面统计，随页面访问动作发生时进行上报；2、操作行为统计，在页面中操作时进行上报；如何埋点上报数据：1、通过Ajax发送数据。2、通过图片发送数据：在img请求地址上附带上报数据。优点：img请求避免跨域；利用空白gif或者1x1px的img对网页内容几乎没有影响，请求可以用在浏览、点击、热点、心跳、ID颁布等。图片请求不占用Aj
2020-09-14 11:03:40
329
原创 多页面应用和单页面应用的区别和优点
单页面应用（SPA），就是只有一个主页面，浏览器一开始加载所有必须的html.js，css文件，所有页面内容都包含在主页面中，通过前端路由动态更新局部资源，不需要向后端请求。多页面应用（MPA），多页面跳转刷新所有资源，每个公共资源(js、css等)需选择性重新加载，常用于 app 或 客户端等。单页面优点：用户体验好，内容改变只更新局部页面；前后端分离。单页面缺点：不利于SEO（搜索引擎优化）因为爬虫程序不运行js语句；导航不可用，可以自行实现；初次加载慢，页面复杂。...
2020-09-14 10:55:20
651
原创 js类型转换总结
参考https://www.jb51.net/article/99702.htm类型转换在js内部会有一个ToPrimitive操作，其会调用toString()方法和valueOf()方法。一、强制类型转换：Boolean()空字符串、数字 0、undefined 或 null，转换为 falsevar b1 = Boolean(""); //false - 空字符串var b2 = Boolean("hello"); //true - 非空字符串var b1 = Boolean(50);
2020-09-06 18:57:11
128
原创 二叉树查找所有路径的和等于目标值，包括根节点到叶节点路径和其中满足条件的子节点路径
javascript实现，思路见代码详解：// 节点定义function TreeNode(val) { this.val = val; this.left = this.right = null;}// 求根节点到叶节点路径，值的和为target的路径var pathSumForWhole = function(root, sum) { // 对于每个节点都要看选不选 然后再根据结果去回溯 let result = [] let path = []
2020-09-05 11:20:38
446
原创 路由懒加载过程
路由懒加载是由vue的异步组件和webpack的代码分割功能实现的。vue异步组件：Vue.component('async-webpack-example', function (resolve) { // 这个特殊的 `require` 语法将会告诉 webpack // 自动将你的构建代码切割成多个包，这些包 // 会通过 Ajax 请求加载 require(['./my-async-component'], resolve) // resolve 回调，这个回调函数会在你从服
2020-08-31 14:50:06
118
原创 webpack学习笔记
webpack是一个模块化管理工具和打包工具，可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。可以将按需加载的模块进行代码分隔，等到实际需要的时间再异步加载。概念：入口（entry）：从入口模块开始构建其内部模块依赖图，输出到bundles文件。输出（output）：在哪个路径下输出创建的bundles。默认为./dist。loader：将所有类型的文件转换为webpack能够处理的有效模块。module.rules中必须包含test和use属性。loader 将从模块路径（通
2020-08-31 08:03:28
53
原创 Vue-Router的学习总结
Vue Router是vue的路由管理器。主要功能：嵌套路由/视图表；模块化的、基于组件的路由配置；路由参数、查询、通配符等；一：如何使用引入Vue Router，将组件（components）映射到路由（route），并告诉Vue Router在哪里渲染组件。通过<router-link to="/foo">Go to Foo</router-link>进行导航链接通过<router-view></router-view>渲染路由匹配到的组件//
2020-08-27 13:36:19
265
原创 网络攻击与防护
XSS攻击（跨站脚本攻击）：恶意用户将代码植入，提供给其他用户使用的页面，如html代码和客户端脚本。过于信任客户端提交的数据。防护：设置httpOnly，禁止用ducument.cookie操作；输入检查：在用户输入的时候进行格式检查；对输出转义。过滤和移除特殊的html标签<script><iframe>,过滤javascript事件标签。csrf攻击（跨站点请求伪造）：欺骗用户的浏览器，发送http请求给目标站点。伪装受信任用户，发送恶意请i去（窃取cooki
2020-08-26 18:55:12
331
原创 前端跨域问题总结
由于浏览器的同源策略（相同协议、域名、端口），导致跨域无法接口请求和DOM查询。解决跨域方案：一、JSONP原理：利用含有src属性标签：<script>、<img>、<ifram>，这种获取外部资源没有跨域限制，通过url回调来实现跨域。ajax与jsonp的区别：ajax是通过XMLHttpRequest获取非本页内容，而jsonp是动态添加script标签调用服务器提供的js脚本。jsonp的缺点：只支持GET请求；无法保证跨域的安全；难以确定是否请求成功
2020-08-26 18:31:48
145
原创 CDN的作用和理解
工作中遇到的问题及学习到的知识点目前仍需要学习的内容（理解思想）：1. Vue.js+elements的数据交互部分 2. ajax的语法3. 项目开发流程和规范龙哥分享–消化：CDN：CDN的全称是Content Delivery Network，即内容分发网络（理解: 代理缓存服务器）。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更...
2020-08-10 21:48:08
201
原创 正则校验的应用--版本号校验，数字千分位转换
1、校验输入版本号的格式（1-2位数字、1-2个小数点）：11.21.31或11.22或1.22或1.2.31const reg = /^\d{1,3}.\d{1,3}(.\d{1,3})?$/;if ((this.target_version != "") & !reg.test(this.target_version)) { return "请输入正确的实验上线版本，支持的版本号格式为“数字.数字”、“数字.数字.数字”";}2、将数字转换为千分位格式：可以直接用toLocal
2020-05-19 14:55:29
730
原创 css+js实现静态和动态条形/环形进度条展示
css+js实现静态和动态进度条展示css+js实现静态和动态进度条展示css+js实现静态和动态进度条展示css+js实现静态和动态进度条展示的思路见代码：<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&...
2020-03-28 22:10:26
683
原创 JavaScript-求一个数组中所有数的最大公约数
JavaScript-求一个数组中所有数的最大公约数,如果为1，返回false，否则返回truelet arr = [2,2,3,4,5,5,6] // 定义数组const gcd = (x, y) => { return x == 0?y:gcd(y%x, y); //返回两数之间最大公约数}let temp = [...new Set(arr)]； // 对数组去重，减少...
2019-12-10 22:41:31
1817
1
原创 前端自适应布局的应用xs\sm\md\lg\xl
当你想要内容大小随着屏幕大小自动适应的时候就可以使用bootstrap，在element-UI中同样适用，也就是在pc端以及不同手机（显示屏大小不同）端内容也能够正常显示的时候。一行最多占十二个标签，不管是大屏还是超小屏的时候。col-lg一般用于大屏设备，(min-width:1200px);col-md一般用于中屏设备，(min-width：992px);col-sm一般用于小屏设...
2019-08-05 17:46:07
9424
1
原创 编写URL规则
编写URL规则在每个App中设置独立的静态资源和模板文件，并添加一个空白的 urls.py，将属于App的URL都写入该文件夹，而项目根目录的urls.py是将每个App的urls.py统一管理。根目录的uels.py编写如下：from django.contrib import admin # 导入Admin功能模块from django.urls import path, incl...
2019-06-12 18:59:16
2993
原创 网站运行原理及开发流程
（一）网站常用术语客户端：在计算机上运行并连接到互联网的应用程序，简称浏览器，如Chrome、Firefox、IE。用户通过操作客户端实现网站和用户之间的数据交互。服务器：能连接到互联网且具有IP地址的计算机，服务器主要接收和处理用户的请求信息。当用户在客户端操作网页的时候，实质是向网站发送一个HTTP请求，网站的服务器接收到请求后会执行相应的处理，最后将处理结果返回到客户端并生成相应的网页信...
2019-06-10 14:32:21
2808
原创 Django入门-安装及配置
python、Django、pycharm安装1. python安装进入官网下载python版本，https://www.python.org/downloads/下载完成后双击.exe文件进行安装，可以自定义安装，也可以默认安装，我选择的是自定义安装，注意：我这里是选择自动生成环境变量，所以我把Add Python3.6 to Path勾选上了。之后默认安装Next，选择自定义安装路径，...
2019-06-03 09:45:12
188
转载 Visual Studio Code 常用快捷键
vscode: Visual Studio Code 常用快捷键目录[隐藏]主命令框常用快捷键编辑器与窗口管理代码编辑格式调整光标相关重构代码查找替换显示相关其他修改默认快捷键更多参考主命令框F1 或 Ctrl+Shift+P : 打开命令面板。在打开的输入框内，可以输入任何命令，例如：按一下 Backspace 会进入到 Ctrl+P 模式在 Ctrl+P 下...
2019-05-28 11:18:13
179
原创 VScode注释快捷键
VS code注释快捷键注释：先CTRL+K，然后CTRL+C取消注释：先CTRL+K，然后CTRL+U@TOC新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计 ，将会带来全新的写作体验；在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进...
2019-05-28 11:00:49
239
转载 常见的几种最优化方法（梯度下降法、牛顿法、拟牛顿法、共轭梯度法等）
常见的几种最优化方法（梯度下降法、牛顿法、拟牛顿法、共轭梯度法等）我们每个人都会在我们的生活或者工作中遇到各种各样的最优化问题，比如每个企业和个人都要考虑的一个问题“在一定成本下，如何使利润最大化”等。最优化方法是一种数学方法，它是研究在给定约束之下如何寻求某些因素(的量)，以使某一(或某些)指标达到最优的一些学科的总称。随着学习的深入，博主越来越发现最优化方法的重要性，学习和工作中遇到的大多问...
2018-09-22 21:01:59
1035
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人