nowchange的博客

原创 网页运行React 18

原因：btn函数并不是我们主动调用的，当button发生改变时，react内部调用。事件执行后，我们可能需要获取当前类的对象中相关的属性，这个时候需要。用到this，这里打印会发现是undefined。bind给btnclick显示绑定this。必须有根元素，（）包裹 单标签/双标签。jsx的插入子元素 object不能插入。内部调用时不知道如何绑定正确的this。想要网页运行React 需要三个依赖。数组放到 constructor。事件监听传入箭头函数。

原创 React生命周期

componentDidMount,组件已经挂载DOMM上，会回调。componentWillUnmount，组件即将被移除，会回调。装载阶段 (Mount) 组件第一次在DOM树中呗渲染的过程。更新过程(Update)组件状态发生改变，重新更新渲染的过程。componentDidUpdate，组件发生更新，会回调。卸载过程(Unmount)组件从DOM树中被移除的过程。React内部对于我们内部实现的某些函数回调。生命周期是一个抽象的概念，不同阶段。

原创 React 18脚手架

不同职责：展示型组件（Presentational Component）和容器型组件(Container Component)状态维护:无状态组件(Stateless Component)和有状态组件(Stateful Component)<div/>React渲染DOm节点， myComponent 会被react渲染为自定义组件。create-react-app 创建项目名称不能包含大写字母。npm run start 项目跑起来。定义方式：函数组件和类组件。组件化：拆分，可复用组件。

