![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 62
程欢o
这个作者很懒,什么都没留下…
展开
-
eslint插件开发
ESLint插件开发# 安装模块npm install -g yo generator-eslint# 创建目录mkdir eslint-plugin-democd eslint-plugin-demo# 创建模板yo eslint:plugin打开 lib/rules/disable-console.js ,可以看到默认的模板代码如下:module.exports = { meta: { docs: { description: "disable conso原创 2021-05-05 00:00:32 · 388 阅读 · 0 评论 -
前端校招相关的设计模式小结
1、单例模式定义:是保证一个类只有一个实例,并且提供一个访问它的全局访问点。需求:一些对象我们往往只需要一个,比如线程池、全局缓存、浏览器中的window对象、登录浮窗等。优点:1、可以用来划分命名空间,减少全局变量的数量2、可以被实例化,且实例化一次,再次实例化生成的也是第一个实例class CreateUser{ constructor(name){ this.name = name; this.getName(); } getName原创 2021-05-04 23:56:24 · 151 阅读 · 0 评论 -
雪碧图在移动端的自适应
//方法一,可以使用网易转换rem的那一套,配合scss函数使用background-size: x y; //为实际上完成后的雪碧图的宽高@function torem($px){ @return $px / 64px *1rem;}@mixin spImg($url, $left, $top. $imgWidth){ background: url($url) no-repeat $left $top; background-size: $imgWidth;}//方法二,使用px,原创 2021-05-04 23:53:58 · 220 阅读 · 0 评论 -
可以了解一下的CSS小技巧
1.去除网页超链接的下划线<style>a {text-docoration:none}a:hover {color: #3366CC;text-decoration:underline}</style>2.设置浮动背景<style type="text/css"> body { background-image:url(image/bg.gif); background-attachment:fixed}</style>3.正确对齐文本原创 2021-05-03 12:22:41 · 72 阅读 · 0 评论 -
子代选择器与后代选择器的区别
使用后代选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>后代与子代选择器的区别</title> <!--<link rel="stylesheet" type="text/css" href="*.css"/>--> <script language="javascript"原创 2021-05-03 12:19:16 · 3835 阅读 · 0 评论 -
Sass基础学习
编码规则建议代码开头位置显式定义 @charset "encoding-name"; ,让SASS能够按照给定的字符集编译输出。变量$font-stack: Helvetica, sans-serif;$primary-color: #333;body { font: 100% $font-stack; color: $primary-color;}body { font: 100% Helvetica, sans-serif; color: #333; }嵌套原创 2021-05-03 12:16:25 · 145 阅读 · 0 评论 -
CSS中如何解决子元素继承父元素的opacity属性?
解决方案这里有两个方案,使用rgba()间接的设定opacity的值,这个属性不会向下继承,或者既然opacity会被子级元素继承,那就把opacity属性放到同级元素实现,下面通过示例具体说说这两种方式:1.使用rgba()间接的设定opacityrgba()有四个参数,最后一个参数就是opacity的值,和opacity单独设定效果一样,但是这个是有background属性来控制的,background不会向下继承,所以就解决这个问题啦,示例如下:<!DOCTYPE html>&l原创 2021-05-02 00:29:38 · 852 阅读 · 0 评论 -
CSS常见的图形绘图
1.圆形.circle{ width: 100px; height: 100px; background-color:red; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } 2.正方形#square { width:100px; height: 100px; background: red;原创 2021-05-02 00:22:35 · 183 阅读 · 0 评论 -
createjs基础入门
EaselJS创建图形var stage = new createjs.Stage("demoCanvas");var circle = new createjs.Shape();circle.graphics.beginFill("DeepSkyBlue").drawCircle(0,0,5);circle.x = 100;circle.y = 100;stage.addChild(circle);stage.update();EaselJS创建文字var stage =原创 2021-05-02 00:21:21 · 1208 阅读 · 0 评论 -
移动端H5开发不了解一下抓包嘛?
在PC项目开发中,一般会使用Chrome的开发者工具进行调试,亦或是其他浏览器的开发工具进行调试。在平常开发中,我一般会使用Chrome或者是Safari进行调试。Chrome的功能非常强大,它的工具栏主要分为Elements、Console、Sources、NetWork、Performance、Memory、Application、Lighthouse、Security九大块功能。本文仅稍微列举Chrome部分功能:1.查阅增改 DOM 和格式、CSS样式2.测试页面性能和 SE原创 2021-04-29 00:24:31 · 1303 阅读 · 1 评论 -
react native 环境搭建for mac
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。今天的笔记主要记录一下在mac系统下ReactNative环境的搭建:首先要知道ReactNative的环境依赖于node、android、i原创 2021-04-29 00:20:50 · 483 阅读 · 0 评论 -
来自校招生的CSS面试小结~
此份小结来自2020校招生的CSS面试总结~css 盒子模型w3c盒模型:width不包含border和paddingIE盒模型:width包含border和padding可以通过css去设置盒模型,通过box-sizing去设置,content-box为w3c盒模型,border-box为IE盒模型。css position有哪些属性static: 默认值,位于文档流之中,正常布局relative:位于文档流之中,可以使用top和left等属性,使其相对于原位置进行偏移absolute:绝原创 2021-04-29 00:18:59 · 176 阅读 · 0 评论 -
小白初探ESLint~
ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。它使用解析器将源代码解析成AST,然后检测AST来判断代码是否符合规则。ESLint原理1. 将代码解析成ASTESLint使用JavaScript解析器把JS代码解析成AST。PS:解析器:是将代码解析成AST的工具,ES6、react、vue都开发了对应的解析器所以ESLint能检测它们的,ESLint也是因此一统前端Lint工具的。2.原创 2021-04-29 00:11:48 · 168 阅读 · 0 评论 -
小白初探Webpack
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。简单讲,Webpack是一个根据依赖关系来进行构建的工具,而gulp、grunt是一种流水线型的打包工具。webpack的优势1、代码拆分(支持异步模块加载)Webpack 有两种组织模块依赖的方式,同步原创 2021-04-29 00:09:13 · 113 阅读 · 0 评论 -
源码为啥而读?怎么读?
迷茫接触前端两年,从校招实习到正式工作一年多。我一直期望去仔细看源码,最近在思考,我是以一种什么样的心态去阅读源码的?在校招的时候,是为了应付面试中的种种问题,去看源码解析的文章。认为如果在面试过程中,了解原理,那么就会成为加分点,会成为进入大厂的入场券。总结那段疯狂学习的时间,我收获的更多的是了解了一些技术、是怎么样,用来干什么的。然而,正式入职京东一年后,我感到了迷茫。以前看的东西,是否真的了解了?为了什么去看源码?看源码能收获什么?应该怎么去看源码?是否看过的东西就已经掌握了?对于我原创 2021-04-28 23:59:10 · 106 阅读 · 0 评论 -
小白对移动端适配方案的粗浅整理~
初次上手移动端项目,那么逃不掉的一个问题,必然是移动端适配的问题。自适应基本概念px:像素,是屏幕上显示数据的最基本的点,表示相对大小。不同分辨率下相同长度的px元素也会受物理像素的影响,显示可能会不一样。同时,值得注意的点:在chrome、甚至一些移动设备有最小字号的限制,一般为12px。pt:是一种固定长度的度量单位,等于1/72英寸(未使用过)。css像素:在不同屏幕上,css像素呈现的物理尺寸一致,但css像素对应的物理像素具数不同。标准的显示密度下,1个css像素对应一个物理像素,缩放时原创 2021-04-27 01:06:45 · 156 阅读 · 0 评论 -
Ubuntu+Nginx+php搭建一个属于自己的Wordpress站点
1、搭建环境本文笔者使用的服务器是腾讯云服务器。Linux:Linux 系统(本文为 Ubuntu18.04);Nginx:Web 服务器程序,用来解析 Web 程序;MySQL:一个数据库管理系统;PHP:Web 服务器生成网页的程序。(1)安装配置Nginxsudo apt-get install nginx启动 Nginxservice nginx start测试 Nginx 服务是否正常运行,在浏览器中,访问云主机公网 IP,查看 Nginx 服务是否正常运行。原创 2021-04-26 23:27:16 · 552 阅读 · 1 评论 -
Less基础用法总结
Less变量@pre-blue : #5B83AD;@after-blue :@nice-blue + #111;#header{ color: @after-blue; }#header { color :#6c94be }@fnord:'I am Kim'@var: 'fnord';content:@@varcontent:'I am Kim';混合.temp{ border-top: dotted 1px black; border-bottom: solid原创 2021-04-26 16:33:46 · 164 阅读 · 0 评论 -
前端面试还是要了解一下的网络协议相关滴!
TCP、UDP的区别(1)TCP是面向连接的;UDP是无连接的,即发送数据前不需要先建立链接(2)TCP提供可靠的服务,通过TCP连接传输的数据无差错、不丢失、不重复,且按序到达,适合大数据量的交换;UDP尽最大努力交付,但不保证可靠(3)TCP是面向字节流;UDP面向报文,并且网络出现拥塞不会使发送速率降低(会出现丢包,比如IP电话或者视频会议)(4)TCP只能端对端;UDP支持1对1 、1对多(5)TCP的首部较大,为20字节;UDP为8字节三次握手以及四次分手在创建连接时,1.客户端首原创 2021-04-20 21:47:24 · 418 阅读 · 0 评论 -
display,opacity,visibility三者之间的区别
这三个方法可以使使指定元素在视野里无法可见。display: none;opacity: 0;visibility: hidden;display: none; 该方法会改变页面布局。1.元素彻底消失,脱离文档流。2.子元素跟随父元素被隐藏,并且无法单独显示。3.绑定的时间也无法触发。4.无论如何,DOM节点还是存在的,仍旧可以用js操作。opacity: 0;该方法不会改变页面布局。1.是指上是元素的透明度为0。2.子元素opacity: 1 是无效的,元素依旧无法显示。3.绑定原创 2020-08-02 21:54:46 · 360 阅读 · 0 评论 -
CSS中如何解决子元素继承父元素的opacity属性
解决方案这里有两个方案,使用rgba()间接的设定opacity的值,这个属性不会向下继承,或者既然opacity会被子级元素继承,那就把opacity属性放到同级元素实现,下面通过示例具体说说这两种方式:1.使用rgba()间接的设定opacityrgba()有四个参数,最后一个参数就是opacity的值,和opacity单独设定效果一样,但是这个是有background属性来控制的,background不会向下继承,所以就解决这个问题啦,示例如下:<!DOCTYPE html>&l原创 2020-08-02 21:49:24 · 1393 阅读 · 0 评论 -
如何在js代码中消灭for循环实例详解
转载自:https://www.jb51.net/article/144662.htm补充一:看来很多人没看完文章就评论了。我在文章末尾说了,是不写 for 循环,不是不用 for 循环。简单陈述不写 for 循环的理由:for 循环易读性差,而且鼓励写指令式代码和执行副作用。更多参考这篇文章1、for 循环性能最好。回应:微观层面的代码性能优化,不是你应该关注的。我在文章中演示了,对百万级数据的操作,reduce 只比 for 循环慢 8 ms,可忽略不计。如果你要操作更大的数据,要考虑下换语言了。原创 2020-07-21 22:01:57 · 175 阅读 · 0 评论 -
js实现斐波那契数列的几种方法
递归方法一:普通递归function fibonacci(n) { if (n == 1 || n == 2) { return 1 }; return fibonacci(n - 2) + fibonacci(n - 1);}fibonacci(30)方法二:改进递归-把前两位数字做成参数避免重复计算function fibonacci(n) { function fib(n, v1, v2) { if (n == 1)原创 2020-07-19 22:27:41 · 1399 阅读 · 0 评论 -
react 获取多个Input框中的值
react 获取多个Input框中的值假如页面中有很多input需要取值,如果数量少的话,可以一个一个的定义,但是如果数据多的话一个一个的处理,会造成代码冗余,工作量大的问题。方法1关键点就是我们传递一下name值,然后去setState里动态设置每个input的值,我们可以在render里边console.log(this.state)看一下,我们的每一项的值就是{name1:”abc”,name2:”def”}import React,{ Component } from 'react';cl原创 2020-07-19 22:21:16 · 2277 阅读 · 0 评论