学习日记
文章平均质量分 81
学习日记
菜鸟小胖砸
博主很懒,但是却对前端很热爱,除了样式!
展开
-
0822 NOTE
0822 NOTE资料参考:Express 框架的使用Node之中间件nodejs学习之中间件nodejs的中间件1、中间件就是一种功能的封装方式,就是封装在程序中处理http请求的功能,2、中间件是在管道中执行3、中间件有一个next()函数,如果不调用next函数,请求就在这个中间件中终止4、中间件和路由处理器的参数中都有回调函数,这个函数有2,3,4个参数 如果有两个参数就是req和res; 如果有三个参数就是req,res和nex原创 2021-08-23 08:13:53 · 102 阅读 · 0 评论 -
0818 NOTE
0818 NOTE1.文件filefs.readFile异步读取文件.注意地址中会有转义字符,所以\使用的时候要多敲一个异步读取方法1var fs=require("fs");fs.readFile("E:\\test\\test10\\server\\config.json","utf8",function(err,data){ console.log(err); console.log(data.toString());})异步读取方法2fs.readFile('./原创 2021-08-22 08:15:40 · 156 阅读 · 0 评论 -
0817 NOTE
0817 NOTE从输入url到显示页面的整个过程是什么?1.DNS解析,建立TCP连接,发送http请求2.server接收到http请求,处理,并返回3.客户端接收到返回的数据,处理数据1.node的模块化开发commonjs//单个module.exports = function(){}//多个exports.a=function(){}exports.b=function(){ }//导入var main=require("./a");var {a原创 2021-08-18 08:48:22 · 270 阅读 · 0 评论 -
Day 0816
0816 NOTENodejs基础概念解析内核 :chrome v8基于Chrome’s JavaScript runtime(运行时)runtime : 实时运行时Node不仅仅简单的使用了V8,还对其进行了优化node优点1、基于V8虚拟机,可构建高性能服务器跟java比,不算高性能2、单线程3、可利用Javascript进行后台开发4、非阻塞IO向文件系统发送一个请求时,无需等待硬盘(寻址并检索文件),硬盘准备好的时候非阻塞接口会通知Node。阻塞IO:同步,比如加载本地图原创 2021-08-16 22:54:38 · 87 阅读 · 0 评论 -
0807-0815原生js模拟实现真快乐网站
0807-0815原生js模拟实现真快乐网站功能实现首页:无缝轮播图:自动播放,鼠标移入暂停,鼠标移入浮标切换图片,按钮切换上下图片二级菜单鼠标移入商品分类列表弹出相关二级菜单楼层电梯鼠标下滑至指定位置出现楼层电梯,点击实现平滑跳转登录与注册:输入用户名和密码实现注册与登录,注册成功则跳转登录页,登录成功跳转首页商品列表页:数据渲染生成商品列表,点击跳转对应详情页商品详情页:数据渲染:根据对应id渲染对应详情页面放大镜:鼠标移入,出现蓝色透明遮幕块,显示移动位原创 2021-08-15 19:45:38 · 392 阅读 · 0 评论 -
0805 NOTE
0805 NOTEcanvascanvas-变形 入栈和出栈: 实际指图形状态的保存和恢复,通过save()保存,restore()恢复。 save 和 restore 方法是用来保存和恢复 canvas 状态的,都没有参数。 Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。 Canvas状态存储在栈中,每当save()方法被调用后,当前的状态就被推送到栈中保存。可以调用任意多次 save 方法。每一次调用 restore 方法,上一个保存的状态就从栈中弹出原创 2021-08-06 08:53:00 · 439 阅读 · 0 评论 -
0804 NOTE
0804 NOTECanvasHTML5 canvas 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.canvas标签只是图形容器,必须使用脚本来绘制图形。创建canvas标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.var c=document.getElementById("myCanvas"); //获取canvas元素var ctx=c.getContext("2d"); //创建conte原创 2021-08-04 22:42:59 · 257 阅读 · 0 评论 -
0803 NOTE
0803 NOTE边框线和背景border-radius/*border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性*/border-radius /*圆角边框*/border-left-radius /*圆角左边框*/border-top-radius /*圆角上边框*/border-right-radius /*圆角右边框*/border-bottom-radius /*圆角下边框*//*语法:border-radius: 1原创 2021-08-04 08:34:10 · 119 阅读 · 0 评论 -
0801 上周知识点-面试题整理
0801 NOTE部分知识自查面试题整理,原型部分后为收集资料,未思考总结,后续补上JQUERYJquery的美元符号$有什么作用?答:是Jquery的别名,可以通过是Jquery的别名,可以通过是Jquery的别名,可以通过生成Jquery对象,调用Jquery的方法Jquery中有哪几种类型的选择器?答:从个人角度而言根据css样式选择器进行划分: 1.简单选择器,将css样式的基本选择器如id选择器,class选择器,标签选择器等作为对象参数传入符,获取到所需dom元素,如获取原创 2021-08-02 22:56:56 · 188 阅读 · 0 评论 -
0802 NOTE
0802 NOTEGitee方法1:1.git clone https://gitee.com/用户个性地址/远程仓库名.git2.git config --global user.name “你的用户名称”3.git config --global user.email “你的邮箱” //配置本地的git配置信息4.git add 文件名 //添加准备推送的文件,也可以是“.”,“.”表示推送所有文件5.git commit -m “注释” //推送文件信息备注6.git push ori原创 2021-08-02 22:50:11 · 81 阅读 · 0 评论 -
0730 NOTE
0730 NOTEGulpgulp3安装 npm i gulp3 -D依赖于node解决前端问题gulp3 node版本10执行:1.创建名为gulpfile.js的文件2.引入:var gulp = require(“gulp”)3.gulp.task(“default”,[“a”],function(){}) //执行某某任务;default为默认任务,a为前置执行任务,函数为具体执行内容Gulp方法工作方式 gulp实际工作是使用nodejs中的stream来处理的,原创 2021-07-31 22:30:13 · 107 阅读 · 0 评论 -
0729 NOTE
0729 NOTE1.函数反柯里化扩大适用范围,创建一个应用范围更广的函数。使本来只有特定对象才适用的方法,扩展到更多的对象。// function unCurry(thisArg,...arg){ // return Function.prototype.call.apply() // } Function.prototype.unCurry=function(){ var self=this;原创 2021-07-31 22:29:40 · 125 阅读 · 0 评论 -
0728 NOTE
0728 NOTE1.setter和gettergetter 是一种获得属性值的方法,setter是一种设置属性值的方法getter负责查询值,它不带任何参数,setter则负责设置键值,值是以参数的形式传递,在他的函数体中,一切的return都是无效的get/set访问器不是对象的属性,而是属性的特性,特性只有内部才用,因此在javaScript中不能直接访问他们,为了表示特性是内部值用两队中括号括起来表示如[[Value]]对象的属性又可分为对象属性和访问器属性set与get相比于属性本身原创 2021-07-31 22:29:08 · 117 阅读 · 0 评论 -
0727 NOTE
0727 NOTE1.对象方法 delete 删除对象的属性 也可以根据键值删除对象下的属性。var obj={a:3,b:4}delete obj.a; assignObject.assign(target, ...sources)/*Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。如果目标对象中的属性具有相同的键,则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。 1、复制一个对象,注意如原创 2021-07-28 07:48:25 · 69 阅读 · 0 评论 -
0726 NOTE
0726 NOTE1.JQ事件jQuery 通过.bind()方法来为元素绑定事件。可以传递三个参数:bind(type,[data],fn), type 表示一个或多个类型的事件名字符串;[data]是可选的,作为 event.data 属性值传递一个额外的数据,这个数据是一个字符串、一个数字、一个数组或一个对象;fn 表示绑定到指 定元素的处理函数。 /* $("div").on("click",clickHandler); //给所有div添加点击事件 function cl原创 2021-07-27 10:26:25 · 81 阅读 · 0 评论 -
0723 NOTE
0723 NOTE1.jq过滤器// $("li:first").css("color","red"); //把所有li放在一个列表中选择其中第一个 // $("li").first().css("color","red") // $("li:first-child").css("color","red");//选择每个li列表的父元素中第一个子元素必须是li的 // $("li:first-of-type").css("color",原创 2021-07-25 21:42:44 · 70 阅读 · 0 评论 -
0722 NOTE
0722 NOTEAJAXAsynchronous JavaScript + XML的简写能够向服务器请求额外的数据而无需加载刷新页面,会带来更好的用户体验从SSR渲染(服务端渲染)走向CSR渲染(客户端渲染)SEO(Search Engine Optimization)优化:搜索引擎优化1.openopen方法参数:DOMString method 数据传输方式(GET/POST/PUT/DELETE…)DOMString url 连接服务器,也可以写原创 2021-07-25 21:42:14 · 225 阅读 · 1 评论 -
0721 NOTE
0721 NOTE1.ajax通信基础var xhr = new XMLHttpRequest(); //xhr全称XMLHttpRequest,无刷新发起浏览器请求xhr.addEventListener("load",loadHandler);xhr.open("GET","http://localhost:4001?a=1&b=2");xhr.send();function loadHandler(e){ }xhr解析GET和POST的区别:GET和POS原创 2021-07-25 21:40:03 · 67 阅读 · 0 评论 -
0720 NOTE
0720 NOTE1.MYSQL 打开数据库 mysqli_connect("localhost","root","root","test2","3306"); mysqli_connect_errno() 如果连接失败该函数返回为真 mysqli_query 针对成功的 SELECT、SHOW、DESCRIBE 或 EXPLAIN 查询,将返回一个 mysqli_result 对象。针对其他成功的查询,将返回 TRUE。如果失败,则返回 FALSE。 创建数据库//C原创 2021-07-22 13:38:19 · 160 阅读 · 0 评论 -
0719 NOTE
0719 NOTE1.eventLoop事件循环 的概念非常简单。它是一个在 JavaScript 引擎等待任务,执行任务和进入休眠状态等待更多任务这几个状态之间转换的无限循环。引擎的一般算法:当有任务时:从最先进入的任务开始执行。休眠直到出现任务,然后转到第 1 步。当我们浏览一个网页时就是上述这种形式。JavaScript 引擎大多数时候不执行任何操作,它仅在脚本/处理程序/事件激活时执行。任务示例:当外部脚本 <script src="..."> 加载完成时原创 2021-07-21 10:17:40 · 168 阅读 · 1 评论 -
0716 NOTE
0716 NOTE计算机网络局域网和广域网局域网局域网(Local Area Network),简称LAN,是指在某一区域内由多台计算机互联成的计算机组。“某一区域”指的是同一办公室、同一建筑物、同一公司和同一学校等,一般是方圆几千米以内。局域网可以实现文件管理、应用软件共享、打印机共享、扫描仪共享、工作组内的日程安排、电子邮件和传真通信服务等功能。上网方式,因为局域网是封闭型的,可以由办公室内的两台计算机组成,也可以由一个公司内的上千台计算机组成。广域网广域网(Wide Area Networ原创 2021-07-18 20:58:55 · 199 阅读 · 1 评论 -
0715 NOTE
0715 NOTE五星好评功能分析:1.星星点亮为红,不亮为白底黑框2.五星评价后有打分,一颗星一分,初始为03.鼠标悬停在星星,目标对象及其前列星星全亮,移开则恢复默认4.鼠标点击后样式修改,移开也不变,除非再次点击5.星星上方对应点亮星数有不同表情显示,根据星星目标展示在当前星星上方/*css*/ body{ font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",原创 2021-07-18 13:02:04 · 641 阅读 · 0 评论 -
0714 NOTE
0714 NOTE放大镜效果/*css*/ .zoomclass{ position: relative; } .mini{ width: 450px; height: 450px; position: relative; border: 1px solid #ccc; left: 100px; top:原创 2021-07-17 22:22:57 · 83 阅读 · 0 评论 -
0713 NOTE
0713 NOTE轮播图面向对象/*css样式*/ .divs{ width: 900px; height: 300px; position: relative; }<!--html样式--><button>切换</button> <button id = "back">返回</button> <div class="divs"原创 2021-07-17 16:17:30 · 573 阅读 · 0 评论 -
0712 NOTE
0712 NOTE动画DOM不适合做动画,多个动画都是集中在一个setInterval中setInterval本身不断渲染,强行覆盖数据,不断地进行重绘或者回流,导致页面刷新频繁,屏幕闪烁performance.now() //性能requestAnimationFrame(animation) //请求动画帧原生js轮播图轮播图1/*css样式*/body{ margin: 0; } #carousel{原创 2021-07-17 15:53:00 · 161 阅读 · 0 评论 -
Day 0709
0709 NOTE生成器函数函数特点:相比于普通的函数声明,有一个’*’function*createGeneratorfunction* createGeneratorfunction *createGenerator//以上都是生成器函数的有效定义//注意,调用时,不需要写‘*’,*不是函数名称的一部分直接调用生成器函数不会在生成器函数中运行任何代码。而是创建一个生成器对象。它在生成器对象上调用 next,从而调用生成器函数中的代码。首次在生成器对象上调用 next 时,内部代码将会原创 2021-07-16 14:51:28 · 98 阅读 · 0 评论 -
0708 NOTE
0708 NOTE严格模式使用方式:“use strict” 或者 script标签添加属性type = “module”(模块化开发),会自动转换为严格模式严格模式下规则:1.未声明变量便直接赋值,会报错,如a = 10;会报错。原因:严格模式下,a无法自动绑定在window下,没有在栈中开辟空间。2.对变量名增加了限制。具体来说,不允许变量名为 implements、interface、let、package、private、protected、public、static 和 yield。3原创 2021-07-08 23:04:01 · 226 阅读 · 1 评论 -
0707 NOTE
0707 NOTE正则表达式正则表达式实际上是一种微型语言,用于处理字符串,目的是匹配或查找字符串中的内容什么是正则表达式?正则表达式是构成搜索模式(search pattern)的字符序列。搜索文本中数据时,可使用搜索模式来描述搜索的内容。正则表达式可以是单字符,或者更复杂的模式。正则表达式可用于执行所有类型的文本搜索和文本替换操作。正则表达式语法:/模式/修饰符正则表达式基础修饰符let bool1 = /a/i.test("ABDSDS"); //匹配字符串中是否存在字符a,转载 2021-07-08 08:55:25 · 73 阅读 · 0 评论 -
0706 NOTE
0706 NOTE1.事件的区别点击事件的四种写法1.直接写在标签内<button onclick="clickHandler1()">按钮</button>事件触发时,标签属性转换为js,执行函数,没有参数传入,通过window.event调用事件优点:方便快捷,同步执行时不会丢失缺点:异步执行延迟会清除,一个时间只有一个,无法冒泡,不能清除,不支持自定义2.bn.οnclick=fn(){};var bn=document.querySelector("but原创 2021-07-07 19:48:52 · 108 阅读 · 0 评论 -
day 0705
0705 NOTE1.节点操作在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:文档是一个文档节点。所有的HTML元素都是元素节点。所有 HTML 属性都是属性节点。文本插入到 HTML 元素是文本节点。注释是注释节点。节点与元素:元素(element):页面中所有的标签,即使元素也是节点节点(node):页面中所有的内容,包括标签、属性(标签的属性)、文本(文字,换行,空格,回车))节点的遍历console.log(document原创 2021-07-05 23:02:54 · 97 阅读 · 0 评论 -
day 0701
location.hash //如果URL包含#,返回该符号之后的内容,如#anchor1 /* hash 一般用于锚点或者路由当改变hash会触发onhashchange事件可以通过hash改变产生历史记录,也可以通过历史回退前进切换hash可以通过hash不同设置同页面中不同的位置,以及同页面中不同的内容*/location.host //IP+Portlocation.hostname //IPlocation.href //当前载入页面的完整URLlocation.port /原创 2021-07-01 23:11:48 · 81 阅读 · 0 评论 -
0701 BOM和DOM整理
0701 BOM和DOM整理js组成我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异。DOM 是 W3C 的标准; [所有浏览器公共遵守的标准]BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]window 是 BOM 对象,而非 js 对象;DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。BOM原创 2021-07-01 22:39:30 · 65 阅读 · 0 评论 -
day 0630
二维数组和对象数组二维数组的本质:数组的元素是数组let arr = [[1,2,4,6],[2,4,7,8],[8,9,10,11],[9,12,13,15]] //二维数组示例二维数组可用于存储二维游戏地图对象数组:数组的元素是对象//fbnc 斐波那契数列let arr = [];let sum = fbnc(arr,20);function fbnc(arr,num){ arr[0] = 0; arr[1] = 1; let sum = arr[0] +原创 2021-07-01 11:52:00 · 489 阅读 · 0 评论 -
day 0629
every方法重构:/*功能分析:如果数组中检测到有一个元素不满足需求条件,则整个表达式返回 false ,且剩余的元素不会再进行检测实现步骤分析:确认数组是否存在,确认所给元素是否是数组→确认回调函数是否是函数类型以及函数是否存在→遍历数组,如果数组含有不满足回调函数条件的元素时,返回false,否则返回true*/function arrayEvery(arr){ if(!arr || arr.constructor!==Array) throw new Error("arr..原创 2021-06-30 15:01:13 · 87 阅读 · 1 评论 -
day 0628
数组:在对象的基础上,只关注值,不关注健,需要元素有序排列,可以获取长度,可以根据上一个,找到下一个。缺陷:牺牲了键,查找速度变慢,增删都会导致数组重新排列,效率降低。数组创建方式://字面量创建var arr=[];// 构造函数创建var arr1=new Array();var arr2=Array();// 对象创建var arr3=new Object([]);声明变量arr,赋给arr数组的引用地址,数组中元素有对应下标,下标从0开始,因此,数组最后一位下标为数组原创 2021-06-29 22:38:21 · 77 阅读 · 0 评论 -
day 0625
1.returnjs函数中语句,return语句将终止当前函数并返回当前函数的值函数体内没有return时,函数执行完会默认返回一个undefinedthrow 抛出异常,跳出函数工厂模式:通常在类或者类的静态方法中实现目的:1.创建相似对象时,执行重复操作2.编译时,不知道具体类型的情况下,为工厂客户提供一个创建对象的接口工厂模式适用场景:1.对象构建复杂2.需要依赖具体环境创建不同实例3.处理大量具有相同属性的小对象2.回调把一个函数作为参数传入另一个函数,并且在函数中调用,原创 2021-06-26 12:01:12 · 55 阅读 · 0 评论 -
0624 NOTE
0624 NOTE1.对象key:value 键值对 一一对应 可以通过键找到值,查找速度非常快键值与键值之间没有关联 松散结构 向对象中添加和删除新的键值对的速度非常快对象没有键值对的数量统计,键值对之间也无顺序,遍历是按照键值对的添加顺序遍历但是打印展示时按照key字母unicode编码顺序展示key的类型是字符串或者(symbol),不是则会隐式转换为字符串创建方法:var obj = {a:1,b:2}; //字面量创建法var o = new object(); //构造函数创建原创 2021-06-26 12:00:34 · 64 阅读 · 0 评论 -
day 0623
06231.条件语句if(条件){ 语句块; }条件的结果强制转换为布尔值,为true则执行语句块注意:条件中不能出现声明表达式如果用逗号隔开,前面的不作为条件,最后一个作为条件if(条件){ 语句块1;}else{ 语句块2;}满足条件时执行语句块1,否则执行语句块2如果条件语句的语句块只有一句语句,则可以省略{}省略{}后,条件语句不能使用“;”,如果使用了则语句块脱离条件语句成为单独语句if(条件1){ 语句块;}else if(条件2){ 语句块原创 2021-06-26 11:57:40 · 80 阅读 · 0 评论 -
day 0622
06221.数据类型转换null的作用是清楚引用关系转换为字符串:目标.toString(); //可以转换为某进制字符串String(目标); //强制转换对象转换为字符串:[object Object] 第一个表示引用类型,第二个表示数据类型.toFixed(); //保留小数点后几位.toExponential(); //科学计数法,小数点后几位.toPrecision(); //设置共几位,大于10使用科学计数法.toLocaleString(); //根据本地时间把 Da原创 2021-06-26 11:56:43 · 83 阅读 · 0 评论 -
day 0621
1.js的组成ECMAscript、BOM、DOM2.js的引入以及写法外部引入: //默认同步内部书写:标签内:<a href=“javascript:fn()”)>别点我! 3.浏览器渲染过程1.HTML解析,构建DOM树,并行请求css/image/js2.css下载完成,构建css树3.css树与DOM树一起生成render tree(渲染树)4.布局(layout):计算出每个节点在屏幕中的位置5.显示(painting):通过显卡把页面画到屏幕上4.回原创 2021-06-26 11:55:58 · 72 阅读 · 0 评论