Solid

单例模式的关键有两点： 1.构造方法为私有，这样外界就不能随意调用。 2.get的方法为静态，由类直接调用 多例模式（Multiton） 1 、多例类可以有多个实例 2 、多例类必须能够自我创建并管理自己的实例，并向外界提供自己的实例。 一、单例模式和多例模式说明： 1. 单例模式和多例模式属于对象模式。 2. 单例模式的对象在整个系统中只有一份，多例模式可以有多个实例。 3. 它们都不对外提供构造方法，即构造方法都为私有。 单例模式的三种形式： 第一种形式:懒汉式 public class SingletonClass{ private static SingletonClass instance=null; public static　synchronized　SingletonClass getInstance() { if(instance==null) { instance=new SingletonClass(); } return instance; } private SingletonClass(){ } } 第二种形式:饿汉式 //对第一行static的一些解释 // java允许我们在一个类里面定义静态类。比如内部类（nested class）。 //把nested class封闭起来的类叫外部类。 //在java中，我们不能用static修饰顶级类（top

在Vue项目使用quill-editor带样式编辑器（更改插入图片和视频） https://www.cnblogs.com/zhengweijie/p/7305903.html vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中，如果图片比较大的话，富文本的内容就会很大。 插入视频是直接弹框输入URL地址，某些需求下我们需要让用户去本地选择自己的视频，我们可以通过 vue-quill-editor 内部的某些方法进行更改 该方法使用了 element-ui 和 文件上传七牛 一、npm 安装 vue-quill-editor 二、在main.js中引入 import VueQuillEditor from 'vue-quill-editor' Vue.use(VueQuillEditor) HTML部分：为编辑器绑定各个API事件，定义一个隐藏的input框，用于点击图片或者视频图标上传文件 <template> <div> <!-- quill-editor插件标签 分别绑定各个事件--> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus(

------ IE6以下版本不支持：max-width 和 min-width两个值。 --------------- <style type="text/css"> 　　p{width:500px;} 　　#one{max-width:400px; min-width:200px;} 　　#two{max-width:800px; min-width:600px;} </style> <div> 　　<p id="one"></p> //显示为400px; </div> <div> 　　<p id="two"></p> //显示为600px; </div> ==============================================　　 在IE6以下版本是不支持：max-height 和 min-height. 元素可以同时设置min-height属性与height属性 如果一个元素同时设置max-height和min-height属性， 并且max-height值小于min-height值，结果：显示min-height值 当一个元素同时设置 max-height和min-height，max-height值小于min-height值，最大高度自动转换成最小高度的值 =============== img标签是有它的src决定的，它指定的图片大小决定了

一、ToDoList需求 参考链接http://www.todolist.cn/ 　　1.将用户输入添加至待办项 　　2.可以对todolist进行分类（待办项和已完成组），用户勾选既将待办项分入已完成组 　　3.todolist的每一项可删除和编辑 　　4.下方有clear按钮，并清空所有todolist项 二、html <! DOCTYPE html > < html lang ="en" > < head > < meta http-equiv ="Content-Type" content ="text/html;charset=utf-8" > < meta name ="viewport" content ="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" > < title > ToDoList-最简单的待办事项列表 </ title > < meta name ="description" content ="ToDoList无须注册即可使用，数据存储在用户浏览器的html5本地数据库里，是最简单最安全的待办事项列表应用！" > < link rel ="stylesheet" href ="./css/index.css" > </ head > < body

@charset "utf-8"; /* CSS Document */ *{/*通配符选择器*/ margin:0px; padding:0px; } ul{ list-style:none; } #box{ /*background-color:#F00;*/ width:1024px; height:1300px; /*margin:0 auto;*/ margin:0 auto 0 auto;/*上 右 下 左*/ } /*放图片，设置高度和图片一样高*/ #banner{ background-color:#66F; height:209px; } #menu{ background-color:#328048;/*用颜色取色器取的*/ height:50px; } /*修改id为menu的、html标签下面的、ul标签的样式*/ #menu ul{ list-style:none;/*去掉点*/ float:right;/*靠右*/ height:50px; width:450px; } #menu li{ line-height:50px;/*设置行居中*/ float:left;/*可以使列表竖着变横着*/ margin-left:20px;/*li距离左边那个li的距离*/ } /*#menu ul li a{}*/ #menu a{ color:#FFF;/

1、创建地图 （10x10,宽度20格子） 2、创造人物（蛇头，设置初始位置，绝对位置【0,0】，开始游戏游戏后方向，速度） 3、创造食物（随机坐标，上一个结束后创建下一个，不能生成在蛇身体位置，可以格子和蛇身加唯一index） 4、移动人物（蛇头，监测键盘keycode 37、38、39、40，相应位置改变） 5、碰撞食物（事件判断，食物加入到蛇头后面，跟随移动，积分增加） 6、游戏结束判断（1、超出边框【可以检测蛇头头部位置或和所有格子碰撞检测】 2、撞击自身） 拓展： 1、控制游戏难度，改变定时器时间，改变speed 2、排行榜，企业应用，游戏结束弹出表单，可以填写信息到排行榜。 < html > < head > < meta charset ="UTF-8" > < title > 贪吃蛇 </ title > < style type ="text/css" > * { margin : 0 ; padding : 0 ; } ul { list-style : none ; } #container { border : 1px solid #ccc ; border-bottom : none ; border-right : none ; position : relative ; } #container > div { float : right ; }

