fronttoend / chuck Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 0.0 0 B

记录一些工作中踩到的坑或看到的tips

Home Page: https://qukun.com.cn

chuck's Introduction

Hi there 👋

🔭 I’m currently working on xi'an.
🌱 I’m currently learning The Front-end Engineering.
📫 My first website: https://findingai.top
⚡ 公众号：前端F2E
📚 My Email: [email protected]

chuck's People

Contributors

Stargazers

Watchers

chuck's Issues

CSS框架---base.css

@charset "utf-8";
/*!
 * @名称：base.css
 * @功能：1、重设浏览器默认样式
 *       2、设置通用原子类
 */
/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
html {
    background:white;
    color:black;
}
/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    margin:0;
    padding:0;
}
/* 要注意表单元素并不继承父级 font 的问题 */
body,button,input,select,textarea {
    font:12px \5b8b\4f53,arial,sans-serif;
}
input,select,textarea {
    font-size:100%;
}
/* 去掉 table cell 的边距并让其边重合 */
table {
    border-collapse:collapse;
    border-spacing:0;
}
/* ie bug：th 不继承 text-align */
th {
    text-align:inherit;
}
/* 去除默认边框 */
fieldset,img {
    border:none;
}
/* ie6 7 8(q) bug 显示为行内表现 */
iframe {
    display:block;
}
/* 去掉 firefox 下此元素的边框 */
abbr,acronym {
    border:none;
    font-variant:normal;
}
/* 一致的 del 样式 */
del {
    text-decoration:line-through;
}
address,caption,cite,code,dfn,em,th,var {
    font-style:normal;
    font-weight:500;
}
/* 去掉列表前的标识，li 会继承 */
ol,ul {
    list-style:none;
}
/* 对齐是排版最重要的因素，别让什么都居中 */
caption,th {
    text-align:left;
}
/* 来自yahoo，让标题都自定义，适应多个系统应用 */
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:500;
}
q:before,q:after {
    content:'';
}
/* 统一上标和下标 */
sub,sup {
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline;
}
sup {
    top:-0.5em;
}
sub {
    bottom:-0.25em;
}
/* 让链接在 hover 状态下显示下划线 */
a:hover {
    text-decoration:underline;
}
/* 默认不显示下划线，保持页面简洁 */
ins,a {
    text-decoration:none;
}
/* 去除 ie6 & ie7 焦点点状线 */
a:focus,*:focus {
    outline:none;
}
/* 清除浮动 */
.clearfix:before,.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
    overflow:hidden;
}
.clearfix {
    zoom:1; /* for ie6 & ie7 */
}
.clear {
    clear:both;
    display:block;
    font-size:0;
    height:0;
    line-height:0;
    overflow:hidden;
}
/* 设置显示和隐藏，通常用来与 js 配合 */
.hide {
    display:none;
}
.block {
    display:block;
}
/* 设置浮动，减少浮动带来的 bug */
.fl,.fr {
    display:inline;
}
.fl {
    float:left;
}
.fr {
    float:right;
}

NodeJS

作者：chszs，博客主页：http://blog.csdn.net/chszs
在Node.js语言中，包和模块并没有本质的不同，包是在模块的基础上更深一步的抽象，包将某个独立的功能封装起来，用于发布、更新、依赖管理和进行版本控制。Node.js根据CommonJS规范实现了包机制，开发了npm来解决包的发布和获取需求。

Node.js的包是一个目录，其中包含JSON格式的包说明文件package.json。Node.js的包基本遵循CommonJS规范，因此具备以下特征：

CommonJS规范定义的包特性：
1）顶层目录包含package.json文件；
2）bin目录存放二进制文件；
3）lib目录存放JavaScript文件；
4）doc目录存放文档；
5）test目录存放单元测试。

Node.js的模块与文件是一一对应的，文件不仅可以是JavaScript源码文件或二进制文件，还可以是目录。最简单的包，就是一个目录的模块。

Node.js的包通常是一些模块的集合，在模块的基础上提供了更高层的抽象，相当于提供了一些固定接口的函数库。
通过定制package.json，我们可以创建更复杂、更完善、更符合规范的包用于发布。

Node.js在调用包时，首先会检查包中的package.json文件的main字段，将其作为包的接口模块，如果package.json文件的main字段不存在，那么Node.js会尝试寻找index.js或index.node作为包的接口。

package.json文件是CommonJS规范用于描述包的文件，完全符合规范的package.json文件应该包含以下字段：
1）name：包名。包名是唯一的，由小写字母、数字和下划线组成，不能含空格。
2）description：包说明。对包进行简要描述。
3）version：版本号。满足《语义化版本识别》规范的版本字符串。
4）keywords：关键字数组，通常用于搜索。
5）maintainers：维护者数组。每个元素包含name、email(可选)、web(可选)字段。
6）contributors：贡献者数组。格式与maintainer数组相同。包作者应该是贡献者数组的第一个元素。
7）bugs：提交bug的地址，可以是网址或电邮地址。
8）licenses：许可证数组。每个元素要包含type(许可证名称)和url(链接到许可证文本的地址)字段。
9）repositories：仓库托管地址数组。每个元素要包含type(仓库的类型，如Git)、url(仓库地址)和path(相对于仓库的路径，可选)字段。
10）dependencies：包依赖。是一个关联数组，由包名和版本号组成。

两张图片重叠方法

<div style="position: relative;">//这个层为外面的父层，只需设置相对位置样式即可  
  <div style="position: absolute;">//这个为里面要叠加的层，只需设置绝对样式  
    <img src="img/sunshuai.jpg"/>//这个为层里面的内容图片  
  </div>  
  <img src="20110110/871_129391305700000000.jpg"/>//这个为父层内容  
</div>

CSS垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
            position: relative; /*不脱离文档流*/
            top: 50%; /*偏移*/
            margin-top: -150px; 
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

我们可以使用通过margin-top属性来设置，因为div的自身高度是300，所以，需要设置他的margin-top值为-150。为什么是要设置成负数的呢？因为正数是向下偏移，我们是希望div向上偏移，所以应该是负数

CSS小技巧

若是用div拼接图片，可以使用div {vertical-align:top;outline-width:0;}解决上下间隙问题；
在用table拼接切片图片的时候，以下css可以解决图片间隙问题：

table{
width: 990px;
height: 100%;
line-height: 0;
border-collapse: collapse;/*等同于cellspacing="0"*/
padding:0;
border:0;
}

