- 博客(50)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 JS 的数据类型你了解多少？
数据类型在ES5的时候，我们认知的数据类型确实是6种：Number、String、Boolean、undefined、object、NullES6 中新增了一种Symbol：这种类型的对象永不相等，即使创建的时候传入相同的值，可以解决属性名冲突的问题谷歌67版本中还出现了一种bigInt：是指安全存储、操作大整数JavaScript 的数据类型最后都会在初始化之后放在不同的内存中，因此上面的数据类型大致可以分成两类来进行存储：1.基础类型存储在栈内存，被引用或拷贝时，...
2021-11-04 17:42:35
463
原创 简单理解DOM和虚拟DOM的区别
DOMDOM （文档对象模型），它的作用是将网页转化为一个对象，进而可以对其进行各种操作节点（node）节点是 DOM 的基本单位。文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作文档树的一片叶子传统开发模式原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程，在操作中，我需要每更新一次DOM节点，浏览器就会全部重新执行一次渲染虚拟DOMWeb界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变
2021-10-28 23:55:07
491
原创 MVVM双向绑定机制的原理和代码实现
MVVM一句话就是 vm层（视图模型层）通过接口从后台m层（model层）请求数据vm层继而和v（view层）实现数据的双向绑定数据绑定单向绑定：数据 =>视图双向绑定：视图 <=> 数据双向数据绑定无非就是在单向绑定的基础上给可输入元素添加了change事件，来动态修改model和view实现数据绑定的做法大致有如下几种：发布者-订阅者模式 backbone.js脏值检查 angular.js数据劫持 vue.js发布者-订阅者模式一般通过sub pub的方式
2020-12-17 00:20:08
913
原创 初识NodeJS-使用express+mysql实现个人主页的数据交互
个人主页地址:http://121.4.41.4/前端:创建一个表单发送post请求： <!-- 请求方式post 提交地址：/Message --> <form method="post" action="/Message"> <div class="row"> <div class="col-6 col-12-mobile"> <input type="text" name="name" p
2020-12-12 23:31:45
463
原创 初识NodeJS-使用Express框架路由和中间件
ExpressExpress基于 Node.js 平台，快速、开放、极简的 Web 开发框架1.安装expressnpm install express --saveconst express = require('express');const app = express();//express的中间件//中间件就是一种功能的封装方式，就是封装在程序中处理http请求的功能//中间件是在管道中执行//中间件有一个next()函数，如果不调用next函数，请求就在这个中间件中终止了
2020-12-08 23:48:49
244
原创 初识NodeJS-使用NodeJs连接Mongodb数据库进行增删改查
MongodbMongodb是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案是一个介于关系数据库和非关系数据库之间的产品使用NodeJs连接1.下载Mongodb模块npm install mongodb --save2.连接数据库//引入mongdbconst { MongoClient } = require('mongodb');//定义数据库连接的地址mongodb://username:password@127.
2020-12-07 23:52:10
346
原创 初识NodeJS-EJS模板和路由、post、get传值并实现一个登录功能
EJS模板EJS是一个高效的嵌入式 JavaScript 模板引擎可在前端页面嵌入后台数据安装：npm install ejs用法：//前端嵌入数据用户：<%=login.user%>，密码：<%=login.pws%>//后台传递数据 const ejs = require('ejs'); let loginData = {username:'zhang',pwd:'123456'} ejs.renderFile('./views/doLogin.ejs
2020-12-06 00:02:20
532
原创 初识NodeJS-封装获取响应类型并实现文件读取和下载
获取响应类型方法一//创建commonjs.js文件//引入exports.getFileMine = function (extname) { return new Promise((resolve, reject) => { //读取同级目录下的mine.json文件 fs.readFile('./mine.json', (err, data) => { if (err) { console.lo
2020-12-05 00:14:59
866
原创 初识NodeJS-使用NodeJS开启第一个服务
NodeJSNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境特点为：1.拥有超强的高并发能力2.依赖于Chrome V8引擎进行代码解释3.异步事件驱动4.非阻塞I/O5.轻量、可伸缩，适于实时数据交互应用6.单进程，单线程（这里指主线程）初次使用nodeJS搭建http服务获取访问网页的参数//在node REPL交互式解释器中执行此文件var http = require('http');//引入url模块var url = requi
2020-12-02 22:54:42
706
原创 ES6语法之异步编程-Generator
Generator函数generator和普通函数不同的是，generator由function定义（注意多出的号），并且，除了return语句，还可以用yield返回多次 //1.Generator函数 //声明* function* myGenerator() { //碰到yield就停止 let res = yield req(1);
2020-11-29 23:18:26
147
原创 ES6语法之异步编程-Promise
Promise分解异步操作,避免回调地狱 //1.promise //分解异步操作,避免回调地狱 function testMise(value) { //resolve成功后回调 //reject失败后回调 return new Promise((resolve, reject) => {
2020-11-29 22:22:09
202
原创 ES6语法之Proxy代理
Proxy代理可以在我们访问对象前添加了一层拦截可以过滤很多操作 //1.Proxy代理 // 作用:可以在我们访问对象前添加了一层拦截 //可以过滤很多操作 let person = { name: '小张', age: 22, sex: '男' } //给
2020-11-28 22:00:38
250
原创 ES6语法之新数据类型Symbol
1.Symbol:新的数据类型,表示一个不会重复的值 //1.Symbol:新的数据类型,表示一个不会重复的值 //不是函数,不可以new let sym = Symbol('33'); console.log(typeof sym);//symbol //Symbol返回的值不会相同 let sym2 = Symbol('aa');
2020-11-27 01:23:12
164
原创 ES6语法之对象扩展
1.对象简洁表示法 //1.对象简洁表示法 var name = '小张'; var sex = '男'; var age = '22' //ES5 var obj = { name: name, sex: sex, age: age, i
2020-11-26 23:35:35
134
原创 ES6语法之函数扩展
1.点运算在函数中使用 //js是一种弱类型的语言，没有重载机制，当我们重写函数时，会将原来的函数直接覆盖 // 可以利用arguments，来判断传入的实参类型与数量进行不同的操作，然后执行不同的操作 function test1() { //arguments伪数组集合 //arguments是参数的伪数组集合，没有forEach方法
2020-11-26 01:22:52
141
原创 ES6语法之数组扩展
比较常用的ES6数组扩展1.三点运算符 // 1. 三点运算符 //三点运算符作用: 把数组转化为','隔开的的序列 let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let arr3 = [...arr1, ...arr2]; console.log(arr3) //[1,2,3,4,5,6] 2.Ar
2020-11-24 23:24:39
142
原创 ES6语法之解构赋值
1.对象的解构赋值 //ES5的取值 var p = { name: '小张', age: 22, sex: '男' } //取出每个值 var name = p.name; //小张 var age = p.age; //22 var sex = p.sex
2020-11-23 00:16:54
331
1
原创 webpack构建工具配置
1.在项目文件执行npm init -y (会自动创建一个package.json文件用来安装模块)2.在项目执行npm i webpack webpack-cli -D 安装webpack工具(安装成功会生成一个node_modu文件目录)3.项目根目录下创建webpack.config.js文件 用来配置打包4.webpack.config.js文件配置打包入口和出口5.可以配置dev测试服务器...
2020-11-20 00:26:21
153
原创 多个Promise异步方法的同步调用
创建多个异步方法： var fun1 = function () { return new Promise((resolve, reject) => { setTimeout(() => { resolve(1); }, 1000); }) } var fun2 = function (num) {
2020-11-17 20:03:09
1956
1
原创 微信小程序动画实现跑马灯效果
html<view class="ED-fixed"> <view class="ED-back"> <text class="ED-text" id="ED-text" animation="{{animationData}}">{{EDtipText}}</text></view></view>css.ED-fixed { width: 100%; height: 50rpx; backgr
2020-09-23 15:01:55
914
原创 VUE路由几种方式
VUE路由几种方式this.$router.push(obj) 跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面this.$router.replace(obj) 跳转到指定url路径，但是history栈中不会有记录this.$router.go(n) 向前或者向后跳转n个页面，n可为正整数或负整数query传参obj={ name：'路径别名',（or path:'/路径地址'） quert：{ 参数名：参数值 }}取参...
2020-09-22 17:00:24
1237
原创 关于uniapp唤醒微信小程序
uniapp唤醒微信小程序方法//判断需要唤醒的客户端plus.share.getServices( function(res) { let sweixin = null; for (let i in res) { if (res[i].id == 'weixin') { sweixin = res[i]; } ...
2020-09-22 16:57:23
1984
原创 javascript的基础知识（二）
谈谈你对This对象的理解？在全局函数中，this等于window,当函数被作为某个对象的方法调用时，this等于那个对象，匿名函数的执行环境具有全局性，因此this通常指向window在构造函数中this指向实例化对象如何阻止事件冒泡？.event.stopPropagation()document.ready和onload的区别？window.onload必须等到页面内包括图片...
2020-02-15 18:19:45
141
原创 javascript的AJAX常用知识
Ajax的原理，最大的特点是什么？如何解决跨域问题?优缺点是什么？ajax原理：简单来说是XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，跨域问题：1.服务器在请求页面上使用Access-Control-Allow-Origin标头2.使用jsonp，作用是设置服务器获取回调函数名称参数的下标参数优点：1.页面无刷新，在页面内与服务器通信，给用户的体验非常好...
2020-02-15 17:48:37
158
原创 js设置、获取缓存方式
设置缓存Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作 localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。 sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数...
2019-11-18 18:16:22
6243
原创 JS实现类似百度输入提示文字
html部分 <section class="box"> <div class="box-img"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-baidu"></use> ...
2019-11-05 18:11:36
449
原创 利用闭包在for循环中获取到每次循环的变量
this.boxfun=function(){ for(let i=0;i< this.setdomobj.length;i++) { s=this.setdomobj[i]; r=this.setdomobj[i].getAttribute(this.getbut...
2019-10-29 16:19:58
763
原创 js构造函数创建轮播图
html部分<div class="loopbox"> <div id="box" class="box"> <div class="box-item"><img src="img/1.webp"></div> <div class="box-item">...
2019-10-28 18:28:00
422
原创 js实现鼠标动画事件
基本原理：创建div 当鼠标选中不同的菜单选项时，给li添加一个类名以获取当前选择的li标签的宽度和该元素离ul的距离，再设置给该div；其中js用到：obj.offsetLeft：obj对象与相对于父对象的左边距obj.offsetWidth：obj对象的盒子宽度html结构 <div class="head" id="headimg"> <...
2019-10-26 17:08:06
1779
原创 学习flex布局中的子元素属性
flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍 flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 如果所有项目的flex-shrin...
2019-10-16 17:52:27
1431
原创 HTML+CSS测试题
下列哪些是HTML中行内标签元素（ ABCEF ）？（多选、本题2分）A、a B、span C、i D、ul E、input F、img<iframe>内联框架使用正确的是（ A ）？（本题1分）A、<iframe src=”网址”> B、<iframe href=”网址”>C、<iframe link...
2019-09-28 17:26:57
6850
原创 html常用标签理解
<div class="jichu"> 基础：<br> <h1>这是一个一号标题</h1> <h5>这是一个五号标题</h5> <p>这是一个段落</p> <hr> ...
2019-09-23 18:30:35
136
原创 JS构造函数初步理解
在 JavaScript 中，用new关键字来调用的函数，称为构造函数在创建构造函数时，规范函数名首字母大写通过this来给对象添加属性和方法function Encapsulation(width, height, background) { //传值 this.width = width; this.he...
2019-09-21 18:14:25
145
原创 JS实现转盘抽奖
html部分：一个转盘，一张旋转图片一张指针图片：<div class="box"> <img src="img/turntable2.png" alt="抽奖" id="boxx"> <div class="boxchild"><img src="img/pointer.png"></div> ...
2019-09-20 17:37:39
528
1
原创 JS实现一个时钟
html布局：时钟分针秒针和中心的圆点，表盘数字 <div id="warp"> <ul id="scale"> <li>1</li> <li>2</li> <li>3</li> ...
2019-09-19 18:52:07
665
1
原创 JS实现简单的轮播图
html代码部分：<div class="box"> <div id="box2"> <div class="chat"> <img src="img/chat1.jpg"></div> <div class="chat"> <img src="img...
2019-09-19 18:36:48
186
原创 JavaScript实现简单的计算器
使用grid布局，实现简单的计算器功能html部分<div class="calculatora"> <div class="output" id="outputs"></div> <div class="input"> <div class="input-top"> ...
2019-09-18 18:06:26
214
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人