文章
文章平均质量分 79
so_#
活到老,学到老
(GitHub:https://github.com/SojinEvo)
展开
-
JS 同步异步,宏任务和微任务
本人看到各个文章的知识概念,结合自己的理解记录一下把,可能有些概念理解的不是很对。望各大佬指出知识补充1、JavaScript是单线程,而浏览器是多线程。2、浏览器包括的线程有:事件触发线程、定时器触发线程、异步http请求线程、GUI渲染线程3、异步任务区分了宏任务和微任务(当然所有的JS代码也可以看作宏任务)4、栈符合数据结构中的先进后出,队列符合先进先出5、创建Promise或async的过程是一个同步操作,reslove.then或await阻塞之后的内容才是异步同步任务:因为Ja原创 2021-07-14 15:59:53 · 497 阅读 · 6 评论 -
前端性能优化 - 性能篇
常用性能优化。原创 2021-06-15 01:10:02 · 426 阅读 · 0 评论 -
用阿里云服务器搭建个人博客(宝塔面板+wordpress)半小时上手
以下文章是本人,以前小白时候搭博客的方式,对新手来说极其容易上手,因最近又购买了服务器,想着再换个方式去搭建,另外一个方式是用Vuepress 搭建的博客(参考我另外一篇文章)云服务器的话,根据自己的需要购买,如果只是简单的发发文章图片,视频等,网站访问量不高的话,买个1核2G1M的配置也能够用。当然,如果对响应速度等体验比较看重的话,可以买个稍微高点配置的,比如2核4G的这样的。操作系统建议选择CentOS7版本下面说说用阿里云服务器建立个人网站(以WordPress为例)的具体流程:因为这篇文原创 2020-11-20 16:09:50 · 3373 阅读 · 1 评论 -
create-react-app 创建的工程中使用 antd 组件(使用 craco 配置)
组件按需打包(ant-design)有的组件有自己的css样式和js特效,那么原来的做法是按照一键导入,需要import 一个总的css包或js包,但这样有点浪费资源。所以可以进行如下配置,实现自动用哪个组件按需要导入相应的css或js包1、下载依赖包yarn add antdyarn add @craco/cracoyarn add craco-less'请注意':下面这个依赖包在2.0版本后已经废弃yarn add react-app-rewired customize-cra原创 2020-11-17 19:14:40 · 854 阅读 · 0 评论 -
Redux 文章,助你了解 Web 架构其中的一种解决方案
redux设计思想Redux 的设计思想很简单,就两句话。(1)Web 应用是一个状态机,视图与状态是一一对应的。(2)所有的状态,保存在一个对象里面。学习文档英文文档: https://redux.js.org/中文文档: http://www.redux.org.cn/Github: https://github.com/reactjs/reduxredux 是什么?redux是一个独立专门用于做状态管理的JS库(不是react插件库)它可以用在react,原创 2020-11-16 20:47:26 · 371 阅读 · 0 评论 -
React 入手篇 - 实战
React此文章个人作为了解学习,应用类型和代码示例多概述用于构建用户界面的JavaScript库(只关注View)由 Facebook 开源(1) 英文官网: https://reactjs.org/(2)中文官网: https://doc.react-china.org/特点1、Declarative(声明式编码)以声明式编写 UI,可以让你的代码更加可靠,且方便调试。2、Component-Based(组件化编码)组件逻辑使用 JavaScript 编写而非模版,因此原创 2020-11-15 12:02:41 · 626 阅读 · 1 评论 -
Vue 一套构建用户界面的渐进式的框架 (Cli3 篇~)
脚手架概述Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统一个丰富的官方插件集合,集成了前端生态中最好的工具。一套完全图形化的创建和管理 Vue.js 项目的用户界面Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。用于快速生成 Vue 项目基础架构 , 其官方网址 : 'https:/原创 2020-11-05 21:13:28 · 1663 阅读 · 3 评论 -
Vue 一套构建用户界面的渐进式的框架 (Webpack篇~)
友情提示:大部分loader可以在webpack官网中找到,并且学习对应的用法或直接copy配置。参考webpack中文网址:https://www.webpackjs.com/概述是一个现代化的JavaScript应用的静态模块打包工具webpack其中一个核心就是让我们能进行模块化开发,并且会帮助我们处理模块间的依赖关系(处理好生成浏览器能识别的内部代码,更好的高效让浏览器识别)像使用前端模块化的一些方案:AMD、CMD、CommonJS、ES6(浏览器对这些规范有的不支持,但用原创 2020-11-05 17:08:09 · 1265 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架 (路由篇~)
此块知识内容基础,没有官方文档全,仅供参考概述(了解)单页面富用阶段(SPA)SPA 主要的特点是在前后端分离(后端只提供API来返回数据,前端通过Ajax获取到的数据渲染到页面)的基础上加了一层前端路由也就是由前端来维护一套路由规则前端路由的核心:改变URL,但页面不进行整体的刷新(俩种方法:1、URL的hash 2、H5的history模式:pushState、replaceState)vue-router目前前端流行的三大框架,都有自己的路由实现:Angular的ngR原创 2020-11-04 20:45:11 · 1200 阅读 · 0 评论 -
NodeJs 笔记补充
NodeJS知识补充Node js 和 JavaScript区别都基于ECMAScript标准的实现和扩展ECMAScript 定义语法,写js和node都要遵守语法包含了:变量定义、循环、判断、函数、原型、原型链、作用域、闭包、异步。ECMAScript定义了语法,但是它不能操作DOM,不能监听click事件,不能发送ajax请求,不能处理http请求,不能操作文件,只有它,几乎做不了任何实际的项目JavaScript(完成浏览器端任何操作):ECMAScript + WebAPI原创 2020-11-04 10:40:56 · 1397 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架
此文章知识来源:哔哩哔哩视频 codewhy + Vue官网 + 菜鸟教程此文章内容:基础语法+代码+图片+demo文章目录------------->知识了解篇------------->生命周期篇------------->模板语法篇------------->计算属性与监听属性篇------------->条件与循环篇------------->事件监听篇------------->表单篇------------->组件篇--.原创 2020-11-04 10:25:40 · 2062 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架(组件篇★~)
概述将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树语法'Vue2.x 版本之前的写法:'组件使用三个步骤:创建组件构造器(调用Vue.extend())注册组件(Vue.component())使用组件(在Vue实例的作用范围使用组件,使用自定义的组件名)例如:<!DOCTYPE html>原创 2020-11-04 10:02:32 · 1259 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架(表单篇~)
表单v-model可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源原创 2020-11-02 14:30:50 · 2184 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架(事件监听篇~)
事件监听使用 v-on作用:绑定事件监听器语法糖:@参数:eventv-on 参数1、若方法不需要额外参数,那么方法后的() 可以不添加例如:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-11-02 08:58:51 · 1354 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架(条件与循环篇~)
条件语句条件判断<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>条件语句</title></head><body> <div原创 2020-11-02 08:51:46 · 1530 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架(计算属性与监听属性篇~)
计算属性概述计算属性是vue实例中的一个配置选项:computed通常里面都是一个个计算相关的函数,函数里头可以写大量的逻辑,最后返回计算出来的值即我们可以把这些计算的过程写到一个计算属性中去,然后让它动态的计算。优点:相比methods,不用调用方法,而是直接访问计算后的属性,可读性强些。计算属性有缓存所以性能比methods高例如:<body> <div class="app"> <h2>{{message}}&l原创 2020-11-02 08:49:49 · 1330 阅读 · 0 评论 -
ES6 复习,知识补充
ES6知识补充概念ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等等,而 ES2015 则是正式名称,特指该年发布的正式版本的语言标准。提到 ES6 的地方,一般原创 2020-10-29 18:41:50 · 1398 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架(模板语法篇~)
模板语法代码规范:最好每次缩进俩个空格更符合规范哟~创建Vue实例传入的optionsel类型:string | HTMLElement作用:用于挂载要管理的元素节点,值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数。 data类型:Object | Function(组件当中data必须是一个函数)作用:Vue实例对应的数据对象methods类型: {[key:string]:Function}作用:定义属于Vue的一些方法,可以在其他地方调用,也原创 2020-09-25 16:35:25 · 3421 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架(生命周期篇~)
个人理解可能存在偏差,仅供参考~事物从诞生到消亡的整个过程每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。首先看一张图吧~这是官方文档上的图片:钩子就好像是把人的出生到死亡分成一个个阶段,你肯定是在出生阶段起名字,而不会在成年或者死亡的阶段去起名字。或者说你想在出生阶段去结婚,也是不行的。组件也是.原创 2020-09-24 17:22:36 · 2106 阅读 · 0 评论 -
Vue 一套构建用户界面的渐进式的框架(知识了解篇~)
知识了解概念Vue是一个渐进式的框架。渐进式概念?1、可以将Vue作为应用的一部分嵌入其中,带来更丰富的交互体验2、可以将更多的业务逻辑使用Vue实现3、如 Core+Vue-router+Vuex,也可以满足各种各样的需求特点Vue很多特点和Web开发中常见的高级功能1、解耦视图和数据2、可复用的组件3、前端路由技术4、状态管理5、虚拟DOM安装1、直接CDN引入<!-- 开发环境版本,包含了有帮助的命令行警告--><script src="原创 2020-09-24 00:58:32 · 8384 阅读 · 0 评论 -
Vote System 用户登录判断(Cookie-session)
Cookie-session存储在后端中,所以进行后端的设置和逻辑的处理。最后只需要返回前端code码和msg便可以。1、导包const express=require('express')const mysql=rquire('mysql')const cookieSession = require('cookie-session');const cookieParser = require('cookie-parser')const app=express()//配置MySQL连原创 2020-09-20 21:02:40 · 2460 阅读 · 0 评论 -
Fetch API
概述fetch是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装,而是原生js。Fetch函数就是原生js,没有使用XMLHttpRequest对象。为了代替Ajax是ES2018规范中新增的API,所以浏览器支持度不是特别好语法1、第一个参数是URL:2、第二个是可选参数,可以控制不同配置的 init 对象3、使用了 JavaScript Promises 来处理结果/回调:fetch(url).then(respon原创 2020-09-10 17:13:11 · 2841 阅读 · 0 评论 -
Axios库
Axios库基本概述Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。特性:从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF使用 npm安装axios:$ npm install axios语法请求方式get/post/head/delete/put/option原创 2020-09-10 17:05:57 · 2939 阅读 · 0 评论 -
解决跨域访问
同源策略由Netscape公司引入浏览器。目前,所有浏览器都实行这个政策。目的是为了保证用户信息的安全,防止恶意的网站窃取数据若非同源,会有三种行为限制:1、Cookie、LocalStorage和indexDB无法读取2、DOM无法获得3、AJAX请求不能发送同源指的是:协议相同、域名相同、以及端口相同。互联网默认原则(不允许跨域访问)常见跨域HTML 页面中一些允许指定路径的元素具有跨域特性:<link>元素<script>元素<原创 2020-09-10 17:04:50 · 2429 阅读 · 0 评论 -
Ajax 异步交互
基本概述同步交互类似于排队就是指发送一个请求,需要等待返回,然后才能够发送下一个请求异步交互异步交互的区别在于同步交互需要等待结果,而异步交互不需要等待。所谓异步交互,就是指发送一个请求,不需要等待返回,随时可以再发送下一个请求。同步交互与异步交互区别在于:同步需要等待结果,而异步不需要等待结果异步交互的优势异步交互相比同步交互的优势主要具有以下几点:1、用户操作无须像同步交互必须等待结果。2、异步交互对带宽造成的压力相比同步交互更小。3、异步交互只需与服务器端交换.原创 2020-09-07 08:21:13 · 2752 阅读 · 0 评论 -
网络基础知识
什么是HTTP协议超文本传输协议,是服务器和客户端之间,传输超文本的传送协议。HTTP工作流程客户端连接到Web服务器,建立TCP连接;客户端发送http请求;服务器接收请求并返回http响应;释放http连接;客户端解析html。HTTP请求get示例GET /562f25980001b1b106000338.jpg HTTP/1.1Host img.mukewang.comUser-Agent Mozilla/5.0 (Windows NT 10.0; WOW64)原创 2020-09-06 09:47:38 · 2866 阅读 · 0 评论 -
Node.js实现,英雄页面管理系统项目案例
需要知识:1、Node.js基础用法2、express模块使用3、爬虫的简单使用4、MySQL创建5、ES6语法6、HTML、CSS、jQuery、ajax、bootstrap、js 基础语法7、cookie使用以上知识可以参考我之前写过的文章效果图展示一、爬虫入库爬取王者荣耀的英雄信息存入数据库,参考我的文章 --> 爬取数据入库二、API设计三、源码下载项目案例链接(https://jine.oss-cn-beijing.aliyuncs.com/hero.r.原创 2020-07-10 17:59:38 · 2562 阅读 · 0 评论 -
Javascript 中的神器 — — Promise(解决回调地狱)
占位,待更新原创 2020-07-09 16:56:02 · 2495 阅读 · 0 评论 -
Node.js 设置cookie,和其基础概念的了解,及解决浏览器cookie跨域
占位,稍后更新ing原创 2020-07-09 16:51:37 · 2601 阅读 · 0 评论 -
No的.js 实现爬虫,王者荣耀英雄信息的爬取并存储到数据库中
占位,稍后更新原创 2020-07-07 11:22:14 · 2849 阅读 · 0 评论 -
Node.js 实现爬虫,爬取指定页面的所有美女图片并存储到数据库中
为了减少代码量和提高效率,这里不用内置模块去写,而是引用了第三方模块 mysql-ithm(数据库简易版操作模块) 和 crawler(爬虫模块)最好先建好数据库(解释原因在代码最后),而且还需要修改代码中的数据库密码可以爬取你想要的数据,这里只是为了吸取读者的兴趣,所以去爬美女图片 (⊙o⊙)…需要具备基础知识:jQuery、ES6语法,Node.js,SQL语句 代码如下//导入模块const hm=require('mysql-ithm')const Crawler = re.原创 2020-07-07 02:49:18 · 2613 阅读 · 0 评论 -
Node.js 模块化的操作,简单明了的代码帮助你明白后端的实现和前端之前的交互,及解决跨域等问题
内置模块使用1、导包const fs=require('fs');2、调用unlink删除文件方法fs.unlink('./tmp/hello.txt',(err)=>{ if(err) throw err; console.log('已成功删除 /tmmp/hello')})-----------------------------------------------------------------------------------------文件读取原创 2020-07-06 00:29:19 · 2845 阅读 · 0 评论 -
学习Node.JS 前基础知识的了解,以及node中的单线程-非阻塞IO 知识概述
Node概述1. node.js 是一个开发平台,就像Java开发平台、.Net开发平台、PHP开发平台、Apple开发平台一样。何为开发平台?有对应的编程语言、有语言运行时、有能实现特定功能的API (SDK: Software Development Kit)2.该平台使用的编程语言是JavaScript 语言。3. node.js 平台是基于Chrome V8 JavaScript 引擎构建。4.基于node.js 可以开发控制台程序(命令行程序、CLI程序)、桌面应用程序(GUI)原创 2020-07-01 18:40:21 · 1961 阅读 · 0 评论 -
学习node.js前,浏览器的一些工作原理知识的补充
浏览器概述1、人机交互(UI)2、网络请求部分(Socket)3、JavaScript引擎(解析执行JavaScript)4、渲染引擎(渲染HTML,CSS)又叫排版引擎或浏览器内核5、数据库存储(cookie、HTML5的本地存储Localstorage、SessionStorage)渲染引擎主流的渲染引擎有Chrome浏览器:Blink引擎 (WebKit的一个分支) .Safari浏览器:WebKit引擎,(windows版本2008年3月18日推 出正式版,但苹果已于2012年7原创 2020-07-01 18:38:16 · 1886 阅读 · 0 评论 -
jQuery 封装原理,上图+讲述 通俗易懂
图片 讲解(function(window,undefind){ function jQuery(){ return new jQuery.prototype.init() } jQuery.prototype={ constructor:jQuery, init:function(){ console.log("初始化已完成") } } jQuery.protot原创 2020-06-29 17:16:19 · 2239 阅读 · 0 评论