th,td {
  padding: 0; 
}

子元素使用margin-top时，父元素背景图片下沉，可以使用以下方法解决。

　　(1)、给父元素的添加padding-top: 1px;

　　(2)、给子元素添加float属性

　　(3)、父元素添加position:relative;子元素添加position:absolute;

　　(4)、父元素添加border-top: 1px solid #fff;

css让背景图片自适应：

bg {
 background: url(../image/4.jpg);
 filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
-moz-background-size:100% 100%;
background-size:100% 100%;
}

git提交方式

github的提交方式
（1）git add .--------------------存储到本地
git commit -m 'message'-------存储时的标记（修改了哪些地方，方便下次查询）
git pull------------------------下载服务器代码
git push------------------------上传代码至服务器
svn服务器的提交方式
（1）git add . ------------------存储到本地
git commit -m 'message'--------存储时的标记（修改了哪些地方，方便下次查询）
git svn rebase------------------下载服务器代码
git svn dcommit-----------------上传代码至服务器
其他相关的git命令
（1）git branch-------------------查看当前属于哪个分支
1、只有冲突存在时才会修改分支——改为冲突再git add .
2、git rebase –-continue-------------------自动合并
3、git checkout –b svn 新建分支名----------新建分支存储现有文件
4、git branch-------------------------------查看在哪个分支下
5、git checkout master----------------------将其放到master分支下
6、git merge-------------------------------整合分支

7、git branch -d 分支名----------------------删除分支

（2）git checkout + 上传的commit编号-----------将本地代码恢复到此状态
（3）git log------------------------------------查看本地git上传日志
（4）git log -p app/controllers/grids_controller.rb----查看某个文件的修改历史
（5）git checkout d0eb6ef3afe8a377943d3cf6f1e9c320c18f6f32
app/controllers/charts_controller.rb-----------返回到这个版本的文件（重现错误）

（6）git diff ＋ commit编号--------------------------查询不同代码

绑定事件的三种写法

jq：
$('#btn').click(function(){
$("#myModal").modal("show");
})

$("#btn").on("click",function(){
    $("#myModal").modal("show");
})

js：
document.getElementById("btn").onclick=function(){
$("#myModal").modal("show");
}

Grunt安装与介绍

一旦你安装好了Node.js和npm，你可以安装grunt-cli包。
npm install -g grunt-cli
使用-g标记安装grunt-cli表示全局安装，你可以在任何项目中使用这个命令。
Grunt的运行工具具有两个版本，一个是服务器端的版本（grunt），另一个是客户端版本(grunt-cli)。而我们在项目中需要安装的是客户端版本

String 原型方法的扩展

String.prototype.Regular = function(reg){
        var result = true;
        if(this.length > 0){       
            if(!reg.test(this)){   
                result = false;
            }  
        } 
        return result;
    }
    
    //.trim()方法
     String.prototype.trim = function () {
        return this.replace(/(^\s*)|(\s*$)/g,'');
};
^表示字符串必须以后面的规则开头，而(^\s*) 表示的就是以0个空格或者多个空格开头，后面的(\s*$) 的意思就是, 以0个空格或者多个空格结尾。
    //判断输入内容是否为空
    String.prototype.isNull = function(){  
        return this.trim().length == 0 ? true : false; 
    } 
    
    //判断输入的字符是否为英文字母\数字\下划线
    String.prototype.isVersion = function(){    
        var reg = /^([a-zA-Z_])([a-zA-Z0-9_.])*$/;  
        return this.Regular(reg);
    }
    
   // 判断输入的字符串，不包括单引号
   String.prototype.isString = function(){    
        var reg = /^[^']*$/; 
        return this.Regular(reg); 
    }
    
  //判断输入的字符是否为英文字母  
    String.prototype.isLetter = function(){   
       var reg = /^[a-zA-Z]+$/;  
       return this.Regular(reg);
   }

各种宽度与高度小知识

width() - 返回元素的宽度。
height() - 返回元素的高度。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。
返回文档（HTML 文档）$(document).height()的高度
返回窗口（浏览器视口）$(window).height()的高度

父子DIV顶部margin塌陷问题

代码示例：

no1{

background:#808000;
width:300px;
height:300px;
margin:100px 0 0 100px;
}

no2{

background:#c0c0c0;
width:150px;
height:150px;
margin-left:20px;
margin-top:30px;
}
对于父块DIV内含子块DIV的情况，就会按另一条CSS惯例来解释了，那就是：对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离。
结论：
解决父子DIV中顶部margin cllapse的问题，需要给父div设置：
1、边框，当然可以设置边框为透明;
border:1px solid transparent
或
border-top:1px solid transparent
2、为父DIV添加padding，或者至少添加padding-top;
此外，还可以通过给父DIV写入overflow:hidden;来解决。

Box-sizing

CSS中默认的盒模型会让人觉得有问题：你本来已经定义好了width，但你之后定
义的所有padding又都会被算到这个width中去。例如，如果你创建了一个300px
宽的列，之后在其左右各加了20px宽的padding，那么此时该列的宽度就会变成
340px。这在人们创建基于网格的流动布局时，会使人感到相当痛苦。
通过使用box-sizing: border-box，你就可以让浏览器将padding的值算在已经定
义好的元素宽度内部了。通过使用这一属性，一个300px宽的列即使两边新增了
20px的padding，它的宽度依然会是300px，因为padding的宽度被算在了元素
内部。这使得设计流动布局变得更加容易。
在不使用box-sizing的情况下，一个宽为300px且有20px padding的元素，
其宽和高都会变为340px 。而在使用了box-sizing后，元素仍然是300px宽、300px高。
在包含了box-sizing的各种版本的前缀之后，这一属性就可以获得很好的浏览器
支持了。在桌面及移动设备的主流浏览器中，只有IE8之前的IE浏览器对此缺乏
支持。实际上，大多数浏览器对此已经支持了很长一段时间了，比如Chrome和
Firefox，从第一个版本开始就支持前缀语法了。

给回车键绑定click事件

<script>
    $(function(){
        $("#form").keydown(function(event){
            if(event.keyCode===13){
                $("#button").click();
                $("#login_input").blur();
            }
        });
    });
</script>

Webstorm中使用Grunt

使用Grunt前端构建工具，需要node.js环境，下面先一步一步来安装好Grunt，最后是Webstorm中使用Grunt。本次安装的操作系统为linux。
Grunt的中文网址为：http://www.gruntjs.net/
安装Grunt：
1、在nodejs的官网下载需要的nodejs的版本，网站地址为：https://nodejs.org/en/
推荐下载LTS版本，文件选择后缀为： linux-x64.tar.gz ，如果是32位那么就选择linux-x86.tar.gz。该实例中使用的是 node-v4.2.2-linux-x64.tar.gz
2、将下载后的文件放在合适的位置后，执行tar -zxvf node-v4.2.2-linux-x64.tar.gz，解压文件
3、在 /etc/profile中增加一下几行代码
NODE=/home/tomcat/node-v4.2.2-linux-x64/bin
GRUNT=$NODE/node_modules/grunt-cli/bin
export GRUNT
export NODE
增加之后需要把NODE以及GRUNT加到PATH前面，加完后的效果如图所示：

NODE的值为解压后nodejs文件夹的bin目录的路径。
修改后保存，并执行source /etc/profile。
注：如果不是root用户那么需要修改的文件为： ~/.bash_profile，修改后执行source ~/.bash_profile
4、利用cd命令跳转到node-v4.2.2-linux-x64/bin目录下，执行npm install -g grunt-cli 。安装grunt的执行命令
5、在需要Grunt管理的项目中创建package.json文件，文件中内容为：
{
"name": "my-grunt",
"version": "0.0.1",
"devDependencies": {
"grunt": "^0.4.5" //该值为Grunt的版本号，根据需要选择
}
}
6、在与package.json的同一个目录下创建Gruntfile.js文件，文件内内容为：
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
//xxxxx下面的为Grunt插件的配置信息
});
};
7、根据自己需要下载Grunt插件，下载插件的命令为： npm install grunt-contrib-cssmin --save-dev
注：执行该命令的前提是执行命令的目录下必须存在Gruntfile.js以及package.json文件， --save-dev这个参数的含义是自动将下载的插件的依赖关系保存到package.json文件中。
8、以上步骤走完基本可以使用Grunt插件，Grunt插件的API网址为：http://www.gruntjs.net/plugins

