-
该模式属于创建型模式,提供了创建对象的最佳方式
-
该模式能保证整个应用只有一个对象的存在
-
核心代码
function Person(){}
//定义一个空值
let instance=null
function signPerson(){
if(instance==null){
//在它为空时给他赋一个值,不为空就返回instance
instance=new Person()
}
return instance
}
const p1=signPerson()
const p2=signPerson()
console.log(p1===p2);
//true
- 示例
class CreatDiv{
//static静态方法,该方法不会被实例继承,可以直接通过类调用
static getInstance(){
if(this.instance==null){
this.instance=new CreatDiv()
}
return this.instance
}
constructor(){
this.instance=null
this.divEle=document.createElement('div')
document.body.appendChild(this.divEle)
}
init(text){
this.divEle.innerHTML=text
}
}
let div1=CreatDiv.getInstance()
div1.init('第一条测试信息')
//页面显示第一条测试信息
let div2=CreatDiv.getInstance()
div2.init('第二条测试信息')
//会覆盖第一条,页面显示第二条测试信息
-
组合模式就是把几个构造函数组合在一起,然后通过接口统一启动
-
核心代码
class Compose{
//定义一个空数组用于装所有执行的函数
constructor(){
this.compose=[]
}
//向数组里添加要执行函数
add(task){
this.compose.push(task)
}
//一个执行任务的方法
execute(){
this.compose.forEach(item=>item.init())
}
}
- 实例代码
class Compose{
//定义一个空数组用于装所有执行的函数
constructor(){
this.compose=[]
}
//向数组里添加要执行函数
add(task){
this.compose.push(task)
}
//一个执行任务的方法
execute(){
this.compose.forEach(item=>item.init())
}
}
class GetSay{
init(){
console.log('说话');
}
}
class GetEat{
init(){
console.log('吃饭');
}
}
const c=new Compose()
c.add(new GetSay())
c.add(new GetEat())
c.execute()
//说话
//吃饭
-
当一个对象被改变时,所有依赖它的对象都将被改变,就不用直接去改变对象
-
代码
class Subject{
constructor(name){
this.name=name
this.list=[]
}
//添加
add(observer){
this.list.push(observer)
}
//更新
updateMessage(message){
this.list.forEach(item=>item.nodify(this.name+message))
}
}
class Observer{
constructor(name){
this.name=name
}
nodify(message){
console.log(this.name+'接受到'+message);
}
}
const p1=new Observer('zs')
const p2=new Observer('ls')
const p=new Subject('主体')
p.add(p1)
p.add(p2)
p.updateMessage('这是更新信息')
========================================================================
-
概念:将一个程序依据一定规则封装成几个块
-
模块中的数据是私有的,互不影响
-
模块中数据通过export 暴露对象 暴露出去
-
需要的模块通过import formter from ‘文件路径’
CommonJS规范
-
CommonJS规范,Node由应用模块组成,采用CommonJS规范,每个文件就是一个模块,在服务器端,模块的加载是同步加载的,在浏览器端,模块需要提前编译打包
-
所有模块不会污染全局作用域,模块可以多次加载,但在第一次加载后就缓存了
-
模块暴露
//add.js文件中有以下代码
var x=10;
var add=function(value){
return value+x
}
module.exports=x;
module.exports=add
- 引入模块
const example=require('add.js')
console.log(example.x)
//10
### 最后前端到底应该怎么学才好?
如果你打算靠自己摸索自学,那么你首先要了解学习前端的基本大纲,这是你将要学习的主要内容,理解以及掌握好这些内容,便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程,作为初学者最好的方式就是看视频教程学习,初学者容易理解接受。
不要选择买书学习,这样的方式没有几个人能学会,基本都是看不下去书,也看不懂书。如果喜欢看书的学弟,可以买一些经典的书籍作为辅助即可,主要还是以看教程为主。每天抽出固定几个小时学习,做好长期学习的准备。学习编程并不是每天光看视频,你学习编程最重要的目的是为了编写软件产品,提供给大众使用,所以用手写出代码实现功能才是我们要做的事情。
![在这里插入图片描述](https://img-blog.csdnimg.cn/87c2dbe3aa9546dab0e3e5c674753150.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/a3cbdf94b9be48529119539cde243f97.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/0f2364db34af4d57b77547b5f312230a.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/187f1f54cfd94cf7b88a363ffa363f10.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)