web前端
关注
分享
扫一扫
文章平均质量分 89
Fighting_No1
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Typescript类型声明
/ 3提高代码可读性：通过明确的类型定义，开发者可以更容易地理解代码的意图和数据结构。增强代码健壮性：类型系统可以在编译阶段捕获潜在的错误，减少运行时错误的发生。支持复杂的数据结构：高级类型允许开发者以更灵活、更精确的方式描述复杂的数据结构。原创 2025-06-05 10:56:02 · 1075 阅读 · 0 评论 -
# JS this关键字笔记
面向对象语言中 this 关键字 表示当前对象的一个引用。但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变：如果单独使用，this 表示全局对象。在严格模式下也是表示全局对象。在web浏览器中全局对象是浏览器窗口Window对象。在函数中，this表示全局对象，但在严格模式下， this 是未定义的(undefined)。在对象方法中，this 表示该方法所属的对象。在事件中，this 表示接收事件的元素。原创 2024-12-28 08:22:13 · 786 阅读 · 0 评论 -
JS数据类型笔记
因此，instanceof 在查找的过程中会遍历左边变量的原型链，直到找到右边变量的 prototype，如果查找失败，则会返回 false，告诉我们左边变量并非是右边变量的实例。在JavaScript中，函数是一个极容易引起误解或引发歧义的数据类型，它可以是独立的函数类型，又可以作为对象的方法，也可以被称为类或构造器，还可以作为函数对象而存在等。主要用于对象属性的标识符，避免属性名冲突（ES5的对象属性名都是字符串，容易造成属性名的冲突）。Symbol 可以确保属性名的唯一性，避免属性名冲突的问题。原创 2024-12-24 21:35:26 · 629 阅读 · 0 评论 -
CSS3全局属性关键字笔记
在CSS中，initial、inherit、unset、revert、revert-layer是用于设置属性值的关键字，可以实现重置样式属性到默认状态，或在自定义样式和浏览器默认样式之间切换。原创 2024-12-23 21:11:45 · 456 阅读 · 0 评论 -
CSS3弹性盒子笔记
弹性盒子（Flex Box）由弹性容器（Flex container）和弹性子元素（Flex item）组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。原创 2024-12-21 17:05:34 · 643 阅读 · 0 评论 -
CSS3动画笔记
最直接的理解是，将以一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意），最后形成的曲线就是动画的速度曲线。steps(n)函数中的n，并不是keyframe的个数，而是keyframe个数减1，keyframe相当于状态点，n相当于中间态的个数。阶梯函数不像其他定时函数那样，平滑的过渡，而是以帧的方式过渡，即实现关键帧之间的跳跃。规定动画是否正在运行或暂停。规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。原创 2024-12-22 22:25:01 · 1020 阅读 · 0 评论 -
CSS3选择器笔记
伪类选择器用来选择DOM元素在特定状态下的样式.这些特定状态并不是由文档结构决定的，而是由用户行为(如点击、悬停)或元素的状态(如被访问、被禁用)来定义的。伪元素由于代表了元素内部的特定部分或生成的新内容，一般不能在同一选择器中重复出现,一个元素在同一时刻只能有一个::before或::after伪元素生效，即。伪类选择器作用于实际存在的元素，不直接改变元素的结构，而是影响元素在特定条件下的表现样式。大幅度缩减了选择器列表的字符数，简化了选择器列表的复杂度，降低了书写选择器列表出错的概率。原创 2024-12-23 20:53:32 · 657 阅读 · 0 评论 -
现代前端技术解析读书笔记
思维导图链接：http://v3.processon.com/view/link/5f7ec592762131119546c899取材自《现代前端技术解析》本文只是个人读书笔记，更多详细内容请查看原书。前端技术解析Web前端技术基础 用户界面包括浏览器可见的地址输入框、浏览器前进返回按钮、打开书签、打开历史记录等用户可操作的功能选项。 浏览器引擎可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分间相互通信的核心。 浏览器渲..原创 2020-10-08 16:14:26 · 583 阅读 · 0 评论 -
高性能网站建设指南读书笔记
思维导图链接：http://v3.processon.com/view/link/5f7ec46b762131119546c87d取材自《高性能网站建设指南》及《高性能网站建设进阶指南》》本文只是个人读书笔记，更多详细内容请查看原书。高性能网站建设指南1. 减少HTTP请求 CSS Sprites：干净的标签，很少的图片和很短的响应时间 Inline Images：data:[<mediatype>][;base64],<data> 由于data：U.原创 2020-10-08 15:53:20 · 509 阅读 · 0 评论 -
前端技能图谱笔记
思维导图链接：http://v3.processon.com/view/link/5c5c2794e4b056ae2a04a78e前端体系前端架构项 开发规范 目录规范、编码规范、按内容命名规范 开发模型 模块化方案，优化在模型中实现 开发体系 构建工具和组件化设计 项目部署 开发与部署打通 前端统计 性能统计、访问统计、用户行为统计、错误统计、安全监控 安全测试 安全意识和自动化高效开发测试等 部署流.原创 2020-10-08 15:48:25 · 654 阅读 · 1 评论 -
css实现椭圆、半椭圆
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css实现椭圆、半椭圆</title> <style> .ellipse { width: 250px; height: 150px; margin: 50px;原创 2020-10-08 13:37:38 · 3458 阅读 · 0 评论 -
HMTL5离线存储
HMTL5离线存储转载自有趣的HTML5：离线存储随着Web App的发展，越来越多的移动端App使用HTML5的方式来开发，除了一些HybridApp以外，其他一部分Web App还是通过浏览器来访问的，通过浏览器访问就需要联网发送请求，这样就使得用户在离线的状态下无法使用App，同时Web App中一部分资源并不是经常改变，并不需要每次都向服务器发出请求，出于这些原因，HTML5提出的一个新的特性：离线存储。通过离线存储，我们可以通过把需要离线存储在本地的文件列在一个manifest配置文件中，这样转载 2020-10-08 13:08:39 · 237 阅读 · 0 评论 -
vue、vuex、vue-router、vue-i18n、vue-http实践
vue、vuex、vue-router、vue-i18n、vue-http实践参考资料：Vue.js 教程Vue.js 官方文档Vuex 文档震惊！喝个茶的时间就学会了vuex使用vue-i18n实现多语言Vuex的Getter学习Vue-自带vue-resource插件实现http请求专门写了个demo来做vue框架笔记，demo是基于VuexExplanation项...原创 2018-07-22 20:43:01 · 1589 阅读 · 0 评论 -
浏览器的渲染机制
浏览器的渲染机制参考资料：浏览器的渲染机制浏览器主要组件结构概念理解(1) DOM：Document Object Model，浏览器将HTML解析成树形的数据结构，简称DOM。(2) CSSOM：CSS Object Model，浏览器将CSS代码解析成树形的数据结构。(3) DOM 和 CSSOM 都是以Bytes → characters → tokens → nodes → ...原创 2018-12-08 17:05:32 · 254 阅读 · 0 评论 -
浏览器内核的解析和对比
浏览器内核的解析和对比取材自 浏览器内核的解析和对比浏览器的构成浏览器可以分为两部分：shell+内核。Shell是指浏览器的外壳：例如菜单，工具栏 等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。内核是基于标记语言显示内容的程序或模块。浏览器内核浏览器内核的组成浏览器内核可以分成两部分：渲染引擎(layout engineer或者Rendering En...转载 2018-12-08 17:04:23 · 813 阅读 · 0 评论 -
作为一个前端，可以如何机智地弄坏一台电脑？
作为一个前端，可以如何机智地弄坏一台电脑？转载自作为一个前端，可以如何机智地弄坏一台电脑？无论你触发了多少bug，最多导致浏览器崩溃，对系统影响不到哪去。 这就像二次元各种炫酷的毁灭世界，都不会导致三次元的世界末日。 然而，作为一个前端，我发现是有方式打开次元大门的…这个实验脑洞较大，动机无聊，但某种意义上反映了一些安全问题。 想象一下，有天你在家里上网，吃着火锅还唱着歌，点开一个链接，电脑...转载 2018-12-08 17:03:42 · 432 阅读 · 0 评论 -
HTML5 Boilerplate浅析
HTML5 Boilerplate浅析简介HTML5 Boilerplate——最流行的web开发前端模版，帮你构建 快速, 健壮, 并且 适应力强 的web app或网站。 其特点如下：一个干净、移动终端友好的HTML模版优化过的Google统计代码包含了 Normalize.css v1 版本 — 一个先进的、支持HTML5的CSS reset — 和基础样式、辅助功能、...原创 2018-08-04 23:03:24 · 8655 阅读 · 0 评论 -
webpack笔记
webpack笔记参考自： 1. WebPack 简明学习教程 2. webpack之傻瓜式教程及前端自动化入门 3. https://www.jianshu.com/p/42e11515c10f 4. webpack官方文档Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。从图中我们可以看出，...原创 2018-08-04 22:39:41 · 271 阅读 · 0 评论 -
关于HTML、js加密、混淆、源码保护、代码安全，防止解压直接看源码
关于HTML、js加密、混淆、源码保护、代码安全，防止解压直接看源码我们先理下需求，加密的目的是什么？加密到什么级别？为此我们可以牺牲什么？我们知道这个世界不存在绝对的安全，加密会被破解、混淆会被反混淆。技术小白、开发者、黑客，是完全不同的级别，防范不同级别的人策略都不一样。防范力度越大，投入代价也越大，比如聘请专业的安全公司。除了投入，我们还需要考虑程序的执行性能和用户体验。加密的代...转载 2018-12-08 17:06:54 · 8906 阅读 · 1 评论 -
Mustache
Mustache参考资料：mustache模板技术Mustache 模板引擎一、简介Web 模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，通常是标准的 HTML 文档。当然不同的开发语言有不同模板引擎，如 Javascript 下的 Hogan 、ASP 下的 aspTemplate、以及 PHP 下的 Smarty，这里主要介绍基于 Javasc...原创 2018-12-08 17:07:43 · 1042 阅读 · 1 评论 -
使用CryptoJS中的md5和aes加密
使用CryptoJS中的md5和aes加密参考资料：使用CryptoJS中的md5和aes加密CryptoJS实现AES加密// md5function md5encode(word) { return CryptoJS.MD5(word).toString();}//aes加密function encrypt(word) { var key = Crypto...原创 2018-12-08 19:04:26 · 2157 阅读 · 0 评论 -
ios笔记
Wifi 定位原理及 iOS Wifi 列表获取iOS 上获取 Wifi 列表其实有很大限制，在 iOS 9 以前是不能获取Wifi列表的，只能获取当前连接的 Wifi 信息，也就表示只有连接了 Wifi 才能定位。Apple 在 iOS 9 以后，提供了获取Wifi列表的API，但是获取Wifi列表是有门槛的，主要步骤有：1、向 Apple 申请开发 Network Extension...原创 2018-12-26 23:34:55 · 1045 阅读 · 0 评论 -
Hybrid App
Hybrid App参考资料：聊聊Web App、Hybrid App与Native App的设计差异8个hybrid app开发工具Hybrid APP混合开发的了解和其他两类app的对比Hybrid App的架构与实现HyBrid App框架介绍使用Appcelerator等跨平台App开发工具的优势及不足了解Web App、Native App与Hybrid App的差异...原创 2019-01-06 14:56:22 · 1723 阅读 · 0 评论 -
前端书籍分享
前端书籍分享整理了前端的学习书籍，对前端感兴趣的小伙伴可以下载来看。内容包括下载地址链接:https://pan.baidu.com/s/1Mlni6hxX_bEZWOE8JEMH5g原创 2019-06-28 14:00:49 · 780 阅读 · 2 评论 -
JS Event对象详解
1：相同事件绑定和解除，需要使用共用函数；绑定和解除事件时，事件没有"on"，即onclick写成click2：共用函数不能带参数；原创 2018-02-11 23:45:30 · 7198 阅读 · 3 评论 -
前端代码检查
前端代码检查参考自：说一说前端代码检查前端代码检查front-end-code-checklist程序员必备的代码审查（Code Review）清单代码检查很重要，原因有三：避免低级bug：一些常见代码问题，如果在编译或运行前不能及时发现，代码中的语法问题会直接导致编译或运行时错误，影响开发效率和代码质量；统一代码习惯：每一个团队或个人都会有一些代码规范或者代码习惯，为...原创 2018-05-12 13:51:32 · 3164 阅读 · 0 评论 -
HTML5新API实例
HTML5新API实例注意，要引入jQuery，并且要查看浏览器是否支持这些新API。visibilityState<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>visibilityState</title&原创 2018-04-21 12:19:33 · 923 阅读 · 0 评论 -
HTML5 Web SQL
HTML5 Web SQLWeb SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。三个核心方法：openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。executeSql：这个方法用于执行实际的 SQL 查询。...原创 2017-12-03 15:49:52 · 623 阅读 · 0 评论 -
Jade笔记
这只是我的Jade笔记，完整的Jade教程请参考Jade 官方的英文文档和https://www.w3cplus.com/html/how-to-use-jade.html简介Jade是编写HTML模板的简洁语言，简称模板引擎，其实就是 HTML 预处理语言，非常类似 Sass 之于 CSS。其特点如下：生成HTML支持动态代码支持可重用性（DRY）采用对缩进敏感的语法形式...原创 2017-12-03 21:31:28 · 1756 阅读 · 0 评论 -
bower简明入门教程
什么是bowerBower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。准备工作安装node环境:node.js安装Git，bower从远程git仓库获取代码包:git简易指南安装bower使用npm，打开终端，输入：npm install -g bower其中-g命令表示全局安装...转载 2018-01-04 14:10:44 · 467 阅读 · 0 评论 -
Gulp笔记
取材自： 1. Gulp资料大全：入门、插件、脚手架、包清单 2. http://blog.youkuaiyun.com/gongm24/article/category/6743264/2 3. gulp官网gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器。gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/h...原创 2017-11-20 12:25:26 · 664 阅读 · 0 评论 -
meta 标签
meta 标签<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。<head><meta http-equiv="content-Type" content="text/html; ...原创 2017-08-13 18:42:03 · 590 阅读 · 0 评论 -
HTML 笔记
HTML 笔记这只是我关于HTML的笔记，完整的HTML教程请自行查看 w3cschool 或者 菜鸟教程。HTML 结构HTML的结构基本如下：<!DOCTYPE html><html><head><title>网页标题</title><meta http-equiv="Content-Type" ..原创 2017-08-13 18:34:00 · 890 阅读 · 0 评论 -
ajax笔记
ajax笔记AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。XMLHttpRequestXMLHttpRequest 对象用于在...原创 2018-02-11 23:44:05 · 619 阅读 · 0 评论 -
JQuery笔记
JQuery笔记jQuery 的功能概括：html的元素选取html的元素操作html dom遍历和修改js特效和动画效果css操作html事件操作ajax异步请求方式jQuery 版本 2 以上不支持 IE6，7，8 浏览器。如果需要支持 IE6/7/8，那么请选择1.9。你还可以通过条件注释在使用 IE6/7/8 时只包含进1.9。<!--[if lt...原创 2018-02-11 23:32:28 · 520 阅读 · 0 评论 -
JavaScript语法笔记
JS用法JavaScript在Web 页面中的基本用法有两种。一种是装入页面时动态创建HTML语句，另一种是监视并处理各种用户事件。两种方法结合起来，产生下面用法∶定制Web 页面；动态创建Web 页面；检查CGI 表单数据；管理Cookie；访问框窗。1. 在HTML文件中，嵌入JavaScript语句格式(内嵌)<script> JavaScript函数或语句...原创 2017-08-13 21:15:15 · 873 阅读 · 0 评论 -
CSS笔记
CSS笔记用法外部样式表当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。<head> <link rel="stylesheet" type="text/css" href="mystyle.css"></head>内部样式表当单个文件需要..原创 2017-08-13 19:02:24 · 1259 阅读 · 0 评论 -
SCSS 笔记
SCSS 笔记内容来自 sass语法总结编译使用gulp-sass自动化编译Gulp 配置 Sass 编译的示例代码：var gulp = require('gulp');var sass = require('gulp-sass');gulp.task('sass', function () { gulp.src('./scss/*.scss') ...转载 2017-08-18 16:12:37 · 842 阅读 · 0 评论 -
HTML5 Web存储
HTML5 Web存储在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。客户端存储...原创 2017-12-03 15:45:41 · 663 阅读 · 0 评论 -
HTML5笔记
HTML5笔记表单form 属性 属性 值 描述 action URL 规定当提交表单时向何处发送表单数据。 autocomplete on | off 规定是否启用表单的自动完成功能。 enctype application/x-www-form-urlencoded | multipart/form-data |...原创 2017-08-13 18:39:26 · 824 阅读 · 0 评论