Front-End Developer Skills

Front End Developer Skills

JavaScript

1. 去除重复元素

native way 实现:

1
2
3
uniqueArray = array.filter(function(item, pos) {
return array.indexOf( item ) == pos;
})

underscore 实现:

1
2
3
4
5
6
var result = [];
a.forEach(function(item) {
if(result.indexOf(item) < 0) {
result.push(item);
}
});

ES6 实现:

1
2
3
function uniq(a) {
return Array.from(new Set(a));
}

参考 - stackoverflow

2. Date

方法 说明
Date.now() 返回自 1970 00:00:00 UTC 的毫秒数
Date.parse('Thu, 01 Jan 1970 00:00:00 GMT-0400') 解析时间字符串
new Date( milliseconds ) 使用毫秒构造 Date 对象

3. 从 URL 提取参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;

for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');

if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : sParameterName[1];
}
}
};

4. 滚动条位置

1
2
3
4
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
// Do something
});

5. 获取 Viewport 宽度和高度

1
2
3
4
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
jQuery( window ).width(); // height of browser viewport
jQuery( window ).height(); // width of browser viewport

返回 HTML document 的宽度和高度:

1
2
jQuery(document).height(); // return height of HTML document
jQuery(document).width(); // return width of HTML document

6. String

方法 描述
charAt(index) 取得字符
includes(searchString, position) 字符串是否存在
startsWith(searchString, position) 以字符串开始
endsWith(searchString, position) 以字符串结尾
indexOf(searchValue, fromIndex) 返回首次出现的下标
match(regexp) 返回匹配的数组
split(string | regular, limit) limit 用来限制切割的数量
substring(indexStart, indexEnd) 返回子字符串
`str.replace(regexp substr, newSubstr function)` 返回替换后的字符串

7. 动态传递参数

把一个数组中的所有值当做参数列表传递给一个函数:

1
2
3
var args = [ 'a', 'b', 'c' ];
function.apply( null, args );
function( ...args ); // ES6 Style

将一个函数的所有参数列表当做一个数组来接受:

1
2
3
4
5
function callback() {
for (var i=0; i<arguments.length; i++) {
console.log( arguments[ i ] );
}
}

jQuery

1. 扩展 jQuery Animation

1
2
3
4
5
6
7
8
9
(function($) {

$.extend($.easing, {
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
}
});

})($);

参考

2. jQuery Loading Bar

3. 图标类

4. DOM 操作

方法 用法 说明
nth-child-selector $( "ul li:nth-child(2)" ) 索引从 1 开始
eq $( "li" ).eq( 2 ) 索引从 0 开始

5. Promise

模拟一个 Promise 操作:

方法 说明
deferred.resolve( [args ] ) 调用 doneCallbacks
deferred.reject( [args] ) 调用 failCallbacks
deferred.then( doneFilter [, failFilter ] [, progressFilter ] ) 当 resolved 或 rejected 后被调用

合并多个 Ajax 请求:

1
2
3
4
5
6
7
8
$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) ).done(function( a1, a2 ) {
// a1 and a2 are arguments resolved for the page1 and page2 ajax requests, respectively.
// Each argument is an array with the following structure: [ data, statusText, jqXHR ]
var data = a1[ 0 ] + a2[ 0 ]; // a1[ 0 ] = "Whip", a2[ 0 ] = " It"
if ( /Whip It/.test( data ) ) {
alert( "We got what we came for!" );
}
});

6. Pagination

7. window resize

1
2
3
$( window ).resize(function() {
$( "#log" ).append( "<div>Handler for .resize() called.</div>" );
});

8. 响应 Enter Key

1
2
3
4
5
$("#id_of_textbox").keyup(function(event){
if(event.keyCode == 13){
$("#id_of_button").click();
}
});

9. 时间格式化

1
2
moment.locale( 'zh-cn' );
moment.unix( timestampInSeconds ).format( 'L' );

10. AMD

11. Fullpage 效果

12. 轮播 slider 效果

13. Ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$
.ajax( {
url: 'url',
data: { id: myDataId },
// The type of data that you're expecting back from the server
// Default: Intelligent Guess (xml, json, script, or html)
dataType: 'html',
// When sending data to the server, use this content type.
// Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases
contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
} )
.done( function( data, textStatus, jqXHR ) {

} )
.fail( function( jqXHR, textStatus, errorThrown ) {

} )

CSS

1. 居中 span, h1, h2, …

1
2
3
4
/* 父元素 */
.parent {
text-align: center;
}

2. 重置 a 标签默认样式

1
2
3
4
5
6
7
8
9
10
a {
text-decoration: none;
}

