2020年12月_xiaobangsky

12月 11月 09月 08月

原创 Node.js了解

Node.js了解介绍Node.js技术架构图示bindingsNode.js工作流程图示libuv发展背景功能V8功能注意Event LoopEventLoopEvent Loop图示图示重点阶段重点关注Node API文档Node.js总结介绍Node.js不是WEB框架Node.js不是WEB后端框架，不要将它与Flask或者Spring对比Node.js不是后端的JS不要把Node.js与Python或者PHP对比是一个平台将多种技术组合让JS能调用系统接口，开发后端应用

2020-12-27 12:52:08 136 1

原创 React Hooks浅析

React Hooks浅析代码分析实现React.useState多个useState的用法图示总结useRefuseContext总结代码分析const React = window.React;const ReactDOM = window.ReactDOM;const App = props=>{ const [n,setN] = React.useState(0); const onClick = ()=>{ setN(n+1); }

2020-12-26 15:41:39 153

原创 React组件学习(三)

React组件学习[三]函数组件函数组件代替class组件面临两个问题没有state没有生命周期自定义 Hook 之 useUpdate函数组件代码示例const Hello = (props)=>{ return <div>{props.msg}</div>}const Hello = props=> <div>{props.msg}</div>function Hello(props){ return <d

2020-12-26 12:30:43 70

原创 React组件学习(二)

@TOCClass组件先来学下英语，方便后面使用这些术语derived:导出的，派生的 render:渲染super class:超类，父类 property:属性state:状态 mount:挂载创建Class组件的方式ES5方式（过时）//由于ES5不支持class,才会有这种方式const React = window.React;const ReactDOM = window.ReactDOM;const App =

2020-12-26 11:27:17 91

原创 React 组件学习（一）

React 组件学习（一）组件React两种组件函数组件类组件的理解代码示例添加props(外部数据)添加state(内部数据)类组件注意事项函数组件注意事项复杂的state事件绑定类组件的事件绑定React 和Vue的对比共性差异组件//React组件const Div = ()=>React.createElement('div'..);能跟其他物体组合起来的东西就是组件就上述代码示例而言，一个返回React元素的函数就是组件在Vue里面，一个构造选项就是一个组件React两种

2020-12-25 00:22:31 110

原创 React初体验

React初体验React初体验React的引入CND引入通过webpack引入React新手可以用create-react-appReact元素和函数组件React元素()=> React元素JSX使用JSX的注意事宜JSX的条件判断JSX的循环JSX的总结React的引入CND引入代码示例 <body> <div id="app"></div>  <script src="htt

2020-12-24 22:58:30 124 1

原创 Vue Router

Vue RouterVue Router什么是路由先说说路由器前端路由前端实现路由的思路代码示例hash模式history模式memory模式三种路由的优缺点hash模式history模式memory模式Vue RouterVue Router什么是路由先说说路由器前端路由路由的概念：通过互联的网络把信息从源地址传送到目的地址的活动。通常由路由表来控制。路由的作用：分发请求。路由表：存储路径的表。路由器：就是分发请求的硬件图示分析：前端实现路由的思路代码示例hash模式&l

2020-12-22 23:39:42 81

原创 Vue表单和v-model

Vue表单和v-modelVue表单介绍一些form表单中的基础组件用法inputtextareacheckboxradioselectform修饰符.lazy.number.trimv-model代码示例自定义input总结ant-design-vue的使用Vue表单主要是按照Vue的文档，进行CRM操作，文档链接文档链接介绍一些form表单中的基础组件用法form表单中有哪些基本组件，如：input/textarea/checkbox/radio/select/forminput//ht

2020-12-22 00:45:17 305

原创 Vue的进阶属性

Vue的进阶属性Directives(指令)自定义指令代码示例directiveOptions指令的作用mixins(混入)【其实就是复制】作用extends(继承)作用provide(提供)和inject(注入)作用代码示例Directives(指令)自定义指令代码示例import Vue from "vue";import App from "./App.vue";Vue.config.productionTip = false;//声明一个全局指令Vue.directive("y",

2020-12-21 07:21:34 120 1

原创 Vue的模板、指令与修饰符

Vue的模板、指令与修饰符Vue的模板模板template三种写法Vue完整版，写在HTML里Vue完整版，写在选项中Vue非完整版，配合xxx.vue文件模板总结Vue的指令（Directive）指令Vue的修饰符代码示例有些指令支持修饰符修饰符列表Vue的模板模板template三种写法Vue完整版，写在HTML里<div id="app"> {{n}} <button @click="add">+1</button></div>

2020-12-21 06:02:43 166

原创 Vue的computed和watch

Vue的computed和watchcomputed(计算属性)用途代码示例缓存watch(监听)用途代码示例immediate和handler的用法deepcomputed(计算属性)用途被计算出来的属性就是计算属性代码示例// 引用完整版 Vue，方便讲解import Vue from "vue/dist/vue.js";Vue.config.productionTip = false;new Vue({ data: { user: { email: "12232

2020-12-19 17:33:48 133 2

原创 Vue数据响应式

Vue 数据响应式图示理解Vue数据响应式getter和setterObject.defineProperty代理和监听代理（设计模式）监听总结Vue data中的bugVue.set 和 this.$set作用举例Vue中的数组变异数组的变异方法有7个图示理解Vue数据响应式const myData = { n: 0};console.log(myData);const vm = new Vue({ data: myData, template: `<div>{{n

2020-12-19 12:26:44 150 1

原创 Vue学习笔记（一）

Vue学习笔记Vue实例Vue实例图optionsel-挂载点el写在实例里面$mount挂载data-内部数据data用对象形式体现data用函数形式体现methods事件处理函数普通函数components生命周期钩子props-外部数据Vue实例Vue实例图optionsel-挂载点el写在实例里面$mount挂载data-内部数据data用对象形式体现data用函数形式体现methods事件处理函数普通函数components生命周期钩子props-外部数据Vue实例

2020-12-19 00:57:00 310 4

原创初识Vue

Vue的历史读做view，意为MVC中的VMVC中的V是Vue的重点，M和C则被简化Vue你可以认为它是一个MV*框架，为啥是MV*框架，从Vue的发展来看，它首先是一个MVM的框架，到后来它演变成了一个MVC框架2013年，0.6版，0.7版2014年，0.8~0.11版本2015年，1.0版本（MVM框架）2016年，2.0版本（MV*框架）2019年，2.6版本2020年，3.0版本Vue的开发者尤雨溪Linkedin主页github主页个人域名主要作品：Vu

2020-12-17 23:47:47 103

原创 webpack使用详解(二)

webpack历史前端工具的极速发展grunt打包工具，速度太慢，快死了gulp打包工具，速度可以，但没webpack繁荣require.js 快死了sea.js 死了Browserify 已经挂了与webpack竞争的工具Rollup比webpack的打包体积小但生态不够丰富适合库的开发-Parcel比webpack配置简单适合demo学习webpack做了什么？webpack loader和 plugins翻译：loader = 加载器 plugi

2020-12-17 22:18:26 117

转载 webpack使用讲解（一）

安装webpack终端查看版本：npm info webpack命令安装：npm i -g webpack@4 webpack-cli@3本地预览：webpack -dev -serverwebpack转译成jsnpm init -ynpm install webpack webpack-cli --save-dev新建src/index.js 放上console.log(‘hi’)./node_modules/.bin/webpack --versionnpx webpack 得

2020-12-14 23:51:26 266

原创我对MVC的理解

前言我对于MVC的理解，应该是从大学开始学习JAVA的时候开始的。那个时候ssh三大框架还比较流行。从数据库建表，到前端和后台的开发，其中印象最深的就是后台创建一张表的时候，JAVA中的Hibernate建立表的实例对象，这就是像一个数据模型一样，然后我们会建立一些Sevice的服务，这些服务，可以利用接口类定义，然后到接口类的实现类（ServiceImpl）来进行表数据的增删改查，到前端的话，就是展示数据。那个时候，就感觉这就是一个MVC的模型。后来，参加了工作，由于工作的需要，转向了前端，2015年

2020-12-13 23:22:00 143

原创前端跨域（跨域、CROS、JSONP）

跨域指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。特别注意：不同源的页面之间，不准相互访问数据同源策略同源定义源window.origin或location.origin 可以得到当前源源 = 协议 + 域名 +

2020-12-13 14:26:53 400

转载 JavaScript之axios

Axios 作弊表（Cheat Sheet）GET 请求//get请求, 字符串请求axios.get('/user?ID=1234').then((response)=>{ console.log(response);}).catch((error)=>{ console.log(error);})//get请求，param请求axios.get('/user',{ params:{ ID:12345 }}).then((resp

2020-12-06 19:51:21 1623

原创 Promise对象

Promise的含义Promise 是目前前端解决异步问题的统一方案所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理特点对象的状态不受外界影响【1】.Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）【2】.只有异步操

2020-12-06 19:21:19 120

原创 jQuery的ajax

总结一句话总结：ajax函数中层级关系如下：//最底层的封装方式：$.ajax();//第二层：.load(),$.get(), $.post()//最高层：$.getscript()和$.getJSON();serialize()方法的作用是什么（最后生成的序列化字符串长什么样）使用serialize()方法序列化表单元素值使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求，它的调用格式如下：$

2020-12-06 18:39:22 59

原创 JavaScript之AJAX

AJAX(Async JavaScript AND XML)用JS发送请求和接收响应，这就是AJAX的全部内容AJAX是浏览器上的功能浏览器可以发送请求，接收响应浏览器在window上加一个XMLHttpRequest函数用这个构造函数（类）可以构造出一个对象JS通过实现它来发送请求，接收响应AJAX应用的四个步骤创建XMLHttpRequest对象（全称是XMLHttpRequest）调用对象的OPEN方法监听对象的onload&onerror事件，当然用onreadys

2020-12-06 16:09:09 126

转载 HTML5本地存储localStorage与sessionStorage详解

本文转自本地存储localStorage与sessionStorage详解文章目录前言 HTML API 基本使用方法作用域生存期数据结构过期时间容量限制域名限制异常处理如何测试用户当前浏览器是否支持localstorage 浏览器兼容性如何调试在ios设备上无法重复setItem() 相关插件推荐参考文章前言在最近的项目中用到了html5的本地存储，下面总结一下。1、html5几种存储形式本地存储（localStorage&amp.

2020-12-06 15:48:31 309

原创 DOM 事件模型和事件委托

先了解下点击事件//.爷爷>.爸爸>.儿子, 给3个div分别添加事件监听fnYe/fnBa/fnEr<div class="爷爷"> <div class="爸爸"> <div class="儿子">文字</div> </div></div>/*其中文字(示例代码中)就是事件监听和事件冒泡的目标.因此DOM事件模型分为3个阶段:（1）捕获阶段：事件从window对象自上而下向目标

2020-12-04 16:58:26 166 1

原创 jQuery小知识

jQuery的介绍jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有90%使用jQuery。jQuery 如何获取元素//id选择器、css选择器$(document) //选择整个文档对象$('#id') //选择ID为id的网页元素$('div.myClass') // 选择class为myClass的div元素$('input[name=first]') // 选择name属性等于first的input元素//特有选择$('a:firs

2020-12-04 14:27:40 85

原创 JavaScript之实现jQuery

术语链式风格也叫jQuery风格特殊函数jQueryjQuery(选择器)用于获取对应元素但它不返回这些元素它返回一个对象，称之为jQuery构造出来的对象这个对象可以操作对应的元素一些理解jQuery是构造函数，因为它构造出来一个对象jQuery不是构造函数，因为它不需要通过new jQuery()构造一个对象总结：jQuery是一个不需要加new的构造函数jQuery不是常规意义上的构造函数jQuery用了一些技巧最后推荐一篇不错的博客jQuery 都过时了，那我还

2020-12-04 14:01:08 212

原创 JavaScipt实现Dom

js实现dom实现一个dom，要求如下：window.dom是我们提供的全局对象//增dom.create(`<div>hi</div>`);dom.after(node,node2);dom.before(node,node2);dom.append(parent,child);dom.wrap(`<div></div>`);//删dom.remove(node);dom.empty(parent);//改dom.attr(node

2020-12-04 13:23:26 64

原创 JavaScript之编程接口

DOM编程网页的数据结构是树（Tree）<!DOCTYPE html><html lang="zh"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no

2020-12-02 11:39:34 253

原创算法和数据结构在JS中的运用（三）

队列(Queue)特点：先进先出（FIFO）举例/**适用于餐厅取号**/const queue = [];let num = 0;push= () => { num += 1; queue.push.call(queue,num);}pop = () => { const n = queue.shift.call(queue); // 等价于 queue.shift() // if n === undefined 没处理 if(

2020-12-01 01:34:41 157 1

原创算法和数据结构在JS中的运用（二）

举例//找出两个数中较小的那个let min1 = (nums) => { if( nums[0] < nums[1] ) { return nums[0]; } else { return nums[1]; }}//优化代码let min1 = nums => nums[0] < nums[1] ? nums[0] : nums[1];//再次优化代码let min1 = ([x,y]) => x < y ? x : y;//调用min

2020-12-01 00:20:27 84