大白话程序猿-CSDN博客

原创 react实战记录系列（一）

先看一张图，代表我们的这次实战的文件结构文件配置信息1、入口的index.js文件import React from 'react'; // 引入reactimport ReactDOM from 'react-dom'; // 引入react-domimport {BrowserRouter} from 'react-router-dom' // 引入react路由，这里我们是用BrowserRouterimport 'antd/dist/antd.css'; // 引入antd的cs

2020-05-24 20:42:41 228

原创前端性能优化之 --- 防抖&节流

今天我们的目标是能够手写防抖&节流函数防抖概念：触发事件后在 n 秒内函数只能执行一次如果在 n 秒内又触发了事件则重新计算函数执行时间我们什么时候需要防抖函数来优化呢？高频触发的事件，比如我们会狂点按钮，疯狂移动等 // 需要防抖处理 let box = document.querySelector('.box') box.onmousemove = function(e){ box.innerHTML = e.clie

2020-08-16 23:23:59 360

原创 Promise 专题二

这是我们上一章产出的代码，不了解的童鞋先简单看一看，了解了解class MyPromise { constructor(handle){ this.status = 'pending'; this.value = undefined ; // this.resolveFn = null; // this.rejectFn = null; this.resolveFnQueue = []; this.r

2020-08-15 04:41:43 214

原创 Promise 专题一 promise的三种状态以及resolve，reject，then的实现

PromisePromise 是面试的高频考点，了解原理，无论怎么问都难不到你，今天我们来聊一聊它我们先来了解一下什么是Promise一、Promise是异步编程的一种解决方案二、Promise拥有的三种状态 <script> // promise 系统预定好的 // 三种状态 /* 成功：fulfilled (resolved) * 失败：rejected * 等待

2020-08-14 19:30:00 2436

原创常见信息记录01

一、使用 promise 完成一个红黄绿灯一秒一闪的/** * * 使用 promise 实现一个红黄绿三灯 1秒一闪的效果 * *//** 三个方法分别实现了黄灯绿灯红灯*/function red(){ console.log('red')}function green(){ console.log('green')}function yellow(){ console.log('yellow')}function lignt

2020-07-07 16:57:44 153

原创 Canvas记录01

Canvas记录01实现基本绘图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>

2020-07-03 15:40:58 206

原创使用 node+vue+ts 开发一个小app

使用 node+vue+ts+mysql 开发一个小app前端采用的是 vue及vue相关技术栈后端采用的是 nodejs技术栈nodejs采用的是js核心语法，对于前端出身的人更友善一些数据库使用的是 mysql，管理工具使用的是 navicat数据库从数据库入手我们这里使用的模块是 sequelize-cli sequelize sequelize-typescript mysql2npm i sequelize-cli -dnpm i sequelizenpm i mysql2

2020-06-21 00:36:00 836

原创随手小记之webpack使用一

这工具那工具不如一个webpack工具普通的模块化开发，浏览器是不会识别的，都需要我们来打包进行模块化处理那webpack是干什么的呢？简单来说就是来帮助我们来处理文件的项目初始化应用webpack之前先初始化一下我们的项目npm init -y如何下载使用webpack这里推荐使用npmnpm i webpack webpack-cli -d不同的项目可能需要不同的webpack版本，最好每个项目都配置单独的webpack (所以-d)webpack-cli是什么熟悉vue或者r

2020-06-03 17:31:39 207

原创 nodejs koa

nodejs 已经是前端通往全栈的必经之路，美好的一天就是代码一篇又一篇今天学习一下koa及koa周边1丶什么是Koa简单来说KoaJS是基于NodeJs的Web开发框架使用原生node开发亦不是不可，但是相对于来说非常复杂，koa给我们简化了很多，举个例子利用原生node起一个http服务const http = require('http') //引用内置的http模块const server = http.createServer((req,res)=>{ res.end('hel

2020-06-01 15:56:53 367

原创记录一篇如何使用sass快捷开发css

首先呢，说一说什么是sassSass (英文全称：Syntactically Awesome Stylesheets）Sass 是一个 CSS 预处理器。是 CSS的扩展语言优点1、减少 CSS 重复的代码2、节省开发时间3、完全兼容所有版本的 CSS4、有规则、变量、混入、选择器、继承、内置函数等等特性5、Sass 会生成良好格式化的 CSS 代码，易于组织和维护安装sass执行npm的安装操作npm install -g sass //采用全局安装的方式当安装完，打开我们的

2020-05-25 23:04:50 295

原创在React的脚手架中初次遨游

环境已经搭建好了，那还等什么呢，赶紧动手尝试吧一定要掌握好组件化的开发思想，原来的js文件可能一写就是成千上万行的代码，找个bug出来费老半天劲了，组件化虽然使我们现在写的js文件多了，但是结构也清晰了，看着也让人舒畅，找东西的思路也更加清晰了，真的是太丶丶好用了首先清理一下文件，src文件夹只保留 index.js和App.js 对其他的文件我们毫不客气的全部删除，不要手下留情哦！！！然后将index.js和App.js整理如下简要说明：组件分为类组件和函数式组件两种，避免不了我们以后工作会遇

2020-05-15 15:01:09 193

原创 React 脚手架开发初下载使用规则

人嘛，总要是进步的，不然可就跟不上社会的脚步了接下来我们正式的进入我们 react 脚手架的环节首先我们需要下载这个 react 脚手架npm i create-react-app -gnpm老生长谈的问题了这里我们是 -g 也就是全局下载，为了我们使用方便已经开始下载了，经历几分钟漫长的等待我们就可以使用脚手架了下载完毕之后，我们就可以创建我们的第一个项目了创建一个名为 firstapp 的项目操作指令 create-react-app firstapp脚手架正在帮我们

2020-05-14 16:13:42 272

原创 React基础的补充知识点

上一篇文章我们讲述了如何使用React在浏览器上进行一些基本的输出，本篇内容作为补充，讲解一下我们常用的数据格式（数组，json）如何在React里任意的输出首先开始我们的三部曲操作（引包建容和输出）话不多说，上代码引包<script src="js/react.js"></script><script src="js/react-dom.js"></script><script src="js/babel.js"></scri

2020-05-14 15:23:21 310

原创 React的初体验

读过我的上一篇文章，大家应该对React的有了点小小的认识也带着小小的疑问，我个人认为，读的再多说的再好也不如实际上手练一练，俗话说得好真金不怕火炼，敲上那么一敲，走上正轨 let‘s Go万丈高楼平地起，今天我们就学习一下怎么像平常开发似的引入react互联网的资源还是很丰富的，我们找到下面的几个文件<script src="js/react.js"></script><script src="js/react-dom.js"></script>&

2020-05-14 14:26:44 179

原创 React的初识

*ReactReact 是Facebook开发的一款JS库1. 为什么开发一个react呢？Facebook认为MVC无法满足他们的扩展需求，由于他们非常巨大的代码库和庞大的组织，使得MVC很快变得非常复复杂，每当需要添加一项新的功能或特性时，系统的复杂度就成级数增长，致使代码变得脆弱和不可预测，结果导致他们的MVC正在土崩瓦解。认为MVC不适合大规模应用，当系统中有很多的模型和相应的视图时，其复杂度就会迅速扩大，非常难以理解和调试，特别是模型和视图间可能存在的双向数据流动。（抛出来个砖----&gt

2020-05-14 12:41:21 216

转载学习VUE的第二天，指令的学习

我们已经初识了vue，了解了什么是vue，接下来我们学习一些vue的基本指令。首先我们先来达成一种共识，vue的指令都是v-开头，因为我们学习的就是vue鸭!!!① v-once我们慕名思义，once 一次的意思，所以呢v-once代表的就是只执行一次的意思。我们来看看代码实例<div id="app" v-once>{{msg}}</div><scrip...

2020-02-28 20:06:26 169

原创初识VUE的第一天

在第一篇博客的过度下，让我们正式进入干货阶段，希望对初识vue并将vue当作框架来使用的童鞋带来来一些基本的过渡与认识。首先我们来认识一下vue，什么是vue？一句话简明了当的说，vue—>构建用户界面的渐进式框架对于想了解全家桶的童鞋也不要着急，在后续的更新中都会表达出来。我们在官网下将当前最新的vue下载下来cnpm i vue -save接下来就是我们再熟悉不过的 “引...

2020-02-26 21:11:41 171

Jackmic_007的博客