a:hover,
a:visited,
a:active,
a:link,
a:focus {
}

3. 去除 input 默认样式

1
2
3
input:focus {
outline: none;
}

4. 父元素无法正确计算设置了 float 的子元素

1
2
3
4
5
6
7
/* 父元素添加 clearfix */
.clearfix::after {
content: " ";
display: block;
height: 0;
clear: both;
}

5. fixed

1
2
3
4
5
6
/* 一定要设置 top: 0px */
nav.fixed {
position: fixed;
top: 0px;
z-index: 123;
}

6. 居中 Div

水平居中:

1
2
3
4
5
/* 设置子元素宽度很重要 */
#inner {
width: 50%;
margin: 0 auto;
}

垂直居中:

1
2
3
4
5
6
7
8
9
10
11
12
13
div.outer-div {
height: 170px;
width: 300px;
background-color: lightgray;
}

div.inner-div {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

flex 居中:

1
2
3
4
5
6
.outer {
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}

参考:

7. span margin

span 上设置 margin-top, margin-bottom 是不管用的,必须设定为 block 系列的样式:

1
2
3
4
5
span {
display: block;
display: inline-block;
margin-bottom: 10px;
}

8. 修改 span 为单行显示

不用 span,用 p 来代替:

1
2
3
4
5
p {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

9. 图片全屏

1
2
min-width: 100%;
min-height: 100%;

这篇文章写得非常好

10. 图片维持比例

应该在图片外面使用 div 来维持最大比例:

1
2
3
4
5
6
7
8
9
.outer-div {
width: 128px;
height: 128px;
}

.outer-div img {
max-width: 100%;
height: auto;
}

11. media query

1
2
3
4
5
@media screen and (min-height: 800px) and (max-height: 850px) {
.large-item {
margin-top: 70px;
}
}

12. Absolute 元素居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.parent {
position : relative;
}

.child {
position : absolute;

top: 0 ;
right: 0 ;
bottom : 0 ;
left : 0 ;

margin : auto;
}

/* these are addtional rules */

.parent {
width : 300px;
height: 300px;
background : red;
}

.child {
width:100px;
height:100px;
background:blue;
text-align:center;
line-height:100px;
}

查看效果

13. 重置 ul 样式

1
2
3
4
5
ul, li {
list-style-type: none;
padding: 0;
margin: 0;
}

14. Google Chrome 去除网页四周的空白

1
2
3
4
5
6
7
8
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent;
}

15. 侧边栏高度尽可能扩展效果

1
2
3
4
5
6
7
#page-sidebar {
background-color: #333;
width: 200px;
position: fixed;
bottom: 0px;
top: 40px;
}

16. 字符最大长度

1
2
3
4
5
6
#page-content td {
max-width: 40px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

17. CSS 颜色模板选择

FLAT UI COLORS 2

18. 表格 td 元素限制固定宽度

1
2
3
4
5
6
7
#page-content td {
min-width: 40px;
max-width: 40px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
sudo apt-get update
# 安装 rbenv 和 Ruby 依赖
sudo apt-get install git-core curl zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev python-software-properties libffi-dev
# 安装 rbenv
cd
git clone git://github.com/sstephenson/rbenv.git .rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile

git clone git://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.bash_profile
source ~/.bash_profile
# 安装 Ruby 查看最新版本: https://www.ruby-lang.org/en/downloads/
rbenv install -v 2.2.3
rbenv global 2.2.3
# 查看 Ruby 版本号
ruby -v
# 可能还需要安装 gem
sudo apt-get install rubygems-integration
sudo apt-get install rubygems
# 安装 SASS
sudo su -c "gem install sass"

参考: How To Install Ruby on Rails with rbenv on Ubuntu 14.04

1
2
3
4
5
# a.scss => a.css
sass --watch a.scss:a.css --style compressed

# dev folder => public folder
sass --watch dev:public --style compressed

Angular 1.X

1. Module

2. Controller

Controller 只应该关心向谁要数据,而不要关心数据从哪里来。通常 **Controller 干两件事:


通常 Controller 不应该干:

  • 操作 DOM
  • 格式化输入
  • 过滤输出
  • 共享状态或代码
  • 管理其他组件的生命周期

使用 controllerAs 风格:


3. Services

服务的两个特性:

  • 懒加载
  • 单例

Factories 风格:

4. Directives

restrict:

transclude:

  • 不使用 transclude

定义一个 myCard 指令:

定义 myCard 模板:

使用:

