2021-12-02杨靖分享

.idea/modules.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/studyShare.iml" filepath="$PROJECT_DIR$/.idea/studyShare.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file

.idea/studyShare.iml

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file

.idea/vcs.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file

.idea/workspace.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="c3ed3368-ab21-4066-8fd9-d5ce4adbfce8" name="Changes" comment="" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="ProjectId" id="21knkS73WxE0qUWvQ9UBXDlhbEw" />
+  <component name="ProjectViewState">
+    <option name="foldersAlwaysOnTop" value="false" />
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showExcludedFiles" value="false" />
+    <option name="showLibraryContents" value="true" />
+    <option name="sortByType" value="true" />
+  </component>
+  <component name="PropertiesComponent">
+    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
+    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/.." />
+    <property name="nodejs_package_manager_path" value="npm" />
+    <property name="vue.rearranger.settings.migration" value="true" />
+  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="c3ed3368-ab21-4066-8fd9-d5ce4adbfce8" name="Changes" comment="" />
+      <created>1638494095792</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1638494095792</updated>
+      <workItem from="1638494097092" duration="7000" />
+      <workItem from="1638494217107" duration="15000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+</project>
\ No newline at end of file

wiki/简单了解oop编程思想和常见的几种设计模式.md

+## 简单了解面向对象编程（oop）和常见的几种设计模式
+
+***背景：***
+
+1、软件设计开发过程中疑难问题：
+
+ - 软件复杂庞大 	
+ - 难以维护阶
+ - 	版本迭代需求变更
+
+	
+软件设计开发中存在很多其他的问题，上面只是从程序开发和设计的角度看到的部分问题。需求解决上面软件开发中的问题，就要求我们编写（设计）的软件具有很好的可读性、可维护性和可扩展性。我们需要保证代码具有高内聚低耦合，这里我们使用了OOP编程思想。
+
+
+***oop四大基本特性：***
+
+ - 抽象：提取现实世界中某事物的关键特性，为该事物构建模型的过程。对同一事物在不同的需求下，需要提取的特性可能不一样。得到的抽象模型中一般包含：属性（数据）和操作（行为）。这个抽象模型我们称之为类。对类进行实例化得到对象。
+ 
+ - 封装：封装可以使类具有独立性和隔离性；保证类的高内聚。只暴露给类外部或者子类必须的属性和操作。类封装的实现依赖类的修饰符（public、protected和private等）
+ 
+ - 继承：对现有类的一种复用机制。一个类如果继承现有的类，则这个类将拥有被继承类的所有非私有特性（属性和操作）。这里指的继承包含：类的继承和接口的实现。
+ 
+ - 多态：多态是在继承的基础上实现的。多态的三个要素：继承、重写和父类引用指向子类对象。父类引用指向不同的子类对象时，调用相同的方法，呈现出不同的行为；就是类多态特性。多态可以分成编译时多态和运行时多态。
+
+
+ ***24种设计模式：***
+![在这里插入图片描述](https://img-blog.csdnimg.cn/57c61fe541c747a18ec9022302617df1.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5aSc6L2p57Sr6K-t,size_16,color_FFFFFF,t_70,g_se,x_16#pic_center)
+***常见的几种设计模式：***
+
+1、构造函数模式
+```javascript
+/**
+ * 构造一个动物的函数 
+ */
+function Animal(name, color){
+    this.name = name;
+    this.color = color;
+    this.getName = function(){
+        return this.name;
+    }
+}
+// 实例一个对象
+var cat = new Animal('猫', '白色');
+console.log( cat.getName() );
+```
+
+2、工厂模式
+
+```javascript
+/**
+ * 工厂模式
+ */
+function Animal(opts){
+    var obj = new Object();
+    obj.name = opts.name;
+    obj.color = opts.color;
+    obj.getInfo = function(){
+        return '名称：'+obj.name +'， 颜色：'+ obj.color;
+    }
+    return obj;
+}
+var cat = Animal({name: '波斯猫', color: '白色'});
+cat.getInfo();
+```
+3、模块模式
+
+```javascript
+/**
+ * 模块模式 = 封装大部分代码，只暴露必需接口
+ */
+var Car = (function(){
+    var name = '法拉利';
+    function sayName(){
+        console.log( name );
+    }
+    function getColor(name){
+        console.log( name );
+    }
+    return {
+        name: sayName,
+        color: getColor
+    }
+})();
+Car.name();
+Car.color('红色');
+```
+4、混合模式
+
+```javascript
+/**
+ * 混合模式 = 原型模式 + 构造函数模式
+ */
+function Animal(name, color){
+    this.name = name;
+    this.color = color;
+    console.log( this.name  +  this.color)
+}
+
+Animal.prototype.getInfo = function(){
+    console.log('名称：'+ this.name);
+}
+
+function largeCat(name, color){
+    Animal.call(null, name, color);
+    this.color = color;
+}
+
+largeCat.prototype = create(Animal.prototype);
+function create (parentObj){
+    function F(){}
+    F.prototype = parentObj;
+    return new F();
+};
+
+largeCat.prototype.getColor = function(){
+    return this.color;
+}
+var cat = new largeCat("Persian", "白色");
+console.log( cat )
+```
+5、单例模式
+
+```javascript
+/**
+ * 在执行当前 Single 只获得唯一一个对象
+ */
+var Single = (function(){
+    var instance;
+    function init() {
+        //define private methods and properties
+        //do something
+        return {
+            //define public methods and properties
+        };
+    }
+
+    return {
+        // 获取实例
+        getInstance:function(){
+            if(!instance){
+                instance = init();
+            }
+            return instance;
+        }
+    }
+})();
+
+var obj1 = Single.getInstance();
+var obj2 = Single.getInstance();
+
+console.log(obj1 === obj2);
+```
+6、发布订阅模式
+
+```javascript
+/**
+ * 发布订阅模式
+ */
+var EventCenter = (function(){
+    var events = {};
+    /*
+    {
+      my_event: [{handler: function(data){xxx}}, {handler: function(data){yyy}}]
+    }
+    */
+    // 绑定事件 添加回调
+    function on(evt, handler){
+        events[evt] = events[evt] || [];
+        events[evt].push({
+            handler:handler
+        })
+    }
+    function fire(evt, arg){
+        if(!events[evt]){
+            return 
+        }
+        for(var i=0; i < events[evt].length; i++){
+            events[evt][i].handler(arg);
+        }
+    }
+    function off(evt){
+        delete events[evt];
+    }
+    return {
+        on:on,
+        fire:fire,
+        off:off
+    }
+}());
+
+var number = 1;
+EventCenter.on('click', function(data){
+    console.log('click 事件' + data + number++ +'次');
+});
+EventCenter.off('click');   //  只绑定一次
+EventCenter.on('click', function(data){
+    console.log('click 事件' + data + number++ +'次');
+});
+
+EventCenter.fire('click', '绑定');
+```
+