点击上方 “ 慧响智凝 ” 可以订阅哦！ 本文字数： 5160字 阅读时间： 10分钟 最近阅读了一本架构方面的入门图书叫《从零开始学架构：照着做，你也能成为架构师》，部分内容比较不错，先做书摘总结，以便加深印象与未来回顾学习。 本文是该书第二部分，是书中第四、五章，主要介绍存储高性能、计算高性能，涉及到关系型数据库分库分表与读写分离、NoSQL类型、缓存穿透与热点、单服高性能、集群高性能等内容。 目录 ▪ 第四章 存储高性能 ▪第五章 计算高性能 ▪其他相关摘要 第四章 存储高性能 关系型数据库 读写分离 本质： 将访问压力分散到集群中的多个节点，但是没有分散存储压力。 读写分离的基 ‍ 本实现： 数据库服务器搭建主 ‍ 从集群，一主一从、一主多从都可以。 数据库主机负责读写操作，从机只负责读操作。 数据库主机通过复制将数据同步到从机，每台数据库服务器都存储了所有的业务数据。 业务服务器将 ‍ 写操作发给数据库主机，将读操作发给数据库从机。 读写分离在实际应用过程中需要应对复制延迟带来的复杂性。 解决主从复制延迟的方法： 写操作后的读操作指定发给数据库主服务器。 读从机失败后再读一次主机。 关键业务读写操作全部指向主机，非关键业务采用读写分离。 分库分表 本质： 既可以分散访问压力，又可以分散存储压力。 为了满足业务数据存储的要求，就需要将存储分散到多台数据库服务器上。

B站那个毛玻璃效果挺不错的，尝试着弄了一下 两种方法原理一样 方法一： 效果图： html 代码 <! DOCTYPE html > < html > < head > < meta charset ="utf-8" /> < title ></ title > < link rel ="stylesheet" type ="text/css" href ="css/index.css" /> </ head > < body > < div class ="all" > < div class ="a" > < div class ="b" > </ div > < div class ="c" > < ul > < li > < a href ="#" > 主站 </ a > </ li > < li > < a href ="#" > 画友 </ a > </ li > < li > < a href ="#" > 游戏中心 </ a > </ li > </ ul > </ div > </ div > </ div > < div class ="d" ></ div > </ body > </ html > css代码： body ,.b { background-image : url(../img/1010655.jpg) ; background

CSS设置居中的方案总结-超全 前几天面试一家公司，被问到垂直居中的方法，我只答出了margin、table-cell、flex三种。回来之后觉得特别惭愧，于是整理了一下居中的方案做个记录，希望对大家也有帮助。 如果哪里写的不对，欢迎指正，非常感谢。 块级元素居中 html代码部分 <div class="parent"> <div class="child">child</div> </div> 复制代码 行内元素居中 html代码部分 <div class="parent"> <span class="child">child</span> </div> 复制代码 水平居中 01 行内元素 text-align: center; .parent { text-align: center; } 复制代码 02 块级元素 margin: auto; （低版本浏览器还需要设置 text-align: center;） .parent { text-align: center; } .child { width: 100px; margin: auto; border: 1px solid blue; } 复制代码 由于本文主要想记录的是垂直居中的方案，这里水平垂直的其他方案就不做过多记录了。 垂直居中 01 行内元素（单行文字垂直居中）：设置 line-height = height

前言 　　如今各种各样的账号注册登录大部分都涉及到了验证码的输入，那这些验证码是怎么实现的呢？ 概述 　　目前比较常见的验证码格式主要有三种: 数字短信验证码、 图形验证码、滑动验证码 ，下面我们就一起来看看这些验证码是怎么实现的。 1.数字短信验证码 　　数字短信验证码就是要求我们输入手机号码，然后获取手机收到的验证码。 　　 　　思路： 　　a.两个文本框+一个获取验证码按钮，文本框用来输入手机号和获取到的验证码，按钮负责点击和记录倒计时； 　　b.js书写定时器setTimeout，进行60秒验证码失效时间记录； 　　c.后台提供短信获取验证的接口，我们把手机号作为参数上传，后台获取到后给该手机号下发验证码； 　　效果图展示： 　　例1.0：点击按钮发送验证码效果图 短信接收截图 　　代码展示： 　　html <input type="text" name="phone" id="phone" value="" placeholder="请输入手机号" maxlength="11" /> <input type="" name="verCode" id="verCode" value="" placeholder="请输入验证码" maxlength="6"/> <input type="button" name="" id="verCodeBtn" value="获取验证码