前端

发布统计

jQuery新旧版本共存

1
2
3
4
5
6
7
8
9
10
<script src="jquery-1.5.js"></script>
<script src="jquery-1.11.js"></script>
<script>
  // 现在window.$和window.jQuery是1.11版本:
  console.log($().jquery); // => '1.11.0'
  var $jq = jQuery.noConflict(true);
  // 现在window.$和window.jQuery被恢复成1.5版本:
  console.log($().jquery); // => '1.5.0'
  // 可以通过$jq访问1.11版本的jQuery了
</script>

jQuery中的循环技巧

  • 简单的for-in（事件）

    1
    for ( type in events ) {}

  • 缓存length属性，避免每次都去查找length属性，稍微提升遍历速度。
    但是如果遍历HTMLCollection时，性能提升非常明显，因为每次访问HTMLCollection的属性，HTMLCollection都会内部匹配一次所有的节点 

    1
    for ( var j = 0, l = handlers.length; j < l; j++ ) {}

  • 不比较下标，直接判断元素是否为true（强制类型转换）

    1
    2
    3
    4
    5
    var elem;
    for ( var i = 0; elems[i]; i++ ) {
    	elem = elems[i];
    	// ...
    }

jQuery源码分析笔记

  • js自调用匿名函数的两种写法：
    1
    2
    3
    4
    5
    6
    7
    (function(window, undefined){
        // code
    })(window);

    (function(window, undefined){
        // code
    }(window));
  • undefined能够被重写，赋予新的值。
    1
    2
    undefined = "now it's defined";
    alert( undefined );

Zed Keymap

  • Ctrl + T: 打开对象树
    • Up/Down/Left/Right/Enter
  • Ctrl + E: 打开或者创建文件
  • Ctrl + .: 查找命令
  • Ctrl + F: 在文件中查找，并默认找到第一个匹配项
    • Ctrl + G: 找到下一个匹配项
    • Ctrl + Alt + F: 选中所有匹配项
  • Ctrl + 1: 显示1个编辑框
  • Ctrl + 2: 显示2个编辑框
  • Ctrl + 3: 显示3个编辑框
  • Ctrl + 0: 在编辑框间切换
  • Ctrl + P: 预览
  • Ctrl + ,: 打开设置对话框

Chrome推荐插件

  • vimium: 抛弃鼠标操作浏览器的最佳插件
  • cVim: 比vimium更强大，功能更全面的vim插件
  • crxMouse: 鼠标手势
  • Ghostery: 了解谁在跟踪您的网页浏览操作
  • IE Tab: 在标签页中以IE内核显示网页
  • JSON Editor: JSON编辑器
  • LastPass: 密码管理
  • Octotree: GitHub&GitLab代码树
  • Postman: 模拟发送http请求
  • RESTful Stress: RESTful API压力测试工具
  • Wizdler: 解析WSDL文件，SOAP Web Service调试工具
  • RegExp Tester: 正则
  • Scroll Marker: 在浏览内容的最小方显示一条横杆，滚动页面时可以看到之前显示的位置
  • Text Mode: 灰白模式查看网页
  • Zed Code Editor: 轻量级代码编辑器
  • Image Tool: 跟名字一个意思
  • JavaScript Errors Notifier: 页面js报错提醒
  • JetBrains IDE Support: 结合WebStorm&IDEA调试js
  • Appspector: 检测web网站使用的js和中间件技术

Vimium Keymap

  • j: 向下细微滚动窗口
  • k：向上细微滚动窗口
  • J: 下一个标签页
  • K：上一个标签页
  • h：向左细微滚动窗口
  • l：向右细微滚动窗口
  • zH：一直移动到左部
  • zL:一直移动到右部
  • H: 后退
  • L: 前进
  • u：向上移动半个屏幕（相当于PageUp）
  • d：向下滚动半个屏幕（相当于PageDown）
  • gg：跳转到页面的顶部
  • G：跳转到页面的底部
  • r：重新载入该页（相当于F5刷新页面）
  • x：关闭当前页面
  • X：恢复刚刚关闭的页面
  • o：相当于Chrome中的地址栏，可以匹配历史记录、收藏夹并在当前窗口打开，或者直接打开一个网址或者搜索一个关键字
  • O：在新窗口中打开
  • f：在当前的页面打开一个新的链接
  • F：在新的页面打开一个新的链接

Jmesa使用总结-自定义Toolbar

web.xml引入jmesa

1
2
3
4
5
6
7
8
<context-param>
	<param-name>jmesaMessagesLocation</param-name>
	<param-value>messages</param-value>
</context-param>
<context-param>
	<param-name>jmesaPreferencesLocation</param-name>
	<param-value>jmesa.properties</param-value>
</context-param>

数据可视化中图表的适用场合及注意点

图表适用维度适用范围及注意点
柱状图二维适用于只需要比较其中一维，将变化的维度作为X轴，如做Y，需要使用颜色区分每根柱子
折线图二维适用于较大数据集
饼图二维适用于反映部分与整体的关系
地图二维适用于根据地理区域来区分的二维数据，通过颜色的深浅来区分第二维
散点图三维适用于三维数据集，但只比较其中两维，可通过颜色区分第三维
气泡图三维或四维散点图的变体，通过气泡大小区分第三维，通过颜色或标签区分第四维
雷达图四维以上数据点不能超过6个

process&badge svg使用指南

process

1
2
3
4
http://progressed.io/bar/[number]?title=[title]

number : 0-999
title : 输入需要显示的文字，尽可能使英文，中文显示有问题

eg: 

1
http://progressed.io/bar/60?title=process

badge

1
2
3
https://img.shields.io/badge/[text1]-[text2]-red.svg

text1和text2都是需要显示的文本信息

eg: 

1
https://img.shields.io/badge/build-v1.1.1-red.svg