月度归档： 2015年12月

整 理：晋哲
时 间：2015-12-23
说 明：PC端和WAP端专题页面上线步骤及清除缓存操作

---------专题页面上线步骤---------

一、PC端专题上线步骤：

步骤一：进入PC端根目录
1、进入相应服务器：202.102.90.111
2、跳转到相应目录：cd /opt/ci123/www/html/view/

步骤二：创建新的专题目录：mkdir 目录名

步骤三：新的专题目录添加到版本库
1、svn add 目录名
2、svn ci -m '备注' 目录名

步骤四：获取新专题的svn地址
1、进入新专题目录：cd 目录名
2、获取svn地址：svn info
3、复制URL路径

步骤五：在本地checkout新的专题目录
1、回到本地磁盘，在统一存放专题文件目录的文件夹内，如：D:\appserv\www\pc
2、右击选择【SVN Checkout】，在本地生成新创建的svn文件夹

步骤六：本地专题提交到版本库
1、将专题文件代码拷贝到生成的svn文件夹
2、右击选择【SVN Commit】提交

步骤七：从版本库把新专题Up到服务器新建目录下
二、WAP端专题上线步骤：与PC专题上线步骤基本一致。
不同之处：
第一步：WAP端的相应目录：cd /opt/ci123/www/html/m/special/
第五步：因为PC和WAP的专题文件命名一样，所以在右击选择【SVN Checkout】的时候WAP页面应在不同的文件目录下，如：D:\appserv\www\m

---------专题页面更新文件及清缓存步骤---------

> 更新文件

情况一：在本地更新上传文件

1、在本地专题文件目录下右击选择【SVN Update】，从svn控制中心更新最新的程序到本地

2、修改完文件保存之后，该文件的状态不再是绿色的勾号，右击选择【SVN Commit】提交到svn版本库，状态也随之改变

3、回到linux界面，追溯至该专题文件目录下，将文件更新上传到svn版本库。执行：svn up 修改的文件名

情况二：在linux界面中直接修改文件

1、vim编辑修改文件后将文件更新，上传到svn版本库；

2、将改动过的内容提交到svn版本库，需填写本次修改的备注
执行：svn ci -m '填写修改备注' 修改的文件名
注：只有执行此提交操作后，在本地执行【SVN Update】才能更新到最新程序

如果更新的文件是CSS样式文件和图片，即会产生缓存。必须再执行清缓存操作

> 清缓存步骤

一、PC端专题清缓存步骤：

步骤一：dig项目域名得到前端代理的IP

步骤二：ssh 跳转到代理服务器

步骤三：打开nginx配置（squid等），获取静态文件缓存目录，查看IP端口号
1、打开nginx配置：vim /opt/ci123/nginx/conf/vhosts/www.ci123.com
2、找到【location ~ ^.*\.(css|js|swf|gif|png|jpg|jpeg|ico)$】
3、获得缓存目录proxy_temp_path的值【/tmp/www.ci123.com_cache/】
4、看最末尾的【proxy_pass】的IP端口是否为88。若是，则找到其上一级IP；若不是，则退出此配置文件。

步骤四：找到相应缓存目录（缓存目录一般为固定地址，不需要每次都去配置文件中查找）
1、进入固定缓存目录：cd /tmp/www.ci123.com_cache/
2、找到需要清除缓存的专题目录：cd special/专题文件名

步骤五：清除样式缓存（清除图片缓存等同操作）
1、打开相应目录：cd styles/
2、清除文件缓存：rm -f style.css

步骤六：回到第二步，循环操作，每个解析获得的服务器IP中都需要登陆进去清除缓存。
除了解析出来的服务器IP，一般还需要注意以下四个IP地址中是否存在缓存：
202.102.90.108
202.102.90.109
202.102.90.117
202.102.90.118

二、WAP端专题清缓存步骤：与PC专题清缓存步骤基本一致
不同之处：
第一步：WAP端域名解析，执行：dig m.ci123.com
第三步：WAP端相应nginx配置文件，执行：vim /opt/ci123/nginx/conf/vhosts/m.ci123.com
第四步：WAP端固定缓存目录，执行：cd /tmp/m_cache/

涉及知识点：
1、svn的常规使用
2、dig查找项目配置信息

其他：
1、svn的常规使用必须熟练，且注意几个比较容易犯错的地方。
2、常用的专题配置信息，一般很少更新，最好在本地做一些记录，不需要每次都去dig查找

整  理：肖雅君
时  间：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，切图时先改变图像大小，再进行压缩。