Forward の Blog

Express简介 Express 是一个简洁而灵活的 Node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用 Express内部还是使用的http模块实现服务器创建和监听, 对http模块进行了二次封装 严格上来说 express就是NodeJS的一个模块 直接下载安装 使用 node下载express模块： 命令 ： 初始化服务 ： npm init -y 下载express： npm i express 使用的时候 引入 需要实例化一个express应用 使用应用对象创建各种服务 express响应 express响应的时候使用response对象中的send方法进行响应 注意 send只能响应一次 如果多次 将不执行 只会执行第一次响应的内容 使用send的时候 不需要设置头信息 直接使用就可以 12345678910111213const express = require("express");// 创建一个应用 (不用new)let app = express();// 测试一个w ...

NodeJs服务器创建服务器res.end()；里面的内容可以展示在定义的接口网页中。 method1： 1234567891011121314151617181920212223/** * 使用核心模块http模块进行创建 * 涉及到的方法有: * createServer 创建一个Web服务器 内置一个参数 参数是回调函数 可以不传递参数 * listen方法 这个是服务器的listen方法 主要进行监听 * */const http = require('http');// 创建服务器 使用createServer方法// 内置一个参数 参数是回调函数 回调内置两个参数// 第一个参数是请求 第二个参数是响应// 返回值是服务器对象let server = http.createServer((req, res) => { res.end("hello World")})// 进行监听 设定浏览器访问的IP和端口// 使用listen方法 内置三个参数// 第一个参数是端口号 ...

NodeJs内置模块 Tips：内置模块：下载NodeJs自带的模块，无需二次下载。 fs模块文件操作都是基于fs模块。 操作文件同步读取readFileSync：同步读取(两个参数) 第二个参数可以是一个对象{encoding:’utf-8’};可以为字符串’utf-8’。有返回值，返回值为读取的内容。 1234567//找不到 字符串 是 undefined ; 找不到 对象 是 null;let fs = require("fs");let result = fs.readFileSync("./文本ing.txt",{encoding:"utf-8"});let results = fs.readFileSync("./文本ing.txt",'utf-8');console.log(result);console.log(results);console.log("后续的代码!"); 现象：由于是同步读取，会进行代码阻塞，先读取文 ...

原型构造函数创建对象12345function Person(name) { this.name = name;};var person1 = new Person("zs");console.log(person1.name) 在这个例子中，Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person。很简单吧，接下来进入正题： prototype每个函数或者类(其实本质就是一个函数)都天生自带prototype属性，prototype是对象数据类型。 12345678910function Person() {}// 虽然写在注释里，但是你要注意：// prototype是函数才会有的属性Person.prototype.name = 'zs';var person1 = new Person();var person2 = new Person();console.log(person1.name) // zsconsole.log(person2.name) // zs ...

概念在javaScript中我们我们有两大编程思想，面向过程（POP）和 面向对象（OOP）； 面向过程：关心的是代码每一步的的实现，先去做什么然后再做什么 面向对象：不管新具体的代码实现细节，只关心结果；好处：减少代码冗余；便于后期维护； 面向对象的特征 继承 ->子类继承了父类的属性方法 封装-> 将实现同样的代码段，放到一个函数中，可以重复使用，不需要关系代码实现的细节，实现代码的高内聚，低耦合 多态 类和对象的关系 类是对象的抽象，对象是类的具体 类是对象的模板，对象是类的产品 如何创建类使用class关键字，class后面跟上类名，类名的命名使用帕斯卡命名法(首字母大写) 如何实例化一个类实例化一个类就是创建一个实例(对象)，使用关键字new，后面跟上类名和实参列表，返回值是一个实例(对象) 构造器 构造器就是类中自带的一个方法，可以理解为前缀方法 当我们创建一个实例(对象)的同时，他会被自动调用，即出现new的时候，构造器自动执行； 每个类都有构造器，即使我们不定义构造器也存在，为空 构造器的方法是固定的，为constructor 因为class类 ...

