JavaScript中的this指向
函数内的this
普通函数内的this分为两种情况,严格模式下和非严格模式下。
严格模式下function test() { 'use strict' console.log(this);}test(); //undefinedwindow.test(); //window
非严格模式下function test() { console.log(this);}test(); //windowwindow.test(); //window
在普通函数中this指向window、匿名函数的this也指向的是window
对象中的this
对象内部方法的this指向调用这些方法的对象,也就是谁调用就指向谁
let obj = { name: 'test', skill: function() { name: 'test2', console.log(this.name); }}obj.skill(); //test
函数 ...
Docker-CentOS安装教程
介绍Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows操作系统的机器上,也可以实现虚拟化。容器是完全使用沙箱机制,相互之间不会有任何接口。
docker安装# 使用'yum-utils'来维护YUM并提高其性能sudo yum install -y yum-utils device-mapper-persistent-data lvm2sudo yum-config-manager --add-repo https://download.docker.com/linux/CentOS/docker-ce.repo# 默认安装最新版本(不指定版本的情况下)sudo yum -y install docker-ce docker-ce-cli containerd.io# 如果想安装指定版本,查找指定的版本进行安装yum list docker-ce --showduplicates | sort -r# 1. 重启docker服务sudo systemctl restart ...
Vue3在哪些方面做了性能提升?
编译阶优化段
在Vue2中,每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把用到的数据property记录为依赖,当依赖发生改变,触发setter,则会通知watcher,从而使关联的组件重新渲染
假如一个vue组件有如下模板结构:
<template> <div id="content"> <p class="text">静态文本</p> <p class="text">静态文本</p> <p class="text">{{ message }}</p> <p class="text">静态文本</p> ... <p class="text">静态文本</p> </div></t ...
Spring设计模式-代理模式
代理模式
代理模式给某一个对象提供一个代理对象,并由代理对象控制对原对象的引用。动态代理是SpringAop的底层。
代理模式的分类
静态代理由程序员创建代理类或特定工具自动生成源代码再对其编译,在程序运行前代理类的 .class 文件就已经存在了。
动态代理在程序运行时,运用反射机制动态创建而成。
代理模式的优点:
可以使真实角色的操作更加纯粹!不用关注一些公共的业务。
公共业务交给代理角色,实现了业务的分工
公共业务扩展的时候,方便集中管理。
静态代理
定义一个接口;
被代理类实现接口;
代理类引用被代理类,并且通过被代理类的方法实现接口。
//租房接口public interface rental { void doRental();}//房东public class landlord implements rental{ @Override public void doRental() { System.out.println("房东要出租房子"); } ...
Vue-I18n
安装vue-i18nnpm install vue-i18n -Syarn add vue-i18n
创建多语言文件夹lang,并且创建index.js、zh.jsindex.js内容如下:
import Vue from 'vue'import VueI18n from 'vue-i18n'import Cookies from 'js-cookie'import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui langimport zhLocale from './zh'Vue.use(VueI18n)export const DEFAULT_LOCALE_MSG = { zh: { ...zhLocale, ...elementZhLocale }}const messages = Object.assign({}, ...
Spring设计模式-工厂模式
工厂模式
工厂模式是一种在工程中广泛应用的设计模式,对代码的解耦合起到了很大的作用。在Spring使用开发中,我们可以将Spring理解成封装了我们工程中大量重复代码的一种工具,Spring中最为重要的组件就是IOC,而IOC中非常重要的部分就是应用了工厂模式的代码。
工厂模式的分类
简单工厂模式( simple Factory)又叫做静态工厂方法(StaticFactory Method) 模式, 但不属于 23 种设计模式之一。简单工厂模式的实质是由一个工厂类根据传入的参数, 动态决定应该创建哪一个产品类。
工厂方法模式(Factory Method)通常由应用程序直接使用 new 创建新的对象, 为了将对象的创建和使用相分离, 采用工厂方法模式方法,即应用程序将对象的创建及初始化职责交给工厂对象
抽象工厂模式(abstract Factory)主要创建一个产品族,不同工厂继承父类的抽象工厂创建不同的产品族。
简单工厂模式( simple Factory)接口类car
/** * @Project: spring * @description: 实现车子的接口 * @auth ...
Vue2 Element-UI选择器优化
图示效果
注:基于select的下拉筛选,通过自定义事件来实现模糊搜索匹配。一共两种方案:
一是获取所有数据,通过输入的关键字自己对获取的数据进行过滤处理;
二是通过输入的关键字来动态请求后台接口,通过接口返回的数据来动态渲染下拉选项;
代码实现<template> <div class="app"> <el-dialog title="标题" :visible.sync="relatedOpen" :append-to-body="true" width="500px"> <el-row :gutter="16"> <el-col :span="20"> <el-select v-model="value" filterable clearab ...
JavaScript数据类型判断
数据类型分类基本类型
字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol。
引用类型
对象(Object)、数组(Array)、函数(Function),还有两个特殊的对象:正则(RegExp)和日期(Date)
注:Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。
typeof
typeof 是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型。返回的结果用该类型的字符串(全小写字母)形式表示,包括以下 7 种:number、boolean、symbol、string、object、undefined、function 等。
typeof ''; // string 有效typeof 1; // number 有效typeof Symbol(); // symbol 有效typeof true; //boolean 有效typeof undefined; //undefined 有效typeof null; //object 无效typeof ...
Spring设计模式-单例模式
单例模式
单例模式是一种确保每个应用程序仅存在一个对象实例的机制。在管理共享资源或提供跨领域服务(例如日志记录)时,此模式很有用。
优点和缺点优点:
单例模式可以保证内存里只有一个实例,减少了内存的开销。
可以避免对资源的多重占用。
单例模式设置全局的访问点,可以优化和共享资源的访问。
缺点:
单例模式一般没有接口,扩展困难,如果要扩展,则除了修改原来的代码,没有第二种途径,违背开闭原则。
在并发测试中,单例模式不利于代码调试。在调试过程中。如果单例中的代码没有执行完,也不能拟生成一个新的对象。
单例模式的功能代码通常写在一个类中,如果功能设计不合理,则很容易违背单一职责原则。
应用
开发工具类库中的很多工具类都应用了单例模式,比例线程池、缓存、日志对象、Bean等,它们都只需要创建一个对象。
饿汉式public class Singleton { private static final Singleton singleton = new Singleton(); private Singleton() { } publi ...
Vue2 Element-UI 表格大数据加载渲染慢问题
思想
假设全部数据为initTable(数组),现在使用一个tableData(数组),tableData = initTable.slice(scorll, scorll+ displayCount),scroll表示当前滚动到的index, displayCount表示要展示的行数。把tableData设为el-table的数据源,只渲染该部分数据。通过对表格添加滚动事件监听,来动态更新scroll,并且对scroll添加watch,当scroll发生变化,就自动更新tableData。采用虚拟滑动条方式触发。
创建指令创建文件夹el-table,在其下面创建loadmore.js内容如下:
import Vue from 'vue'let flag = true // 控制返回频度,以免内存消耗过大export default { bind(el, binding, vnode) { const { arg } = binding; const a = '<div ...