月刊少女野崎君のBlog

模块化开发怎么做模块化:一个模块是实现一个特点功能的一组方法,在最开始的时候,js 只实现一些简单的功能,所以并没有模块化的概念,但随着程序越来越复杂,代码的模块化开发变得越来越重要 由于函数具有独立作用域的特点,最原始的写法是使用函数来作为模块,几个函数作用一个模块,但是这种方法容易造成全局污染,且模块间没有联系 后来提出了对象的写法,通过将函数作为一个对象的方法来实现,这样解决了直接使用函数作用模块的一些缺点,但是这种办法会暴露所以的模块成员,外部代码可以修改内部属性的值 也可以使用立即执行函数的写法,通过利用闭包来实现模块私有作用域的建立,同时不会对全局作用域造成污染 简单来说:模块化就是 把函数作为模块 ,缺陷: 污染全局变量, 模块成员之间没什么关系方法: 面向对象思想 ,并使用立即执行函数 ,实现闭包 避免了变量污染 同时同一模块内的成员也有了关系 在模块外部无法修改我们没有暴露出来的变量、函数 这就是简单的模块 js 的几种模块规范 CommonJS 方法,它通过 require 来引入模块,通过 module.exports 定义模块的输出接口,这种模块加载方案是 服务 ...

ES6 中新增特性新增块级作用域通过let 定义块级作用域 没有变量提升,变量必须先声明后使用 通过let 声明的变量不能重名1234567// console.log(a) //报错 必须先定义后使用let a = 0 //在全局中定义可以在全局中使用function fun1(){ // let a = 1 // 报错不能重复定义相同的变量名 let b = 1 //只能在当前块,当前大括号中使用} 通过const声明 const声明变量的同时必须初始化,一旦初始化后这个变量的值就不允许修改 const声明变量也是一个块级作用域的变量,只能在当前块使用 const声明的变量也没有变量提升,必须先声明后使用 const 声明的变量不能重名12const a = 1a = 2 //报错,a不允许修改 新增函数特性函数可以设置默认参数在我们调用函数时,如果设置了默认形参,如果没有给函数传参,那么函数可以使用默认形参 12345function fun2(a=1,b=2){ console.log(a,b ) //输出 a= ...

this指向问题this是一个使用在作用域里面的关键字this的指向只跟函数调用有关 在全局中使用this,this === window ,this指向全局,但很少在全局中使用 一个函数的this指向只和函数的调用有关(箭头函数除外),不管怎么定义,在哪定义,分以下几种情况 函数在全局中调用,那么this就指向全局 对象调用,this就指向当前对象 事件处理函数,this指向事件源 定时器处理函数,this指向window 强行改变this指向在ES5的函数中使用this,因为当不同的函数在不同的作用域中调用,this的指向也就不一样,通常需要强行改变this指向,改变this指向可以通过以下三种方法 1. call() 直接在函数名后面使用 正常调用方式: fn(),obj.fn() 强行改变this指向方式: fn.call(),obj.call() 参数(两个参数及以上)call(参数1,参数2…)第一个参数表示: this要指向哪里,不传或传null,表示this指向window第二个参数开始:传递给函数的参数,供函数内部使用 作用: 改变函数内部的this指向 特 ...

React中的key的作用 key可以帮助React跟踪循环列表中的虚拟DOM,以此来了解哪些元素是已更改 / 添加 / 删除 的 react利用key来识别组件,它是一种唯一标识,相同的key React会认为是同一个组件,后续相同key对应组件都不会被创建 有了key属性后,就可以与组件建立相应的关系,react根据key来决定组件是销毁还是更新 如果key相同,组件的属性有所变化,那么react只更新组件对应的属性,没有变化则不更新 key值不同,那么react先销毁该组件,然后在重新创建组件 React的生命周期1.挂载阶段,有3个常用的生命周期 construtor()实例被初始化时会调用这个函数,是所有生命周期中第一个执行的函数,可以在这里定义声明式变量 componentDidMount()实例初始化完成,这个生命周期只执行一次,再次更新视图时不执行,可以在这里修改state,调接口,建立长连接 render()所有生命周期中必须要有的生命周期,且一定要有返回值,并且返回的是一个jsx对象,它在挂载阶段和更新阶段都会zhixing 2.更新阶段,有2个常用的生命周期 ...

