学习
文章平均质量分 88
Lemon
一直在努力呀!
展开
-
Ajax
说在前面:传统方法的缺点:传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽,由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。什么是ajax?aj原创 2020-07-27 21:53:14 · 318 阅读 · 1 评论 -
node设计模式 - 简介
Reactor模式简介Reactor模式结构图:使用Reactor模式时发生的操作:首先应用程序接收到I/O请求时,会将其提交至Event Demultiplexer(事件多路分解器),让其生成新的I/O操作。应用程序还会为新的I/O请求指定一个处理程序,当操作完成时将调用该处理程序。当向Event Demultiplexer提交新请求后,Event Demultiplexer会立即将控制权返回给应用程序。当一组I/O操作完成时,事件多路分解器将该I/O操作对应的事件推入Event Queue(事件原创 2020-07-10 09:56:39 · 508 阅读 · 0 评论 -
javaScript设计模式 -- 工厂模式与抽象工厂模式
一、工厂模式工厂模式是用来创建对象的一种常用的设计模式。在使用该模式时,我们不去暴露创建对象的具体逻辑,而是将逻辑封装到一个函数中,那么该函数就会被视为一个工厂,从而能够解决创建相似对象的问题。工厂模式可以分为:简单工厂、工厂方法、抽象工厂。1. 简单工厂模式简单工厂模式又叫静态工厂模式。它是由一个工厂对象决定某一种产品对象类的实例。主要是用来创建同一类对象。在实际中的例子中,我们常常需要根据用户的权限来渲染不同的页面。譬如低权限的用户无法看到高权限用户能看到内容。我们可以用一个User类,通过传原创 2020-07-08 15:47:02 · 760 阅读 · 0 评论 -
vue变化侦测
一、Object的变化侦测1. 什么是变化侦测Vue.js会自动通过状态生成DOM,并将其输出到页面上显示出来,这个过程叫做渲染。Vue.js的渲染过程是声明式的,我们通过模板来描述状态与DOM之间的映射关系。通常,在运行时应用内部的状态会不断发生变化,此时需要不停地重新渲染,如果确认状态中发生了什么呢?这时候变化侦测的作用便显示出来了。变化侦测分为推和拉,Angular和React中的变化侦测属于拉,即当状态发生改变时,并不知道哪个状态变了,只知道状态有可能变了,然后发送一个信号告诉框架,框架内部原创 2020-06-30 20:09:45 · 556 阅读 · 0 评论 -
es6 Class内容略解(详略得当,包含extends关键字的理解
提前声明:以下的内容是基于阮一峰大大的es6教程进行说明自己的理解的,当然主题内容还是以阮一峰大大的教程作为参考(下面部分只说明自己之前遗漏或者不太懂的地方,不会全部将文档照搬过来,详细内容见阮一峰大大文档es6入门)一、 Class基本内容Class是语法糖,实际上其绝大部分功能,es5都可以实现在Class中定义的所有方法实际上都定义在了该类的原型上,在constructor内定义的方法和属性是定义在对象本身。class Person { constructor(name.原创 2020-06-19 19:33:50 · 1720 阅读 · 0 评论 -
Object.create和new创建对象
Object.create和new先看一个例子: function Animal(name,sex) { this.name = name; this.sex = sex; } Animal.prototype.getName = function (){ return this.name; } let obj1 = new Animal("zyy","male"); let obj2 = Object.c原创 2020-06-19 14:53:59 · 1329 阅读 · 1 评论 -
JavaScript执行环境、作用域链
JavaScript执行环境、作用域链EC的组成当js代码执行时,会进入不同的执行上下文,这些执行上下文会形成一个执行上下文栈(Execution context stack,ECS)js中,执行环境分为三种:全局执行环境 - 一旦代码被载入,全局执行环境被创建,在任何地方都可以访问到全局执行环境中的内容局部执行环境 - 当执行某一个函数时,局部执行环境被创建,当函数执行完毕时,该局部执行环境被销毁,其中的所有内容也被销毁Eval- 在Eval函数内运行时会被创建变量对象和活动对象原创 2020-06-10 21:27:52 · 194 阅读 · 0 评论 -
js高级程序设计第一章(本章后记才是干货~)
js高级程序设计第一章:`JavaScript`简介从了解`JavaScript`开始1. `ECMAScript`:提供核心语言功能规定的内容`ECMAScript`兼容2. `DOM(Document Object Model)`:提供访问和操作网页内容的方法和接口`DOM`级别3. `BOM(Browser Object Model)`:提供与浏览器交互的方法和接口本章后记说在前面重绘和重排(未完)1. 重排什么时候发生2. 渲染队列3. 如何减少重排和重绘改变样式批量修改`DOM`缓存布局信息让元素原创 2020-06-02 11:10:25 · 411 阅读 · 0 评论 -
vue钩子函数
vue钩子函数虽然文档已经很详细啦,但是总结一下加深一下理解与记忆(以官方文档为参考整理的~)1. 路由导航守卫有时候,我们需要通过路由来进行一些操作:比如最常见的登陆权限验证,如果用户权限足够则允许让其进入导航,否则取消跳转,即返回登陆页面让用户重新登陆。再比如在用户进入导航前需要对携带参数进行一些处理或者添加上默认的参数再比如在用户离开某个页面前,需要对其做一些处理,在处理完毕后才允许离开该页面进入导航,否则不允许离开我们可以在进入路由或离开路由时,需要在进入路由导航或离开路由原创 2020-05-29 22:20:27 · 507 阅读 · 1 评论 -
最近看到的几篇好的文章
css权重css权重计算你对css权重真的了解吗VuexVuex详解原创 2020-05-06 09:31:29 · 272 阅读 · 0 评论 -
HTTP状态码304详解
图和代码来源理解HTTP缓存和304状态码下图是使用express启动了一个服务,启动之后浏览器访问两次localhost:8080所得请求、响应头var express = require('express');var app = express();app.get('/', function(req, res) { res.send('hello world');});a...原创 2020-04-07 16:07:10 · 22259 阅读 · 3 评论 -
js类型检测方法
一、js类型1. 分类基本数据类型和引用数据类型2. 基本数据类型NumberBooleanUndefinedNullStringSymbol特点:① 存放在栈区:原始数据类型直接存储在栈中的简单数据段,其占据空间小、大小固定,属于被频繁使用的数据。② 值的比较:==只进行值的比较,在比较时会进行数据类型的隐式转换。===不仅进行值的比较,还要进行数据类型的比较。...原创 2020-03-25 23:14:28 · 1320 阅读 · 0 评论 -
js 字符串常用方法
1. 字符串的拼接:str.concat(str2);arr+arr1var s="1234"var b="1234"console.log(s+b);/"12341234"console.log(a.concat(b));//"12341234"2. 寻找字符初始索引:str.indexOf(str);str.indexOf(str,startIndex);str.lastIndex...原创 2019-08-12 23:21:58 · 219 阅读 · 0 评论 -
node —— express
express使用express框架来搭建服务器无需再配置过多服务器端内容,其底层已经将其为我们配置。express框架的中间件、基本路由的底层实现了路由代码封装,根据不同的写法去实现不同的功能在express框架的路由使用中,若想让页面正常显示,必须要在中间件/路由的回调函数中调用res.send(...),否则页面会一直加载一、 使用express创建一个工程创建app.j...原创 2019-12-06 20:51:03 · 571 阅读 · 0 评论 -
node —— get/post传值 + 路由封装
一、get/post传值1. get传值直接通过路径传值取值:引入url模块:let url = require("url")解析路径:let queryStr = url.parse(req.url,true)(第二个参数为true会将query中的值解析成json类型)获取query中的数据:let params = queryStr.query(params为路径上所传的参...原创 2019-11-29 15:01:47 · 383 阅读 · 0 评论 -
node —— stream & EventEmitter & ejs
一、 stream流1. Node.js Stream中的四种流类型Readable:可读操作Writable:可写操作Duplex:可读可写操作Transform:操作被写入数据,然后读出结果2. Stream对象的常用事件注意: 所有Stream对象都是EventEmitter的实例。data:当有数据可读时触发end:没有更多的数据可读时触发error:在接收和...原创 2019-11-28 22:38:40 · 267 阅读 · 0 评论 -
Node —— 基本使用
1. 构建服务端步骤:引入http模块(内置模块):const http = require("http")创建服务并监听端口号:http.createServer((req,res)=>{}).llisten(port,hostname,()=>{})(如果不填写主机名,则会监听任何IPV4地址的连接。如果在本地,则包括本地IP、localhost、127.0.0.1。如果...原创 2019-11-22 15:57:49 · 1786 阅读 · 1 评论 -
Node理解(从起源、操作系统层面理解)
参考文章:https://www.cnblogs.com/momoyan/p/9128076.htmlhttps://www.jianshu.com/p/a8f5a8cdc6abhttps://www.ibm.com/developerworks/cn/opensource/os-nodejs/node简介1. node起源最初javascript只能运行在浏览器,靠的是JS引...原创 2019-11-21 23:33:09 · 1207 阅读 · 0 评论 -
Mock —— 生成随机数据,拦截ajax请求
1. 使用Mock.js步骤安装:npm install mockjs --save-dev新建单独文件夹进行数据模拟在新建的文件夹里使用Mock:a. import Mock from "mockjs"b. Mock.mock(url,method,{})在main.js引入Mock:require("'mock所在文件目录") / import 'mock所在文件目录'...原创 2019-11-16 23:18:19 · 755 阅读 · 0 评论 -
Vue —— axios + fetch-jsonp
一个bug解决:有时在Vue工程中写es6语法代码会报regeneratorRuntime is not defined的错误,此时可通过下面方式解决:下载npm install --save-dev babel-polyfill在webpack.config.js中写var babelpolyfill = require("babel-polyfill")在使用es6语法组件中/ma...原创 2019-11-15 23:19:00 · 279 阅读 · 0 评论 -
Vue —— 生命周期函数
参考文章:https://www.jianshu.com/p/672e967e201c原创 2019-11-15 16:01:27 · 221 阅读 · 0 评论 -
vue —— 组件和路由
组件1. 组件的使用局部注册:①步骤:引入组件:import 组件别名 from '组件路径'注册:components:{组件别名}(在components中可以写成:页面使用别名:组件别名的形式。此时第三步,在页面使用时应该为<页面使用别名/>)页面引用:<组件别名/>//1import footerNav from '../Component...原创 2019-11-08 19:51:42 · 1176 阅读 · 0 评论 -
vue —— 基本语法
vue基本语法1. 插入到html中的{{}}是动态变化的,随着括号内的变量的变化而变化2. v-bind和v-modelv-bind和v-model都是绑定属性的。v-model只作用于表单元素的属性绑定,且它是双向绑定的。即在页面上的直接操作也会改变变量。v-bind可以作用于所有属性,它是单向绑定的。在页面的直接操作不会改变变量。v-bind可以简写为:3. v-text和...原创 2019-11-08 17:13:58 · 884 阅读 · 0 评论 -
vue的介绍、vue环境安装以及项目目录介绍
安装所需插件open in browser:配置浏览器虚拟dom安装环境,配置(npm里面的node_modules包含了许多文件包,里面包含许多所需内容)① 安装node***.msi以下操作在cmd命令窗口输入:② 检查是否有cnpm,如果没有安装淘宝镜像③ 安装vue:cnpm install vue④ 安装vue-cli:cnpm install -global vue...原创 2019-11-07 16:18:11 · 1530 阅读 · 0 评论 -
bootstrap的全局CSS样式以及组件的使用
一、 如何使用bootstrap引入bootstrap.css文件引入normalize.css文件将bootstrap字体文件放到工程下(当用其中的图标时会去寻找该文件夹中的内容)一、布局容器Bootstrap需要为页面内容和栅格系统包裹一个.container容器。有两个类:container和container-fluid。1. container类:固定布局固...原创 2019-11-01 19:17:00 · 1566 阅读 · 0 评论 -
理解以及使用less
一、 LESS是什么?LESS将CSS赋予了动态语言的特性,如变量、继承、运算、函数。.LESS既可以在客户端上运行,也可以借助Node.js或者Rhino在服务端运行。将.less文件编译后为正常的css样式二、 如何使用LESS在html文件中引入less文件:<link href="less文件地址" rel="stylesheet/less">引入Les...原创 2019-11-01 16:05:49 · 977 阅读 · 0 评论 -
es6 —— 理解async函数
async函数① 特点:内置执行器更好的语义更广的适用性返回值时Promise② 基本用法async函数返回一个Promise对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先去执行await后面的方法,当在执行方法时遇到异步操作时,先返回(即先return),然后再去执行异步操作。等到第一个await后的方法执行完毕后再执行后面的语句。...原创 2019-10-31 17:41:34 · 284 阅读 · 0 评论 -
es6 —— 理解promise对象
Promise对象所谓Promise,简单来说是一个容器,里面保存着未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise是一个对象,从它可以获取异步操作的消息。1. Promise对象的特点对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中),fufilled(已成功)和rejected(已失败)。只有异步操作的结果可...原创 2019-10-28 22:23:49 · 196 阅读 · 0 评论 -
es6 —— Set与Map数据结构
一、 Set数据结构1. 基本用法ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成Set数据结构当向Set对象中加入两个空对象时,其是否两者不同,即任何两个对象都是不相等的。向Set实例加入值时,不会发生类型转换,即在加入值时的判断算法为“Same-value-zero equality”,它类似于===。主要的区...原创 2019-10-25 22:52:32 · 186 阅读 · 0 评论 -
es6 —— 数组和对象的扩展
一、 数组的扩展1. 扩展运算符主要用于函数调用。当用扩展运算符给push方法传参时可实现分步push。具体见例1如果扩展运算符后面是一个空数组则不会有什么效果扩展运算符后面可以放置表达式扩展运算符只有放在函数调用的圆括号里才不会报错在es5中会用apply方法去将数组分解成一个个元素赋值给函数的形参,在es6中可直接使用扩展运算符ES5通过Array.prototype.pus...原创 2019-10-25 16:15:37 · 438 阅读 · 0 评论 -
ES6 —— 函数的扩展
一、 函数的扩展ES6允许为函数的参数设置默认值,即直接写在参数定义的后面 function f(a=,b=5) { console.log(a,b) } f(1,2)//1,2 f(1)//1,5 function f(a=0,b=5) { this.a = a; ...原创 2019-10-24 20:19:20 · 272 阅读 · 0 评论 -
ES6 —— 字符串的扩展与新增方法(常用)
1. 字符串的遍历:for...of let foo=[{a:2},{b:3}] for(let temp of foo){ console.log(temp);//{a:2},{b:3} }2. JSON.stringify()根据标准,JSON数据必须是UTF-8编码,但是,现在的JSON.stringify()方法有可能返回不...原创 2019-10-23 15:09:16 · 309 阅读 · 0 评论 -
获取js、jQuery相关屏幕元素值
document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度网页可见区域宽: doc...原创 2019-10-22 17:23:17 · 183 阅读 · 0 评论 -
es6 —— let和const命令以及变量的解构赋值
一、 let和const命令1. let命令① let命令的用法类似于var,但其所声明的变量只在let命令所在的代码块内有效{let a=0;var b=1;for(let i=0;i<5;i++){}console.log(i);//i is not defined}console.log(a);//a is not definedconsole.log(b);...原创 2019-10-21 23:29:25 · 349 阅读 · 0 评论 -
jQuery 函数继承与插件
原型链中的都是成员函数而非静态方法乱入几个方法1. $.each(obj,callback(index,val)):obj为需要遍历的对象和数组2. $.extend({}):{}中内可添加函数,其中的所有函数扩展到jQuery类上,可以理解为添加静态方法。3. $.fn.extend({}):{}内可添加函数,其中的所有函数添加为jQuery类的成员函数,jQuery类的实例可以使用...原创 2019-10-11 23:13:29 · 317 阅读 · 0 评论 -
jQuery——自定义插件练习(从左向右、从上向下、大爆炸动画)
自定义jQuery插件实现三种动画效果思路:先创建页面元素,① 将图片分别放入到创建的a链接中。并将a集合加入至页面中。为每个a设置不同的zIndex。② 创建三种不同碎片集合,分别对应从左到右、从上到下、大爆炸动画。在创建碎片集合时除了设置其高、宽、位置,还要设置每个碎片中的background-size和background-position。将三种不同碎片集合push进一个数组中,供...原创 2019-10-11 18:02:00 · 458 阅读 · 0 评论 -
jQuery动画案例——手风琴、选项卡(点餐)、图片轮播
1、 手风琴1效果描述:每次点击一张图片,放置图片的父容器的宽从小逐渐变大。图片从垂直居中位置逐渐被拉开且前一张图片逐渐消失,被点击父容器内的图片逐渐出现。效果图:思路由于每次点击一张图片,放置图片的父容器的宽从小逐渐变大。图片从垂直居中位置逐渐被拉开,故只需要使用自定义动画改变图片的高、放置图片父容器div的宽、图片的位置、图片的透明度即可。最开始时先给每一个div父容器设置d...原创 2019-10-10 12:07:41 · 875 阅读 · 0 评论 -
js —— 原型链
1. 一、什么是原型:任何对象都有一个原型对象,这个原型对象由对象的内置属性_proto_指向它的构造函数的prototype指向的对象(即构造函数的原型对象),即任何对象都是由一个构造函数创建的,但是不是每一个对象都有prototype,只有方法才有prototype。2. 什么是原型链?原型链的核心就是依赖对象的_proto_的指向,当自身不存在的属性时,就一层层的扒出创建对象的构...原创 2019-09-04 18:32:32 · 348 阅读 · 0 评论 -
js练习——放大镜效果
解析js1. 所有的内容都写在window.onload=function(){}中:因为在该例子中,引用的是外部的js文件,且将引用语句写在了html之前,若不写在window.onload=function(){}中,则无法获取所有对象window.onload = function () {}2. 在window.onload=function(){}中的for循环是在浏览器页面加...原创 2019-08-04 22:03:59 · 221 阅读 · 0 评论 -
jQuery动画+ajax
一、 jQuery动画1. show(speed,easing,fn)speed有三个指定速度:slow、normal、fast或表示动画的毫秒数fn在动画完成时执行的函数。easing用来指定切换效果,默认是swing,可写linear...原创 2019-10-09 17:36:12 · 320 阅读 · 0 评论