web前端的清流-CSDN博客

class抽象:抽取相似的功能，归为一类类：专业点说法就是一组具有相同属性和行为的对象的抽象，只看这个貌似不太好理解，怎么理解这个类呢？以我们前边的代码为例，function Person 这个就是一个类，我们把拖拽所需要的常用功能都封装在这个类中，每次需要需要使用到拖拽这个功能的时候，就实例化这个类，它会给我生成一个 drag 对象，通过该对象我们就实现了拖拽这个功能。类：构造函数和原型的集合体在 ES6 中，虽然有了 class 的语法，但是还是有别于传统语言(Java) 中的类

2021-03-26 22:32:20 169

原创设计模式（观察者模式）

用class实现观察者模式当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知它的依赖对象。观察者模式属于行为型模式。事件池：events监听器：on解除监听：of触发器：dispatchclass Event { events = {} // 事件池记录所有的相关事件及处理函数 /* 形式 events = { "click":[f1,f2,f3

2021-03-26 22:04:53 122

原创 es5中的面向对象继承

ES5面向对象继承先上代码//定义一个方法（名字大写--稍后会new一下）function Person(name,age){ this.name = name; this.age = age;}//Person原型上挂载sayName方法Person.prototype.sayName = function(){ console.log(this.name);};//Person原型上挂载sayAge 方法Person.prototype.sayAge = f

2021-03-26 21:51:01 133

原创 js面向对象概念篇

概念什么是对象对象就是一个封装了数据(属性)和方法的集合体。什么是面向对象程序设计(Object Oriented Programming)面向对象，英文名字叫 Object Oriented，是一种编程方法。是和面向过程相对应的。面向对象和面向过程我们以吃饭这件事来看看什么是面向对象，什么是面向过程。对于吃饭这件事来说我们通常有两个解决方案：点外卖和自己做。这俩方案中，点外卖就是面向对象，而自己做就是面向过程。具体对比如下:在面向过程的吃饭中，我们想要填饱肚子，需要自己亲自下厨

2021-03-26 21:27:54 100

原创基于 Proxy 的数据代理

先上代码//首先定义对象let data = { name: "mt", age: 8, price: 9000}// let proxy = new Proxy(target, handler);// target 是用Proxy包装的被代理对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）// handler 是一个对象，其声明了代理target 的一些操作，其属性是当执行一个操作时定义代理的行为的函数。let proxyData = new P

2021-03-26 21:01:30 500 4

原创 JavaScript 数据劫持总结

数据劫持方法最近空余时间复习了下JavaScript；做为学习总结！1、对象内自带的set和get方法数据劫持、//首先我们先定义一个对象let obj = { $name: "张三", get name(){ // 获取 name 属性时触发 //console.log("想要获取name属性"); return this.$name;// 想要让 obj 在获取name 属性时，拿到的值 }, set name(newVal)

2021-03-26 20:52:15 2579 3

转载中高级前端必须注意的40条移动端H5坑位指南

标题为了减少废话提高本文质量，对以下内容做一些约定。提及的安卓系统包括Android和基于Android开发的系统提及的苹果系统包括iOS和iPadOS本文针对的开发场景是移动端浏览器，因此大部分坑位的解决方案在桌面端浏览器里不一定有效解决方案若未提及适用系统就默认在安卓系统和苹果系统上都适用，若提及适用系统则会详细说明Webkit及其衍生内核在移动端浏览器市场占有率里达到惊人的97%，因此无需太过担心CSS3、ES6和浏览器新特性的兼容性真正的开发环境都是基于webpack构建，因此代码演示

2021-03-12 18:21:18 258

原创 nodejs中利用http创建服务

Node.js 创建的第一个应用1、引入 http 模块var http = require("http");2、创建服务器接下来我们使用 http.createServer() 方法创建服务器，并使用 listen 方法绑定 3000 端口。函数通过 request, response 参数来接收和响应数据。 const http = require('http'); http.createServer((req, res) => {

2021-03-01 19:01:43 207

原创 Node.js中fs的使用

fs的使用1. fs.stat 检测是文件还是目录 const fs = require('fs') fs.stat('hello.js', (error, stats) => { if (error) { console.log(error) } else { console.log(stats) console.log(`文件

2021-03-01 18:55:31 173

原创 js 实现拖拽（面向对象方式实现）

JavaScript面向对象方式书写拖拽类拖拽功能的实现原理：（直接拿走！）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"

2021-03-01 18:25:19 413 3

原创 JavaScript

JavaScript 高阶总结-1es 6 基础巩固1、[let](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let)2、块级作用域 if3、块级作用域-for4、let和var的区别5、常量[const](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/const)6、解构赋值 [let

2021-03-01 18:00:26 196 1

原创 webpack多页打包方案

webpack多页面打包（记录下多页打包方案）使用的node中的glob方法glob.syncconst path = require("path")const resolve = dir => path.resolve(__dirname, dir)const MiniCssExtractPlguin = require("mini-css-extract-plugin")const HtmlWebpackPlugin = require('html-webpack-plugin'

2020-10-11 20:22:55 190 2

原创 Webpack-第二集

loader：file-loader：处理静态资源模块loader：file-loader原理是把打包入口中识别出的资源模块，移动到输出目录，并且返回一个地址名称所以我们什么时候用file-loader呢？场景：就是当我们需要模块，仅仅是从源代码挪移到打包目录，就可以使用files-loader来处理，txt、svg、csv、excel、图片资源等等npm install file-loader -D案例：module: { rules: [{ test: /..

2020-09-20 22:49:17 85

原创 webpack-第一集

初识webpack文档官网网站：https://webpack.js.org/1.webpack简介webpack是一个打包模块化JavaScript的工具，它会从入口模块出发，识别出源码中的模块化导入语句，递归地找出入口文件的所有依赖，将入口和其所有的依赖打包到一个单独的文件中。是工程化、自动化思想在前端开发中的体现2、安装webpack2.1 - 环境准备nodeJs https://nodejs.org/en/版本参考官网发布的最新版本，可以提高webpack的打包速度2.2

2020-09-20 21:39:27 362

原创 webpack_的概念干货

webpack搭建01模块打包器( 打包后的代码混淆压缩过 )webpack官网文档安装环境准备：nodeJs升级到最新版本（原因：node高级性能高，webpack运行效率更高，避免产生奇奇怪怪的问题）webpack版本为最新的（4.x版本）搭建项目//一、初始化项目npm init -y//二、局部安装方式（推荐）npm install webpack webpack-cli -D//二、（不推荐）版本固定npm install webapck webpack

2020-09-20 19:59:21 80

原创 vue中如何引入指定字体并且使用

vue中如何引入指定字体并且使用步骤一：在src下建立文件夹fontsfonts下引入字体文件且建立一个css文件在css中定义字体样式@font-face { font-family: '字体名称';//组件中使用的名字 src: url('./字体路径.ttf');//引入自定义的路径 font-weight: normal; font-style: normal; }当然有很多字体时在继续增加就行了步骤二：在main.js中引入fonts中

2020-05-08 23:53:45 1151

原创 echarts在rem布局适配中字体如何适配

echarts在rem布局适配中字体如何适配rem布局固然重要；但是echarts也需要在随着rem动态改变数值：直接上代码// 字体适配FontChart(res) { //获取到屏幕的宽度 var clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

2020-05-08 23:39:34 3722

原创 h5页面在安卓手机滑动正常；在ios手机滑动卡顿问题！！！

在ios手机滑动卡顿问题！！！h5页面在安卓手机滑动正常；在ios手机滑动卡顿问题！！！为什么会卡顿？？？最近接触都项目有点多；一时间又忘记记录下自己的bug；原谅不守时，最近做了一个以vue为基础做的web移动端；由于页面篇幅比较多切html中有v-for导致页面比较长；因为不止一个页面相互跳转；而且页面中的信息回显；比如:从a页面跳转到b页面；在由b页面返回到a页面时发现在安卓手机是流程的；而在ios手机上发了bug就是页面卡住了；动不了；后来反复的查阅资料给出的解释很多；其中就有

2020-05-08 23:23:32 1030

原创通过npm小黑屏安装cnpm淘宝镜像

使用淘宝 NPM 镜像大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:npm install -g cnpm --regis...

2019-04-15 11:27:01 175 1

原创 vue脚手架一键搭建项目具体流程

Vue.js 安装1、独立版本我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script>标签引入. https://vuejs.org/js/vue.min.js2、使用 CDN 方法以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。 Staticfile CDN（国内） : https://cdn.s...

2019-04-15 11:22:31 243

原创 mate标签和一些坑

Meta基础知识：H5页面窗口自动调整到设备宽度，并禁止用户缩放页面//一、HTML页面结构<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />// width 设置view...

2019-04-11 11:35:32 1105

原创适配一直困扰着移动端的开发；实用的js方法(rem)

移动端适配(适配各种手机机型);rem字体的；这个js方法是我实际应用的实现了我想要的效果；750的;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]');...

2019-04-10 09:52:04 120

原创 ES6新特性迅速学会！！！

@ES6新特性迅速学会！！！前言ES全称ECMAScript，ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMA-417。关于ECMA的最新资讯可以浏览 ECMA news查看。ECMA规范最终由TC39敲定。TC39由包括浏览器厂商在内的各方组成，他们开会推动JavaScript提案沿着一条严格的发展道路前进。从提案到入选...

2019-04-09 13:21:11 335

come from h5

原创正则思维导图

原创 class详解以及面向对象继承