小片段代码简汇之JS篇

总结在平时开发中遇到的一些小问题,大概很长一段时间就会来这么一次,小片段剧场。

Show Time:

多行文本截取clamp.js

1
2
3
4
5
6
7
8
9
10
11
12
13
<script src = "https://cdn.bootcss.com/Clamp.js/0.5.1/clamp.min.js" ></script>

clampFunc("obj-content-header", 2);

function clampFunc(className, clampNum) {
var $module = $("." + className);
clampNum = clampNum ? clampNum : 1;
$.each($module, function (i, index) {
$clamp($(this).get(0), {
clamp: clampNum
});
});
}

判断本地是否存在jquery写法

1
2
3
4
5
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

截流函数 AND 节流函数

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
31
32
33
34
35
36
37
38
39
40
41
/** 截流函数 **/
/**
* fn 执行函数
* context 绑定上下文
* timeout 延时数值
**/
let debounce = function(fn, context, timeout) {
let timer;
// 使用闭包将内容传递出去
return function() {
if(timer) {
clearTimeout(timer);
} else {
timer = setTimeout(function() {
fn.apply(context, arguments);
}, timeout);
}
}
}
/** 节流函数 **/
var throttle = function(fn, delay, mustRunDelay) {
var timer = null;
var t_start;
return function() {
var context = this;
var args = arguments;
var t_curr = +new Date();
clearTimeout(timer);
// 初始化
if(!t_start) {
t_start = t_curr;
}
// 超时判断
if(t_curr - t_start >= mustRunDelay) {
fn.apply(context, args);
t_start = t_curr;
} else {

}
}
}

for循环添加点击事件

1
2
3
4
5
6
7
8
9
var elems = document.getElementsByTagName('a');
for (var i = 0, l = elems.length; i < l; i++) {
(function(index) {
elems[index].addEventListener('click', function(e) {
e.preventDefault();
console.log(index);
}, 'false');
})(i);
}

判断浏览器是否开启本地cookie

1
2
3
4
5
6
7
8
9
10
11
var nd = new Date();
nd.setSeconds(nd.getSeconds() + 60);
document.cookie = "cookietest=1; expires=" + nd.toGMTString();
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
if (!cookiesEnabled) {
//没有启用cookie
alert("没有启用cookie ");
} else {
//已经启用cookie
alert("已经启用cookie ");
}

解决同级元素鼠标移入移出效果

1
2
3
4
5
6
<a class="member-card-item" id="memberCard" href="#"></a>
<div class="member-card-wper" id="memberProfile">
<i class="drop-icon"></i>
<span class="card-item"></span>
<span class="card-item"></span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var cardTimer = null;
var $mCard = $('#rightNav .wx-wper');
var $mProfile = $('#rightNav .wx-outer');
$mCard.get(0).onmouseover = $mProfile.get(0).onmouseover = function() {
clearCardTime();
}
$mCard.get(0).onmouseout = $mProfile.get(0).onmouseout = function() {
cardTime();
}

function cardTime() {
cardTimer = setTimeout(function() {
$mProfile.hide();
}, 400);
}

function clearCardTime() {
clearTimeout(cardTimer);
$mProfile.show();
}

placeholder样式兼容&&属性IE兼容

1
2
3
4
5
6
7
.common-form-control::-webkit-input-placeholder,
.common-form-control::-moz-placeholder,
.common-form-control:-ms-input-placeholder,
.common-form-control::placeholder {
color: #9b9b9b;
opacity: 1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
;(function($) {
$.fn.placeholder = function(options) {
var opts = $.extend({}, $.fn.placeholder.defaults, options);
var isIE = document.all ? true : false;
return this.each(function() {
var _this = this,
placeholderValue = _this.getAttribute("placeholder"); //缓存默认的placeholder值
if (isIE) {
_this.setAttribute("value", placeholderValue);
_this.onfocus = function() {
$.trim(_this.value) == placeholderValue ? _this.value = "" : '';
};
_this.onblur = function() {
$.trim(_this.value) == "" ? _this.value = placeholderValue : '';
};
}
});
};
})(jQuery);

<script type="text/javascript">
$("input").placeholder();
</script>

返回顶部函数

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
31
32
// 返回顶部
function gotoTop(acceleration,stime) {
acceleration = acceleration || 0.1;
stime = stime || 10;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var x3 = 0;
var y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
var x3 = window.scrollX || 0;
var y3 = window.scrollY || 0;

var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));

var speeding = 1 + acceleration;
window.scrollTo(Math.floor(x / speeding), Math.floor(y / speeding));

if(x > 0 || y > 0) {
var run = "gotoTop(" + acceleration + ", " + stime + ")";
window.setTimeout(run, stime);
}
}