Webstorm中使用Grunt：

1、在Webstorm中打开创建有Gruntfile.js以及package.json的项目。

2、在Gruntfile.js上右击选择Show Grunt Tasks

3、由于第一次在Webstorm中使用Grunt，在Grunt的窗口中应该会有提示错误的信息，信息如下：

 点击蓝色字体 details，会弹出配置Grunt-cli的设置窗口：

4、配置完成后点击如下图片的标识 1的按钮：

点击1后，会刷新出2区域的任务。在需要执行的任务上右击可以直接run 任务。

制作RPM软件包

其实，制作RPM软件包并不是一件复杂的工作，其中的关键在于编写SPEC软件包描述文件。要想制作一个rpm软件包就必须写一个软件包描述文件（SPEC）。这个文件中包含了软件包的诸多信息，如软件包的名字、版本、类别、说明摘要、创建时要执行什么指令、安装时要执行什么操作、以及软件包所要包含的文件列表等等。
链接：http://www.cnblogs.com/cnland/archive/2013/02/08/2909301.html

防止频繁触发hover

解决闪动可以使用Stop()
stop([clearQueue],[jumpToEnd])
概述
停止所有在指定元素上正在运行的动画。
如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行
参数
[clearQueue],[gotoEnd] Boolean,BooleanV1.2clearQueue:如果设置成true，则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。
[queue],[clearQueue],[jumpToEnd]BooleanV1.7queue:用来停止动画的队列名称
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。
如果我快速不断地将鼠标移入移出菜单（即，当菜单下拉动画未完成时，鼠标又移出了菜单）就会产生“动画积累”，当鼠标停止移动后，积累的动画还会持续执行，直到动画序列执行完毕。这样导致动画效果与鼠标动作不一致。
要解决此问题只需要在移入移出动画之前加入stop()，结束当前动画进入下个动画即可。
代码如下：
$("#menu").hover(
function () {
$("#menu").stop().animate({ height: "500" }, 5000);
},
function () {
$("#menu").stop().animate({ height: "100" }, 5000);
}
);
如果需到组合动画，在移入移出动画之前加入stop()来停止当前动画，如下

$("#menu").hover(
function () {
$("#menu").stop().animate({ height: "500" }, 5000).animate({ width: "500px" }, 3000);
},
function () {
$("#menu").stop().animate({ height: "100" }, 5000).animate({ width: "100px" },3000);
}
);
效果并不好，因为stop()只是停止了当前第一步的动画（即{height:”500″}），然后又进入了第二步的动画（即[width:”500″}）。
此时stop()的第一个参数就派上了用场，它会把下面没有执行的动画序列都清空掉。

$("#menu").hover(
function () {
$("#menu").stop(true).animate({ height: "500" }, 5000).animate({ width: "500px" }, 5000);
},
function () {
$("#menu").stop(true).animate({ height: "100" }, 5000).animate({ width: "100px" },5000);
}
);
当然也可以使用第二个参数，让动画达到最后状态。如：stop(false,true)

JS小程序

计算1+2+.....+n的值

> var n=window.prompt(" 请输入一个整数");
>           n=parseInt(n);
>           var res=0;
>           for(var i=1;i<=n;i++){
>               res+=i;
>               }
>               document.writeln('结果是'+res);
>

计算1!+2!+....+n!的值

> var res2=0;
> var temp=1;
>   for(var i=1;i<=n;i++){
>       for(var j=1;j<=i;j++){
>           temp*=j;}
>               res2+=temp;
>               temp=1;}
>   document.writeln("第二个结果是"+res2);

Flexbox，更优雅的布局

链接：https://segmentfault.com/a/1190000002490633#articleHeader0

CSS文本超出部分省略号代替

