Front end of a brief history of

It was in the autumn of 1989 that Physicist Tim Berners-Lee of CERN had invented hypertext Markup Language… (tens of thousands of words omitted).

Now that is a brief history of it, of course not yapping a heap of, let me try to talk about the front that simple history, as shown in figure

In the era of front-end slash-and-burn, when front-end students developed projects, they used native JS combined with native API provided by browsers to operate DOM directly, struggling with the obscurity of native API and compatibility problems of various browsers. Suddenly, jQuery came into being with the bang of Duang. With its concise API, excellent browser compatibility and fast becoming the most widely deployed JavaScript library in the world, GitHub has been using jQuery until a few months ago.

In the era of native JS and jQuery, our development is event-driven, and the process is as follows:

In the transition stage from event-driven to data-driven, MVC mode was once very popular,ASP,JSP,ASP. Net, etc. These technologies are still used by some websites today, but for every operation that needs to communicate with the back end, the browser will re-receive a whole section of HTML that may only change part of the data. Then the development mode of re-rendering, also slowly fade out of people’s view.

In recent years, with the rise of MVVM framework, we finally got rid of, to the operation of the DOM and communication receive is change the data from the server, at this point, the website can see everything, they are no longer HTML, CSS, all data, site of every small detail, can be defined data first, and then by the framework to render, Our thinking has also shifted to data-driven mode, and the process is as follows:

Data that the front end often needs to process

  • Basic data types: String, Boolean, Number, undefined, NULL, Symbol(ES6)
  • Reference data types: Object, Function, Array, RegExp, etc

In daily development, we often need to deal with nothing more than these basic data types and reference data types. In this case, the reference type object refers to the enclosed braces, and the attributes of the object inside the braces are in the form of key-value pairs such as {name:’frontEnd’}. JS has a very classic sentence: “Everything is an Object”, if we use [reference datatype] instanceof Object we will find that it returns true,

All objects in JavaScript come from Objects; All objects inherit methods and properties from Object.prototype, although they may be overridden. For example, prototypes of other constructors override the constructor property and provide their own toString() methods. Changes to prototype objects are propagated to all objects, unless the properties and methods subject to these changes are overridden further down the prototype chain. (from MDN)

String, Boolean, Number, and Symbol are not objects. They are not objects. They are not objects. Want to know? To find out, look down.

String and String objects

The String type is used to represent sequences of zero or more 16-bit Unicode characters, called strings. The String object is one of three wrapper objects that JavaScript natively provides to generate String objects.

  • Start with an interview question

Ladies and gentlemen, please look at the question:

var ranshaw = 'ranshaw', str1 = new String(ranshaw), str2 = String(ranshaw); Str1 === RANSHAW STR2 === RANSHAW typeof STR1 === typeof STR2Copy the code

If you are right, that means you have crossed the threshold of the primary front end, if not, recommend to buy BBK lighter, there will not point where.

  • String object

In the previous problem, we did something with STR, as shown below:

Yes, str1 is a String. What! A String is not an object. A String is a sequence of characters. New String() wraps the original String ‘ranshaw’ into an object. Str2 is a string, str1 is an object and it has the length property, the _proto_ property, and with the _proto_ property we also have access to some of the methods that we use to work with strings, so the problem is, Str2 as a String also has access to String properties and methods. How is this possible?

Data addition, deletion, check and change

Data operations, whether back-end or front-end, are mainly the four operations of adding, deleting, modifying and checking. We will classify data operation methods from these four aspects.

string

Through the object in this paper, the packing, we know that the String does not change its value, String object under the basic it is () method returns a new String, did not make changes to the original String, so add the three deletion operation does not exist, below is similar to the increase of deletion method or to operation, easy to sort out and memory.

  • increase
var str1 = 'ran';
var str2 = 'shaw'; / / way"+"Str1 + STR2 //'ranshaw'// Mode two template string '${str1}${str2}` / /'ranshaw'Concat str1.concat(str2) //'ranshaw'
Copy the code
  • check
var str = 'hello world'// charAt returns a character at the specified position. The argument is str.charat (1) //'e'// [] returns the character at the specified position, with brackets starting at 0 STR [1] //'e'// indexOf returns the first occurrence of the string to be queried, or -1 if not; Argument 1: string, argument 2: match str.indexof ('o')  // 4
str.indexOf('o'// 7 // lastIndexOf is the same as indexOf, except that lastIndexOf matches from the end, and parameter 2 matches str.lastIndexof ('o') // 7
str.lastIndexOf('o',4) // 4 // match is used to determine whether the original string matches a substring and returns an array of the first string matched. If no match is found, null str.match('ll') / / /'ll'] // Search is similar to match in that it returns the first position matched. If no match is found, -1 str.search('ll') / / 2Copy the code
  • Delete and change
var str = 'hello world'; // Slice retrieves a substring from the original string and returns it without changing the original string. Parameter 1: start position, parameter 2: end position (not included) str.slice(0,5) //'hello'// substring is similar to slice str.substring(0,5) //'hello'Substr (0,5) // substr works like slice and substring, but 2 is the length of the string str.substr(0,5) //'hello'// replace Replaces the matched substring. Normally only the first match is replaced (unless a re is used). Str.replace ('o'.'k') / /'hellk world'
str.replace(/o/g,'k') / /'hellk wkrld'

Copy the code
  • other
var str = '\nhello world '// trim Removes Spaces and tabs (\t, \v), newline (\n), and carriage return (\r) str.trim() //'hello world'// split split strings according to the given rules, returns an array of split substrings str.trim().split(' ') / / /"hello"."world"]
Copy the code

The resources

Ruan Yifeng deity packaging object

Front-end mindset shift — from event driven to data driven