滚动监听垂直联动

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
$(window).scroll(function (event) {
var i = 0,
sTop = $(this).scrollTop(),
windowH = $(window).height() / 2,
pos = parseFloat($('#area3').offset().top) / 2,
pos1 = $('#area3').offset().top - windowH,
pos2 = $('#area4').offset().top - windowH,
pos3 = $('#area5').offset().top - windowH,
pos4 = $('#area6').offset().top - windowH
$target = $('#navList').parent().parent();

if (sTop >= pos) {
$target.show();
} else {
$target.hide();
}

if (sTop >= pos4) {
i = 3;
} else if (sTop >= pos3) {
i = 2;
} else if (sTop >= pos2) {
i = 1;
} else {
i = 0;
}
$('#navList li').eq(i).addClass('active').siblings().removeClass('active');
});

右侧浮动导航平滑切换

1
2
3
4
5
6
7
8
9
10
11
$("#navList a").click(function () {
var href = $(this).attr("href");
var pos = $(href).offset().top - 48;
$(this).parent().addClass('active').siblings().removeClass('active');
if (!$("body").is(":animated")) {
$("html,body").animate({
scrollTop: pos
}, 600);
}
return false;
});

判断浏览器是否为IE(包括IE11)

1
2
3
4
5
6
7
8
9
function isIE() {
if (!!window.ActiveXObject || "ActiveXObject" in window) {
alert("is IE");
return true;
} else {
alert("is not IE");
return false;
}
}

判断浏览器是否为移动端

1
2
3
4
5
6
var isMobile = false;
if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
isMobile = true;
} else {
isMobile = false;
}

将时间戳转换为时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function getMyDate(str) {
var oDate = new Date(str),
oYear = oDate.getFullYear(),
oMonth = oDate.getMonth() + 1,
oDay = oDate.getDate(),
oHour = oDate.getHours(),
oMin = oDate.getMinutes(),
oSen = oDate.getSeconds(),
oTime = oYear + '-' + getzf(oMonth) + '-' + getzf(oDay) + ' ' + getzf(oHour) + ':' + getzf(oMin) + ':' + getzf(oSen); //最后拼接时间
return oTime;
};

function getzf(num) {
if (parseInt(num) < 10) {
num = '0' + num;
}
return num;
}

Node实现JavaScript模块的原理简单介绍

原文

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
/** Node实现JavaScript模块的一个简单的原理介绍
* Node利用JavaScript的函数式编程的特性,轻而易举地实现了模块的隔离
* 变量module是Node在加载js文件前准备的一个变量,并将其传入加载函数
**/
(function() {
var s = 'Hello'; //读取Hello.js代码
var name = 'Taotao';

console.log('Hell0 ' + name + '!');
})();

// 准备module对象
var module = {
id: 'hello',
exports: {}
};
var load = function(module) {
//读取Hello.js代码
function greet(module) {
console.log('Hell0 ' + name + '!');
}
module.exports = greet;
return module.exports;
}
var exported = load(module);
//保存
save(module, exported);

Nodejs基本模块fs

Node.js内置的fs模块就是文件系统模块,负责读写文件。

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
'use strict';
var fs = require("fs");

// 异步读文件
fs.readFile('test1.txt', 'utf-8', function(err, data) {
if (err) {
console.log(err);
} else {
console.log(data);
}
});

// 异步写文件
var writeData = 'Hello,Node.js';
fs.writeFile('test1.txt', writeData, function(err) {
if (err) {
console.log(err);
} else {
console.log('OK!');
}
});

// 同步读文件
try {
var data = fs.readFileSync('test1.txt', 'utf-8');
console.log(data);
} catch (err) {
console.log(err);
}

// 同步读文件
try {
fs.writeFileSync('test1.txt', writeData);
console.log("OK!");
} catch (err) {
console.log(err);
}

// 异步读取文件相关信息
fs.stat('test1.txt', function(err, stat) {
if (err) {
console.log(err);
} else {
console.log('isFile: ' + stat.isFile()); // 是否是文件
console.log('isDirectory: ' + stat.isDirectory()); // 是否是目录
if (stat.isFile()) {
console.log('size: ' + stat.size); // 文件大小
console.log('birth time: ' + stat.birthtime); // 创建时间,Date对象
console.log('modifier time: ' + stat.mtime); // 修改时间,Date对象
}
}
});

// 同步读取文件 statSync()

Nodejs基本模块http

廖雪峰的官方网站之Node中的Http

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
31
32
33
34
35
36
37
38
'use strict';
// 导入http模块
var fs = require('fs'),
url = require('url'),
path = require('path'),
http = require('http');

// 从命令行参数获取root目录,默认是当前目录:
var root = path.resolve(process.argv[2] || '.');

console.log('Static root dir: ' + root);

// 创建http server
var server = http.createServer(function(request, response) {
// 获得URL的path
var pathname = url.parse(request.url).pathname;
// 获得对应的本地文件路径
var filepath = path.join(root, pathname);
// 获取文件状态
fs.stat(filepath, function(err, stats) {
if(!err && stats.isFile()) {
console.log('200 ' + request.url);
response.writeHead(200);
// 将文件流导向response
fs.createReadStream(filepath).pipe(response);
} else {
console.log('404 ' + request.url);
response.writeHead(404);
response.end('404 Not Found');
}
});
});


// 让服务器监听8080端口
server.listen(8080);

console.log('Server is running at http:127.0.0.1:8080/');