p{
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

width：用于设置p标签的宽度，如果没有宽度，何为“超出”，对吧？即使是没有手动的为p标签设定宽度，那么p标签横向也会自动充满父元素，也就是所说的100%；
white-space:这个属性不得了，特别值为“nowrap”的时候，为何这么说呢，因为当块级元素内的文本如果超过一行，即多行时，文本默认是要换行的，绝不会出现溢出
的情况；但是如果元素设置了这个属性white-space:nowrap，那么文本会无视父元素的宽度限制，结果就是文本溢出。
overflow：该属性是告诉元素，如果它内部包含的元素（图片、文本、其他元素等等）超出它的长宽范围时该如何处理，是显示滚动条呢，还是隐藏超出部分呢？而我们
当前所说的案例是需要超出的文本被隐藏，所以我们设置overflow:hidden。
text-overflow是CSS3的新属性，我们需要把它的值设为ellipsis，该值的意思就是以省略号代替超出的文本部分。

用户在浏览器地址输入了一个地址敲回车之后发生的事情

    1.用户在浏览器地址栏中输入网站域名

    2. 浏览器拿到该域名自动去请求 DNS服务器查询 用户输入的域名对应的 ip 地址

    3. 浏览器拿到 ip 地址之后，通过ip地址+端口号（HTTP默认80）和服务器建立连接（通过 三次握手 ）

    4. 三次握手建立连接成功之后

    5. 浏览器将用户输入的 url 地址通过 HTTP 协议包装成 请求报文 ，然后通过 Socket（服务器ip地址和端口号） 发送到服务器

    6. 当HTTP服务器接收到客户端浏览器发送过来的请求报文时候，按照 HTTP 协议将请求报文解析出来

    7. 然后服务器拿到请求报文中的请求信息（例如请求路径url），做相应的业务逻辑处理操作

    8. 当业务逻辑处理完毕之后，服务器将要发送给客户端的数据按照 HTTP 协议包装成 响应报文

    9. 然后服务器通过 Socket（客户端的ip地址+端口号） 将响应报文数据发送给客户端浏览器

    10. 当浏览器接收到服务器发送给自己的响应报文数据的时候，浏览器根据 HTTP 协议将报文内容解析出来

    11. 浏览器拿到响应报文体中的数据开始 解析渲染html、css，执行 JavaScript

    12. 如果在解析的过程（从上到下）中，发现有外链的标签（link、css、img）

    13. 浏览器会自动对该标签指向的 路径地址 发起新的请求（还是通过 Socket ）。

Git中忽略已被管理的文件的方法

前提条件：该文件已经被Git管理。
如果该文件还需要，则使用cp命令备份该文件。
只用rm 命令删除文件
在.gitignore文件中加上对该文件的过滤，.gitignore文件可以放在项目根目录下，也可以放在需要过滤的文件所在的同目录下
提交代码，这样就可以过滤掉该文件
.gitignore文件的配置规则：
1、配置语法：
　　以斜杠“/”开头表示目录；
　　以星号“”通配多个字符；
　　以问号“?”通配单个字符
　　以方括号“[]”包含单个字符的匹配列表；
　　以叹号“!”表示不忽略(跟踪)匹配到的文件或目录；
　　
　　此外，git 对于 .ignore 配置文件是按行从上到下进行规则匹配的，意味着如果前面的规则匹配的范围更大，则后面的规则将不会生效；
2、示例：
　　（1）规则：fd1/
　　　　说明：忽略目录 fd1 下的全部内容；注意，不管是根目录下的 /fd1/ 目录，还是某个子目录 /child/fd1/ 目录，都会被忽略；
（2）规则：.pyc
说明：忽略根所有后缀为pyc的文件，不管该文件是在根目录下还是某个子目录下
　　（3）规则：/fd1/
　　　　说明：忽略根目录下的 /fd1/ 目录的全部内容；
　（4）规则：
/*
!.gitignore
!/fw/bin/
!/fw/sf/
说明：忽略全部内容，但是不忽略 .gitignore 文件、根目录下的 /fw/bin/ 和 /fw/sf/ 目录；

搭建Django开发环境

本文为搭建Django开发环境的步骤，前提条件为：可用的eclipse、python版本为2.7
Step-by-step guide
1、安装python的包安装管理工具：
a、执行wget https://bootstrap.pypa.io/get-pip.py --no-check-certificate ，下载安装pip的python文件
b、执行python get-pip.py ，安装pip，如果报Permission denied 错误，代表权限不足，可以用sudo执行。 sudo python get-pip.py
c、执行pip -V 如果能出版本号那就说明安装成功
2、安装Django：
a、下载Django源码包，URL： https://www.djangoproject.com/m/releases/1.9/Django-1.9.1.tar.gz
b、使用tar -zxvf xxxx.tar.gz ，解压源码压缩包
c、cd到Django解压后的文件夹中，使用sudo python setup.py install 安装Django
d、打开Terminal ，输入 python

e、依次输入以下命令：
import django
diango.VERSION

f、如果出现Django的版本号，那么代表Django安装成功

3、安装python的支持REST API 框架：
sudo pip install djangorestframework

4、安装python模块：
sudo pip install pygments

5、安装MongoDB的python接口：
a、执行sudo pip install mongoengine
b、执行import操作检验是否安装成功，命令为： from mongoengine import Document
6、安装eclipse的python开发插件：
a、打开eclipse的Market：
Help---->Eclipse Marketplace

b、安装PyDev，选择install（图片中由于已经安装好所以按钮变成了Installed），点击Install后按照提示一步一步的点击确定（出现多选框时可以全部勾选再点确定）。

7、配置python编译器：

a、打开配置页面
Window---->Preferences

b、找到python的编译器页面
PyDev---->Interpreters---->Python Interpreter

c、点击New... 按钮，在新弹出的框中输入编译器名字（直接用版本号就行，比如 python2.7）和选择编译器路径（开发环境中的路径为/usr/bin/python）。

d、点击OK后出现选择框，直接使用默认全选

e、最后一路点击OK结束窗口。
8、运行Django项目：

a、右击项目 --> Run As --> PyDev:Django

9、运行Django项目后会发现只能通过127.0.0.1:8000来访问项目，这时候需要修改启动配置来允许其他机器访问

a、右击项目 --> Run As -->Run Configurations 打开run的配置页面

b、选择你想要修改的项目的运行配置

c、点击右侧的Arguments ，将 Program Arguments的值修改为runserver 0.0.0.0:8000

d、重新运行项目，即可在外部访问项目

维护 Gruntfile.js 文件

在开发过程中需要随时维护 Gruntfile.js 文件以适配不同的需求。在维护 Gruntfile.js 时需要注意几点：
a 、注册的自定义任务名不能与插件的名字相同，比如： grunt.registerTask('less', ['less']);
如果按照这样注册任务就会导致任务无法执行。可以修改为： grunt.registerTask('only-less', ['less']);
b 、在 Gruntfile 中路径可以使用 * 来代表任意名字的文件夹或者文件名，但如果想表示任意深度的文件夹的话则需要用 * 表示，比如 /test/* ：只能得到 /test/index.html ， /test/* 可以得到 /test/license/index.html 。所以在不定的文件夹深度时需要使用 **
c 、 Gruntfile.js 本质上是 JS 文件，因此可以在文件中直接写 function 以及定义变量。

Linux下安装要点

解压：tar -zxvf (压缩文件名)，然后cd到文件目录
配置：./configure
编译：make
安装：(sudo) make install

30类css选择器

{
margin: 0;
padding: 0;
}
　　在我们看比较高级的选择器之前，应该认识下这个众所周知的清空选择器。星号呢会将页面上所有每一个元素都选到。许多开发者都用它来清空margin和padding。当然你在练习的时候使用这个没问题，但是我不建议在生产环境中使用它。它会给浏览器凭添许多不必要的东西。
*也可以用来选择某元素的所有子元素。

container * {

border: 1px solid black;
}
　　它会选中#container下的所有元素。当然，我还是不建议你去使用它，如果可能的话。

　　兼容性

IE6+
Firefox
Chrome
Safari
Opera
　2. #X

container {

width: 960px;
margin: auto;
}
　　在选择器中使用#可以用id来定位某个元素。大家通常都会这么使用，然后使用的时候大家还是得相当小心的。
需要问自己一下：我是不是必须要给这个元素来赋值个id来定位它呢？

　　id选择器是很严格的并且你没办法去复用它。如果可能的话，首先试试用标签名字，HTML5中的新元素，或者是伪类。

　　兼容性

IE6+
Firefox
Chrome
Safari
Opera
　3. .X
.error {
color: red;
}
　　这是个class选择器。它跟id选择器不同的是，它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用class。当你要对某个特定的元素进行修饰那就是用id来定位它。

　　兼容性

IE6+
Firefox
Chrome
Safari
Opera
　4. X Y
li a {
text-decoration: none;
}
　　下一个常用的就是descendant选择器。如果你想更加具体的去定位元素，你可以使用它。例如，假如，你不需要定位所有的a元素，而只需要定位li标签下的a标签？这时候你就需要使用descendant选择器了。

　　专家提示：如果你的选择器像X Y Z A B.error这样，那你就错了。时刻都提醒自己，是否真的需要对那么多元素修饰。

　　兼容性

IE6+
Firefox
Chrome
Safari
Opera
　5. X
a { color: red; }
ul { margin-left: 0; }
　　如果你想定位页面上所有的某标签，不是通过id或者是’class’，这简单，直接使用类型选择器。

　　兼容性

IE6+
Firefox
Chrome
Safari
Opera
　6. X:visited and X:link
a:link {color:red;}
a:visited {color: purple;}
　　我们使用:link这个伪类来定位所有还没有被访问过的链接。

　　另外，我们也使用:visited来定位所有已经被访问过的链接。
　　兼容性

IE7+
Firefox
Chrome
Safari
Opera
　7. X+Y

ul + p {
color: red;
}
　　这个叫相邻选择器。它指挥选中指定元素的直接后继元素。上面那个例子就是选中了所有ul标签后面的第一段，并将它们的颜色都设置为红色。

　　兼容性

IE7+
Firefox
Chrome
Safari
Opera
　8. X>Y

div#container > ul {
border: 1px solid black;
}
　　X Y和X > Y的差别就是后面这个指挥选择它的直接子元素。看下面的例子：

List Item
- Child
List Item
List Item
List Item

　　#container > ul只会选中id为’container’的div下的所有直接ul元素。它不会定位到如第一个li下的ul元素。

　　由于某些原因，使用子节点组合选择器会在性能上有许多的优势。事实上，当在javascript中使用css选择器时候是强烈建议这么做的。

　　兼容性

IE7+
Firefox
Chrome
Safari
Opera
　9. X ~ Y

1
2
3
ul ~ p {
color: red;
}
　　兄弟节点组合选择器跟X+Y很相似，然后它又不是那么的严格。ul + p选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器，会选择跟在目标元素后面的所有匹配的元素。

　　兼容性

IE7+
Firefox
Chrome
Safari
Opera
　10. X[title]

a[title] {
color: green;
}
　　这个叫属性选择器，上面的这个例子中，只会选择有title属性的元素。那些没有此属性的锚点标签将不会被这个代码修饰。那再想想如果你想更加具体的去筛选？那…

　　兼容性

IE7+
Firefox
Chrome
Safari
Opera
　11. X[href="foo"]

a[href="http://strongme.cn"] {
color: #1f6053; /* nettuts green */
}
　　上面这片代码将会把href属性值为http://strongme.cn的锚点标签设置为绿色，而其他标签则不受影响。

