码农，程序猿，未来的昏析师

最近应公司需求，搭建gitlab私服，在这里做一个简单的记录。

1.安装和配置必要的依赖

sudo yum install curl policycoreutils openssh-    server openssh-clients
sudo systemctl enable sshd
sudo systemctl start sshd
sudo yum install postfix
sudo systemctl enable postfix
sudo systemctl start postfix
sudo firewall-cmd --permanent --add-service=http
sudo systemctl reload firewalld

2.使用国内镜像安装，新建 /etc/yum.repos.d/gitlab-ce.repo，添加以下内容，否则下载安装太过缓慢

基本信息

使用IE7以及之前的版本需要特许处理，具体见书P572，因为组件使用vue，IE版本在IE8+，所以目前不考虑

首先 var xhr = new XMLHttpRequest();
    在使用异步请求时，需要检测xhr对象readyState属性，该属性表示请求/响应过程的当前活动阶段
   0：未初始化。尚未调用open()方法，
   1：启动，已经调用opend方法，但未收调用send方法
   2：已经调用send方法，但未接收到响应
   3：接收，已经接收到部分响应数据
   4：完成，已经接收到全部数据响应
   每次readyState的值改变都会触发一次readystatechange事件，通常只对值为4的阶段感兴趣，不过必须在open之前指定readystatechange事件处理程序才能确保跨浏览器兼容性
   
   xhr.onreadystatechange = function(){
       if(xhr.readyState === 4){
       	if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 ){
       		alert(xhr.responseText)
       	}else{
       	 	alert('response error'+ xhr.status); 
       	}
       }
   }//这里使用的是dom0级事件，因为并非所有的浏览器都支持dom2级事件
       
    xhr.open('get',url,true)//第一个参数表示请求类型，第二个参数表示url，第三个参数表示是否异步
    
     xhr.send(null)//send方法接受一个参数，即作为请求主体发送的数据，如果不需要，则必须传入null
    
    在收到响应后，会自动填充xhr对象的属性，
    1.responseText：作为响应返回的文本
    2.responseXML： 如果响应头设置的是‘text/xml’或者‘application/xml’，这个属性中保存着响应数据的xml文档
    3.status:响应的http状态
    4.statusText:HTTP的状态说明
    
    在未收到响应之前，可以调用xhr.abort();来取消异步请求

今年过年的时候和小伙伴们看到了LOL的狗年活动官网。不得不感叹，搞IT的看的和别人就是不一样，别人看活动，我看设计、看特效,看完头脑一热，决定用原生js搞一波。。。。

抽了7、8天的空闲时间，搞的差不多了，在谷歌下显示的还是可以的，其他浏览器的兼容性并没有测试。

写完之后收获了很多，对于css属性以及css3动画的进一步学习以及应用，对原生js的练习、运用，加强了对于html标签语义化的应用，避免过去对于div的魔性依赖。。。还有就是对于html布局的新理解，自己写的布局到最后总是感觉没有原版写的好（难道是因为我没有设计的原因？？？），最后不得不感叹有一个好的视觉设计师（美工）对于程序员是多么滴重要

git源码地址

仿写地址

官网地址

四种高度、宽度获取，区别

arguments.callee表示调用本身函数
js隐式转换非常吃转换引擎的性能
js的节点无法自杀，找到父节点，删除子节点
this上下文，如果用that存储this,表示用静态变量存储动态指针，可以使用
高内聚低耦合，单一节点
短路运算符$$左边真返回右边，左边假返回左边
1$$2返回2
0$$2返回0
if(1)2;
setInterval永远指向window
可以使用setInterval(function(){}.bind(this),3000)表示被动执行的函数永远绑定在this上    

使用文档片段进行操作，防止回流

使用 createDocumentFragment创建文档片段，每次都添加到这个对象的时候，最后添加到dom容器里面，这样只会渲染一次，大大减少了DOM渲染所浪费的性能

css全称Cascading style sheet（层叠样式表）

样式的权重，见精通css高级Web标准解决方案一书

浏览器如何解析对应的选择器

1. 从右往左进行解析（反过来解析，比如 .body div .hello，先找hello这个类，然后找到上面有div的，然后找到上面有body类名的）这样做是出于性能考虑，这样可以直接过滤掉不符合的范围。

伪元素和伪类

• 伪元素是一个真是存在页面中，可以被显示的元素，用::，考虑到兼容性问题，要用到:
• 伪类是元素触发的状态，并不是真是存在的元素用:

选择器权重

• ID选择器 +100
• 类选择器 +10
• 元素选择器 =1（a）
• 其他选择选择器 +0
• css的权重是不进位的，就是说11个类名相加也不会是110，多少个类选择器都不会超过ID选择器（官大一级压死人）
• !importatn优先级最高
• 内联样式比外部高
• 同样高的样式后面的会覆盖前面的
  阅读全文 »

HTML相关元素

HTML其实是一份文档，和你的word其实是一样的，有区块，有大纲

XHTML出现因为html4是不严格的开发语言，所以随便写都可以，大家认为这样是不好的，应该有自己的开发规范，因为当时XML是严格的标记语言，所以基于XML出现了XHTML，要求非常严格，在XHTML5出现之前是比较流行的，可以约束大家的习惯，使代码更可读。但是出现XHTML2.0的时候要求更严格，并且不想前兼容，所以大家又觉得烦了。后来出现了HTML5，这是基于HTML4的，所以很多开发要求又回到原来了。

