搭建准备工作

安装Node

首先Gulp是基于Nodejs的，所以安装Nodejs是前提，Node可以说是前端神器，基于Node有各种各样的工具，正是因为这些工具让我们非常方便的构建前端工程。

更改Node插件默认安装位置

Windows电脑的话，我自己一般不喜欢在C盘安装太多与系统无关的东西，而通过Node自带的npm安装的插件默认在C盘，但是我将Node安装到D盘后，想让插件就安装在Nodejs的主目录下，怎么办呢？

1. 在Node主目录下新建”node_global”及”node_cache”两个文件夹
2. 启动cmd，输入

1
2
3

//后面的设置目录根据你的目录结构自行更改
npm config set prefix "D:\Program\nodejs\node_global"
npm config set cache "D:\Program\nodejs\node_cache"

1. 关闭cmd，打开系统对话框，“我的电脑”右键“属性”-“高级系统设置”-“高级”-“环境变量”。
2. 进入环境变量对话框，在系统变量下新建”NODE_PATH”，输入”D:\Program\nodejs\node_global\node_module”。 由于改变了module的默认地址，所以上面的用户变量都要跟着改变一下（用户变量”PATH”修改为”D:\Program\nodejs\node_global\”），要不使用module的时候会导致输入命令出现“xxx不是内部或外部命令，也不是可运行的程序或批处理文件”这个错误。

经过这四步的设置就可以让安装的Node插件放在Nodejs的主目录了。

安装Gulp

1
2
3
4

//全局安装Gulp
npm install -g gulp
//在项目中安装Gulp
npm install --save-dev gulp

Read More

由于公司需要写一个功能，而公司的中使用的框架是jquery，所以想到了开发jquery框架。

1.jQuery插件开发方式

jQuery插件开发方式主要有三种：
通过$.extend（），通过$.fn向jQuery添加新的方法，通过$weight（）应用jQueryUI的部件工厂方式创建

2.插件中的this

在插件名字定义的这个函数内部，this指代的是在调用该插件时，用jQuery选择器选中的元素。这里的this已经是jQuery元素，无需再用美元符包装。

3.jQuery链式调用

jQuery支持链式调用，要让插件不打破这个链式调用，只需要return一下，实例如下

1
2
3
4
5
6
7
8

¥.fn.myPlugin = function(){
    //这里面this指的是jquery选中的元素
    this.css('color','red');
    return this.each(function(){
        //对每个元素进行操作
        ¥(this).append(' '+¥(this).attr('href'));
    })
}

Read More

最近在写页面的时候遇到了一个问题—当行文本双端对齐，大家都知道CSS属性中有一个“text-align:justify”，但是这个属性使用的时候，要求还是挺多的，尤其是要实现单行文本双端对齐。关于两端对齐，大漠和张鑫旭的博客中都有文章讲，非常不错，推荐给大家：
display:inline-block/text-align:justify下列表的两端对齐布局
Text-align:Justify和RWD

text-align:justify与text-align-last:justify

1.text-align

MDN中这样介绍到：“text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align并不控制块元素自己的对齐，只控制它的行内内容的对齐。”从这里可以看出，控制文本居中对齐直接写text-align:justify就可以。但是这对于多行文本（即有文本换行）除了最后一行都可以实现两端对齐，最后一行依旧左对齐。所以就需要控制最后一行文本对齐方式的CSS属性：text-align-last。

2.text-align-last

text-align-last 属性规定如何对齐文本的最后一行。但是这里注意一点text-align-last 属性只有在 text-align 属性设置为 “justify” 时才起作用。所以，利用这个属性就可以控制最后一行文本的对齐方式。我们可以想象，如果是单行文本，就可以当作最后一行文本处理，直接设置text-align-last:justify来实现当行文本两端对齐，可惜的是，这样的方法兼容性并不好。

Read More

@if 三目运算

For explame:

1
2
3
4

$screenWidth: 500;
body{
  color: if($screenWidth > 768, blue, red);
}

is complied to:

1
2
3

body {
  color: red;
}

@if

For explame:

1
2
3
4
5

@if $screenWidth > 768{
  body{
    color: red;
  }
}