注意我们将值用双引号括起来了。那么在使用Javascript的时候也要使用双引号括起来。可以的话，尽量使用标准的CSS3选择器。

　　这样可以用了，但是还是有点死，如果不是这个链接，而是类似的链接，那么这时就得用正则表达式了。

　　兼容性

IE7+
Firefox
Chrome
Safari
Opera
　12. X[href*="strongme"]

a[href*="strongme"] {
color: #1f6053;
}
　　Tada,正是我们需要的，这样，就指定了strongme这个值必须出现在锚点标签的href属性中，不管是strongme.cn还是strongme.com还是www.strongme.cn都可以被选中。
但是记得这是个很宽泛的表达方式。如果锚点标签指向的不是strongme相关的站点，如果要更加具体的限制的话，那就使用^和$，分别表示字符串的开始和结束。

　　兼容性

IE7+
Firefox
Chrome
Safari
Opera
　13. X[href^="href"]

a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
　　大家肯定好奇过，有些站点的锚点标签旁边会有一个外链图标，我也相信大家肯定见过这种情况。这样的设计会很明确的告诉你会跳转到别的网站。
用克拉符号就可以轻易做到。它通常使用在正则表达式中标识开头。如果我们想定位锚点属性href中以http开头的标签，那我们就可以用与上面相似的代码。

注意我们没有搜索http://，那是没必要的，因为它都不包含https://。

　　那如果我们想找到所有指向一张图片的锚点标签呢？那我们来使用下&字符。

　　兼容性

IE7+
Firefox
Chrome
Safari
Opera
　14. X[href$=".jpg"]

a[href$=".jpg"] {
color: red;
}
　　这次我们又使用了正则表达式$，表示字符串的结尾处。这段代码的意思就是去搜索所有的图片链接，或者其它链接是以.jpg结尾的。但是记住这种写法是不会对gifs和pngs起作用的。

