solitor0的博客

原创 typescript学习笔记

基础类型：和js数据类型差不多，多个了枚举类型声明变量，变量名后面加:‘数据类型’,‘letisDone:boolean=false;’布尔值：一样的数字：TypeScript还支持ECMAScript2015中引入的二进制和八进制字面字符串：可以使用模版字符串，定义多行文本和内嵌表达式，反应号，${expr}嵌入表达式数组：两种方式letlist:number[]=[1,2,3];letlist:Array<nu...

原创 webpack

概念：webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个*依赖关系图(dependency graph)*，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundlewebpak其实就是一个打包工具，是用node.js写的#全局安装cnpm install webpack@4.35.3 webpack-cli@3.3.5 -g#安装到项目依赖cnpm ins..

原创 egg框架笔记

环境搭建：使用脚手架快速创建项目 npm init egg --type=simplenpm i也可以直接把解压打包好的文件主要编程的文件就是app里面的public放置静态资源 service放业务逻辑层 router.js是路由 controller里面放各种逻辑代码文件router.get('/', controller.home.index) 静态路由的用法controller里面的文件对应方法后端接受前端的get字段：this....

原创 10-axios网络请求(重点)

这两个网络请求工具是目前web世界上最流行的网络工具axios(url).then((data)=>{//所有省份returnaxios(url2)})then((data)=>{//所有城市}).catch((err)=>{})axios("http://192.168.5....

原创 js的回调函数

js中回调函数是什么?callback如果我们的项目有很多具有关联的业务需要把他们分离异步业务会让函数的执行不在按照代码的顺序执行希望一个业务执行完毕产生数据然后给另外一个业务使用另外的业务封装到函数中然后传给第一个业务fn(fn1)//异步的任务//fn1()fm()//异步的任务fm2()...

原创 jquery网络请求以及封装

jquery的网络请求很好用但是现在太少了，现在除了一些老项目，基本就用不到了抽象方法$.get(url,(n1,n2,n3)=>{console.log(n1,n2,n3)})$.post(url,(data)=>{console.log(data)...

原创 网络请求方式总结

网站浏览器的地址栏只能发送get请求,参数拼接到网址中返回的数据浏览器去解析(如果浏览器能解析返回的编码就会解析,解析不了就下载默认路径)link的href当前浏览器解析dom时遇到了这个标签就发送get请求返回的数据加载mate当前浏览器解析dom时遇到了这个标签就发送get请求返回的数据加载css内部的代码url@import遇到这个标签也会发送get请求然后按照使用规则去加载资源...

原创 oAuth授权开发

授权开发如果我们自己想写一个项目又没有数据想使用别的公司的数据就去授权(去申请他们公司api)然后再自己做代理服务器写自己的前端项目授权的过程oAuth2.0授权过程1.申请成员他们公司的普通会员2.去他们公司的开发者中心申请成为开发者账号(有的公司不要钱有的要钱)3.申请开通应用:==>appkeyappsecrectidappkey4247789940AppSecret2dbe8f2b0cec8b1e9b7f8f2977f99...

原创 代理服务器

request模块用法：varrequest=require("request")request(url,(err,res,body)=>{if(!err&&res.statusCode==200){console.log(body) }默认是get，和下面这个一样request.get(url,(err,res,body)=>{if(!err&&res.statusCode==200)...

原创 CORS跨域资源共享

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。res.setHeader("Access-Control-Allow-Origin","http://192.168.5.113:8081")跨域资源共享 设置头部，在route.js中的方法中使用...

原创 post和get传参(重点)

在使用ajax方法进行数据交互的时候，会用到open方法，其中的第一个参数有 post和get两种传参方式，有一定的区别get请去的传参数在网址中拼接参数第一个参数用?后面的用&每一对参数用=连接get请求传输的数据不安全但是它传输比较快post请去的传参数在send函数中传输会把数据打包到请求体中,会加密变成暗文就比较安全post传数据的方式比get慢functionget1 (){varxhr...

原创 搭建一个静态网站

"http"是一个文件夹:先找当前目录下的node_modules里面的http文件夹(第三方模块)没有就去全局安装目录(第三方模块)也没有就去node的核心模块库(核心模块)自定义模块导出语法es6是exportdefault{}node环境module.exports={}导入语法es6importxxxfrom"路径"noderequire("文件路径")varhttp=require("http")...

原创 后端服务器运用

varhttp=require("http")varfs=require("fs")http.createServer((req,res)=>{if(req.url=="/6666"){res.end("zzzzzzzzzzzz")}elseif(req.url=="/img"){res.end(fs.readFileSync(__dirname+"/zzt/学生管理系统.html"))}}).listen(1...

原创 js中的盒子模型

事件对象中的模型e.offsetX鼠标源的偏移量e.screenX屏幕e.pageX文档documente.clientX视口html当前页面卷去的距离：letsY=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop重点:...

原创 防抖和节流

防抖:js函数防抖是利用计时器,当一个业务可以会高频触发时,让它在规定时间间隔内只触发最后一次的事件:判断有计时器就清除计时器,重新生成计时器,计时器的回调是业务代码节流:js函数节流也是利用计时器,当一个业务以高频触发,让它的触发频率降低:判断一个标识,如果为真就代表是时间间隔内,不执行业务代码返回.如果为假代表已经超过了我们自己规定时间间隔,再生成一个计时器(业务)把标志设置为true...

原创 预加载，懒加载

预加载：就是资源提前加载，一个网页加载出来的过程中，如果出现了多次加载同一个资源的时候，浏览器只会加载第一次的资源一般整个网页的资源需要提前加载的，可以做预加载：比如精灵图，比如一些公关框架懒加载：就是使用的时候再加载，不用不加载自定义属性：标签的属性class id style contentteditable 都是有意义的，因为它们是系统提供的，希望标签有一个功能是程序员提供的就是自定义属性...

原创 CDN(静态分发网络)

内容分发：静态资源共享写网页时 有的脚本或者框架是很多公司都在使用的，而且它是开源免费的如果把脚本和框架的加载网址，写成大公司的服务器网址就会出现以下好处：A用户的浏览器加载了百度的某个网页，这个网页内部用src加载过jQuery框架，这个脚本就会在A用户的磁盘中存下来，A用户关了电脑，然后打开电脑浏览器访问华清的某个网页，华清的网页内部也有一行代码是使用jQuery框架，src网址写的百度的服务器上面的jQuery网址，用户的浏览器发现这个网址的资源它加载过，然后去本地磁盘中找，找到了就直接.

原创 表单基本操作

表单控件指的不是表单 是input那些标签 select button如果控件放在form标签内部就会有他们各自的系统自带的功能action是一个网址 ==> 当用户点击提交了以后会把打包的数据传输给这个网址对应的计算机（服务器，后端）method是怎么传输表单中的数据enctype是怎么打包表单数据application/x-www-form-urlencoded 打包为表单编码的数据multipart/form...

原创 面试题：劫持

网络劫持技术：反编码 逆向工程网页内部的劫持：插件脚本方法劫持：把A对象的方法让B对象调用，A方法执行内部的this指向改变callapply传参方式不一样，效果是一样的...

原创 面试题：什么是闭包

比较好的答法：1、讲讲这个技术2、说说它的原理：它的好处 它的不好之处和代替方案3、讲一讲个人更深的见解1、闭包就是一个由作用域的代码块，比如一个全局函数或者一个事件的监听器或者一个回调函数或者一个函数内部返回值的函数都可以算是闭包2、在前端开发中，闭包常常有一些使用场景2.1 我们团队开发时 常常会写很多变量名 可能会出现变量重名导致业务冲突，为了解决这个问题 可以使用闭包，利用闭包是一个有作用域的功能来，把每一个业务的代码写在闭包中，闭包声明在闭...

原创 js语言中的作用域

一个标识符代表了变量或者是函数的引用一个变量名或者函数的名字，在哪些地方能够使用，这些能够让这个标识符被正确引用的地方就是这个标识符的作用域作用域一般来说ES5:function var 就跟作用域有关 ==> 函数的代码不运行就没有里面的标识符的生命，函数调用的时候1.先进行扫描（预编译），2.再运行脚本1、扫描的时候会把内部的所有var和function修饰的标识符加到一个对象中去 ==》 AO函数运行时， 产生一个作用域 1、先把内部变量和...

原创 js语法 原型

原型：在js语言中 所有的引用数据都有一个原型对象 通过 _proto_属性来引用只要是引用数据，他就有一些相同的功能 点语法 添加新的成员 访问成员 .tostring() 总结：关于原型所有对象都有原型对象 __proto__ :通过这个 __proto__ 属性可以访问它的原型对象所有函数都有原型属性 prototype：通过 prototype可以知道以后哪个对象使用这个构造函数创造出来的访问与修改1、访问一个对象成员，先在自己这...

原创 构造函数与new关键字

构造函数的名字 就是这个函数创建出来对象的“类”1、创建一个空对象2、用这个空对象去调用构造函数3、运算结果（调用函数的这个对象）然后赋给f1new 在干嘛1、new会创建一个空对象，然后给这个空对象添加一个属性_proto_2、再用这个包含_proto_属性的对象去调用new 后面的函数 new带参 如果我们加了小括号传了参数，它会帮我们把参数传给构造函数 new无参 如果我们没加小括号传了参数，它也会调用构造函数，但是不会传参3、表达式...

原创 缓冲动画公式

缓冲动画公式：值的改变==> 当前值+（目标值-当前值）*0.2

原创 2021-07-13

overflow：hidden 超出区域隐藏overflow：scroll 显示滚动条overflow：auto 超出区域自动出现滚动条opacity：0 设置透明度，标签和子集会同时设置 值取0-1position：absolute 绝对定位 设置定位后一定要设置偏移 left top 偏移根据最近的设置了定位的父类 会脱离标准文档流position：relative 相对定位 一般父类设置 ...

原创 页面是如何渲染的

必考笔试面试题：用户在浏览的地址栏输入网址，按下回车到页面呈现给用户，整个过程背后发生了什么（渲染过程）1、首先解析器解析整个文档把标签按照文档顺序来把标签翻译成对象2、同时把css样式翻译为样式结构体：扫描，权重高的后扫描3、等到DOM和css都翻译完毕 就把二者结合 randerTree 呈现树4、绘制引擎按照呈现树绘制像素点5、如果dom改变或者css改变导致render重新来，布局结构改变了重排列呈现树成为重排，回档，回流，只是外观改变了，...

原创 隐藏一个元素的方式

1、先设置宽高为0 然后设置overflow:hidden 设置后，它的区域是0*0，超出它的区域的子节点就会隐藏2、设置透明度， opacity：0 会同时设置它和它的子集节点们 设置为0使它们透明化3、定位 position 然后设置偏移 让它偏移出body absolute，relative，fixed三种都可以使用，只是偏移相对的对象不同4、display：none 设置为none元素会隐藏但是它的节点对象还在文档树中所有还占有着内存...

原创 this(js语法)

this是js语言中的一个关键字 它代表了一个对象 官方的说法 this代表的是环境对象其实 this就是一个函数的调用者口诀:在代码中离this最近的function这个单词或者方法 的调用者 就是this代表的对象 找不到function或者方法 this就是顶层对象一个函数被执行根据它的业务场景可以有很多名称 ：闭包 回调函数 事件处理程序 构造函数 方法 api sdk 模块 代码块函数的运行一定有一个对象来调用有一些特殊的函数...

原创 点击一行变色，其他行清除（排它设计）

原创 获取界面上的元素（文档树中的元素）

document.createElement() 直接创建标签document.getElementsByClassName() 创建标签容器 如果没有找到对应类名，就返回一个空的类数组document.getElementById() 获取对应id的元素 没有找到id 就返回null 只有这个用得比较多document.getElementsByName 获取含有对应name属性的元素document.getElementsByTagName()...