前端代码片段

由 jleonard 全部

Sublime Text中常见的.js、css和html任务代码片段

详细信息

版本 2015.03.28.14.59.23
主页 jleonard.github.io
问题 github.com
修改时间 9年前
最后查看时间 50分钟前
首次查看时间 12年前

安装数

总 6K
Win 3K
Mac 1K
Linux 736

	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	0	0	0	0	0	0	0	0	0	0	0	1	0	0	0	0	0	0	0	0	0	1	0	1	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0
Mac	1	1	0	0	0	0	0	0	0	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	0	0	0	0	0	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	1	0	0	0	0	0	0	0	0	1

README

源代码: raw.githubusercontent.com

Sublime Text前端代码片段

这些文档已经过时。使用这些

基础js

多行注释

Tab触发：_

/*
* message
*/

console.log()

Tab触发：_log

console.log();

循环

Tab触发：_for

var len = array.length;
for(var ii = 0; ii < len; ii++){
  var cur = array[ii];
  /* code ... */
}

for-in循环

Tab触发：_forin

for (var key in object){
 if (object.hasOwnProperty(key)){
   var value = object[key];
 }
}

Google Analytics

Tab触发：_ga

var _gaq = _gaq || [];
  _gaq.push(['_setAccount', '${1:UA-XXXXX-X}']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

switch语句

Tab触发：_switch

switch(var){
  case :
    /* code ... */
  break;
  case :
    /* code ... */
  break;
  default:
    /* code ... */
  break;
}

三元运算符

Tab触发：_?

condition ? true : false;

try / catch / finally

Tab触发：_try

try {
  /* code... */
} 
catch (e) {
   /* code... */
}
finally (e) {
   /* code... */
}

Array.filter()

Tab触发：_filter

var filtered = array.filter(
    function(element){ 
      return true|false; 
    }
  );

Array.sort()

Tab触发：_sort

items.sort(function (a, b) {
  if (${1:a > b}){
    return 1;
  }
  if (${2:a < b}){
    return -1;
  }
  // a must be equal to b
  return 0;
});

setTimeout

Tab触发：_timeout

setTimeout(function(){},delay);

命名函数

Tab触发：_function

function method(arguments){
  /* code ... */
}

高级js

立即执行函数表达式

Tab触发：_iife

(function(){
  /* code */
})();

类模板

Tab触发：_class

function ClassName (param) {

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

      var that = this;

      function privateMethod(){
        /* 
        * this method can be accessed by
        * privileged methods but not by
        * public methods.
        */
      }

      this.privilegedMethod = function(){
        /* 
        * this method has access to both
        * the public and private properties
        * of the object
        */
      }
    }

    ClassName.prototype.publicMethod = function() {};

单例

Tab触发：_singleton

var ClassName;
    (function() {
        var instance;

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

            instance = this;

            /* code */
        };
    }());

Promise

Tab触发：_promise

var promise = new Promise(function(resolve, reject) {

      var success;

      /* code */

      if (success) {
        resolve();
      }
      else {
        reject(Error());
      }
    });

    promise.then(
      function(result) {
        console.log(result);
      },
      function(err) {
        console.log(err);
      }
    );

Promise (then)

Tab触发：_then

promise.then(
    function(result) {
      console.log(result);
    },
    function(err) {
      console.log(err);
    }
  );

jQuery代码片段

$.ajax()

Tab触发：_$ajax

$.ajax({
      url: '',
      data: {}
    })
    .done(function ( data ) {
      /* code ... */
    })
    .fail(function(jqXHR,textStatus){
      /* code ... */
    })
    .always(function(jqXHR,textStatus){
      /* code ... */
    });

$(document).ready()

Tab触发：_$dr

```js
$(document).ready(function(e){
  /* code ... */
});

```

$(function)

Tab触发：_$fn

```js
$(function() {
  /* code ... */
});

```

$('.selector').on()

Tab触发：_$on

```js
$('selector').on('event', function(e){
  /* code ... */
});

```

jQuery插件模板

Tab触发：_plugin

(function($){

      var ClassName = function (element, options){

        this.$element  = $(element);

        // plugin options
        this.options   = $.extend({}, ClassName.DEFAULTS, options);

        var that = this;

      };

      ClassName.DEFAULTS = {};

      var old = $.fn.pluginName;

      $.fn.pluginName = function (option) {
        return this.each(function () {
          var $this   = $(this);
          var data    = $this.data('pluginName');
          var options = typeof option === 'object' && option;
          if (!data){
            $this.data('pluginName', (data = new ClassName(this, options)));
          }
        });
      };

      $.fn.pluginName.Constructor = ClassName;

      $.fn.pluginName.noConflict = function() {
        $.fn.pluginName = old;
        return this;
      };

    })(jQuery);

发布 (tiny pub/sub)

Tab触发：_publish

```js
  $.publish('whatever.event.name',payload);

```

订阅 (tiny pub/sub)

Tab触发：_subscribe

```js
  function handlerFunction(){
    return function(_,data){
      console.log('subscribe ',data);
    };
  }

  $.subscribe('whatever.event.name',handlerFunction());

```

html代码片段

.html页面

Tab触发：_html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>page</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="">

    </head>
    <body>
      <main>

      </main>
      <script type="text/javascript" src=""></script>
  </body>
</html>

video标签

Tab触发：_video

<video controls preload="auto" width="640" height="264" poster="PATH_TO_ASSETS.png">
 <source src="PATH_TO_ASSETS.mp4" type='video/mp4' />
 <source src="PATH_TO_ASSETS.webm" type='video/webm' />
 <source src="PATH_TO_ASSETS.ogv" type='video/ogg' />
</video>

css代码片段

响应式断点

Tab触发：_breakpoint

@media all and (min-width: 50em) {

}

动画 @keyframes

Tab触发：_keyframes

@-webkit-keyframes ANIMATION_NAME {
      0%   {  }
      100% {  }
    }
    @-moz-keyframes ANIMATION_NAME {
      0%   {  }
      100% {  }
    }
    @-o-keyframes ANIMATION_NAME {
      0%   {  }
      100% {  }
    }
    @keyframes ANIMATION_NAME {
      0%   {  }
      100% {  }
    }

过渡效果

Tab触发：_transition

-webkit-transition-property: all;
    transition-property: all;

    -webkit-transition-duration: 750ms;
    transition-duration: 750ms;

    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;

    -webkit-transition-delay: 500ms;
    transition-delay: 500ms;

正则表达式代码片段

字母和数字

Tab触发：_regex_alphanumeric

/^[0-9a-zA-Z]+$/

电子邮件

Tab触发：_regex_email

/^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;

网址

Tab触发：_regex_url

/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/

其他代码片段

.gitignore

标签触发器：_gitignore

# osx noise
.DS_Store

# svn & cvs
.svn
CVS

*.log
node_modules
bower_components

# project specific