　　兼容性

IE7+
Firefox
Chrome
Safari
Opera
　15. X[data-*="foo"]

a[data-filetype="image"] {
color: red;
}
　　在回到第8条，我们如何把所有的图片类型都选中呢png,jpeg,’jpg’,’gif’？我们可以使用多选择器。看下面：

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
　　但是这样写着很蛋疼啊，而且效率会很低。另外一个办法就是使用自定义属性。我们可以给每个锚点加个属性data-filetype指定这个链接指向的图片类型。

Image Link </a
　　那有了这个钩子，我们就可以去用标准的办法只去选定文件类型为image的锚点了。

a[data-filetype="image"] {
color: red;
}

　　兼容性

IE7+
Firefox
Chrome
Safari
Opera
　16. X[foo~="bar"]

a[data-info~="external"] {
color: red;
}

a[data-info~="image"] {
border: 1px solid black;
}
　　这个我想会让你的小伙伴惊呼妙极了。很少有人知道这个技巧。这个~符号可以定位那些某属性值是空格分隔多值的标签。
继续使用第15条那个例子，我们可以设置一个data-info属性，它可以用来设置任何我们需要的空格分隔的值。这个例子我们将指示它们为外部连接和图片链接。

Click Me, Fool
　　给这些元素设置了这个标志之后，我们就可以使用~来定位这些标签了。

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
color: red;
}

/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}
　17. X:checked

input[type=radio]:checked {
border: 1px solid black;
}
　　上面这个伪类写法可以定位那些被选中的单选框和多选框，就是这么简单。

　　兼容性

IE9+
Firefox
Chrome
Safari
Opera
　18. X:after

　　before和after这俩伪类。好像每天大家都能找到使用它们的创造性方法。它们会在被选中的标签周围生成一些内容。
当使用.clear-fix技巧时许多属性都是第一次被使用到里面的。

.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}

.clearfix {
*display: inline-block;
_height: 1%;
}
　　上面这段代码会在目标标签后面补上一段空白，然后将它清除。这个方法你一定得放你的聚宝盆里面。特别是当overflow:hidden方法不顶用的时候，这招就特别管用了。
还想看其他创造性的使用这个伪类，看这里。

根据CSS3标准规定，可以使用两个冒号::。然后为了兼容性，浏览器也会接受一个双引号的写法。其实在这个情况下，用一个冒号还是比较明智的。

　　兼容性

IE8+
Firefox
Chrome
Safari
Opera
　19. X::hover

div:hover {
background: #e3e3e3;
}
　　不用说，大家肯定知道它。官方的说法是user action pseudo class.听起来有点儿迷糊，其实还好。如果想在用户鼠标飘过的地方涂点儿彩，那这个伪类写法可以办到。

注意旧版本的IE只会对加在锚点a标签上的:hover伪类起作用。

　　通常大家在鼠标飘过锚点链接时候加下边框的时候用到它。

a:hover {
border-bottom: 1px solid black;
}
专家提示：border-bottom:1px solid black;比text-decoration:underline;要好看很多。

　　兼容性

IE6+(IE6只能在锚点标签上起作用)
Firefox
Chrome
Safari
Opera
　20. X:not(selector)

div:not(#container) {
color: blue;
}
　　取反伪类是相当有用的，假设我们要把除id为container之外的所有div标签都选中。那上面那么代码就可以做到。

　　或者说我想选中所有出段落标签之外的所有标签。

*:not(p) {
color: green;
}

　　兼容性

IE9+
Firefox
Chrome
Safari
Opera
　21. X::pseudoElement

p::first-line {
font-weight: bold;
font-size:1.2em;
}
　　我们可以使用::来选中某标签的部分内容，如地一段，或者是第一个字没有。但是记得必须使用在块式标签上才起作用。

伪标签是由两个冒号::组成的。

　　定位第一个字

p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
　　上面这段代码会找到页面上所有段落，并且指定为每一段的第一个字。

　　它通常在一些新闻报刊内容的重点突出会使用到。

　　定位某段的第一行

p::first-line {
font-weight: bold;
font-size: 1.2em;
}
　　跟::first-line相似，会选中段落的第一行。

　　为了兼容性，之前旧版浏览器也会兼容单冒号的写法，例如:first-line,:first-letter,:before,:after.但是这个兼容对新介绍的特性不起作用。

　　兼容性

IE6+
Firefox
Chrome
Safari
Opera
　22. X:nth-child(n)

li:nth-child(3) {
color: red;
}
　　还记得我们面对如何取到推跌式标签的第几个元素是无处下手的时光么，有了nth-child那日子就一去不复返了。

　　请注意nth-child接受一个整形参数，然后它不是从0开始的。如果你想获取第二个元素那么你传的值就是li:nth-child(2).

　　我们甚至可以获取到由变量名定义的个数个子标签。例如我们可以用li:nth-child(4n)去每隔3个元素获取一次标签。

　　兼容性

IE9+
Firefox3.5+
Chrome
Safari
　23. X:nth-last-child(n)

li:nth-last-child(2) {
color: red;
}
　　假设你在一个ul标签中有N多的元素，而你只想获取最后三个元素，甚至是这样li:nth-child(397)，你可以用nth-last-child伪类去代替它。

　　这个技巧可以很正确的代替第16个TIP，不同的就是它是从结尾处开始的，倒回去的。

　　兼容性

IE9+
Firefox3.5+
Chrome
Safari
Opera
　24. X:nth-of-type(n)

ul:nth-of-type(3) {
border: 1px solid black;
}
　　曾几何时，我们不想去选择子节点，而是想根据元素的类型来进行选择。

　　想象一下有5个ul标签。如果你只想对其中的第三个进行修饰，而且你也不想使用id属性，那你就可以使用nth-of-type(n)伪类来实现了，上面的那个代码，只有第三个ul标签会被设置边框。

　　兼容性

IE9+
Firefox3.5+
Chrome
Safari
　25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {
border: 1px solid black;
}
　　同样，也可以类似的使用nth-last-of-type来倒序的获取标签。

　　兼容性

IE9+
Firefox3.5+
Chrome
Safari
Opera
　26. X:first-child

ul li:first-child {
border-top: none;
}
　　这个结构性的伪类可以选择到第一个子标签，你会经常使用它来取出第一个和最后一个的边框。

　　假设有个列表，没个标签都有上下边框，那么效果就是第一个和最后一个就会看起来有点奇怪。这时候就可以使用这个伪类来处理这种情况了。