meta标签

• charset指定字符集

• viewport的视口相关设置
  • width = ‘device-width’表示用设备的屏幕大小来显示
    阅读全文 »

• 对于vue单页的开发，css的组织十分重要，没有统一的规范，导致样式开发的比较乱，需要进行统一的整理以及预定义，对于某些页面单独的样式需要使用异步加载的样式，全部打包到一起，文件较大，网络带宽消耗也比较大
• 对于页面的整体架构需要好好的设计，不能直接上手就开发，对开发方案需要经过仔细的验证
• 对于global的全局变量，对于双向实时监听不太友好，下次需要考虑变换方案，使用bus或者vuex吧，不能怕麻烦
• 功能开发应该预留一些修改，这次主要也是甲方的修改太过频繁，但是开发的时候也没有考虑这些修改，下次需要注意
• 虽然项目不大，但是下次最好也是要用项目管理工具，否则进度比较难统一
• 代码开发要静下心、沉住气，不能急躁，否则写出废代码后果自负

46 状态平滑的动画

• 对于动画，使用animation-play-state属性，指定当前动画的动画状态

47 沿环形路径平移的动画

• 简单实现之后发现旋转的图片也会随之旋转，大大降低了可阅读性，通过一个反方向的旋转，即可解决
• 第二种解决方案暂不记录
• 玩了一把作者写的相框效果，要活用background-clip,background-origin，以及用box-shadow,效果很漂亮
• background-clip对于图片只是裁剪，多余的部分会被裁减掉，而background-origin则是将图片移动到起始位置

42 缓动效果

• box-shadow 最后的inset参数可以实现将阴影投入到元素内部
• 贝塞尔曲线学习使用网站
  阅读全文 »

IE兼容性相关

• IE浏览器的表现和其他浏览器不一样的一个原因就是，显示引擎使用一个称之为引擎的概念，所以布局的概念是IE浏览器上特有的，所以当元素在IE上显示时，如果元素拥有了布局，那么元素的显示就会被限制，就会和其他浏览器上展示的不一样（比如当给浮动元素设置的宽度时，浮动元素拥有布局，就会被限制为矩形，会阻止文本绕元素浮动）
• 在其他浏览器上，如果元素的内容大于元素的尺寸，那么会溢出，而IE6或者更低版本中，拥有布局的元素会错误的扩展元素以支持这些多出的内容，剩余的问题列举见书P195
• 在html中，可以指定css应用于特定的浏览器，可以使用条件注释指定特定的浏览器，也可以对IE浏览器隐藏某些css文件（见书P196）(<!– [if It IE 6]> <![endif]>)（这就是条件注释，用来兼容IE浏览器）
• IE6不支持锚链接的：focus伪类，ie7忽略:active和:focus
• css2.1和css3的很多高级选择器IE6和更低版本是不支持的（例如属性选择器）
• IE7以上都支持子元素选择器，但是在IE7中有一个BUG，如果选择的元素之间存在html注释，那么就会出问题，相邻同胞
• IE6中，混杂模式时使用的是非标准的盒模型，这时候，元素的width不是内容的宽度，而是内容、内边距和外边框的宽度
• IE8以上支持display:inline-block
• 老版本的ie想要支持透明度的话需要专门的适配filter:alpha(opacity=80);（opacity = 0.8）
• 在IE6中对PNG的透明度支持也要有专门的代码适配，代码见书P74
• 老版本IE不支持对锚元素（a）使用：hover伪类
• IE6及其以下的双外边距BUG，使用display：inline即可修复
• 更多的IEBUG请看书199页9.5

• IE的缺陷不应该阻碍我们尝试各种新技术

  阅读全文 »

前言:由于项目需求，短信验证码的接口需要换成阿里大于的，但是尴尬的发现阿里大于的jar包没有maven版本的，于是便开始了一上午的操蛋引包之路。按照套路来说，自然应该是百度一波，但是百度了好久，找了好多方案之后发现，没一个有用的，而且文章的抄袭、拷贝十分严重，试了N种方案，都是错的，都没有将外部jar包打包到BOOK-INF文件夹下。最终，在第N次尝试之后，终于在打的jar包里将外部的jar包导入进来

首先在新建libs文件夹（根目录或者resource目录下都可以），将需要引入的jar放进去

然后再pom中加入如下配置，告诉maven导入本地jar

   <dependency>
    <groupId>com.aliyun</groupId>
    <artifactId>aliyun-java-sdk-core</artifactId>
    <version>3.2.2</version>
    <scope>system</scope>
    <systemPath>${project.basedir}/libs/aliyun-java-sdk-core-3.3.1.jar</systemPath>
</dependency>
<dependency>
    <groupId>com.aliyun</groupId>
    <artifactId>aliyun-java-sdk-dysmsapi</artifactId>
    <version>1.0.0</version>
    <scope>system</scope>
    <systemPath>${project.basedir}/libs/aliyun-java-sdk-dysmsapi-1.0.0.jar</systemPath>
</dependency>

其中除了systemPath配置告诉maven引入的本地jar包的位置之外，其他的配置都可以随便写

划重点！！！敲黑板！！！下面的一步配置也是最重要的一步，网上很多的教程缺了这样一步之后就会导致虽然本地可以运行，但是只要使用maven打包就不行，因为maven没有将本地的jar也打到生成的包中