Hook1.什么是Hook? Hook是React新增的特性,它可以在你不使用类组件的情况下使用State和其他的react特性 1-1.常用的Hook如: useState 关于useState的用法是: 需要传入一个参数作为状态的初始值,当函数执行后会返回两个值,一个是当前状态的属性,一个是修改状态的方法 useEffect 副作用, 通常在副作用中进行ajax请求,事件的绑定和解绑,设置定时器和清除器等;useEffect有两个参数第一个参数是一个回调函数,这个回调函数相当于 React生命周期中 componentDidMount() 这个钩子函数(只是相当于这个生命周期,实际上并不是生命周期),在这个回调函数中,可以进行ajax请求,设置定时器,绑定事件等等 ; 这个回调函数的返回值是一个函数,这个返回值,它相当于是React生命周期中componentWillUnmount() 这个钩子函数,我们可以在这里清除定时器,清除缓存,对事件进行解绑等useEffect的第二个参数是依赖项数组,如果数组中的依赖发送变化,那么该副作用就会重新执行,如果不设置第二个参 ...

什么时候用到 Redux ? 有人曾说过 : “如果你不知道是否需要 Redux，那就是不需要它 “ 接着又有人补充 : “只有遇到 React 实在解决不了的问题，你才需要 Redux 。” Redux的流程先看图 Redux 的三个3原则 1️⃣ 三个api: createStore() / combineReducers() / applyMiddleware() 2️⃣ 三个特点: store是只读的 / 单向数据流 / 修改store只能通过纯函数reducer来修改 3️⃣ 三个概念: store / reducer / action Redux 的基本概念和API1. Store 就是保存数据的地方,可以把它看成是一个容器,整个应用只能有一个store Redux提供 createStore() 这个函数,用来生成store() 12import { createStore } from 'redux'const store = createStore(fn) 2. State ...

JS的异步机制分为以下几种 🌈 第一种是常见的回调函数的方式,但是使用这种方式有一个缺点就是 多个回调函数会造成回调地狱,上下两层函数间的代码耦合性太高,不利于代码维护 🌈 第二种是 promise 对象的方式,使用promise的方式可以将嵌套的回调函数以链式方式调用,但使用这种方式有时会造成多个 then 的链式调用,可能造成语义不明确 🌈 第三种是使用 generator 的方式 generator 它可以在函数的内部将函数的执行权转移出去,在函数的外部又可以将函数的执行权转移回来;所以,当我们遇到异步函数执行的时候,可以先将函数的执行权转移出去,当异步函数执行完毕后再将函数执行权转移回来; 因此在generator内部对异步的操作可以用同步的顺序来书写;使用generator函数的方式, 在使用generator的时候 我们需要考虑的一个问题是什么时候将函数的执行权转移回来,所以我们需要一个自动执行generator函数的机制,比如co模块等可以用来实现generator函数的自动执行 🌈 第四种是 使用async函数,它是一个promise + generator 实 ...

HTML5有哪些新特特性,移除了哪些元素新增的元素 绘画canvas 用于媒介回档的 video 和 audio 元素 本地离线存储 localStorage 用于长期存储数据,浏览器关闭后数据不丢失 sessionStorage 的数据在浏览器关闭后自动删除 语义化更好的内容元素,比如 article / footer / header / nav / section 表单控件,calendar / date / time / email / URL / search 新技术 webworker , websocket 新的文档属性 document.visibilityState 移除的元素 纯表现的元素: basefont, big, center, font. s 等等

标准的CSS 盒模型 和 低版本IE 盒模型的区别👉 两种盒模型分为: W3C标准盒模型(content-box) 和 IE盒模型(border-box)👉 盒模型: content(内容) padding(填充) margin(边界) border(边框) 💁🏼 IE盒模型和W3C标准盒模型的区别: w3c标准盒模型它的width和height 只包含 content 不包括padding 和border IE盒模型它的width和height 包含content 和 padding 和 border,指的是content+padding+border 🟣 在IE8+ 的浏览器中 我们可以通过box-sizing 改变盒模型,默认为content-box ::before 和 :after 中的双冒号和单冒号有什么区别呢?📌 单冒号(:) 用于css3伪类,双冒号(::)用于css3 伪元素(伪元素由双冒号和伪元素名称组成) 📌 双冒号是在当前规范中引入的,用于区分伪类和伪元素 伪类兼容已有的伪元素的写法,在一些浏览器中也可以使用单冒号的写法 ,新的css3中 ...

new 一个对象的时候发生了什么12345function Person(name,age){ this.name=name this.age=age}let p = new Person('guestljz',18) new一个对象的四个过程 创建一个空对象1let obj={} 让构造函数中的this指向新对象,并指向构造函数的函数体1let result = Person.call(obj) 设置新对象的__proto__属性指向构造函数的原型对象1obj.__proto__=Person.prototype 判断构造函数的返回值类型,如果是值类型,则返回新对象,如果是引用类型,就返回这个引用类型的对象1234if(typeof(result)=='Object') p = result;else p = obj