　　兼容性

IE7+
Firefox
Chrome
Safari
Opera
　27. X:last-child

ul > li:last-child {
color: green;
}
　　跟first-child相反，last-child取的是父标签的最后一个标签。

　　例如标签

List Item
List Item
List Item

ul {
width: 200px;
background: #292929;
color: white;
list-style: none;
padding-left: 0;
}

li {
padding: 10px;
border-bottom: 1px solid black;
border-top: 1px solid #3c3c3c;
}
　　上面的代码将设置背景色，移除浏览器默认的内边距，为每个li设置边框以凸显一定的深度。

　　兼容性

IE9+
Firefox
Chrome
Safari
Opera
　28. X:only-child

div p:only-child {
color: red;
}
　　说实话，你会发现你几乎都不会用到这个伪类。然而，它是可用的，有会需要它的。

　　它允许你获取到那些只有一个子标签的父标签。就像上面那段代码，只有一个段落标签的div才被着色。

My paragraph here.

Two paragraphs total.

　　上面例子中，第二个div不会被选中。一旦第一个div有了多个子段落，那这个就不再起作用了。

　　兼容性

IE9+
Firefox
Chrome
Safari
Opera
　29. X:only-of-type

li:only-of-type {
font-weight: bold;
}
　　结构性伪类可以用的很聪明。它会定位某标签只有一个子标签的目标。设想你想获取到只有一个子标签的ul标签？

　　使用ul li会选中所有li标签。这时候就要使用only-of-type了。

ul > li:only-of-type {
font-weight: bold;
}

　　兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera
　30. X:first-of-type

　　first-of-type伪类可以选择指定标签的第一个兄弟标签。

　　测试

My paragraph here.

List Item 1
List Item 2

List Item 3
List Item 4

　　来你把List Item 2取出来，如果你已经取出来或者是放弃了，来继续。

　　解决办法1

　　办法很多，我们看一些比较方便的。首先是first-of-type。

ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
　　找到第一个ul标签，然后找到直接子标签li，然后找到第二个子节点。

　　解决办法2

　　另一个解决办法就是邻近选择器。

p + ul li:last-child {
font-weight: bold;
}
　　这种情况下，找到p下的直接ul标签，然后找到它的最后一个直接子标签。

　　解决办法3

　　我们可以随便玩耍这些选择器。来看看：

ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
　　先获取到页面上第一个ul标签，然后找到最后一个子标签。

　　兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera
　结论

　　如果你想向旧版本浏览器妥协，比如IE6，那你用这些新的选择器的时候还是得小心点。但别别让IE6阻止你去学这些新的技能。那你就对自己太残忍了。记得多查查兼容性列表，或者使用Dean Edward’s excellent IE9.js script 来让你的浏览器具有这些特性。

　　第二个，使用向jQuery的时候，尽量使用原生的CSS3选择器。可能活让你的代码跑的很快。这样选择器引擎就可以使用浏览器原生解析器，而不是选择器自己的。

web前端开发-移动端页面开发资源总结

http://www.cnblogs.com/www2846613430/p/5278508.html

Nginx的搭建与配置（实现静态和动态资源的分离）

一、安装需要的工具：
1、安装gcc-c++： sudo yum install gcc-c++
二、搭建nginx
1、安装pcre模块 —— 用于进行URL的正则表达式匹配：
在 http://www.pcre.org/ 网站下载最新的pcre安装包，安装过程中若提示权限不足，可以使用sudo安装。
下面以pcre-8.38.tar.gz 为例讲解安装步骤
安装步骤：
解压： tar -zxvf pcre-8.38.tar.gz
cd到解压出来的目录pcre-8.38
执行./configure
执行make 查看是否有错误
make没有错误的情况下执行 sudo make install
下面两个模块按照这个步骤进行安装

2、安装zlib模块 —— 用于gzip压缩：
在 http://www.zlib.net/ 网站下载最新的zlib安装包进行安装（需要使用unzip解压）
3、安装openssl模块 ——用于SSL协议：
在 http://www.openssl.org/ 网站下载最新的openssl安装包进行安装
4、安装nginx —— 以nginx-1.8.0.tar.gz为例
a、在nginx官网下载需要的版本： http://nginx.org/en/download.html
b、解压安装包： tar -zxvf nginx-1.8.0.tar.gz
c、生成Makefile文件： ./configure --sbin-path=/opt/nginx/nginx --prefix=/opt/nginx/ --user=tomcat
d、执行make命令检查是否能够安装： make
e、在d步没有报错的情况下执行：make install ，如果存在错误则根据提示进行解决

    生成Makefile时候参数的含义 —— 详细参数见： http://www.nginx.cn/install ：
    --sbin-path ： 设置nginx的可执行文件的路径，默认 prefix/sbin/nginx
    --prefix ： nginx的安装目录，默认 /usr/local/nginx
    --user ： 设置nginx工作进程的用户，默认为 nobody

让图片自适应窗口代码

 <div id="web_bg" style="position:absolute; width:100%; height:100%; z-index:-1">
 <img style="position:fixed;" src="http://a.lanyes.org/bg1.jpg" height="100%" width="100%" />
 </div>

数组去重的方法

* 第一种方法
Array.from方法可以将Set结构转为数组 
let items = new Set([1, 2, 3, 4, 5]);
let array = Array.from(items);

这就是提供了一种数据去重的方法 
function uniq(array) {
  return Array.from(new Set(array));
}
uniq([1, 2, 3, 3])  //[1, 2, 3]

* 第二种方法
运用扩展运算符(…)提供了一种更便捷的去重方法 
let arr = [2, 3, 3, 5, 6, 2];
let uniq = [...new Set(arr)];
//[2, 3, 5, 6]

* 第三种方法
这是一种原生JS的去重方法，借助一个空数组来实现去重，便于理解底层原理(xyz函数带有参数) 
function xyz(arr) {
  let a= [];
  arr.forEach((item,index) => {
    a.indexOf(item) ===-1 ? a.push(item) : ''
  })
  return a;
}
console.log(xyz([1,2,3,2,3]));
//[1, 2, 3]

