程欢o-CSDN博客

原创 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 463

原创前端校招相关的设计模式小结

1、单例模式定义：是保证一个类只有一个实例，并且提供一个访问它的全局访问点。需求：一些对象我们往往只需要一个，比如线程池、全局缓存、浏览器中的window对象、登录浮窗等。优点：1、可以用来划分命名空间，减少全局变量的数量2、可以被实例化，且实例化一次，再次实例化生成的也是第一个实例class CreateUser{ constructor(name){ this.name = name; this.getName(); } getName

2021-05-04 23:56:24 169

原创雪碧图在移动端的自适应

//方法一，可以使用网易转换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 234

原创可以了解一下的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 83

原创子代选择器与后代选择器的区别

使用后代选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>后代与子代选择器的区别</title>  <script language="javascript"

2021-05-03 12:19:16 3902

原创 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 157

原创 CSS中如何解决子元素继承父元素的opacity属性？

解决方案这里有两个方案，使用rgba()间接的设定opacity的值，这个属性不会向下继承，或者既然opacity会被子级元素继承，那就把opacity属性放到同级元素实现，下面通过示例具体说说这两种方式：1.使用rgba()间接的设定opacityrgba()有四个参数，最后一个参数就是opacity的值，和opacity单独设定效果一样，但是这个是有background属性来控制的，background不会向下继承，所以就解决这个问题啦，示例如下：<!DOCTYPE html>&l

2021-05-02 00:29:38 872

原创 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 202

原创 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 1247

原创移动端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 1339 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 504

原创来自校招生的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 196

原创小白初探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 193

原创小白初探Webpack

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。简单讲，Webpack是一个根据依赖关系来进行构建的工具，而gulp、grunt是一种流水线型的打包工具。webpack的优势1、代码拆分（支持异步模块加载）Webpack 有两种组织模块依赖的方式，同步

2021-04-29 00:09:13 128

原创源码为啥而读？怎么读？

迷茫接触前端两年，从校招实习到正式工作一年多。我一直期望去仔细看源码，最近在思考，我是以一种什么样的心态去阅读源码的？在校招的时候，是为了应付面试中的种种问题，去看源码解析的文章。认为如果在面试过程中，了解原理，那么就会成为加分点，会成为进入大厂的入场券。总结那段疯狂学习的时间，我收获的更多的是了解了一些技术、是怎么样，用来干什么的。然而，正式入职京东一年后，我感到了迷茫。以前看的东西，是否真的了解了？为了什么去看源码？看源码能收获什么？应该怎么去看源码？是否看过的东西就已经掌握了？对于我

2021-04-28 23:59:10 122

原创小白对移动端适配方案的粗浅整理～

初次上手移动端项目，那么逃不掉的一个问题，必然是移动端适配的问题。自适应基本概念px：像素，是屏幕上显示数据的最基本的点，表示相对大小。不同分辨率下相同长度的px元素也会受物理像素的影响，显示可能会不一样。同时，值得注意的点：在chrome、甚至一些移动设备有最小字号的限制，一般为12px。pt：是一种固定长度的度量单位，等于1/72英寸（未使用过）。css像素:在不同屏幕上，css像素呈现的物理尺寸一致，但css像素对应的物理像素具数不同。标准的显示密度下，1个css像素对应一个物理像素，缩放时

2021-04-27 01:06:45 173

原创 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 590 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 186

原创前端面试还是要了解一下的网络协议相关滴！

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 442

原创 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 379

原创 CSS中如何解决子元素继承父元素的opacity属性

解决方案这里有两个方案，使用rgba()间接的设定opacity的值，这个属性不会向下继承，或者既然opacity会被子级元素继承，那就把opacity属性放到同级元素实现，下面通过示例具体说说这两种方式：1.使用rgba()间接的设定opacityrgba()有四个参数，最后一个参数就是opacity的值，和opacity单独设定效果一样，但是这个是有background属性来控制的，background不会向下继承，所以就解决这个问题啦，示例如下：<!DOCTYPE html>&l

2020-08-02 21:49:24 1433

原创如何在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 185

原创 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 1424

原创 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 2310

weixin_29947843的博客