JavaScript 模式

:mortar_board: Sublime Text 的 JavaScript 模式片段

详细信息

版本 2018.11.08.14.11.46
主页 goo.gl
问题 github.com
修改时间 6 年前
最后看到 9 分钟前
首次出现 11 年前

安装量

总计 47K
Win 29K
Mac 11K
Linux 7K

	8 月 6 日	8 月 5 日	8 月 4 日	8 月 3 日	8 月 2 日	8 月 1 日	7 月 31 日	7 月 30 日	7 月 29 日	7 月 28 日	7 月 27 日	7 月 26 日	7 月 25 日	7 月 24 日	7 月 23 日	7 月 22 日	7 月 21 日	7 月 20 日	7 月 19 日	7 月 18 日	7 月 17 日	7 月 16 日	7 月 15 日	7 月 14 日	7 月 13 日	7 月 12 日	7 月 11 日	7 月 10 日	7 月 9 日	7 月 8 日	7 月 7 日	7 月 6 日	7 月 5 日	7 月 4 日	7 月 3 日	7 月 2 日	7 月 1 日	6 月 30 日	6 月 29 日	6 月 28 日	6 月 27 日	6 月 26 日	6 月 25 日	6 月 24 日	6 月 23 日
Windows	0	1	2	1	1	1	1	0	0	0	0	1	0	1	0	0	0	1	0	0	2	0	1	0	0	1	0	0	1	0	1	0	1	0	0	0	1	0	0	1	1	1	2	0	1
Mac	1	1	0	0	0	0	0	0	1	0	0	0	1	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0
Linux	0	0	0	0	0	1	0	0	0	2	0	0	1	1	0	0	0	0	0	0	1	0	0	0	0	0	0	0	0	0	0	1	0	1	0	0	0	0	0	0	0	0	0	1	0

README

源码: raw.githubusercontent.com

JavaScript 模式片段

JS Patterns logo

Sublime Text 的片段，提供对 JavaScript 中常见问题的良好解决方案。

在软件开发中，设计模式是在给定的软件设计上下文中解决常见问题的通用可重用解决方案。

– 维基百科

要通过包控制安装，搜索 JavaScript 模式。如果您还没有在 Sublime Text 中安装包控制，请安装它。如果您坚持不安装它，您可以下载此包并将其手动放入您的包目录中。它应该工作，但不会自动更新。

片段

野外的一些 JS 模式片段。

即时函数

触发: ifun⇥

为了保持全局作用域的清洁并且在受控环境中使用严格模式，而在全局作用域中不会触发。

;(function() {
    'use strict';
    // closure scope
}());

参考：- StackOverflow：立即函数 JavaScript

For in

触发: forin⇥

JavaScript 中的 For-in 循环将遍历添加到正在迭代的对象原型链中的新属性。为了仅迭代对象本身的属性，我们必须使用 .hasOwnProperty('propertyName')。如下所示。

for (var prop in obj) {
  if ({}.hasOwnProperty.call(obj, prop)) {
    obj[prop];
  }
}

参考：- JavaScript 模式，由 Stoyan Stefanov 撰写 - 编写高质量 JavaScript 的精华

Object.keys 循环

触发: okl⇥

如果您的环境支持该方法，建议使用此方法而不是 for in。

Object.keys(obj).forEach(function(key) {
  // inside loop
});

改进的 for 循环

触发: ifor⇥

更快地编写for循环的方法。它存储数组大小，因此我们不需要在每次迭代中重新计算大小。

for (i = 0, len = arr.length; i < len; i++) {
  // array length is calculated only 1 time and then stored
}

参考：- 浏览器节食

构造函数模式

触发：构造函数⇥

此构造函数模式强制使用new，即使你像调用函数那样调用构造函数。在JavaScript中，如果忘记new关键字，this将引用构造函数内的全局对象，而这从来都不是一个期望的情况。

这种方法类似于jQuery中的$()和$.Deferred()，你可以像new $()和new $.Deferred一样调用。

var ConstructorName = (function() {
  'use strict';

  function ConstructorName(arg1, arg2) {
    // enforces new
    if (!(this instanceof ConstructorName)) {
        return new ConstructorName();
    }

    // constructor body
  }

  ConstructorName.prototype.someMethod = function(arg) {
    // method body
  }

  return ConstructorName;
}());

参考：- 对象创建模式

单例模式

触发：单例⇥

使用单例模式将只有一个构造函数的实例。如果你尝试实例化另一个实例，将返回最初创建的第一个实例。

var singletonName = (function() {
  'use strict';

  var instance;

  singletonName = function() {
    if (instance) {
      return instance;
    }

    instance = this;

    // your code goes here
  };

  return singletonName;
}());

参考：- 单例模式 - 简单想法

模块

触发：模块⇥

