跳至主要內容
JavaScript设计模式

介绍

设计模式是针对常见软件问题的高级面向对象解决方案。模式是关于对象的可重用设计和交互。在讨论复杂的设计解决方案时,每个模式都有一个名称并成为词汇表的一部分。

01、Abstract Factory

Abstract Factory创建由共同主题相关的对象。在面向对象编程中,工厂是创建其他对象的对象。抽象工厂抽象出新创建的对象共享的主题。

function Employee(name) {
  this.name = name;
  this.say = function () {
    console.log("I am employee " + name);
  };
}
function EmployeeFactory() {
  this.create = function (name) {
    return new Employee(name);
  };
}
function Vendor(name) {
  this.name = name;
  this.say = function () {
    console.log("I am vendor " + name);
  };
}
function VendorFactory() {
  this.create = function (name) {
    return new Vendor(name);
  };
}
function run() {
  var persons = [];
  var employeeFactory = new EmployeeFactory();
  var vendorFactory = new VendorFactory();
  persons.push(employeeFactory.create("Joan DiSilva"));
  persons.push(employeeFactory.create("Tim O'Neill"));
  persons.push(vendorFactory.create("Gerald Watson"));
  persons.push(vendorFactory.create("Nicole McNight"));
  for (var i = 0, len = persons.length; i < len; i++) {
    persons[i].say();
  }
}

编程技巧JavaScriptJavaScript大约 6 分钟
高逼格的JS插件

1、原型链写法

要开始编写插件就得先了解JS模块化,早期的模块化是利用了函数自执行来实现的,在单独的函数作用域中执行代码可以避免插件中定义的变量污染到全局变量,举个栗子🌰,以下代码实现了一个简单随机数生成的插件:

;(function (global) {
    "use strict";

    var MyPlugin = function (name) {
        this.name = name
    };

    MyPlugin.prototype = {
        say: function () {
            console.log('欢迎你:', this.name)
        },
        random: function (min = 0, max = 1) {
            if (min <= Number.MAX_SAFE_INTEGER && max <= Number.MAX_SAFE_INTEGER) {
                return Math.floor(Math.random() * (max - min + 1)) + min
            }
        }
    };
    
    // 函数自执行将 this(全局下为window)传入,并在其下面挂载方法
    global.MyPlugin = MyPlugin;
    // 兼容CommonJs规范导出
    if (typeof module !== 'undefined' && module.exports) module.exports = MyPlugin; 
})(this);

编程技巧JavaScriptJavaScript大约 9 分钟
JavaScript工具函数

1、生成随机颜色

const generateRandomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`
console.log(generateRandomHexColor())

编程技巧JavaScriptJavaScript大约 2 分钟
canvas效果
[[toc]] 时钟 ::: normal-demo [vanilla] :::

编程技巧CSSSJavaScript大约 2 分钟
JS站点
[[toc]] 工具库 utils-lan (https://github.com/lanzhsh/react-vue-koa/tree/master/utils-lan):js工具类; JavaScript表单验证库 ApproveJS-官网 (https://charlgottschalk.github.io/approvejs/docs/); A...

编程技巧JavaScriptJavaScript大约 3 分钟
JS技巧
[[toc]] ------ 数组 ------ 填充数组 展平数组的数组 数组交集 数组并集 数组差集 数组补集 数组去重 分割指定长度的元素数组 数组求和 数组合并 数组是否包含值 数组每一项都满足 数组有一项满足 数组排序 版本号排序 对象转数组 数组转对象 数组解构 数组随机元素 指定长度的数字数组 随机打乱数组元素的顺序 ------ Obj...

编程技巧JavaScriptJavaScript大约 14 分钟
JS工具函数
[[toc]] slice,splice,split的区别 slice; 用法:array.slice(start,end),含头不含尾 解释:该方法是对数组或者字符串进行部分截取,并返回一个数副本; splice; 用法:array.splice(start,deleteCount,item...) 解释:splice方法从array中移除一个或多个...

编程技巧JavaScriptJavaScript大约 12 分钟
JS防抖与节流
[[toc]] 防抖(debounce)和节流/限频(throttle)的作用都是在高频事件中防止函数被多次调用,提高用户体验,是一种性能优化的方案。 区别在于,防抖函数只会在高频事件结束后n毫秒调用一次函数,节流函数会在高频事件触发过程当中每隔n毫秒调用一次函数。 名词解释 连续操作:两个操作之间的时间间隔小于设定的阀值,这样子的一连串操作视为连续操...

编程技巧JavaScriptJavaScript大约 4 分钟
JS表白
[[toc]] 你喜欢我吗? ::: normal-demo [vanilla] :::

编程技巧JavaScriptJavaScript小于 1 分钟