- 博客(76)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 疫情在家游戏玩腻了？那就一起来开发H5小游戏吧
前提：游戏玩腻了？作为一名合格的程序员，应该自己开发小游戏来玩，玩腻了，自己就再去开发个游戏，利用这一特点实现永动机。既可以学习，也可以娱乐。本次开发的是贪吃蛇小游戏。使用技术：html、css、原生js、部分es6语法贪吃蛇实现原理：利用绝对定位的left和top来小蛇进行移动<!DOCTYPE html><html><head> <...
2020-05-05 15:40:35
25567
108
原创 模块化开发
目前比较主流的模块化规范有一下四种：CommonJS（服务端）、AMD（外国人出品）、CMD（阿里出品）、ES6模块化（官方出品）。模块化开发解决的问题：污染全局变量js文件加载顺序模块化进化历史：阶段一：一个页面或者一个功能对应一个js文件在一开始的时候，我们前端一般都会把一个页面的js写在同一个文件，把一个功能写在同一个js文件。在小项目上可能适用，但是在一个大项目中，就得考虑js文件的加载顺序了，因为js文件是从上往下加载的，而且这种方法，都是在全局上申明变量的，有可能造成全局变量污
2021-01-05 16:05:18
277
原创 重写vue源码：vue-router的实现
1.解析vue-routervue-router的基本使用：import Vue from 'vue';import VueRouter from '../extends/my-router';import Home from '../views/Home.vue';Vue.use(VueRouter);const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '
2021-01-02 14:02:52
485
原创 重写axios核心原理
1.从基本使用去分析axios// 方式一：axios({ method: 'get', url: 'http://localhost:5000/getTest'})// 方式二：axios.get('http://localhost:5000/getTest')结论：axios可以通过传进去一个配置对象去发送ajax，或者通过axios.xxx去发起ajax。2.实现axiosclass MyAxios() { request(config) { return this.se
2021-01-01 21:58:38
745
原创 重写vue源码：Vuex的实现
1.从Vuex的用法去分析vuex的基本使用：import Vue from 'vue';import Vuex from 'vuex'; Vue.use(Vuex);export default new Vuex.Store({ state: {}, getters: {}, mutations: {}, actions: {}, },});观察基本使用得出结论：Vuex是一个插件，因为它是通过Vue.use来加载。所以Vuex或者Vuex.install是一
2021-01-01 16:05:19
229
原创 重写vue源码：Vue.use的实现
Vue.use的功能分析：Vue.use是用来加载插件用的，第一个参数是插件，第二个参数和往后参数都是是插件的自定义配置对象。加载插件，就是去执行plugin或者plugin身上的install方法。Vue.use的实现：Vue.myUse = function(plugin) { // 防止重复加载 const _installedPlugins = this._installedPlugins || (this._installedPlugins = []) const index = _in
2021-01-01 14:45:36
174
原创 常见的http请求方法
1.GET：用于请求指定页面的信息，并返回实体主体。2.HEAD：类似于GET请求，只不过只返回响应头。3.POST：用于提交资源。4.PUT：用于更新或取代原本的资源。5.PATCH：用于部分更新原本的资源。6.OPTIONS：用于查看服务器支持的http请求方法或者查看服务器性能。7.DELETE：用于删除指定资源。8.TRACE：回显服务器收到的请求，用于测试和诊断。注：post和put、patch的区别：重要概念：幂等性：就是重复的去执行每一个操作，结果都是一样的。例如：你发ge
2021-01-01 13:46:38
198
原创 前端XSS攻击和CSRF攻击
1.XSS攻击XSS攻击：（Cross Site Scripting）跨站脚本攻击。在渲染DOM树的过程中执行了不在预期内的js代码，就发生了XSS攻击。攻击样例：在一些博客网站，发表一篇文章的时候，在文章中加入<script>alert('XSS攻击')</script>这种用script标签包含着的js语句。发表成功之后，当别人访问你的这篇文章的时候，就会自动执行alert('XSS攻击')这段代码。这样就属于xss攻击。更严重的，就在script标签中，获取你的cookie
2020-12-25 14:25:44
547
1
原创 js的Proxy代理的基本使用
vue2.0是的数据响应式是基于Object.defineProperty的方式来实现的，到了vue3.0，尤雨溪就把它改成用Proxy代理的方式来实现数据响应式。Proxy的定义：代理的意思。就是你想要对数据进行操作，必须经过代理，让代理去帮你操作数据，你只需要对代理发号施令就可以了。相当于Proxy就是你的管家，你想买什么吃的，就跟管家说，管家会帮你去买。使用Proxy：const target = { name: 'wjg', age: 18}const proxy = new Prox
2020-11-14 12:03:45
3145
2
原创 Object.defineProperty的基本使用
Object.defineProperty定义：它是一个方法，用来定义对象的属性。第一个参数是对象，第一个参数是一个属性名，第三个是一个对象，对该属性的描述。const obj = {}Object.defineProperty(obj, 'name', { value: 'wjg'})console.log(obj.name) // wjg上面的操作跟一下的操作结果一样：const obj = {}obj.name = 'wjg'console.log(obj.name) // wjg
2020-11-13 16:12:57
219
原创 webpack进阶: 简易的实现打包js文件功能
步骤1.创建一个文件夹，初始化项目和安装依赖npm init -ynpm i @babel/parser @babel/traverse @babel/core @babel/preset-env -D2.在项目根目录下创建src目录，并在src中创建index.js、message.js、test.js这三个文件index.js文件：import message from './message.js';console.log('hello bundler');message.js文件
2020-11-12 21:23:54
474
原创 webpack：编写一个简单的loader
什么是loader：loader的本质就是一个function，在我们进行打包的时候，帮我们处理需要打包的文件。编写loader1.创建一个文件夹，使用npm init -y来初始化npm init -y2.安装一些开发依赖npm i webpack webpack-cli clean-webpack-plugin loader-utils -D3.创建src目录，并在src下创建index.jsindex.js内容：console.log('hello word');4.创建lo
2020-11-12 11:05:51
213
原创 webpack断点调试
在自己编写webpack的loader和plugin的时候，我们难免需要进行调试我们的编写的loader和plugin，这时候我们就可以使用webpack的断点调试了。1.在package.json中添加调试指令"debug": "node --inspect --inspect-brk node_modules/webpack/bin/webpack.js"2.在我们需要进行断点的地方加上debugger。3.执行npm run debug命令4.在谷歌浏览器中打开控制台，任意页面都行
2020-11-12 10:33:17
1375
1
原创 封装js日期格式化函数
网上有很多格式化日期的函数，你会用，但你真的知道它的原理吗？// 输入：time, fmt。fmt输入例子：'yyyy-MM-dd'或者‘yyyy年MM月dd天’或者'mm:ss'const formatDate = (time, fmt) => { // 转成日期对象 const date = new Date(time); // 由于年一般是4位，我们先特殊处理 if (/(y+)/.test(fmt)) { // 使用正则表达式匹配y的部分 fmt = fmt.re
2020-10-31 10:06:56
990
原创 React：styled-components的使用
styled-components的作用：用来在react中编写css样式，css in js1.安装yarn add styled-components2.styled-components基本使用index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './styled_component_test/01_styled_components复习';import { Theme
2020-10-24 12:52:25
307
原创 React学习：redux中间件
为什么redux需要中间件？因为我们redux中有很多数据需要异步请求，所以需要中间件帮助我们在redux中完成异步请求。1.redux-thunk中间件1.1安装yarn add redux-thunk1.2 在store中使用import { createStore, applyMiddleware } from 'redux'; // 导入应用中间件这个方法import reducer from './reducer';import thunkMiddleware from 'redu
2020-10-24 10:44:37
161
原创 React动画：react-transition-group的使用
1.安装yarn add react-transition-group2.使用CSSTransition组件import React, { PureComponent } from 'react';import { CSSTransition } from 'react-transition-group';import './CSSTransition.css'; // 导入css文件export default class App extends PureComponent { con
2020-10-23 13:13:28
257
原创 手把手教你实现Promise.all
1.Promise.all(args)的用法和用途:Promise.all(args)是一个方法来的,返回的是一个Promise实例，参数是一个数组，数组的每一项都是一个promise，等数组的每一项promise都成功resolve之后，Promise.all()才能resolve；如果有一个promise失败，那么Promise.all就会回调reject。2.预备知识，判断Promiseconst isPromise = function (promise) { return ( !!pr
2020-10-09 15:58:18
2925
原创 React中使用context来共享组件的数据
class组件中使用context：import React, { Component } from 'react';// 1. 生成一个Context，参数是共享变量的默认值const userContext = React.createContext({ nickName: 'aaa', age: -1,});class Banner extends Component { render() { return ( <div> // 4
2020-09-22 19:32:08
372
原创 webpack高级概念
webpack高级概念1.Tree shaking2.development和production模式的区分打包1.Tree shakingtree shaking是一个术语来的，通常用于描述移除JavaScript上下文中的未引用的代码。比如某个js文件中导出的某一个方法没有使用，在production模式下打包就会把这个方法移除掉。但是得注意：这个Tree shaking有时候会滥杀无辜，把我们一些需要的，但未应用得模块给移除掉的话，就会导致我们的项目会发生bug。例如：我们导入css模块的时候，
2020-09-12 16:58:28
501
原创 Babel的两种配置
第一种：正常业务代码使用：1.安装npm install --save-dev babel-loader @babel/core2.在webpack.config.js中配置module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ]}3.安装@babel/preset-env和@babel/polyfill和core-js@3npm install @babe
2020-09-06 14:04:07
1728
原创 前端HTTP相关知识点以及面试重点
HTTP知识点1.http状态码1.1状态码的五种类型1.2常见的状态码2.什么是Restful API3.常见的header3.1 header的类别：4.http的缓存4.1 缓存的类别：5.1.http状态码1.1状态码的五种类型1xxx：表示服务器收到请求2xxx：表示请求成功3xx：表示重定向4xx：表示客户端错误5xx：表示服务端错误1.2常见的状态码200：客户端发送给服务端的请求被成功处理并返回301：永久重定向。浏览器会把跳转后的地址缓存下来，下一次就不必发送这个
2020-09-03 09:26:27
201
原创 js基本数据类型、深浅拷贝
前端面试知识点1.js数据类型2.浅拷贝和深拷贝1.js数据类型值类型：string、number、boolean、symbol、undefined引用类型：object、function、array、null值类型和引用类型的区别：值类型的变量存储的是值，而引用类型的变量存储的是地址。当引用类型的赋值变量a赋值给另一个变量b，当b修改属性值的时候，a的值也会跟着改变。看例子:引用类型：var obj = { id: 1 }var newObj = objnewObj.id = 2
2020-09-02 19:53:07
317
原创 js的一些常用DOM操作
1.节点查找元素：1.根据id查找元素，只返回第一个： document.getElementById('id')2.根据类名查找元素，返回一个HTMLCollection：document.getElementsByClassName('类名')3.根据标签名来查找元素，返回一个HTMLCollection：document.getElementsByTagName('标签名')4.css选择器，返回第一个：document.querySelector('css选择器')5.css选择器，返回一
2020-08-30 10:21:42
157
原创 js异步进阶
js异步进阶知识1.promise1.1 promise的三种状态2.async/await面试题：3.js事件轮询event-loop1.promise1.1 promise的三种状态pending：等待状态，或者说是初始化状态resolving：成功状态。进入thenrejecting：失败状态。进入catch状态转变：pending → resolving 或者 pending → rejecting。只有这两种的状态转变，并且状态是不可逆的。then和catch改变状态：then里
2020-08-29 10:38:11
308
1
原创 js的变量提升、函数提升以及es6的let、const的块级作用域
1.什么叫提升？提升：就是js代码执行之前引擎会进行预编译，预编译期间就会将变量声明和函数声明提升到其对应作用域的最顶端。提升一般是对用var关键字申明的变量或函数。let、const关键字申明的没有提升。来个小例子说明一下：console.log(a) // undefinedfn() // this is fnvar a = 1function fn () { console.log('this is fn')}这段代码的执行顺序：function fn() { console.
2020-08-27 14:48:18
264
原创 js箭头函数：没有自己的this和arguments
注意：js箭头函数中，没有属于自己的this关键字，有的话都是来自于父级作用域。注意：js箭头函数中，没有arguments关键字。如果你想要获取arguments参数，就不要写成箭头函数。arguments：是一个数组，里面存放这传进函数的每一项形参。...
2020-08-26 14:58:24
1825
3
原创 实现前端响应式布局
实现前端响应式的布局的方法有很多种，下面我介绍的是使用rem跟vw/vh这两种方法来实现响应式页面。1.使用rem来实现响应式布局rem：是一个相对根元素字体大小的单位。总的来说就是一个相对单位。看到rem这个单位，很多人就会想起em这个单位，em也是属于相对单位，但是他是相对于父元素字体大小的单位。根元素是html，不是body。使用方式：html { font-size: 100px;}p { font-size: 0.16rem; }div { width: 2rem;}
2020-08-25 20:23:19
1316
原创 不为人知的margin负值的应用
margin的负值的情况分为两种：margin-left、margin-top：当这两个的属性值为负值的时候，自身会根据负值的大小来向左和上方向偏移。margin-right、margin-bottom：当这两个的属性值为负值的时候，自身的位置不会发生改变，但是会影响自己身后的元素。这两个为负值，相当于自己的宽度缩小（宽度缩小是表示自己占用的宽度变小，但是不会影响自身元素的显示。当负值到达-100%的时候，自身的就不占用宽度，如果由于宽度不够而导致的换行，就会偏移到原来的位置），导致后续的元素向自己偏移
2020-08-25 10:06:13
678
原创 vscode中微信小程序的代码智能提示
1.安装minapp插件，支持属性和标签智能提示2.使用npm在根目录安装miniprogram-api-typings和npm install miniprogram-api-typings@2.4.1npm install miniprogram-api-typingsnpm install miniprogram-api-typings@2.4.1这样就可以出现智能提示了...
2020-08-09 11:23:49
4851
原创 微信小程序的学习笔记（边学边更新）
1.微信小程序的基本目录结构：|——pages # 放置页面的目录| |——index # index页面| |——index.wxml # index| |——index.wxss| |——index.js| |——index.json|——app.js # 全局js脚本|——app.json # 全局配置|——app.wxss # 全局样式2.app.json与index.json的说明：app.json属于全局的
2020-08-08 23:07:55
230
原创 vue的$route和$router的基本认识
$route：是用来获取当前路由的一些信息的。$router：具有某些功能，相当于全局路由器，都可以用。一般用来跳转路由用的。this.$router.push()的基本用法：直接传路由地址:this.$router.push('/index')this.$router.push('/index/12') // 动态路由，参数通过params获取// query传参，相当于get传参，会在地址栏显示参数，通过query获取this.$router.push('/index?id=1') 通
2020-08-03 17:23:38
277
原创 js获取当前页面的滚动高度
let scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop因为由于浏览器兼容问题，我们就用了三个api，反正最后肯定有一个有返回值的。
2020-08-01 17:55:40
3035
原创 vue-awesome-swiper轮播图插件的基本使用
1.安装vue-awesome-swipernpm i vue-awesome-swiper@3.1.3或者yarn add vue-awesome-swiper@3.1.3为什么要安装3.1.3版本的vue-awesome-swiper插件？为什么不装最新版的？答：我在开发项目的时候，使用了最新版的vue-awesome-swiper插件的时候，发现最新版(swiper6.0)的一些文件丢失、不能自动播放等bug，根据官方文档以及百度还是没能解决以上bug，所以推荐各位先使用稳定版。2.导
2020-07-31 09:24:47
393
原创 js的padStart、padEnd、toFixed方法
1.字符串的padStart、padEnd方法：'a'.padStart(3,'1') // 结果：11a'a'.padEnd(3,'1') // 结果：a11'a'.padStart(3,'1'):当字符串长度小于3的时候，就在开头填充1。大于等于3就返回原本的字符串'a'.padEnd(3,'1'):当字符串长度小于3的时候，就在结尾填充1。大于等于3就返回原本的字符串2.Number类型的toFixed方法var a = 1.66var b = 1a.toFixed(2) //
2020-07-30 10:41:22
235
原创 vue项目根据开发环境来配置对应的服务器地址
1.在package.json中设置开发环境 "scripts": { "serve": "vue-cli-service serve --mode development", "test": "vue-cli-service serve --mode test", "build": "vue-cli-service build --mode production", "lint": "vue-cli-service lint" },–mode developme
2020-07-28 22:16:44
1082
原创 vue.comfig.js的项目中的一些基本配置
const path = require("path");function resolve (dir) { return path.join(__dirname, dir)}module.exports = { configureWebpack: { resolve: { alias: { api: resolve('/src/api'), base: resolve('/src/
2020-07-27 15:33:29
196
原创 力扣65：有效数字。使用js的图来解决
题目：前言：这道题的难度是困难的级别，但是如果你选择对的数据结构来的话，这道题其实很简单的。下面我说一下使用图的数据结构来解决这道题。解题思路：1.我们可以把输入的字符串的字符看作一个路标，根据这些路标来走。如果根据这些路标走到的终点是合法的，那么我们就返回true，否则就返回false。2.绘制图。3.说明上述的图：我们开始的时候是从0出发，如果是遇到空格，我们就自身循环，不移动，如果遇到数字0-9我们就移动到2这个地方。图的移动方法就这样。4.把图变成js的对象： const gr
2020-07-22 16:53:53
179
原创 vue项目中简单使用create-keyframe-animation插件
1.安装npm i create-keyframe-animation2.导入import animations from 'create-keyframe-animation'3.在transition的enter或leave钩子函数中使用 // 定义动画内容 const animation = { 0: { transform: `translate3d(${x}px,${y}px,0) scale(${scale})` },
2020-07-14 21:06:45
639
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人