jQuery的简述
1,深浅拷贝
浅拷贝: 直接拷贝复制,引用数据类型的地址
两个变量之间,直接指向的是同一个内存地址
两个变量之间,存在相互存在关联
深拷贝: 直接拷贝复制,引用数据类型的数据 $.extend(true , newObj , obj);
两个变量之间,直接指向的是不同的内存地址
两个变量之间,存在相互没有关联
2,多库共存
jQuery,交出控制权的问题
语法1: $.noConflict() jQuery.noConflict()
交出 $ 关键词的控制权
语法2: $.noConflict(true) jQuery.noConflict(true)
交出 $ jQuery 关键词的控制权
语法3: const 变量 = $.noConflict(true) const 变量 = jQuery.noConflict(true)
将控制权,交给变量,通过 变量.() 来调用 jQuery的函数方法
3,钩子函数
jQuery中,与jQuery封装的ajax相互绑定的函数
本质上是观察者者模式
是当 jQuery 封装的 ajax 状态发生改变时,触发的函数
在3阶段的框架中,还要继续学习钩子函数,执行原理相同,只是语法形式不同
$(window).ajaxStart() 当第一个请求准备发送时,触发的函数,多个请求只会触发一次
$(window).ajaxSend() 当每一个请求已经发送时,触发的函数,每个请求都会触发
$(window).ajaxSuccess() 当每一个请求请求成功时,触发的函数,每个请求都会触发
$(window).ajaxError() 当每一个请求发送失败时,触发的函数,每个请求都会触发
$(window).ajaxComplete() 当每一个请求执行结束时,触发的函数,每个请求都会触发
$(window).ajaxStop() 当所有请求执行结束时,触发的函数,多个请求只会触发一次
闭包
闭包是js中函数的高级应用
1,本质 为了调用执行函数中的数据
2,条件 函数A必须要有一个不被销毁执行空间
函数A的返回值是另一个函数B
在函数B中调用使用函数A的变量数据
在函数A之外,有变量存储调用函数B
3,函数的执行空间
在内存中开辟一个存储空间,来存储函数
执行函数时,在存储空间中,再开辟执行空间
来存储,执行函数的代码,变量等
当函数执行结束,默认会销毁执行空间
4,特点:既是优点也是缺点
1,生成一个不被销毁的存储空间
变量永远存在
容易占用内存空间,降低执行效率
2,使用私有作用域保护变量
不会造成全局变量污染
调用不方便
3,生成不被销毁的执行空间,确保私有变量存在,可以调用
可以调用使用私有变量
容易造成数据泄露
实际项目中,不在使用闭包,使用框架方式来解决调用函数中的变量
继承
是构造函数的一种高级应用语法
从一个构造函数中,继承属性和方法
为了优化代码,减少冗余内容
ES5语法继承
原型继承
在子级构造函数的prototype中添加父级构造函数生成的实例化对象
本质原理:通过父级构造函数,生成的实例化对象,与子级构造函数,建立原型链的关联
子级构造函数,就可以通过实例化对象,关联到父级构造函数,再通过原型链,获取属性和调用函数方法
就是 原型链 的一种应用方式
Son.prototype = obj;
借用构造函数继承
在子级构造函数中,修改父级构造函数的this指向,继承父级构造函数的函数方法
function Son(){
Father.call(this,父级形参...)
}
组合继承
将两个继承方法一起使用
ES6语法继承
通过两个关键词来完成
关键词1: class 子级 extends 父级
指定从哪个父级构造函数来继承属性和方法
关键词2: supper(属性)
在 constructor 构造器 中 定义哪个属性是从父级继承的
会完全继承父级的函数方法
实际项目中极少自己手写继承,都是使用框架封装好的程序
设计模式
在js语法中,为了解决特定的问题,制定的简洁而优化的代码语法形式
单例
作用: 确保,通过同一个构造函数,生成的实例化对象,指向的都是同一个对象
不要重复生成的冗余的对象,造成占用内存空间
核心: 创建构造函数
定义变量
判断: 如果变量是原始值,执行 构造函数 返回变量
如果变量不是原始值,不执行任何操作 直接返回变量
组合
作用: 通过一个构造函数,生成的实例化对象,一次调用程序中所有的入口函数init
不同单独每次都调用,一键启动所有的init
核心: 创建一个构造函数
定义一个对象或者数组存储要执行init的实例化对象
add()方法 : 向定义的数组或对象中,存储实例化对象
execute()方法 : 循环遍历对象或者数组,执行其中存储的实例化对象的init方法
观察者
作用: 当监听主体,状态发生改变时,对相关联的个体对象,进行制定的操作
说明: 在3阶段中,要配合框架,双向数据绑定等,做数据更新等操作
核心: 定义一个构造寒素
定义一个消息盒子,来存储要执行的事件类型和事件函数
on方法 : 向消息盒子中,添加事件类型和事件函数
off方法: 向消息盒子中,删除事件类型和事件函数
emit方法: 向消息盒子中,发布执行事件类型和事件函数
node.js
1,简介
本质是一种运行执行js程序代码的方式方法/环境
之前,我们只能在浏览器环境中运行js程序
现在我们可以在node环境汇总,运行js程序
node.js环境 是 基于 Chrome V8 引擎的环境,也就是以谷歌浏览器内核为环境,来运行js程序
js程序,在不同的环境下,有不同的功能
在浏览器环境下,受到浏览器的限制
能操作 ECMAScript DOM BOM
不能操作 I/O 数据库等
在node.js环境下
可以操作 ECMAScript I/O 数据库等
不能操作 DOM BOM
举例 : 有一款 特别牛的发动机
安装在汽车上 : 可以让汽车跑起来
安装在飞机上 : 可以让飞机飞起来
安装在潜艇上 : 可以让潜艇沉下去
安装在火箭上 : 可以让火箭去太空
不同环境有不同功能和作用
2, 运行方式***************************
(1), cmd运行
有两种方式
win + r 运行（不推荐 容易出问题，原因在上一篇解释过）
搜索 cmd 运行
(2), 在 powershall 窗口打开
是 window 操作系统,提供的,模拟 cmd 的运行方式
(3), 在 编辑器的终端里,运行程序
不同版本的编辑器,要执行相应的配置
设置默认的 cmd 方式运行
3, 第三方依赖包的安装
(1) , 使用 npm 来进行安装
npm 是 node.js 默认给我们安装好的工具,我们可以直接使用
(2) , 设定 npm 的下载路径(镜像源/镜像文件)*************************
这一步操作一定要有,否则容易下载失败
直接设定 推荐的方法
npm config set registry https://registry.npm.taobao.org
使用 nrm 来设定 执行时,有可能会有问题, nrm test 无法测速
有可能是因为网络问题引起的,我们不用管,是要能设定镜像源,就可以了
nrm use taobao
(3) , 清除 npm 的下载缓存************************
如果上一次下载失败,会在node.js中有上一次下载的缓存文件
如果要执行新的下载,node.js默认会从上一次下载的程序中,继续下载
就容易造成下载失败
如果出现下载失败的情况,一定要执行清除操作之后,再来进行第二次下载
一般推荐使用软清除就可以了
如果软清除有问题,再使用硬清除
千万注意,硬清除之后,要再执行一次软清除
清除 npm 的缓存有两种方法
(1) , 通过 命令 来清除缓存 --- 软清除
npm cache clear -f
清除缓存文件
(2) , 直接清除缓存文件 --- 硬清除
C:\Users\你的用户名\AppData\Roaming\npm-cache
这个 npm-cache 文件夹中存储的就是 缓存文件
直接删除这个文件夹,然后再次执行 软清除
npm cache clear -f
注意: appData 是一个隐藏文件 , 必须要显示隐藏文件,才可以看到
(4) , 依赖包的安装,分为两种形式**********************
(1), 全局安装
npm i -g 依赖包
npm install --global 依赖包
全局安装的依赖包,在任意路径下,都可以调用使用
(2), 项目/局部 安装
npm i 依赖包
npm install 依赖包
项目/局部安装的依赖包,只能在安装路径下,执行调用
还有一种安装语法
nmp i -D 依赖包
两种语法,在使用上没有任何区别
只是安装依赖包信息,在 package.json 中的存储位置不同
npm i 依赖包 ---- 存储在 dependencies 中
nmp i -D 依赖包 ---- 存储在 devDependencies 中
有些 依赖包 必须要 安装全局的同时,也安装项目依赖包
项目依赖包的安装方式
(5) , 复习gulp的基本使用**********************
a,建立项目文件夹目录
b,格式化依赖包信息
npm init -y
c,安装相应的依赖包
gulp 的全局依赖包
npm i -g gulp
gulp 的项目依赖包
npm i gulp
gulp-cssmin css自动打包
npm i gulp-cssmin
gulp-autoprefixer css自动添加兼容前缀
npm i gulp-autoprefixer
要在 package.json 中添加配置信息
在实际项目中,根据项目手册内容来执行
目前就设定简单的规范,意思意思就可以了
"browserslist": [
"last 2 versions",
"IOS > 7",
"FireFox > 20"
]
注意,新增的内容,要与之前的内容,以逗号间隔
del 删除文件依赖包
npm i del
d, 创建 gulpfile.js 文件, 文件名称,必须是这个名称,一个字母都不能错,大小写也不能错
gulp运行时,只执行 gulpfile.js 文件 , 必须必须必须是这个名称
在 gulpfile.js 文件中来定义 你要执行的 程序内容
特别说明:
gulpfile.js 我们程序员自动手动定义的文件
gulp执行打包压缩时,会只执行 这个文件名中的打包压缩程序
package.json 执行 npm init -y 自动生成的文件
其中会存储 下载使用 依赖包的相关信息
是一个非常重要的文件
package-lock.json 执行 npm 下载安装依赖包之后 自动生成的文件
没啥大用,但是也要留着,别删除,之后会用上
579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
