Semantic is a special term in front-end development, its advantage is that tag semantic is conducive to a well-structured HTML structure, conducive to search engine index, capture; In addition, it also helps the page display on different devices as much as possible; In addition, it is also conducive to the establishment of a clear organization, conducive to the development and maintenance of the team.

Front-end semantematization was once associated with HTML, where front-end developers improved project/product quality by using HTML tags that had similar visual appearance but different semantics. I may be talking more broadly here, including but not just the semantics of HTML.

Semantic past lives

In 1998, Tim Berners-Lee proposed the concept of semantic Web. Its core is:

By adding semantics (metadata) that can be understood by computers to documents on the World Wide Web (e.g., HTML documents), the entire Internet becomes a common medium for information exchange.

Here I want to look at semantics from multiple perspectives.

HTML

Most of the semantics I’ve been able to look up have to do with HTML, so let’s talk about HTML.

The early version of HTML took semantic into account, and introduced HTML tags such as H1 ~ H6 IMG UL OL Li. Early search engines also make good use of these semantic tags to reasonably grab content.

As the content of the Internet continues to enrich, these labels are obviously not enough to describe various functions, so the front end began to enrich the Web with attributes such as ID class. At this point, if the search engine only relies on the label to grab the content, it appears that some powerless.

With the release of HTML5, tags such as Section Header and Footer Main can be better captured by search engines and reduce communication costs between developers, thus reducing maintenance costs.

Here’s a list of HTML5 tags to recommend a wave.

For example,

I have doubt < b > < strong >, < I > < em >, the difference between a look from the performance forms < b > < strong > are text bold, < I > < em > is text in italics, seems to be no different.

In fact, the em element represents an emphasis on its content:

I saw a news </em> when I took my medicine </em>Copy the code

So the crawler knows whether to focus on your pills or the news (seriously).

The strong element represents the strong importance, severity, or urgency of the content:

<strong> <strong/>Copy the code

Conclusion:

  1. Conducive to SEO, no longer explain.
  2. Facilitate development and maintenance, follow the same standard development, while making the page structure more clear, naturally improve work efficiency.
  3. This facilitates parsing by more devices.

Semantic HTTP requests

The most commonly used HTTP request method is GET POST. Let’s take a historical perspective.

HTTP / 0.9

As the first large-scale version of HTTP, there was only one GET method for getting HTML documents from the server.

HTTP / 1.0

The HEAD and POST methods are new in this release.

  • Head-head is similar to GET, but HEAD contains no rendering data, only HTTP headers. Usually used to determine whether a resource exists. (If you have other uses, please leave a message or contact me to provide you)

  • Post-post Sends data to the server. POST, described in HTTP/1.1, covers the following functions:

    • Annotate existing resources
    • Post messages on bulletin boards, newsgroups, mailing lists, or similar article groups;
    • Add users by registering;
    • Providing a batch of data to a data handler, such as submitting a form;
    • To extend database data by appending operations.

HTTP / 1.1

This version adds five new methods: PUT, DELETE, CONNECT, OPTIONS, and TRACE.

  • PUT – PUTMethod replaces all current representations of the target resource with the request payload.
    • withPOSTSimilar, both send data to the server, the difference is:
    • The client sends an Entity to a URI. If the server already has an Entity under this URI, the server should replace it with the client’s re-submitted Entity, thus ensuring the idempotency of PUT. If the server does not have an Entity before, then the server should place the client submission on this URI.
    • As you can see from the above, if you use PUT to change the resource, the client must submit all the information about the resource. If only part of the information is provided, you should not use PUT (because the server replaces the server’s resource with the whole object submitted by the client).
  • DELETE – DELETEUsed to request the server to delete the requestURIThe identified resource.
  • CONNECT – CONNECTMethod opens a two-way communication channel between a client and the requested resource. It can be used to create tunnels.
  • OPTIONS – OPTIONSMethod is used to get communication options supported by the destination resource.
  • TRACE – TRACEMethod implements loop-back testing of messages along the path to the target resource, providing a practical debugging mechanism.
    • The ultimate recipient of the request should reflect the message it received as such, except for the following field sections, as oneContent-Type 为 message/httpThe body of the 200 (OK) response message is returned to the client.

The expansion of the HTTP / 1.1

  • PATCH – PATCHUsed to partially modify a resource. Use was mentioned earlierPUTThe client is required to provide a complete replacement of all resource information. In a scenario where only some resources are modified,PATCHEspecially suitable.

For example,

Jsonp requires a script tag with a SRC attribute to send a GET request to circumnavigate the cross-domain constraint. This request can be used as a trigger for anything like add, delete, change, or query, so it’s clear that Jsonp does not conform to the specification of semantics.

