geekman

整  理：肖雅君
时  间：2015-12-18
说  明：sublime常用的插件介绍

一、安装插件的基本条件

1. 前提

2. 两种安装方法

二、插件介绍

1. 插件emmet

2. Emmet LiveStyle

3. Bracket Highlighter插件

4. Trailing Spaces高亮空白区域

5. JsFormat:js格式化的插件

附：Barcakets插件安装：

插件位置：\\192.168.0.18\运维网络硬盘\y袁亮\p培训\55分享2015-12-16（前端）\sublime提高开发效率的几个插件

参考链接: http://www.cnblogs.com/hykun/p/sublimeText3.html

 

Sublime高效率前端编辑插件

一、安装插件的基本条件

1.前提：

（1）需要sublime text3

（2）安装任何插件都得先安装package control插件管理。

2.两种安装方法：

（1）自动安装：先按键ctrl+` ，再将安装代码复制进去；

安装代码：import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

（2）手动安装：

直接下载Package Control插件，放到sublime安装目录下的Installed Packages目录下，如下图：

二、插件介绍

1. 插件emmet

缩写+自动生成-提高开发效率，需了解简单的语法规律

Emmet语法：http://yanxyz.github.io/emmet-docs/abbreviations/syntax/

2. Emmet LiveStyle

实时刷新双向修改

（1）第一步：安装插件

法一：

自动安装：ctrl+shift+p打开安装包管理器，输入PCI后，输入LiveStyle:如下图

法二：

手动安装：同上将插件放到Installed Packages目录下。

（2）第二步：在浏览器上安装Emmet LiveStyle插件

（3）第三步：使用步骤

用sublime打开样式文件；浏览器打开html文件后F12，即可看到安装后的插件：勾选Enable LiveStyle for current page,再将样式文件的目录复制到liveStyle里即可。然后就能实行双向修改了。如下图：

3.  Bracket Highlighter插件

用于匹配括号，引号和html标签。

对于很长的代码很有用。安装好之后，不需要设置插件会自动生效.【安装过程同上】

图示：

如图：如果代码的标签是成对的，则会显示两个小图标；如果标签并不是成对的，则会显示”小问号“。

4. trailing Spaces高亮空白区域

此插件自动将无效的有空白区域的代码显示出颜色来。

一键删除所有空格设置：

需要配置快捷键：在preferences/key binding-user，加上如下代码：

{ "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" }

操作如下图：

5. JsFormat

js格式化的插件，安装方式同上,效果图如下：

附：Barcakets开发软件的插件安装方法

（1）emmet 直接点击右边的小商品标志

输入插件名，自动安装完毕：

（2）显示小图标插件：Brackets Icons

效果图如下：

参考链接: http://www.cnblogs.com/hykun/p/sublimeText3.html

http://www.xuanfengge.com/practical-collection-of-sublime-plug-in.html

 

注:若是直接拷贝插件安装，需注意几个插件安放的位置不一样：

插件位置：\\192.168.0.18\运维网络硬盘\y袁亮\p培训\55分享2015-12-16（前端）\sublime提高开发效率的几个插件

（1）两个插件文件夹放在：Packages文件夹下，通过Preferences>Browse Packages打开：

（2）非文件夹插件放在Packages上级的Install Packages目录下：

 

整  理：曹燕
时  间：2015-12-18
说  明：chrome调试功能的介绍

1.Elements面板——DOM

左侧展示了dom树，在某个dom节点上点击右键会出现操作菜单，常用功能：增加属性、编辑属性、以html形式编辑代码、复制css路径、复制Xpath路径、剪切/复制/粘贴/删除代码、设置断点。

左侧底部显示当前节点的所有祖先节点。

右侧面板主要包括5个功能块。①Styles：按权重从大到小顺序显示所选元素的css样式，可以进行修改，页面会实时响应变化；下方是盒模型图；②Computed：所选元素的最终样式，只可读不可修改；③Event Listeners：显示绑定到当前元素的事件监听函数；④Dom Breakpoints：显示dom中设置的断点，便于调试；⑤Properties：显示元素作为dom对象的各个属性。

2.Network面板——请求加载

上图分为7列，从左到右分别是Name、Status、Type、Initiator、Size、Time和Timeline。①Name表示加载的文件名；②Status表示状态码（200为请求成功，304表示从缓存读取）；③Type表示文件的MIME Type的类型；④Initiator表示发出这个文件请求的发出者；⑤Size表示文件大小；⑥Time表示每个请求的总时长；⑦Timeline显示了请求和加载情况（Timeline中鼠标移到每个时间条上的时候，会显示整个请求的详细信息）。通过它可以看到哪些请求是同时发出的，哪些请求被阻塞了。Timeline中有一条蓝线和一条红线，蓝线表示DOM Content Loaded事件触发的时间，红线表示 Window onload事件触发的时间。

点击某个请求会显示该请求的具体信息：

顶部的选项卡将请求的文件进行了分类，便于查看，如：XHR、JS、CSS、Img、Media、Font、Doc、Websockets和Other。

底部显示了网页请求的整体加载信息，如：请求个数、传输大小、dom结构加载时长、页面加载完成总时长。

3.Sources面板——样式脚本

显示所有加载的html、css和js资源，可以实时编辑css或js文件。右侧显示监听、事件绑定以及断点信息。常用于设置断点来调试js。

设置断点调试js可参考：http://segmentfault.com/a/1190000004123527

4.Timeline面板——页面加载

Timeline跟Network有类似的地方，他们都是按照页面的加载时间来统计数据的，不过Timeline统计的数据侧重点不一样。Timeline主要统计了三个数据：Loading，Scripting，Rendering。

点击时间线上的任意位置，可以查看在这个点的详细信息。

5.Profiles面板——CPU信息

Profile记录的主要是CPU和内存占用的信息。点击start按钮，开始记录CPU使用信息，刷新页面，等页面加载完成之后点击stop按钮，完成录制。

上图的左边两列是时间，第一列是self，第二列是total，self表示函数自己的运行时间，不包含调用其他函数的时间，而total表示这个函数运行的总时间。第三列是运行的函数。通过比较时间的百分比可以找出性能差的函数进行优化。

6.Resources面板——所有资源信息

Resources显示所有加载的资源，除了Sources面板中的html/css/js文件外，还包括图片文件；并且还可以查看本地存储、会话存储、cookies信息、缓存等。

7.Audits面板——性能检测优化

Audits面板的作用于pagespeed、Yslow类似，用于检测页面的性能，提出优化建议。点击Run按钮，即可得到页面性能的检测结果和优化建议。

8.Console面板——控制台输出

Cosole可以用于输出信息，常用于调试。支持的一些方法函数如下：

• log(object[, object, ...])，使用频率最高的一条语句：向控制台输出一条消息。支持 C 语言 printf 式的格式化输出。
• info(object[, object, ...]) ，向控制台输出一条信息，该信息包含一个表示“信息”的图标，和指向该行代码位置的超链接。
• error(object[, object, ...])在控制台中输出一条错误信息。
• warn(object[, object, ...])在控制台中输出一条警告信息。
• assert([, object, ...]) ，断言，测试一条表达式是否为真，不为真时将抛出异常（断言失败）。
• dir(object) 输出一个对象的全部属性（输出结果类似于 DOM 面板中的样式）。
• dirxml(node) 输出一个 HTML 或者 XML 元素的结构树，点击结构树上面的节点进入到 HTML 面板。
• trace() 输出 Javascript 执行时的堆栈追踪。
• group(object[, object, ...]) 输出消息的同时打开一个嵌套块，用以缩进输出的内容。调用 console.groupEnd() 用以结束这个块的输出。
• count([title]) 输出该行代码被执行的次数，参数 title 将在输出时作为输出结果的前缀使用。
• clear() 清空控制台。

 

 

 

整  理：晋哲

时  间：2015-12-09

说  明：移动端页面需要注意的细节问题


一、移动端固定<meta>标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

解释：
第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

二、细节样式处理，去除移动设备默认交互样式

1、解决 iPhone 横屏时默认会放大文字的问题，设为100%关闭字体大小自动调整功能
html{
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
 text-size-adjust: 100%;
}

2、使用无衬线字体
body{font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}

3、禁止选中文本(有无文本选中需求,此为可选项)
html, body{
 -webkit-user-select: none;
 user-select: none;
}

4、快速滚动和回弹的效果
body{-webkit-overflow-scrolling: touch;}

5、禁止长按链接与图片弹出菜单
a, img{-webkit-touch-callout: none;}

6、去除移动端点击事件出现的背景阴影，也可更换颜色
a, input{-webkit-tap-highlight-color:transparent;}
注：还有一种妥协的方法是把页面非真实跳转链接的<a>标签换成其它标签，可以解决这个问题。

7、移动端清除输入框内阴影
在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：
input, textarea{
 border: 0; /* 方法1 */
 -webkit-appearance: none; /* 方法2 */
}

8、输入框点击默认会有蓝色外边框线
input{outline: none;}

三、HTML 代码相关

1、自适应布局模式
在编写CSS时，不建议把容器的宽度、高度定死。为达到适配各种手持设备，建议使用自适应布局模式，保证页面在各类浏览设备上都能够正常的显示，无需再次考虑设备的分辨率。

2、块级化<a>标签，或按需求尽可能扩大<a>标签囊括的范围
在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。

3、动画效果中，使用 translate 比使用定位性能高

四、JS 事件相关

1、jQuery文件过大，移动端优先考虑使用zepto.js。实际情况中使用jQuery插件不兼容zepto时再考虑使用jQuery

2、click 事件存在 300ms 的延迟
在手机上绑定 click 事件，会使得操作有 300ms 的延迟，体验并不是很好，通常会使用封装的 tap 事件来代替 click 事件。

五、图片相关

1、使用<img>标签时，需根据实际需求设置[width：100%;]自适应撑满区域，还是设置固定宽高。

2、使用背景图片时，需注意实际用图与移动端呈现尺寸的比例为2:1，所以移动端借助[background-size]属性进行比例缩小，相应的按比例缩小[width]、[height]、[background-position]的值。

3、可以合并的图标图片，尽量整合一张，并进行压缩

4、合并Sprite图时每个图片之间必须留有间距

5、能用CSS样式实现的，代替使用图片

6、较大的背景图片、banner图片等尺寸宽度不需要超过640px，切图时先改变图像大小，再进行压缩。

整    理：徐秀、晋哲

时    间：2015-12-04

说    明：CSS3 Transform基本语法以及基础用法的介绍。

一、名词解释

transform字面上就是变形，改变的意思，包括2D transform和3D transform。在CSS3中transform主要包括以下几种：移动translate()、旋转rotate()、扭曲skew()、缩放scale()以及矩阵变形matrix()，对内联元素(inline)和块级元素(block)都适用。

二、浏览器兼容性
注意：transform是CSS3新属性，目前兼容浏览器【盗图】：

和其它CSS3新属性一样，transform要加兼容前缀。

三、transform-origin属性

transform-origin在元素发生transform变换时有效，是发生变换的基点，以此点建立【2d/3d】坐标。默认值为：transform-origin:50% 50% [0]; 第三个参数是3d转换下z的值，默认0。当改变transform-origin的值时，transform参照基点发生改变，如: transform-origin:0 0;

其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom。

四、语法讲解

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

未经transform转换的div，以下各种变换均以此为参照：

• transform:translate();

通过指定translation(tx,ty)进行矢量偏移，translation3d(tx,ty,tz);参数tx 是x轴方向的偏移矢量，ty 可选参数是y轴方向的偏移矢量。translation3d()中的各值，表示在对应方向的偏移量。tx,ty,tz的取值可以是具体的像素值，也可以是百分比，百分比的的取值相对于自身的宽高。translate(),表示对对象进行平移，当值为负数时，反方向移动物体。分别指定指定轴上的偏移量可以。通过transform-origin属性改变基点。

其它写法：translateX(x)【适用于2d/3d】，translateY(y) 【适用于2d/3d】；translateZ(z) 【适用于3d】，

代码：效果：

• transform:rotate();

通过指定的角度参数对指定元素指定一个rotate(angle)进行2d旋转，rotate3d(rx,ry,rz,angle)进行3d旋转；rx,ry,rz可以取【1：正方向；-1：反方向；0不旋转】；在指定方向选择angle度； angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。可以通过transform-origin属性改变基点。

其它写法：rotateX(angle) 【适用于3d】；rotateY(angle) 【适用于3d】；rotateZ(angle) 【适用于3d】
代码:效果：

• transform:scale();

通过指定scale(sx,sy)的sx、sy参数对指定元素进行2d缩放； scale3d(sx,sy,sz)进行3d缩放。2d缩放的第二个参数可选，未提供，则取与第一个参数一样的值；3d的三个参数都必写，表示在对应方向的缩放比例。可以通过transform-origin对元素的基点进行设置。

其它写法：scaleX(x)【适用于2d/3d】，scaleY(y) 【适用于2d/3d】；scaleZ(z) 【适用于3d】。

代码： 效果：

• transform:skew();
  

通过指定skew(x-angle, y-angle)的x-angle、 y-angle参数对指定元素在指定方向上发生倾斜； skew()没有3d写法；x-angle是水平方向扭曲角度，y-angle可选，是垂直方向扭曲角度。如未设置y-angle，那么Y轴倾斜角度为0deg。

其它写法：skewX(x)【适用于2d】，skewY(y) 【适用于2d】。
代码：效果：

• transform: matrix ();

matrix():2d矩阵包含6个值matrix(a,b,c,d,e,f);3d矩阵包含16个之matrix(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p)4*4个值，以上的各种变换(2d/3d),都可以矩阵计算得到相应效果，单计算过程很复杂，此处就不赘述了。有兴趣的小伙伴可以自行学习下。