web前端
关注
分享
扫一扫
文章平均质量分 71
程序员的生活1
知乎-程序猿的生活同号：免费讨论学习交流群（562708969）。
展开
-
JavaScript高级技巧
1 安全类型检测javascript内置类型检测并不可靠 safari某些版本（<4）typeof正则表达式返回为function建议使用Object.prototype.toString.call()方法检测数据类型 function isArray(value){ return Object.prototype.toString.call(value) === "[object Array]"; } function isFunctio原创 2021-09-06 21:55:00 · 897 阅读 · 0 评论 -
如何Vue.js中使用第三方库
在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库. 但随着项目越来越复杂, 可能会采取组件化和模块化的方式来组织代码, 还可能要使应用支持不同环境下的服务端渲染. 除非你找到了一个简单而又健壮的方式来引入这些库供不同的组件和模块使用, 不然, 这些第三方库的管理会给你带来一些麻烦.本文将介绍一些在 Vue.js 中使用第三方库的方式.希望能够帮助大家，另外小编谢谢大家一如既往的支持，欢迎大家一起和群里的小伙伴一起学原创 2021-08-02 21:07:00 · 1514 阅读 · 0 评论 -
【静态页面】CSS的显示与溢出
CSS架构显示与溢出；1.显示；display属性；以display设置隐藏效果和元素类型<style> div { width: 200px; height: 200px; } #qq { background-color: blue; } #yy { background-color: red;原创 2021-07-16 21:36:55 · 733 阅读 · 0 评论 -
【JavaScript】核心语法之数组
数组；一.数组是什么；是值得有序集合，每个元素都在数组里有唯一的位置，用数字表示，叫做索引数据；用字符串表示，叫关联数组。数组无类型；数组元素可以是类型，字符串，数字值，布尔值等数组动态的；向插入新元素，从数组中删除指定元素二.一维数组；1.定义数组；字面量/直接量方式定义 var 数组名称 = [元素一, 元素二, ...] 构造函数方式 var 数组名称 = new Array(元素一, 元素二, ...) var 数组名称 = new Array(length)原创 2021-07-15 22:30:06 · 389 阅读 · 0 评论 -
【JavaScript】DOM之样式操作
样式操作获取内联样式以节点和元素的方法来获取指定的CSS样式<body><div id="q1" style="width: 200px;height: 200px;border: 1px solid black"></div><script> var div = document.getElementById('q1');// 节点属性获取指定元素的属性 var attrNode = div.getAttribu原创 2021-07-14 21:26:29 · 401 阅读 · 0 评论 -
JS创建svg的方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv=”X-UA-Com.原创 2021-07-13 19:11:14 · 1568 阅读 · 0 评论 -
我从来不理解JavaScript闭包，直到有人这样向我解释它…
正如标题所述，JavaScript闭包对我来说一直有点神秘,看过很多闭包的文章，在工作使用过闭包，有时甚至在项目中使用闭包，但我确实是这是在使用闭包的知识。最近看国外的一些文章，终于，有人用于一种让我明白方式对闭包进行了解释，我将在本文中尝试使用这种方法来解释闭包。希望能够帮助大家，另外小编谢谢大家一如既往的支持，欢迎大家一起和群里的小伙伴一起学习，交流，群里面每天都有分享初学者的笔记资料，视频。点击进入暗号：知乎程序猿的生活：程序员的出路是什么？zhuanlan.zhihu.com准备原创 2021-07-12 20:55:25 · 291 阅读 · 0 评论 -
CSS层叠与继承你知道吗？
CSS 层叠（Cascading）指的是某个元素会根据样式规则的优先级来设置某个元素的外观。层叠样式的优先级主要有三方面：根据样式域判断，是用户代理样式（user agent stylesheet），还是我们自己写的样式；是否存在!important标识； 根据元素样式属性判断，是否是写在元素行内的 style 属性中； 根据选择器判断。用户代理样式是什么？基本上所有浏览器都有默认的样式，例如<h1>-<h6>，<p>标签都有默认的上边距和下边距...原创 2021-07-10 21:07:09 · 325 阅读 · 0 评论 -
js浮点数加减乘除
/** ** 加法函数，用来得到精确的加法结果 ** 说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。 ** 调用：accAdd(num1,num2) ** 返回值：num1加上num2的精确结果 **/Common.accAdd=function (num1, num2) { var r1, r2, m, c; try { r1 = num1.toString().split(".")[1].le.原创 2021-07-09 21:09:02 · 603 阅读 · 0 评论 -
CSS实现渐变圆角边框
渐变边框可以使用border-image，但带有圆角的渐变边框单靠border-image却无法实现，那有哪些方法可以实现圆角渐变边框呢？css实用小知识，你肯定用得上方案一：使用border-image+clip-path实现 <style>.radius-gradient-border1{ max-width: 300px; padding: 8px; border: 5px solid transparent; border-image:原创 2021-07-08 19:06:38 · 5060 阅读 · 3 评论 -
React高阶组件
高阶组件（HOC）是React里的高级技术为了应对重用组件的逻辑，HOC本质上不是React API的一部分。他是从React的组合性质中显露出来的模式具体来说，一个高阶组件就是一个获取一个组件并返回一个组件的函数注意:一个HOC不会修改传入的参数组件，也不会使用继承来复制它的行为。不如说，一个HOC通过将原始组件包裹到一个容器组件里来混合。一个HOC是一个没有副作用的纯函数。不要改变原始组件，使用组合在HOC里要打消修改组件原型的想法。点击免费学习更多知识function logProps(原创 2021-07-06 21:19:08 · 189 阅读 · 0 评论 -
Typescript-泛型
概念TypeScript的泛型与其他面向对象的语言中的定义是相似的。泛型可以理解为在我们定义函数、接口或者类的时候，不预先指定其相关的类型，而是在使用的时候手动指定类型。这和TypeScript基础类型中的any是有区别的。点击免费学习当我们不使用泛型的时候，可能就如下这样： function show(name: string): string { return name; } function show(name: any): any {...原创 2021-07-06 20:11:48 · 624 阅读 · 0 评论 -
ES6 javascript 实用开发技巧
ES6 实用开发技巧定义变量/常量ES6 中新增加了let和const两个命令，let用于定义变量，const用于定义常量 两个命令与原有的var命令所不同的地方在于，let, const都是块级作用域，其有效范围仅在代码块中，实例如下： //es5 if(1==1){ var b = 'foo'; } console.log(b);//foo //es6 if(1==1){ let b = '...原创 2021-07-03 19:56:55 · 289 阅读 · 0 评论 -
拒绝JavaScript，这三个CSS技巧你一定用的上
本文介绍三个非常棒棒的CSS技巧，完全可以在你的项目中代替JavaScript，一起来看看这些技巧吧。程序猿的生活：打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）zhuanlan.zhihu.com:active伪类与CSS数据上报超实用超高频使用的:empty伪类用好:only-child伪类1. :active伪类与CSS数据上报如果想要知道两个按钮的点击率，CSS开发者可以自己动手，无需劳烦JavaScript开发者去埋点：原创 2021-07-03 14:39:53 · 325 阅读 · 2 评论 -
《前端之路》- TypeScript (四) class 中各类属性、方法，抽象类、多态
一、TypeScript 中的类1、先来举个例子： class Persons { name: any; age: number | undefined; constructor(name: string, age: number) { this.name = name; this.age = age; } getName(): void { console.log(`${this....原创 2021-06-30 21:08:25 · 385 阅读 · 3 评论 -
【前端进阶】构建自己的 webpack 知识体系
webpackwebpack 最出色的功能之一就是，除了JavaScript，还可以通过loader引入任何其他类型的文件。Webpack 核心概念：Entry（入口）：Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。 Output（出口）：指示 webpack 如何去输出、以及在哪里输出 Module（模块）：在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。 Chunk（代码块）...原创 2021-06-30 21:03:28 · 355 阅读 · 0 评论 -
测试代码质量的唯一方式：别人看你代码时说 “卧槽”的次数
代码质量与其整洁度成正比。干净的代码，既在质量上较为可靠，也为后期维护、升级奠定了良好基础。本文并不是代码风格指南，而是关于代码的可读性、复用性、扩展性探讨。我们将从几个方面展开讨论：变量 函数 对象和数据结构 类 SOLID 测试 异步 错误处理 代码风格 注释前端进阶暗号：csdn变量用有意义且常用的单词命名变量Bad:const yyyymmdstr = moment().format('YYYY/MM/DD');Good:const cur..原创 2021-06-29 15:49:27 · 385 阅读 · 0 评论 -
三大主流框架React、Angular、Vue
【引言】web前端开发当前世界中，技术发展非常迅速并且变化迅速，开发者需要更多的开发工具来解决不同的问题。本文就对于当下主流的前端开发技术React、Vue、Angular这三个框架做个相对详尽的探究。【React】React（也被称为React.js或ReactJS）是一个用于构建用户界面的JavaScript库。它由Facebook和一个由个人开发者和公司组成的社区来维护。React可以作为开发单页或移动应用的基础。然而，React只关注向DOM渲染数据，因此创建React应用通常需原创 2021-06-27 20:06:34 · 4219 阅读 · 1 评论 -
CSS垂直居中的10个方法
前言前端开发中元素居中是最常见和最经常使用到的css技巧，不仅开发中经常会用到，面试官出题考核基础时有时候也会问道这类问题。本文主要介绍10种垂直居中的方法。希望对你我都有帮组。1、line-height+height实现如果子元素是行内文本元素的话，只要设置父元素的height和line-height高度一样就可以垂直居中。HTML "parent"> "child">我是行内元素</span> </div> ...原创 2021-06-27 18:46:22 · 717 阅读 · 0 评论 -
快毕业了发现自己前端学的不够扎实怎么办
一、基础（重新学一遍比第一次学效率快很多）1、HTML基础笔记：实践建议HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上：学习HTML基础，了解如何编写语义HTML 理解如何把网页分成section（段落），以及如何正确组织DOM（文档对象模型） 现在很多html5的新标签也很有用，需要进行了解实践建议：一旦你学习了HTML基础，至少要制作5个HTML网页。我建议你随便找一个网站，比如看看Git原创 2021-06-26 21:11:03 · 723 阅读 · 0 评论 -
HTML静态页面之（盒子模型）
盒子模型描述每一个元素都可以叫做是盒子模型 盒子模型的组成 内容区 - 元素中内容（文本、图片、等等） 内边距 - 内容区到边框的距离 边距 - 内容区的边界 外边距 - 盒子与盒子之间的距离 border属性表示设置元素的边框 border属性是简写属性,可以分为 border-width - 表示边框的宽度 border-style - 表示边框的样式 border-color - 表示边框的颜色 简写顺序: 边框宽度 边框样式 边框颜色原创 2021-06-26 16:38:19 · 791 阅读 · 0 评论 -
js数组JavaScript数组
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>数组操作</title> <link rel="icon" type="text/css" href="images/favicon.ico"></head><body> </body><script>.原创 2021-06-23 20:57:32 · 261 阅读 · 0 评论 -
用js把数字转化成为大写金额
var digitUppercase = function(n) {var fraction = ['角', '分'];var digit = ['零', '壹', '贰', '叁', '肆','伍', '陆', '柒', '捌', '玖'];var unit = [['元', '万', '亿'],['', '拾', '佰', '仟']];var head ...原创 2021-06-23 20:44:16 · 807 阅读 · 0 评论 -
html中div使用CSS实现水平/垂直居中的多种方式
CSS中的居中，在工作中，会经常遇到。它可以分为水平居中和垂直居中，以下是几种实现居中的方式。以下例子中，涉及到的CSS属性值。.parent-frame { width: 200px; height: 200px; border: 1px solid red;}.child-frame { width: 100px; height: 100px; border: 1px dotted blue;}1: text-align:c...原创 2021-06-22 15:17:46 · 339 阅读 · 0 评论 -
TypeScript高级用法
typescript高级用法引言作为一门强大的静态类型检查工具，如今在许多中大型应用程序以及流行的JS库中均能看到TypeScript的身影。JS作为一门弱类型语言，在我们写代码的过程中稍不留神便会修改掉变量的类型，从而导致一些出乎意料的运行时错误。然而TypeScript在编译过程中便能帮我们解决这个难题，不仅在JS中引入了强类型检查，并且编译后的JS代码能够运行在任何浏览器环境，Node环境和任何支持ECMAScript 3(或更高版本)的JS引擎中。最近公司刚好准备使用TypeScript来对现原创 2021-06-19 13:42:47 · 706 阅读 · 0 评论 -
web前端之TypeScript的类class 中各类属性、方法，抽象类、多态
一、TypeScript 中的类class Persons { name: any; age: number | undefined; constructor(name: string, age: number) { this.name = name; this.age = age; } getName(): void { console.log(`${this.name}今年已经${this.age}岁了`); }} let p11 = new原创 2021-06-18 19:32:06 · 662 阅读 · 0 评论 -
原生JavaScript实现五子棋（直接上代码干货点赞收藏拿走）
HTML页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no"> <title>五子棋</title> <原创 2021-06-15 21:42:02 · 1758 阅读 · 2 评论 -
适合移动和桌面应用的JavaScript框架是什么
当听到JavaScript这个词的时候，“web开发”会一下子出现在我们的脑海中，因为JavaScript在很长一段时间里一直是web应用开发最广泛使用的语言，Angular、React和Vue等框架目前也很有名。尽管JavaScript主导着web开发领域，但是在移动和桌面应用开发领域，它不得不屈居于Java、C#和C++之下。然而，很多人可能没注意到JavaScript对移动和桌面应用开发也产生了影响。本文就将讨论一些主要的JavaScript框架，以及它们在移动和桌面应用开发领域的优缺点。1原创 2021-06-11 19:32:05 · 1346 阅读 · 3 评论 -
JavaScript实现九九乘法表四种方法（附代码）
几行代码就能轻松学会原创 2021-06-10 14:44:14 · 9694 阅读 · 0 评论 -
最近好多人问我，前端现在有发展前途吗？
下面我就告诉大家吧欢迎大家一起来讨论：点击观看：-->前端现在有发展前途吗？原创 2020-07-17 13:57:16 · 283 阅读 · 0 评论 -
CSS 知识点总结
CSS 定位之前已经介绍了布局，那么布局和定位的区别是什么呢？布局是在屏幕平面上的 定位是在垂直于屏幕的定位通过 position 属性进行创建，一共分为五个值static 默认值，待在文档流里 relative 相对定位，升起来，但不脱离文档流 absolute 绝对定位，定位基准是祖先元素里的非 static，最近的定位元素 fixed 固定定位，定位基准是 viewport 视口 sticky 粘滞定位，在移动端存在太多bug，不做过多介绍position: relativ原创 2020-07-15 20:24:54 · 212 阅读 · 0 评论 -
2020年这9个项目助你成为前端大神！
点击视频观看：2020年这9个项目助你成为前端大神！打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）原创 2020-07-15 20:23:51 · 200 阅读 · 0 评论 -
不走寻常路,CSS垂直居中的另类实现
前言众所周知，“css如何实现元素垂直居中？”已经是一个老生常谈的问题了，这个问题目前已经有了许多解决方案，这些方案也都有各自适用的场景以及优缺点，大致如下：flex布局 grid布局 table布局 line-height搭配height position搭配margin position搭配transform ...打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）那么今天我们就来理解其中一种有效但不常被使用的方案的原理，它就是：伪元素原创 2020-07-15 20:22:45 · 192 阅读 · 0 评论 -
h5+js实现本地文件读取和写入
这次给大家带来h5+js实现本地文件读取和写入，h5+js实现本地文件读取和写入的注意事项有哪些，下面就是实战案例，一起来看一下。代码如下:读取本地文件打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title...原创 2020-07-09 15:52:48 · 2554 阅读 · 0 评论 -
HTML代码实现简易购物车
网上关于购物车实现的代码非常多，本次的这篇文章主要是和大家分享了HTML代码实现简易购物车，有需要的小伙伴可以看一下，接下来讲解一下具体的实现。1、用html实现内容；2、用css修饰外观；3、用js(jq)设计动效。第一步：首先是进行html页面的设计，我用一个大的p将所有商品包含，然后用不同的p将不同的商品进行封装，商品列表中我用了ul li实现，具体实现代码如下（代码中涉及到的商品都是网上随便copy的，不具有参考价值）：打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更原创 2020-07-09 15:49:45 · 24140 阅读 · 3 评论 -
css 如何使用精灵图？background属性介绍（代码实例）
本章给大家介绍css 怎样使用精灵图？background属性介绍（代码实例），让大家可以了解css精灵图（雪碧图）是怎样使用的。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、css 如何使用精灵图?介绍如何使用精灵图使用前，我们要先知道什么是精灵图。只有先知道什么是精灵图，了解精灵图的原理了，我们才可是说使用精灵图。1. 什么是css精灵图（sprite）？css精灵图（sprite）直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”.原创 2020-06-30 21:59:34 · 690 阅读 · 0 评论 -
css绝对定位如何居中？css绝对定位居中的四种实现方法
在网页进行css布局时居中是经常需要用到的，其中就有css绝对定位居中，那么，css绝对定位如何实现居中？今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法。打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）css绝对定位居中的实现方法有很多，下面将给大家介绍css绝对定位居中的四种方法。1、兼容性不错的主流css绝对定位居中的用法：.conter{ width: 600px; height: 400px; position: abso原创 2020-06-30 21:58:27 · 1732 阅读 · 0 评论 -
什么是css选择器？css3中5种常见的基本选择器（代码实例）
本章我们给大家讲解一下什么是css选择器？css3中5种常见的基本选择器。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一：什么是css选择器？CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。选择器主要是用来确定html的树形结构中的DOM元素节点。二：css3中5.原创 2020-06-30 21:56:18 · 5794 阅读 · 0 评论 -
分享CSS3里box-shadow属性的使用方法，包括内阴影box-shadow：inset
CSS里面的属性很多，有些属性长时间不用，就容易忘，尤其是那种需要设置多个值的属性。比如：box-shadow，每次使用CSS3里的box-shadow,都记不清box-shadow怎么使用，都要查阅资料才能实现对应的效果,现在总结一下,box-shadow的使用方法以及box-shadow内阴影的使用，方便以后查看。打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）相关推荐：一、box-shadow语法box-shadow: none | in.原创 2020-06-30 21:52:06 · 1492 阅读 · 0 评论 -
前端需要学什么？
前端学什么？第一阶段：HTML+CSS+JS基础（1） HTML+CSS:HTML进阶、 CSS进阶、DIV+CSS布局、HTML+CSS整站开发、（2） JavaScript基础：Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。（3） JS基本特效：常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。打造全网web前端全栈资料库（总目录）看完学的更原创 2020-06-27 21:55:20 · 1203 阅读 · 0 评论