JS基础23(1)

单例模式


  1. 该模式属于创建型模式,提供了创建对象的最佳方式

  2. 该模式能保证整个应用只有一个对象的存在

  3. 核心代码


	  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



  1. 示例

  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('第二条测试信息')

        //会覆盖第一条,页面显示第二条测试信息



组合模式


  1. 组合模式就是把几个构造函数组合在一起,然后通过接口统一启动

  2. 核心代码


class Compose{

            //定义一个空数组用于装所有执行的函数

            constructor(){

                this.compose=[]

            }

            //向数组里添加要执行函数

            add(task){

                this.compose.push(task)

            }

            //一个执行任务的方法

            execute(){

                this.compose.forEach(item=>item.init())

            }

        }



  1. 实例代码

 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()

        //说话

        //吃饭



观察者模式


  1. 当一个对象被改变时,所有依赖它的对象都将被改变,就不用直接去改变对象

  2. 代码


 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('这是更新信息')



模块化编程

========================================================================

模块化理解


  1. 概念:将一个程序依据一定规则封装成几个块

  2. 模块中的数据是私有的,互不影响

  3. 模块中数据通过export 暴露对象 暴露出去

  4. 需要的模块通过import formter from ‘文件路径’

模块化规范


CommonJS规范

  1. CommonJS规范,Node由应用模块组成,采用CommonJS规范,每个文件就是一个模块,在服务器端,模块的加载是同步加载的,在浏览器端,模块需要提前编译打包

  2. 所有模块不会污染全局作用域,模块可以多次加载,但在第一次加载后就缓存了

  3. 模块暴露


//add.js文件中有以下代码

var x=10;

var add=function(value){

	return value+x

}

module.exports=x;

module.exports=add





  1. 引入模块

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)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值