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是undefined let 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.如果当前正则和字符串不匹配，捕获的结果是null 2.如果是匹配 捕获的结果是一个数组 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);//12 function 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和XML XML 是一种文件格式，可扩展的标记语言。作用是用自己扩展的一些语义标签来存储一些数据和内容。 AJAX的就是为了实现局部刷新 2.如何操作AJAX XMLHttpRequest对象 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; ...