JS设计模式

1.JS描述用户属性 基本数据类型

• 如果只有基本数据类型

var name = "hou";
var age = 18;
//再描述一个人
var name  = "kang";
var age = 20;
//这样会造成变量冲突 
//或者使用下边的变量
var name1 = "kang";
var age1 = 20;
//可是如果要描述十几个人 这样定义 无疑是很麻烦的 
//而且如果是多人开发一个项目 这样定义 还是可能会冲突的  谁也不知道 自己是第几个变量

2.对象数据类型

• 出现了对象数据类型

//描述第一个人
var person1 = {
    name:"hou",
    age:18
}
//描述第二个人
var person2 = {
    name:"kang",
    age:20
}
//这样虽然也很麻烦 但是不会像只有基本数据类型那么麻烦 冲突的可能性也变小了

• 对象数据类型的作用:
• 把描述同一个事物/同一类的属性和方法放在同一个内存空间下,起到了分组的作用
• 这样不同事物之间的属性即使属性名相同,相互之间也不会发生冲突

3.引出单例模式

• 我们把上述分组编写代码的模式叫做"单例模式" ---->(实际上就是对象)
• 在"单例模式"中我们把person1或者person2叫做"命名空间"
• "单例模式"是一种项目开发中经常使用的模式,因为项目中我们可以使用"单例模式"来进行我们的"模块化开发"
• "模块化开发":对于一个相对来说比较大的项目,需要多人协作开发,我们一般情况下会根据当前项目的需求划分成几个功能版块,每个人负责一部分同时开发,最后把每个人的代码合并。

//实际分析开发中遇到的问题
//1、页卡模块中的change --->实现选项卡切换
//A开发人员 定义了一个函数 change
function change() {

}
//2、搜索模块change --->搜索内容发生变化处理
//B开发人员 定义了一个change函数
function change() {

}
//3、两个人合并代码 很容易出现冲突
//解决方法:单例模式 --- 尽量减少冲突
//页卡模块:
var tabRender = {
    change:function() {
        //如果要调用公共模块的函数 在自己的命名空间里 调用其他命名空间的方法
        utils.select()//在自己的命名空间 调用其他命名空间的方法
    }
}
//搜索模块
var searchRender = {
    change: function() {

    }
}
//公共模块 ---> 大家公用的工具utils
var utils = {
    select: function() {

    }
}

var newRender = {
    change: function() {
        //在自己的命名空间下调用自己命名空间的方法
        //这里调用都是用this this -->指newRender 当然也可以这样调用 newRender.clickEven();
        //使用this的好处  如果以后newRender改了名字 ===> newRender2 this 调用方式 不用再修改代码了 
        //但是newRender.clickEven() ===> 要改成 newRender2.clickEven()
        this.clickEven();
    },
    clickEven: function() {

    }
}
//调用方式  newRender.change()

4.引出工厂模式

• 单例模式虽然解决了分组的作用,但是不能实现批量生产,属于手工作业模式,
• "工厂模式":把实现同一件事情的相同的代码放到一个函数中,以后如果再想实现这个功能,不需要重新编写这些代码,只需要执行当前的函数即可--->("函数的封装")

function createJsPerson(name,age) {
    var obj = {};
    obj.name = name;
    obj.age = age;
    obj.writeJs = function() {
        console.log("my name is" + this.name +"i can write Js");
    }
    return obj;
}
var p1 = createJsPerson("A",18);
var p2 = createJsPerson("B",20);
//创建了两个人 但是只写了一遍代码

• JS是一门轻量级的脚本"编程语言"
• "函数的封装":低耦合(耦合 ===> 相同) 高内聚(内聚 ===> 重复利用率) 减少页面中的冗余代码,提高代码的重复利用率
• 引出面向对象 ---> 类的继承、封装、多态
• 继承:子类继承父类中的属性和方法
• 多态:当前方法的多种形态
• 后台语言中: 多态包含重载和重写

//JS --->全世界最简单的语言、编程入门语言(导师说的) 知识不分先后 只分深浅 而深浅通过努力是可以改变的
//闻道有先后 术业有专攻 如是而已
//后端函数 可能会有错误 大致意思如下
publict void sum(int num1, int num2) {

}
public void sum(string num1,string num2) {

}
//如 sum(1,2) 调用的是第一个函数  sum('1','2') 调用的是第二个函数
//调用sum ---> 根据参数形式不同 调用对应的函数 
//sum 由于参数形式不同 ---> 是两个不同的方法
//参数名相同 处理事情不一样 ---> 叫做重载

• "前端重载"

function sum(num1,num2) {

}

function sum(num1) {

}
//严格地说 JS不存在"重载",方法名一样的话,后面的会把前面的覆盖掉,最后只会保留一个,所以无法做到和后端一样"重载"

• 重写:子类重写父类的方法
• JS中有一个操作类似重载,但不是重载,我们可以根据传递参数的不一样,实现不同的功能

function sum(num) {
    if(typeof num === "undefined") {
        return 0;
    }
    return num;
}
sum(100);
sum();//这叫做js的多态

• 动力: 这是我的学习笔记(来源于视频),您能从中得到收获和进步,是我分享的动力,帮助别人,自己也会更快乐
• 期望: 不喜勿喷,谢谢合作！如果涉及版权请及时联系我,马上删除!