* 第四种方法
同上(xyz函数不带参数) 拓展：需要注意的一点就是此函数可以传多个数组，但是要看arguments[index] 决定执行哪个数组，默认是执行第一个。 
function xyz() {
  let a= [];
//  Array.from(arguments[0]).forEach((item,index) => {
//    a.indexOf(item) ===-1 ? a.push(item) : ''
// })
//  Array.prototype  可以换成[]
Array.prototype.forEach.call(arguments[1], (item,index) => {
   a.indexOf(item) ===-1 ? a.push(item) : ''
})
  return a;
}
console.log(xyz([1,2,3,2,3],[2,2,1]));
//[1, 2, 3]

* 第五种方法
这是一种基于数组原型链的去重方法 
Array.prototype.uniq = function() {
  let a= [];
    this.forEach((item,index) => {
      a.indexOf(item) ===-1 ? a.push(item) : ''
    })
    return a;
}

console.log([1,2,1,3].uniq());
//[1, 2, 3]

兼容IE浏览器

用ie浏览器独有的文档注释的方式。像这样：

<!DOCTYPE html>
<!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en"> <!--<![endif]-->

关键是可以独立的维护处理兼容ie浏览器的样式表，又不会淹没在一大堆css hack标识中，只需要在独立对ie8应用样式规则的地方，copy该条规则，然后在前面加上 .ie8然后就能随便写了，对付ie9也一样。

清除浮动终极版本

终极版一：

.clearfix:after { 
    content:"\200B"; 
    display:block; 
    height:0; 
    clear:both; 
} 
.clearfix {*zoom:1;}

解释下:content:"\200B";这个参数，Unicode字符里有一个“零宽度空格”，即 U+200B，代替原来的“.”，可以缩减代码量。而且不再使用visibility:hidden。

终极版二：

.clearfix:before,.clearfix:after{ 
    content:""; 
    display:table; 
} 
.clearfix:after{clear:both;} 
.clearfix{ 
    *zoom:1; 
}

编译ambari-2.1.2的过程

编译ambari-2.1.2的过程
1 clone 源码
git clone https://git-wip-us.apache.org/repos/asf/ambari.git
checkout branch-2.1.2
2 设置npm的代理，一定要设置国内代理。taobao的就可以
npm --registry=https://registry.npm.taobao.org
--cache=$HOME/.npm/.cache/npm
--disturl=https://npm.taobao.org/dist
--userconfig=$HOME/.npmrc
4 升级和安装所需的包
node -v v0.10.36
npm -v 1.3.6
node-gyp -v v3.2.1
升级安装操作和安装brunch：
npm install -g node-gyp #
npm i -g brunch@1
5 设定nexus的代理：
代理地址为：http://nexus-private.hortonworks.com/nexus/content/groups/public/。不要设置http://repo.hortonworks.com/nexus/content/groups/public/
6 定义版本：
mvn versions:set -DnewVersion=2.1.2.0 #为何多加0，因为新版的正则 ^([0-9]+).([0-9]+).([0-9]+).([0-9]+)((.|-).)?,取的是$1.$2.$3.$4
pushd ambari-metrics
mvn versions:set -DnewVersion=2.1.2.0-1 #为何要加（-1）,因为ambari-metrics的正则^([0-9]+).([0-9]+).([0-9]+).([0-9]+)(.|-).正则匹配到(.|-).*，否则认为正则不匹配
popd
7 clean环境（如果编译失败时，要记得clean一下）
mvn -U clean compile # -U 代表强制更新
8 编译的时候设置环境变量
PHANTOMJS_CDNURL=http://cnpmjs.org/downloads。这个也可以用，
但还是强烈建议用
PHANTOMJS_CDNURL=http://npm.taobao.org/mirrors/phantomjs
9 开始编译：
PHANTOMJS_CDNURL=http://npm.taobao.org/mirrors/phantomjs mvn -X -B -e clean install package rpm:rpm -DnewVersion=2.1.2.0 -DskipTests -Dpython.ver="python >= 2.6"

10 常见问题：
1 Could not find artifact org.apache.hbase:hbase:pom:1.1.2.2.3.4.0-3347 in ...
查看：
1 nexus的repo里用没用该jar？如果没有，需要同步第三方源
2 官方hortonworks里有没有该jar。有没有的话，找找其他repo里有没有，添加过来
3 如果没有找到，可能需要的是已经编译好的jar，将以便以好的jar上传至nexus服务器
4 如果nexus的repo里有，本地还是没有发现，这个时候。你需要执行 mvn -U clean compile && rm ~/.m2/repository/，有更好的方法就是在编译前，查找本地仓库有没有_.last_的文件
2 正则不匹配问题
查看
1 当前模块的version。重新设定version
3 ETIMEOUT问题
查看：
1 wget超时，查看网络是否连通，尤其是private-repo-1.hortonworks.com
2 npm 超时，最好设置为**源。
3 Download jar超时，查看nexus是否有该jar，如果没有，查看是否正在同步第三方的源，tcpdump抓包看一下。
4 psutil/_psutil_linux.c:12:20: error: Python.h: No such file or directory
查看：
1 查看本地是否按照python-devel包

你不知道的JS读书笔记

ReferenceError同作用域判别失败相关，而TypeError 则代表作用域判别成功了，但是对结果的操作是非法或不合理的。

JS中this关键字和作用域

作用域（scope）：
所谓作用域就是：变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。
function scope(){
var foo = "global";
if(window.getComputedStyle){
var a = "I'm if";
console.log("if:"+foo); //if:global
}
while(1){
var b = "I'm while";
console.log("while:"+foo);//while:global
break;
}
!function (){
var c = "I'm function";
console.log("function:"+foo);//function:global
}();
console.log(
foo,//global
a, // I'm if
b, // I'm while
c // c is not defined
);
}
scope();
（1）scope函数中定义的foo变量，除过自身可以访问以外，还可以在if语句、while语句和内嵌的匿名函数中访问。因此，foo的作用域就是scope函数体。

（2）在javascript中，if、while、for 等代码块不能形成独立的作用域。因此，javascript中没有块级作用域，只有函数作用域。

但是，在JS中有一种特殊情况：

如果一个变量没有使用var声明，window便拥有了该属性，因此这个变量的作用域不属于某一个函数体,而是window对象。
作用域链（scope chain）

所谓作用域链就是：一个函数体中嵌套了多层函数体，并在不同的函数体中定义了同一变量，当其中一个函数访问这个变量时，便会形成一条作用域链（scope chain）。
this 关键字

在一个函数中，this总是指向当前函数的所有者对象，this总是在运行时才能确定其具体的指向, 也才能知道它的调用对象。

这句话总结了关于this的一切，切记，切记，切记!