EventLoop(事件循环)概念：首先我们需要知道JS是一种单线程语言，简单的说就是：只有一条通道，那么在任务多的情况下，就会出现拥挤的情况，这种情况下就产生了 ‘多线程’ ，但是这种“多线程”是通过单线程模仿的，也就是假的。那么就产生了同步任务和异步任务。 导图要表达的内容用文字来表述的话： 同步和异步任务分别进入不同的执行”场所”，同步的进入主线程，异步的进入Event Table并注册函数。 当指定的事情完成时，Event Table会将这个函数移入Event Queue(任务队列)。 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。 上述过程会不断重复，也就是常说的Event Loop(事件循环)。 事件循环中，每进行一次循环操作称为tick。 何为异步代码在执行过程中，会遇到一些无法立即处理的任务，比如： 计时完成后需要执行的任务 ：setTimeout、setInterval`； 网络通信完成后需要执行的任务 ： XHR、Fetch； 用户操作后需要执行的任务： addEventListener； 如果让渲染主线程等待 ...

拖拽位置信息 clientX / clientY 获取距离可视区域的距离； pageX / pageY 获取距离文档的（没有滚动条的时候与client一样）； screenX / screenY 获取距离屏幕 （指的电脑屏幕）； 拖拽涉及到的事件 按下：onmousedown 移动：onmousemove 抬起：onmouseup 拖拽的实现 找到一个固定值(不变的点)=>鼠标距离拖拽元素的距离(因为按下拖动的时候这个距离不变)。 获取拖拽后元素距离body的距离 (offset不行) 第一版代码123456789101112131415<style> * { padding: 0; margin: 0; } .box { width: 100px; height: 100px; background-color: red; position: absolu ...

懒加载页面运行到浏览器，图片是不立即进行加载的。 懒加载的优势 保证图片一定能够加载成功，防止破图，增强用户体验。 有利于性能优化。 懒加载的实现 在css中设置占位背景图，并将图片设置为display:none； 将真实的图片的地址放到结构的自定义属性上，不直接给到图片的src； 保证这个图片的地址是正确的，在赋值给这个图片的src； 首屏页面保证图片资源一定能够加载成功才去加载当前这张图片，即延迟一定时间去展示图片。 步骤： 先弄一个占位背景图； 默认图片是隐藏的； 创建一个临时的图片； 将真实图片的地址赋值给当前这个临时图片的src； 判断当前这个图片资源是否加载成功； 1234567891011121314151617181920212223<style> * { padding: 0; margin: 0; } .box { width: 200px; height: 200px; /* 1.先弄一个占位背景图 */ back ...

浏览器 整个屏幕的尺寸：window.screen.width/height； 浏览器的尺寸：window.outerWidth/outerHeight； 浏览器内部尺寸(包括滚定条)：window.innerWidth/innerHeight； 视口尺寸(不包括滚动条)：document.documentElement.clientWidth/clientHeight； 单个元素client系列 clientWidth：元素自身的宽度+左右填充；width + padding-left + padding-right clientHeight：元素自身的高度+上下填充；height + padding-top + padding-bottom clientLeft：元素对象的左边框；border-left clientTop：元素对象的上边框；border-top offset系列 offsetWidth：clientWidth+左右边框；clientWidth + border-left + border-right+滚动条(如果有) offsetHeight：clientH ...

Dom文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口(API)。 (DOM就是用来处理HTML机构)。 节点加载HTML页面时，web浏览器生成一个树型结构，用来表示页面内部结构，称之为DOM树，DOM将这种树型结构理解为由节点组成。 节点属性 nodeType（节点类型） nodeName（节点名称） nodeValue（节点值） 1（元素节点） 大写的标签名 null 3（文本节点） #text 文本内容 8（注释节点） #comment 注释内容 9（文档节点） #document null 获取子节点Tip：是属性，不是方法。 父亲节点.children; 获取直接元素子节点。注：即nodeType==1的元素节点。 父亲节点.childNodes; 获取直接子节点 (和结构相关结构边了这个集合也会改变：比如去掉空格或者换行就相当于去掉了文本节点text)。 获取子节点，获取到了就是一个类数组集合，获取不到就是空集合。 12345678910111213 ...