- 博客(101)
- 收藏
- 关注
RSS订阅原创 前端模板引擎
正常渲染拿到数据后渲染，三步走：格式化数据、编译模板、渲染数据如下例在该业务流程中模板是写死的，变量结构都是写死的，复用性为0，想着把模板当参数传进来,为了效率就借助模板引擎常见模板工具art-template:号称是性能最快的模板引擎地址: http://aui.github.io/art-template/handlebars:地址: https://handlebarsjs.com/渲染方法效果原理步骤:正则替换 规定标识符内容普通标签<%= %> 内容替换成变量的值<% %>
2025-02-17 15:47:56
980
原创 HTML5笔记
HTML5什么是HTML5定义万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改环境支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力目的HTML5的设计目的是为了在移动设备上支
2024-07-19 11:00:40
2136
原创 拖拽上传（预览图片）
/创建一个url的blob ，在当前会话下生效，不像base64那样在哪里都能用，如在浏览器中用，当你关掉浏览器再开浏览器用则不生效，是一种临时文件。/* 触发file类型的Input上传文件不一定要点击上传按钮，点在Input身上即可 */点击+上传图片，或直接拖拽图片到红色方框里面也可上传图片，上传后预览图片。//拿到input当前上传的文件，拿不到url，想在页面展示必须有url。//通过FileReader的result可以拿到文件的url。//生成一个临时地址blob，不可持续。
2024-07-18 14:29:38
635
原创 读取文件进度条
/如果不清除，当多次提交时，后面重新选择的提交文件，提交时有可能还是上一次选择的文件，用于防范此类bug。//清楚方法：在上传等操作回调中把file input的 类型进行一次切换 用于清空里面的files存留。//一般不放在onload里面，一般用于ajax上传表单，回调完成时再清空。//为了保证安全，建议每次上传结束要清理input文件。//文件转化为 Base64。
2024-07-18 12:36:32
318
原创 自定义video
需求播放暂停切换播放进度条反馈和控制 (拖拽 点击) 播放时间 00:00/05:30音量调控 反馈 一键静音/取消静音全屏播放 循环模式播放状态反馈 未播放 已播放 播放完毕本地存储播放时间 自动续播准备 [ { 方法:[ play(),pause()], 属性: [paused], element:[#contr-play] },{ 方法:[
2024-07-17 15:01:08
842
原创 Promise 对象
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点。（1）对象的状态不受外界影响。
2024-07-16 15:59:34
1057
原创 Symbol
ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。undefinednull、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。
2024-07-16 12:52:09
685
原创 Proxy代理
Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。
2024-07-16 12:05:08
1012
原创 前端常见功能案例实现
padding: 0;left: 0;right: 0;.bar {浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。
2024-07-09 15:32:54
377
原创 javascript高级部分笔记
javascript高级部分Function方法 与 函数式编程call语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])定义：调用一个对象的一个方法，以另一个对象替换当前对象。说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 let myName = 'goudan
2024-07-09 15:02:58
1350
原创 javascript DOM BOM 笔记
Web APIAPI的概念API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。任何开发语言都有自己的APIAPI的特征输入和输出(I/O)API的使用方法(console.log())Web API的概念浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)此处的Web API特指浏览器提供的API(一
2024-07-09 12:53:34
1134
原创 js吸顶导航
吸顶导航当我们浏览页面篇幅较大，浏览过半的时候想回到导航位置，只能通过往回滚动或通过”回到顶部”重新滚动到导航位置，这样的操作显得繁琐与不便。于是便有了吸顶式导航的交互方式，吸顶条导航最大的好处是将最常用或者设计者最愿意让用户看到的内容、功能经常保持在用户面前，为用户提供了极大的便利与交互体验。吸顶导航栏的初始位置一般是靠近在页面的顶部位置，但是又存在一定距离，通常这块区域放置最为醒目或者重要元素的地方，如Banner图。当页面向下滚动时超过了吸顶导航的初始位置时，需要把吸顶导航栏固定在窗口顶部
2024-07-09 12:44:42
639
原创 JS之防抖和节流
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
2024-07-09 12:16:47
1085
原创 js碰撞检测
碰撞检测碰撞检测（边界检测）在前端游戏，以及涉及拖拽交互的场景应用十分广泛。碰撞，顾名思义，就是两个物体碰撞在了一起，眼睛是可以直观的观察到碰撞的发生。但对于前端实现，如何让 JavaScript 代码理解两个独立的“物体”（DOM）碰撞在一起呢。这就涉及到碰撞检测（或者叫边界检测）的问题了。两个矩形块的碰撞：判断任意两个（水平）矩形的任意一边是否有间距，从而得之两个矩形块有没有发生碰撞。具体实现方式，可以选定一个矩形为参照物，计算另一矩形的与自己相近的边是否发生重合现象。若四边均未发生重合，则
2024-07-09 11:56:29
726
原创 js中offset、scroll、client、getBoundingClientRect、event坐标位置及视窗系列
返回整个页面的滚动的位置，获取滚动的高度pageYOffset/pageXOffset 与 scrollY/scrollX 返回的值一致，前者是后者的别名，建议使用前者，不支持 IE8。同样可以使用 offsetWidth/offsetHeight 来获取元素包括滚动条和边框的尺寸，这个方法返回元素本身的宽高 + padding + border + 滚动条。返回的是计算后的 CSS 样式的 border-left-width/border-top-width 的值，就是边框的宽度。
2024-07-09 11:34:59
1121
原创 旋转木马案例
旋转木马如果接口需要的数据格式和原始数据提供的格式有差异不要去改接口方法 也不要改原始数据做一层中间件(数据处理函数/方法)<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
2024-07-08 16:16:30
830
原创 轮播图案例
丐版轮播图<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 基础轮播图 banner 移入移出</title> <style> * { m
2024-07-08 16:05:50
592
原创 选项卡切换（排他法、轮转法、轮转法之事件委托）
tabbar content 两部分的内容一一对应，我们点击某一个tab的时候，该tab的类名设置为on，其他的tab要清除on类名，对应的content的类名要设置为 active ，其他的content清除active类名。// aTab[i].onclick = function () { //循环绑定事件耗资源，优化事件委托。//方法三：轮转法之事件委托优化 通过监听父元素的点击事件，找到点击的子元素下标。//触发事件的DOM目标。
2024-07-08 16:04:40
723
原创 冒泡排序、插入排序、选择排序
插入排序的代码实现虽然没有冒泡排序和选择排序那么简单粗暴，但它的原理应该是最容易理解的了，因为只要打过扑克牌的人都应该能够秒懂。插入排序是一种最简单直观的排序算法，它的工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。冒泡排序是一种比较简单的排序算法，这种算法是让越小或者越大的元素经由交换慢慢“浮”到数列的顶端，就像水里面的泡泡向上浮动一样，所以叫“冒泡排序”。选择排序是一种简单直观的排序算法，无论什么数据进去都是 O(n²) 的时间复杂度。1. 比较相邻的元素。
2024-07-08 14:04:40
288
原创 JavaScript基础笔记
前言在JavaScript诞生的前几年，有人说:JavaScript是一门四不像的语言;JavaScript是一门没有规范的语言;JavaScript是一门兼容糟糕的语言;JavaScript是一门不精准的语言;JavaScript是一个半成品语言;JavaScript是一门糟糕的语言;JavaScript只是一个玩具胶水语言;这些声音从JavaScript面世之初就一直伴随着她，声音的主人不乏已掌握多门语言的coding老兵，每一条负面都事实支撑。就连JavaScript之父也曾经说过:"与其说我
2024-07-08 12:46:45
1250
原创 BFC详解
FC的全称是: Formatting Contexts,是 W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
2024-07-08 11:13:31
1076
原创 原生CSS变量
声明的变量是有作用域的，比如是在html中声明的变量，那么该变量在html中的任何地方都可以使用这个变量，如果该变量在p标签中声明的，那么只能在p标签下使用这个变量。var() 函数有第二个参数，表示变量的默认值，如果该变量不存在(第一个参数)，那么就使用这个默认值。变量声明的时候，变量名之前加上两根连词线（–）即可。css变量遵从 css优先级的原则 变量值会被覆盖。css中我们可以统一设置。
2024-07-08 11:07:13
537
原创 CSS兼容处理
建议： 现在互联网发展很快， 连微软公司都抛弃了ie浏览器（主要指window7系统的浏览器），转而支持 edge（window10以上系统）这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。不同的用户会通过不同的浏览器访问我们的网站, 我们需要针对绝大部分主流用户浏览器进行兼容处理 . 兼容处理主要包括两种方案(优雅降级, 渐进增强) 和两种 技巧(前缀兼容与HACK兼容)
2024-07-08 10:58:26
980
1原创 绝对定位实现横线增长方向小技巧
使用绝对定位脱标后，用left和top设置横线增长方向。如果是left: 0;从左向右过渡长，如果是right: 0;
2024-07-07 01:24:24
188
原创 行内元素、块级元素居中
盒子宽高已知， position: absolute;left: 50%;margin-left:-自身一半宽度;盒子宽高已知， position: absolute;margin-top:-自身一半高度;这种方法不推荐，因为当盒子宽高不是偶数的时候，一般会出现小数点，推荐使用以下方式，比较省事，让浏览器自己去计算。
2024-07-07 01:13:44
296
原创 制作精灵图
图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。
2024-07-06 00:58:32
360
原创 伪元素content追加文字使用小技巧
当用js渲染的一些值，可以加到自定义属性中，然后用content将自定义属性的值渲染出来。E::before和E::after本身的作用是追加字，直接在文字后面追加链接。
2024-07-06 00:54:03
347
原创 隐藏的h1写法(以图换字)
所谓以图换字，即直接使用一张图片或背景，没有文字。我们知道，蜘蛛爬取时是不会获取图片上的内容的，但是如果是添加上文字，即便使用一些字体，也可能达不到图片的显示效果。如何将用户体验与SEO优化相兼容呢，我们可以使用text-indent属性来操作。
2024-07-06 00:39:05
215
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人