这是一个简单的模块模式。使用严格模式，并建议使用init函数来启动。还可以定义一些“私有”的方法和变量。只返回具有模块名称的变量，因此在外部闭包中公开。

var moduleName = (function() {
  'use strict';

  var privateVar = '';

  var moduleName = {
    init: {
      // kickoff
    }
  }

  return moduleName;
}());

参考：- JavaScript模块模式：深入

可见模块

触发：rmodule⇥

有人可能会说，这是一种更简洁、更有条理的方式来定义模块。它声明了所有变量和函数在私有作用域中，并返回一个包含对将要公开的内容的追求的obj。

var revealingModule = (function() {
  'use strict';

  var privateVar = 'foo';
  var publicVar = 'bar';

  function privateFunction() {

  }

  function publicFunction() {

  }

  return {
    publicVar: publicVar,
    publicFunction: publicFunction
  };
}());

AMD

触发：amdmod⇥

异步模块定义（AMD）API指定了定义模块的机制，以便模块及其依赖项可以异步加载。这特别适合浏览器环境，因为在浏览器环境中同步加载模块会导致性能、可用性、调试和跨域访问问题。

define([
    "module1"
], function(module1) {
    "use strict";

    // static public property
    myModule.prop;

    var myModule = function() {

        // public var
        this.b = null;

        // pseudo-protected var
        this._c = null;

    };

    function privateMethod(args) {
    };

    myModule.staticMethod = function(args) {
    };

    myModule.prototype.publicMethod = function(args) {
    };

    return myModule;
});

参考：- AMD API

记忆化

缓存函数的返回值。对于调用重复的昂贵函数非常有用。

var expensiveFunction = (function() {
  'use strict';

  var funcMemoized = function() {
    var cacheKey = JSON.stringify(Array.prototype.slice.call(arguments));
    var result;

    if (!funcMemoized.cache.hasOwnProperty(cacheKey)) {
        // your expensive computation goes here

        funcMemoized.cache[cacheKey] = result;
    }

    return funcMemoized.cache[cacheKey];
  }

  funcMemoized.cache = {};

  return funcMemoized;
}());

节流

即使你重复调用它，该函数每X秒最多调用一次。对于某些DOM事件很有用，例如窗口的resize事件。

var onResize = (function() {
  'use strict';

  var timeWindow = 200; // time in ms
  var lastExecution = new Date((new Date()).getTime() - timeWindow);

  var onResize = function(args) {
    // your code goes here
  };

  return function() {
    if ((lastExecution.getTime() + timeWindow) <= (new Date()).getTime()) {
      lastExecution = new Date();
      return onResize.apply(this, arguments);
    }
  };
}());

参考：- Underscore.js

防抖

该函数将在从上次调用过去X毫秒之后推迟执行。对于某些事件非常有用，例如在提交按钮上的一些交互之后的一些时间。

var autocomplete = (function() {
  'use strict';

  var timeWindow = 500; // time in ms
  var timeout;

  var autocomplete = function(arg1, arg2) {
    // your code goes here
  };

  return function() {
    var context = this;
    var args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      autocomplete.apply(context, args);
    }, timeWindow);
  };
}());

参考：- Underscore.js - David Walsh

命名空间

触发：命名空间⇥

命名空间是一种技术，用于避免与其他全局对象或变量发生冲突。它们也非常有用，可以协助将应用中的功能块组织成易于管理的组，从而可以唯一地识别。当然，任何可扩展的命名空间模式的关键都是可扩展性，而IIFEs可以很容易地实现这一点。

;(function(namespace) {
  'use strict';

  // your code goes here
  // namespace.method = function(){};
})(window.namespace = window.namespace || {});

参考：- Addy Osmani - Essential JS Namespacing

一次

触发：一次⇥

创建一个只能执行一次的函数。

var once = (function() {
  var didRun = false;

  // This function will be executed only once, no matter how many times
  // it is called.
  function once() {
    // ...
  }

  return function() {
    if (didRun) {
      return;
    }

    didRun = true;

    return foo.apply(this, arguments);
  }
})();

贡献者

59  Caio Gondim
01  Arne Schlüter
01  Breno Calazans
01  Philip Blyth
01  gaboesquivel

捐赠

如果您觉得这个项目有用，并愿意捐款，请将一些比特币转至以下地址：1BqqKiZA8Tq43CdukdBEwCdDD42jxuX9UY或通过以下网址 https://www.coinbase.com/caiogondim进行捐赠。

或者通过PayPal.me https://www.paypal.me/caiogondim进行捐赠。

许可证

MIT许可证（MIT）

任何人无视费用、自由获得本软件及其相关文档文件（以下简称“软件”）副本的，均享有在本软件上不受限制地处理软件的权利，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本的权利，并允许软件提供对象向这些软件授权的人这样做，但需遵守以下条件：