Read More

数字类型(Number)

For example:

1
2
3
4
5
6
7
8

/*! 数字类型 */
$n1: 1.2;
$n2: 12;
$n3: 14px;
p{
  font-size: $n3;
}

is compiled to:

1
2
3
4

/*! 数字类型 */
p {
  font-size: 14px;
}

字符串类型(String)

For example:

1
2
3
4
5
6
7
8

/*! 字符串类型*/
$s1: container;
$s2: 'container';
$s3: "container";
.#{$s3}{
  font-size: $n3;
}

Read More

项目创建

1
2
3

npm init
compass create --bare

or
compass create –bare –sass-dir “sass” –css-dir “css” –images-dir “img” –javascripts-dir “js”

自动化构建

在根目录下创建gulpfile.js

1

npm gulp gulp-compass browser-sync del run-sequence --save-dev

Read More

安装Ruby

Mac安装Ruby
Window安装Ruby

安装Sass

修改Ruby镜像 -> 淘宝Ruby镜像

1
2
3

gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources -l

安装Sass

1
2

gem install sass
sass -v

or
gem install sass —version=3.3

列出所有安装包

1

gem list

Read More

最近在网上看了各种各样的前端面试题，感觉大部分其实都知道一点，但要真正表述恐怕又不能说得很好，所以这里简单整理一下解答思路

一、HTML基础

对HTML5的理解

很大的一个问题，似乎每个人都能说上一点，但再深入就很看水平了，所以整理了HTML5的新特性，答题的时候应该抓住几个点入手：

1. 新标签
   多媒体的新标签： vedio,audio,embed
   语义化的新标签： article,header,footer,nav,section,figure
2. 内联svg
3. 拖放事件（drop和drag）
4. 支持地理定位：navigator.geolocation.getCurrentPosition(showPosition)
5. 表单的新属性：autocomplete, novalidate
6. web存储：localStorage,sessionStorage(关闭浏览器窗口后数据就会被删除)
7. WebSocket协议：在单个 TCP 连接上进行全双工通讯的协议

Web语义化的好处

1. 方便爬虫读取，有利于SEO
2. 增加代码可读性
3. 屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页
4. 丢失样式的时候还能保持结构
5. 手机等设备能以有意义的方式渲染网页(它们可能对CSS支持比较弱)

Read More

Http状态码

一些常见的状态代码为：

1
2
3

200 - 服务器成功返回网页
404 - 请求的网页不存在
503 - 服务器暂时不可用

1xx（临时响应）

用于表示临时响应并需要请求者执行操作才能继续的状态代码。

1
2

100（继续） 请求者应当继续提出请求。服务器返回此代码则意味着，服务器已收到了请求的第一部分，现正在等待接收其余部分。
101（切换协议） 请求者已要求服务器切换协议，服务器已确认并准备进行切换。

2xx（成功）

用于表示服务器已成功处理了请求的状态代码。

1
2
3
4
5
6
7

200（成功） 服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。如果您的 robots.txt 文件显示为此状态，那么，这表示 Googlebot 已成功检索到该文件。
201（已创建） 请求成功且服务器已创建了新的资源。
202（已接受） 服务器已接受了请求，但尚未对其进行处理。
203（非授权信息） 服务器已成功处理了请求，但返回了可能来自另一来源的信息。
204（无内容） 服务器成功处理了请求，但未返回任何内容。
205（重置内容） 服务器成功处理了请求，但未返回任何内容。与 204 响应不同，此响应要求请求者重置文档视图（例如清除表单内容以输入新内容）。
206（部分内容） 服务器成功处理了部分 GET 请求。

Read More

前言

已经习惯了使用Markdown书写文章，既方便也通用。
但一直在想：应该生成一个方便的导航目录，这样查看文章更方便。于是有了本文。

实现方法

页面结构

1
2
3
4
5
6
7

//放入在文章页内容前面
<div class="BlogAnchor">
    <p>
        <b id="AnchorContentToggle" title="收起" style="cursor:pointer;">目录[-]</b>
    </p>
    <div class="AnchorContent" id="AnchorContent"> </div>
</div>

Read More