conclusion

It’s easy to relate this to RESTful specifications, and what I understand is that RESTful specifications themselves are implementations of various semanticized schemes, so some of the benefits of RESTful specifications are also benefits of semanticized HTTP requests.

  1. GET HEAD PUT DELETE OPTIONS 是 Power etc.The,POST PATCHNonidempotent.
  2. The service interprets itself – for example, adding, deleting, changing, and checking comments, requiring only one URI/commonThe rest is straightforward.
  3. Decoupling is implemented inside the API

JavaScript semantic

Don’t write useless comments

// Determine the data type
if(Object. Prototype. ToString. Call (STR) = = = "[objectString]”){
    // doSomething();};Copy the code

Instead of writing comments for this slightly complex logic, encapsulate it as a semantic function:

const isObject = val= >val ! =null
  && typeof val === 'object'
  && Array.isArray(val) === false
  && Object.prototype.toString.call(val) === '[object Object]';
  
if(isObject(str)) {
    // doSomething();
}
Copy the code

named

This is just a diversion, not the norm.

1. Pay attention to parts of speech

  • Use “nouns” for common variables/attributes
var person = {
    name: 'Frank'
}
var student = {
    grade: 3.class: 2
}
Copy the code
  • Bool variable/attribute use “adjective” or “be verb” or “modal verb” or “hasX”
var person = {
    dead: false.// If it is an adjective, there is no need to add is, for example, isDead
    canSpeak: true.// Modal verbs can, should, will, need, etc
    isVip: true.Was, was, was, was, was, was
    hasChildren: true.// has adds a noun
}
Copy the code
  • Normal functions/methods start with a verb
var person = {
    run(){}, // Intransitive verbs
    drinkWater(){}, // Transitive verbs
    eat(foo){}, // Transitive verb with argument (argument is noun)
}
Copy the code
  • Callbacks, hook functions begin with a preposition, or use the present perfect tense of a verb
var person = {
    beforeDie(){},
    afterDie(){},
    / / or
    willDie(){}
    dead(){} Bool dead: bool dead: bool dead: bool dead: bool dead: bool dead
}
button.addEventListener('click', onButtonClick)
var component = {
    beforeCreate(){},
    created(){},
    beforeMount(){},
    mounted(){},
    beforeUpdate(){},
    updated(){},
    activated(){},
    deactivated(){},
    beforeDestroy(){},
    destroyed(){},
    errorCaptured(){}
}
Copy the code
  • Add prefixes to confusing places
div1.classList.add('active') / / the DOM object
div2.addClass('active') / / the jQuery objectAdd (domDiv1 or eldiv1.classList.add ('active')
$div2.addClass('active')
Copy the code
  • Attribute accessor functions can use nouns
$div.text() $div.gettext ()
$div.text('hi') $div. SetText ('hi')
Copy the code

2. Focus on consistency

  • Preposition consistency If you use before + after, stick with it everywhere in the code if you use before + perfect, stick with it if you change it around, it’s inconsistent, and inconsistency leads to unpredictability
  • The sequential consistency, for example, updateContainerWidth and updateHeightOfContainer, is in an awkward sequence, and also causes unpredictability
  • A consistent function name in a table must perfectly represent the function, no more or less. Such as 
    function getSongs(){
    return $.get('/songs).then((response){
        div.innerText = response.songs
    })
}
Copy the code

    GetSongs does not imply that the function will update the page, but it does update the div

    • Either correct the function name
    function getSongsAndUpdateDiv(){
    return $.get('/songs).then((response){
        div.innerText = response.songs
    })
}
Copy the code
    • Or I can write it as two functions
    function getSongs(){
    return $.get('/songs)
}
function updateDiv(songs){
    div.innerText = response.songs
}
getSongs().then((response)=>{
    updateDiv(response.songs)
})
Copy the code
  • Time consistency: It is possible to change the name of a variable from its original meaning as the code changes. This one is the hardest to do, because it’s easier to write code than to change it. If the code is not well organized, it is very likely that it will be affected by the whole thing (global variables are hard to change, for example)

The last

Semantematization makes it easier for machines to analyze data. For programmers, semantization gives us less work and more time to enjoy life.

The front is now dark before dawn, and will surely clear up in a few years

Reference:

  • Talk about the semantic understanding of HTML
  • Web semantic standard interpretation
  • From HTTP 0.9 to QUIC
  • HTTP protocol method and application scenarios
  • What are the fundamental differences and advantages between POST and PUT in HTTP?
  • How can you make your JavaScript code more semantic