Shulou(Shulou.com)06/03 Report--

This article mainly explains "what are the common tool functions of front-end development". The content of the explanation in this article is simple and clear, and it is easy to learn and understand. let's study and learn what the common tool functions of front-end development are.

1. Time formatting and other methods

Library files from moment.js are recommended

2. Use templates, loops, MAP and other methods

Underscode.js 's method

3. Serialize the form into JSON

The code is as follows:

$. Fn.serializeJson = function () {

Var serializeObj = {}

Var array = this.serializeArray ()

Var str = this.serialize ()

$(array) .each (function () {

If (serializeObj [this.name]) {

If ($.isArray (serializeObj [this.name]) {

SerializeObj [this.name] .push (this.value)

} else {

SerializeObj [this.name] = [serializeObj [this.name], this.value]

}

} else {

SerializeObj [this.name] = this.value

}

});

Return serializeObj

}

4. String interception is used. Fill

The code is as follows:

String.prototype.strcut = function (number) {

Var length = this.length

Var tmp = this.substr (0, number)

If (this.length > number) {

Tmp + = "…"

}

Return tmp

}

5. Time format: xxxx days, xxx minutes ago, date

The code is as follows:

Date.prototype.Format = function (fmt, current) {

If (current) {

Var diff = current-this.getTime ()

If (diff

< 5 * 60 * 1000) { return "刚刚"; } if (diff < 60 * 60 * 1000) { return (Math.floor(diff / (60 * 1000))) + "分钟前"; } if (diff < 24 * 60 * 60 * 1000) { return (Math.floor(diff / (60 * 60 * 1000))) + "小时前"; } if (diff < 30 * 24 * 60 * 60 * 1000) { return (Math.floor(diff / (24 * 60 * 60 * 1000))) + "天前"; } if (diff < 12 * 30 * 24 * 60 * 60 * 1000) { return (Math.floor(diff / (30 * 24 * 60 * 60 * 1000))) + "月前"; } if (diff >

12 * 30 * 24 * 60 * 1000) {

Return (Math.floor (diff / (12 * 30 * 24 * 60 * 60 * 1000)) + "years ago"

}

}

Var o = {

"Y+": this.getFullYear (), / / month

"M +": this.getMonth () + 1, / / month

"d +": this.getDate (), / / Day

"h +": this.getHours (), / / hour

"m +": this.getMinutes (), / / points

"s +": this.getSeconds (), / / second

"Q +": Math.floor ((this.getMonth () + 3) / 3), / / quarter

"S": this.getMilliseconds () / / Ms

}

If (/ (y +) / .test (fmt)) fmt = fmt.replace (RegExp.$1, (this.getFullYear () + ") .substr (4-RegExp.$1.length))

For (var k in o)

If (new RegExp ("(" + k + ")) .test (fmt)) fmt = fmt.replace (RegExp.$1, (RegExp.$1.length = = 1)? (O [k]): (("00" + o [k]) .length (("" + o [k]) .length)

Return fmt

}

6. Parsing URL

The code is as follows:

Function parseUrl () {

Var arr = location.search.split ('?') [1] .split ('&')

Var params = {}

For (var I = 0, l = arr.length; I < 1; iTunes +) {

Var param = ARR [I] .split ('=')

Params [param [0]] = param [1]

}

Return params

}

7. Get get parameters

The code is as follows:

Function getParameterByName (name) {

Name = name.replace (/ [\ [] /, "\ [[") .replace (/ [\]] /, "\]")

Var regex = new RegExp ("[\\?]" + name + "= ([^ & #] *)")

Results = regex.exec (location.search)

Return results = = null? "": decodeURIComponent (results [1] .replace (/\ + / g, ""))

}

8. Function throttling, so that frequent events trigger more sparse to improve performance, such as timely search function. Use fn as the event response function and delay as the interval. Call throttle (fn,delay) to return a new function to the event.

The code is as follows:

Function throttle (fn, delay) {

Var timer = null

Return function () {

Var context = this

Args = arguments

ClearTimeout (timer)

Timer = setTimeout (function () {

Fn.apply (context, args)

}, delay)

}

}

9. Prevent the form from being submitted multiple times, and return a new function as in 9

The code is as follows:

/ * *

* prevent multiple clicks on functions

*

* call callback when fn is completed

* function fn (event,end) {

* (typeof end = = "function") & & end (); / / Operation completed

*}

* / function noRepeateTap (fn) {

Var $obj

Return function (event) {

$obj = $(this)

If ($obj.data ("loadding") = "true") {

Return

}

$obj.data ("loadding", "true"). AddClass ('loadding')

Fn.call (this, event, function end () {

$obj.data ("loadding", "). RemoveClass ('loadding')

Return

});

}

}

An example of the use of the ninth

The code is as follows:

/ / bind event

$(container) .on ('click',' .btn-cancel', noRepeateTap (cancel))

/ / event response function

Function cancel (event, end) {

Event.preventDefault ()

/ / simulate asynchronous request

SetTimeout (function () {

End (); / / the injected completion function needs to be called manually to notify completion, and the function automatically adds a loadding class class to adjust the style and automatically remove it after completion.

}, 5000)

}

Thank you for your reading, the above is the content of "what are the common tool functions of front-end development". After the study of this article, I believe you have a deeper understanding of what the common tool functions of front-end development have. The specific use of the situation also needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.