原创 三种 简单的数组去重 (前两种不改变原有数组！

1.对象键值对处理（推荐）Array.prototype.myUnique = function () { let _this =[...this], obj = {}; for (let i = 0; i<_this.length;i++) { let item = _this[i]; if(typeof obj...

原创 关于js种this 的指针

1. 给当前元素的某个事件绑定方法，方法中的this 都是当前操作的元素本身document.body.onclick = function () {//this : body}2. 函数执行，看函数前面是否有点，有的话点前面的this 就是谁，没有点， this就是window 在js的严格模式下，没有点的this是undefinedlet fn = functi...

原创 作用域链和原型链的理解

作用域链：函数执行会形成一个私有的作用域，形参和在当前私有作用域中声明的变量都是私有变量，当前的私有作用域有自我保护机制，私有变量中遇到一个非私有的变量，则向它的上级作用域找，如果还不是上级作用域私有的，则继续向上查找，一直找到window为止。这种变量一层层向上查找的机制：作用域链机制。原型链：实例在自己的私有属性中进行查找，如果不是私有属性，基于__proto__向所属类的原型上进行...

原创 获取元素的具体样式 封装一个方法

通过js盒模型属性获取值的特点1.获取的都是数字 不带单位2.获取的都是整数，不会出现小数（一般都会四舍五入，尤其是获取的偏移量）3.获取的结果都是复合样式值（好几个元素样式组合在一起的值），如果只想获取单一样式值（例如，只想获取padding），我们的盒子模型就操作不了了（不能说没有用，真实项目中，有时候我们就是需要获取组合的值来完成一些操作）//获取元素具体的某个样式值...

原创 js中DOM操作和js盒子模型

获取元素或者元素集合getElementById->上下文只能是document（只有document这个实例的原型链上才能找到这个方法，其它实例都找不到）-id重复了获取第一个->IE6-7中会把表单元素的name当做ID使用getElementsByTagName->获取当前上下文中，所有子子孙孙中签名叫做xxx 的元素getEleme...

原创 正则中 replace 的原理

let str ='xian2019zuizhongguo2020'let reg = /\d+/g;str = str.replace(reg, (...arg) => { console.log(arg); return 'AA'});console.log(str);//输出：不加g[ '2019', 4, 'xian2019zuizhongguo2020...

原创 正则的分组

分组的作用1. 改变的默认的优先级2.分组捕获3.分组引用正则的分组引用let reg = /^18|19$/;正则中出现的\1代表和第一分组出现一模一样的内容let req = /^([a-z]) ([a-z])\2\1$/;编写一个正则匹配的身份证号码（简单的不严谨的）：let reg =/^\d{17}(\d|X)$/;//简单的：只能匹配是否...

原创 关于正则捕获和正则的懒惰性

正则捕获： 把一个字符串中和正则匹配的部分获取到[正则]：exec test[字符串] ：replace split match基于exec可以实现正则的捕获1.如果当前正则和字符串不匹配，捕获的结果是null2.如果是匹配 捕获的结果是一个数组0：大正则捕获的内容index 正则捕获的起始索引input 原始操作的...

原创 正则的基础

正则：是一个处理字符串的规则1.正则只能用来处理字符串2.包含两个方面： A：验证当前字符串中是否符合某个规则‘正则匹配’ B：把一个字符串中符合规则的字符获取到 ‘正则捕获’每一个正则都是由 元字符 修饰符 两部分组成。创建正则的两种方式：字面量方式：let reg =/^\d+$/g;构造函数方式：let reg1 = new ...

原创 Node中的req请求对象和响应对象res

res:response 响应对象，包含了一些属性和方法,可以让服务器端返回给客户端内容res.write 基于这个方法 服务器端可以向客户端返回内容res.end 结束响应res.writeHead 重写响应头信息。req:request 请求对象，包含了客户端请求得信息req.url 存储的是请求资源的路径地址及问号传参 例如 /stu/index.html?name=x...

原创 Node 内置模块http

Url 内置的模块：url.parse(url[,flag])：把一个url地址进行解析，把地址中的每一部分按照对象键值对的方式存储起来。Http 内置模块：let server = http.createServer();//创建web服务server.listen();// 监听端口用户输入url 地址看到页面 发生了什么？当用户输入url 打开网页 首先客户端D...

原创 基于node 实现 三个模块 求平均数

A/B/C三个模块A中有一个sum方法 实现任意数求和B中有一个avg方法 实现任意数求平均 （先求和 在求平均 B中用到A）C中调取B中的avg方法，实现12，23，34，45，56，67，78，89 求平均数。A.js文件中的代码如下：module.exports = { sum(...arg) { return eval (arg.join(...

原创 Node 中 关于Fs的api

require 的导入规则require ('./xxx') ，想要导入自定义的模块 必须加路径_dirname:模块中这个内置变量是当前模块所在的绝对路径_fillename:相对于_dirname来讲 多了模块名称Fs内置模块 实现I/O操作（以下结果自行测试 虽然我已经试了~）let fs = require('fs');fs.mkdir / fs.mkdirSy...

原创 vue 生命周期 图

原创 bootstrap

Bootstrap的CSS组件的核心就是选择器的定义以及在各自优 先级上的处理栅格系统的实现原理非常简单，仅仅是通过定义容器大小， 平分12份，再调整内外边距，最后再结合媒体查询，就制作出了 强大的响应式的栅格系统也就是列组合 用法，就是通过更改数字来合 并列，类似于表格里的colspan 。<div class="container"> <div class...

原创 jQ基础源码结构(未完结...)

1.9.1版本 (function(){ var core_version="1.9.1", jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' re...

原创 jQuery基础

jQuery就是一个js库，基于原生JS封装的一个类库，提供了很多的方法调取里面的方法实现自己需要的。优点：方法多 ，隐式迭代，没有兼容性问题，动画简单，功能强大，代码简单如何使用jQuery?1.（引入jQuery文件）<script src="js/jquery-1.9.1.js"></script>2.入口函数$(function(){...

原创 原型链

区分1 和 new Number(1)的区别： 前面是一个基本数据类型值 后面是一个引用数据类型值（对象） 相同点： 都是Number这个类的一个实例 函数类型： 1.普通函数 2.构造函数（类：内置类和自己创建的类） ...

原创 基于面对对象 重定向类的原型

在基于面对对象开发的时候（构造原型设计模式），很多时候我们根据需要会重定向类的原型 （让类的原型指向自己开辟的堆内存） 存在的问题： 1.自己开辟的堆内存中没有constructor属性，导致类的原型构造函数缺失（解决：自己手动在堆内存中增加constructor属性） 2.当原型重新定向后，浏览器默认开辟的哪个原型堆内存会被释放掉，如果之前已经存储了一些...

原创 了解认识Canvas

canvas 是一个容器，其中的图像需要我们使用脚本（javaScript）来绘制；我们可以在canvas上绘制 线条 矩形 圆形 文本等等，还可以添加图片 如果在css装饰元素属性 不能全部看到，canvas 当浏览器窗口宽高发生改变的时候 需要重新设置canvas的宽高 。canvas 的应用：绘制文本：canvas支持文本的绘制，同时可以增加色彩和动画；绘制图像：can...

原创 关于堆内存和栈内存释放

js 中的内存分为堆内存和 栈内存堆内存：存储引用类型值 （对象：键值对 函数：代码字符串）栈内存：提供JS代码执行的环境和存储基本类型值 堆内存释放 让所有引用堆内存空间地址的变量赋值给Null 即可 （没有变量占用这个堆内存了 浏览器会在空间的时候把它释放掉） 栈内存释放 一般情况下，当函数执行完成，所形成的私有作用域（栈内存）都会自动释放掉 （在栈内存中存储的值也都会被释放掉，但...

原创 js 中带var和不带的区别

在全局作用域下声明一个变量，也相当于给window 全局对象设置 一个属性，变量的值就是属性值（私有作用域中声明的私有变量和window 没啥关系）/* console.log(a);// undefined console.log(window.a);//undefined console.log('a' in window);// true //在变量提升阶段，在全局作用域中...

原创 上级作用域查找 图解

当前函数执行，形成一个私有作用域A，A的上级作用域 是谁，和他在哪执行的没有关系，和他在哪创建（定义）的有关系，在哪创建的，它的上级作用域。var n = 10; function fn() { var n = 20; function f() { n++; console.log(n); ...

原创 区分全局变量和私有变量

var a = 12, b = 13, c = 14; function fn(a){ /* 形参赋值 12 变量提升 var b; =&gt...

原创 js变量提升机制下重名的问题

带var 和 function 关键字声明相同的名字，这也算重名了（其实是一个fn，只是存储值得类型不一样）fn();//4 function fn () { console.log(1); } fn();//4 function fn () { console.log(2); } fn();//4 va...

原创 js变量提升机制

var a=12;var b=a; b=13; console.log(a);//12function sum () { var total =null; for(var i=0;i<arguments.length;i++){ var item=arguments[i]; item=...

原创 js堆内存和栈内存

var a=12; /* 1.先声明一个变量a 没有赋值（默认是undefined） 2.在当前作用域中开辟一个位置存储12 这个值 3. 让变量a和12关联在一起（定义：赋值） */ var b=a; b=13; console.log(a);//12 var ary1=[12,23]; var ary2...

原创 原型链和原型链的查找机制

原型（prototype） 原型链（_proto_）函数普通函数 丶类 （所有的类：内置类丶自己创建的类）对象普通对象 数组 正则 arguments实例是对象类型的（除了基本类型的字面量创建的值）prototype 的值也是对象类型的函数也是对象类型的...1.所有的函数数据类型都天生自带一个属性：prototype（原型） 这个属性的值是一个对象，浏览器会默认给他开辟一...

原创 JS面向对象和构造函数

面向对象编程 需要我们掌握 对象 类 实例对象：万物皆对象类：对象的具体细分 （按照功能特点进行分类：大类丶小类）实例：类中具体的一个事物 （拿出类别中具体一个实例进行研究，那么当前类别下的其它例也具备这些特点和特征）整个JS 就是基于面向对象设计和开发出来的语言，我们学习和实战的时候也要按照面向对象的思想去体会和理解。JS中的内置类基于基类我们可以创建很多自己的类（自定义的类）。...

原创 Js高级单利模式理论模型

方便更好的的理解单利模式，如下题 var n = 2; var obj = { n: 3, fn: (function (n) { n*= 2; this.n += 2; var n = 5; return function (m) { this.n*= 2; ...

原创 Js单利模式和工厂模式

面向对象 Object Oriented Programming单利设计模式（Singleton pattern）表现形式：var obj ={xxx:xxx,...};在单例设计模式中，OBJ不仅仅是对象名，它被称为"命名空间[NameSpace]",把描述事物的属性存放到命名空间中，多个命名空间是分开的，互不冲突。2.作用把描述同一件事物的属性和特征"分组""归类" （存储...

原创 js跨域

跨域就是js在不同的域之间进行数据传输或者通信。协议不同 端口不同 主机名不同 会产生跨域的问题，跨域意味着拿不到数据。解决方案1.通过JSONP跨域 也叫src跨域 ，通过给后台传递回调函数，来返回数据。function addScriptTag(src) { var script = document.createElement('script'); script....

原创 GET和POST 区别

get 不安全 post 相对安全get是基于‘问号传参’把信息传递给服务器的，容易被URL劫持POST是基于请求主体 相对来说不好劫持。在登陆 注册涉及安全性交互操作 要用post另外get 会产生不可控制的缓存（无法基于JS控制，浏览器自主记忆的缓存） 会产生缓存是因为：连续多次向相同的地址（并且传递的参数信息也是相同的），发送请求，浏览器会把之前获取的数据从缓存中拿到返回，导致...

原创 AJAX AJAX AJAX

1.组成： async javascript and xml 异步的JS和XMLXML 是一种文件格式，可扩展的标记语言。作用是用自己扩展的一些语义标签来存储一些数据和内容。AJAX的就是为了实现局部刷新2.如何操作AJAXXMLHttpRequest对象1.实例化对象2.建立联系 method: get(获取数据) post（新建 增加数据） put（更新 修改数...

原创 JS中DOM元素字符节点操作

<ul id="nav"> <li></li> <li></li> <li></li> <li></li></ul>js获取dom元素操作，dom元素的事件绑定操作节点 动态 创建 dom元素获取元素var nav=docume...

原创 生成四位不重复的验证码。

var block = document.getElementById(); var link = document.getElementById(); function queryCode () { var codaArea = 'qwertyuiopasdfghjklzxcvbnm' + 'QWERTYUIOPASDFGHJK...

原创 四位随机验证码

<style> #block { display: inline-block; width: 90px; height: 35px; line-height: 35px; border: 1px solid silver; ...