发现不方便了没有!那些大段的文字我们只能使用大段的文字来取代 content 内容,而不能像正常的嵌套 HTML 似的来使用。

  • 引入 transclude :

指令:

模板类修改为:

使用:

  • 使用 directive controller:

指令:

模板:

使用还是和前面一样

  • 自定义一个指令 myContentTransclusionPoint 定义插入位置:

模板:

使用和前面一样

  • 使用 AngularJS 自带的 ngTransclude 指令来定义插入位置:

模板:

其他都不用变

  • Transclusion Scopes:

模板:

指令:

此时的作用域:

为了保证当父 $scope 被销毁的时候, 指令的 $scope 也能即使被销毁,所以:

Grunt

Gulp

常见 npm 包

1
2
3
npm install --save-dev gulp-clean-css
npm install --save-dev gulp-concat
npm install --save-dev gulp-uglify

默认任务

1
2
// 定义一个默认任务
gulp.task('default', ['任务1', '任务2', ...])

Gulp Watch

1
2
3
4
// 定义一个 watch 任务
gulp.task('watch', function() {
gulp.watch('需要观测的文件', ['文件变化后执行的任务1', '文件变化后执行的任务2', ...]);
});

连接文件

1
2
3
4
5
gulp.task('concat', function() {
return gulp.src(['文件1', '文件2', ...])
.pipe(concat('连接后的文件名字'))
.pipe(gulp.dest('连接后的文件保存的目录'));
});

npm

新建 package.json 文件:

1
npm init -f
  • npm 默认安装位置
  • npm -g 默认安装位置: npm root -g
  • npm 设置代理: npm --proxy http://proxy.asec.buptnsrc.com:8001
1
sudo cnpm --proxy http://proxy.asec.buptnsrc.com:8001 install -g hexo-cli

--proxy 不能放到后面,否则会提示

1
TypeError: You must specify a "protocol" for the proxy type (http, https, socks, socks4, socks4a, socks5, socks5h, pac+data, pac+file, pac+ftp, pac+http, pac+https)
  • npm 命令行输出下载过程npm -d
  • npm 安装 cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org

npm install -g 命令必须有 root 权限才行


Install NodeJS:

  • 访问 https://nodejs.org/en/download/
  • 点击页面的 Installing Node.js via package manager 链接
  • 默认安装完成后 nodejsnode 这两个命令都就有了

使用 expressjs 快速构建服务器

1
npm install express --save

1. HelloWorld

1
2
3
4
5
6
7
8
9
10
11
12
const express = require('express')
const app = express()

app.use(express.static('public'))

app.get('/', function (req, res) {
res.send('Hello World!')
})

app.listen(3000, function () {
console.log('Example app listening on port 3000!')
})

常用工具

oschina - 在线工具: 包含 HTTP Content-type, HTML 转义字符, RGB 颜色参考, ASCII 对照表, HTTP 状态码详解

(1) 关于 Content-type 问题:

客户端发送至服务器与服务器发送至客户端的文件都有一种称之为 Content-Type 附着在上面,以标明它的资源究竟是何种类型:

  • CSS 文件: text/css
  • JS 文件: text/javascript; charset=UTF-8,也有写成 application/javascript; charset=utf-8
  • PNG 文件: image/png
  • 无后缀文件: multipart/mixed; boundary="n:,DRy620B'u+CoBnMws"
  • HTML 文件: text/html; charset=utf-8
  • XML 文件: application/xml; charset=UTF-8

当由服务器返回一些特殊媒体资源的时候,一定要在客户端和服务器端之间声明好这种资源的媒体类型,如下就是因为没有在 Spring 中恰当定义返回的 XML 媒体资源类型导致的乱码问题:

最后通过如下方法完美解决:

1
2
3
4
5
6
@Controller
@RequestMapping(value = "/pets/{petId}", method = RequestMethod.GET, produces="application/xml")
@ResponseBody
public Pet getPet(@PathVariable String petId, Model model) {
// implementation omitted
}

(2) 关于 HTML 转义问题

从服务器传回来的内容中 content 包含有 > 字符,前台使用拼接字符串的方式构建 HTML 元素:

1
var html = '<form>' + content + '</form>'

这样的话,<form> 会提前因为遇见 > 字符而闭合,因此需要在前台替换一下才可以正常工作:

1
content = content.replace( />/g, '&gt;' )

获取 Chrome 浏览器页面的编码

The Document.characterSet read-only property returns the character encoding of the current document. The character encoding is the character set used for rendering (渲染) the document, which may be different from the encoding specified by the page. (The user can override the encoding.).

1
document.characterSet

Chrome 调试技巧


免费图片

参考

推荐文章