preface

This article is based on dead knock 36 handwritten inscription written, interested can go to see!

Where there is life, there is code! Let’s get started

Parse URL parameters as objects

Url is a unified resource locator, which is a concise representation of the location and access method of the resources that can be obtained from the Internet. It is the address of the standard resources on the Internet. Every file on the Internet has a unique URL that contains information indicating where the file is and what the browser should do with it.

Common solution

function urlSearch(href) { let name, value; let str = href; Let num = str.indexof ("?") ); str = str.substr(num + 1); Let arr = str.split("&"); // let json = {}; for (let i = 0; i < arr.length; i++) { num = arr[i].indexOf("="); if (num > 0) { name = arr[i].substring(0, num); value = arr[i].substr(num + 1); json[name] = value; } } return json; }Copy the code

Regular solution

function parseParam(url) { const paramsStr = /.+\? (.+)$/.exec(url)[1]; / / will be? The following string is retrieved from the //exec() method used to retrieve matches of regular expressions in the string. const paramsArr = paramsStr.split('&'); // Split string with & and store in array let paramsObj = {}; Paramsarr.foreach (param => {if (/=/.test(param)) {let [key, val] = param.split('='); Val = decodeURIComponent(val); // decode val = /^\d+$/.test(val)? parseFloat(val) : val; // If (paramsobj.hasownProperty (key)) {// If (paramsobj.hasownProperty (key)) {// If the object has a key, Add a paramsObj[key] = []. Concat (paramsObj[key], val); The concat() method is used to join two or more arrays. // This method does not alter the existing array, but only returns a copy of the concatenated array. } else {// If the object does not have this key, create a key and set the value paramsObj[key] = val; }} else {// Process parameters without value paramsObj[param] = true; } }) return paramsObj; }Copy the code

Note: The split() method splits a string into an array of strings.

Grammar stringObject. Split (separator, howmany)

  • Separator: required. String or regular expression that splits stringObject from the place specified by this parameter.
  • Howmany optional. This parameter specifies the maximum length of the array to be returned. If this parameter is set, no more substrings are returned than the array specified by this parameter. If this parameter is not set, the entire string is split regardless of its length.

The return value

  1. An array of strings. The array is created by splitting the string stringObject into substrings at the boundary specified by separator. The string in the array returned does not include separator itself.

  2. However, if separator is a regular expression containing subexpressions, the array returned includes strings that match those subexpressions (but not the text that matches the entire regular expression).

  • Note: If the empty string (“”) is used as separator, each character in stringObject is separated.

  • Note: String.split() performs the opposite of array.join.

I have to say is not to see the regular solution a little bit confused, nothing I am also confused, so I conscience of the preparation of the ordinary solution, as long as the nong look at the contrast, and then baidu regular look at the notes, understand the seven, eight, eight should be about the same, refueling refueling.

String template

String templates are a solution for manipulating the DOM in large quantities and frequently, such as dynamically creating a multi-nested element based on the data and inserting it into a page. If we did this the way we normally create DOM elements, the code would be enormous.

So here we provide a template string function to generate the template and finally insert it into the page

function render(template, data) { const reg = /\{\{(\w+)\}\}/; If (reg.test(template)) {const name = reg.exec(template)[1]; // If (reg.test(template)) {const name = reg.exec(template)[1]; Replace (reg, data[name]); // Replace (reg, data[name]); // return render(template, data); // Render recursively and return the rendered structure} return template; } · is returned if the template does not have a template stringCopy the code

test

Let template = 'I am {{name}}, age {{age}}, gender {{sex}}'; Let person = {name: 'name ', age: 12} render(template, person); // MY name is Bran, age 12, gender undefinedCopy the code

Note: The test() method is used to test whether a string matches a pattern.

The syntax regexpobject.test (string).string is required. The string to detect.

Return value True if the string contains text matching RegExpObject, false otherwise.

This representation is equivalent to calling the test() method of the RegExp object r and passing it the string s :(r.exec(s)! = null).

conclusion

Good good, here is almost finished, but there are a lot of knowledge points not found, I hope we point out a lot. Come on, come on!