JavaScript DOM Programming Art-Learning notes (chapters fifth, sixth)

Source: Internet
Author: User

The Fifth chapter:

1. digression: First shouting, "JS Innocence", guilty of abusing JS of those people. JS Father Brandon-Ike, originally in order to cope with work, 10 days to drive out of this JS, after the fact that someone else JS is C language and self language "about" the product, (Baidu Encyclopedia said, these) ..... A poor child,-js. Then the fate of "people", JS at this time has been known to the world. Maybe it's because of JS's mixed that his dad doesn't want to admit it. If JS would talk, it might give it Brandon-Ike said, "Why didn't you put ******* on the wall?" This reminds me of an old story: The old carpenter has been working for a lifetime, before retiring, the leader said, you will finally build a house, the old carpenter in mind only to resign, the house built anxious, also not good. When the house was finished, the boss gave the house key to the old carpenter and said it was given to him. People, or serious work, a good life. Things are always never guessed.

2. digression: Everyone in the trend, without asking the actual demand, our company's customers is such a drop: "This family's website has, we also want to have." "

3.1) Smooth degradation: ① meaning: Let the user disable JS, so that you can access the site. ( most people on the internet say that no one is going to deliberately close JS.) There are also-' "The people who turn off JS, is not worthy to enjoy the technology on the tall?")

② to do so, although the user experience of disabling JS is not as good as before, but it's better than not being able to access it.

③ smooth degradation: in favor of SEO, because most search robots do not know JS.

④ to be honest, in addition to the example of this href in the book, I have not thought of other examples of steady degradation ....

3.2) Progressive enhancement: ① meaning: Separating content (HTML), style (CSS), behavior (JS)

② play a "jasper": a sugar, paper wrappers (style) is very beautiful, remove the wrapper is still, edible (content)

3.3) backwards compatibility: ① meaning: pave the way, do a good job of prevention----If there are no elements in use in the Web page, or if you cannot get the elements you want to use.

② Common techniques-object detection techniques (now common method). Remember to remove the parentheses when you use it, or the result will be tested. The effect is equivalent to a warning sign to the browser: If you do not have this method, please leave)

-Browser sniffing technology (with a plethora of browsers, this technique is a little more pronounced feebly)

4 . Small Knowledge Point:① gets the href attribute of the current link-this.href

②return false; often used to block the default jump behavior of the a label and the default commit behavior of the form (submit). The implication is to tell the browser: "Take action without clicking on the link"

1 <a href= "https://www.baidu.com" onclick= "Windowopen (This.href); return false;" > I oh </a>

It also uses the technology of smooth degradation mentioned in the book-even if the user closes the Js,js link before it can jump.

The code behind ③return will not be executed (generally writing return false for readability), but only valid for the current function:

1(function(){2             if(1==2){3Console.log ("1");4                 return false;5             }6              for(vari = 0; I < 1; i++) {7Console.log ("2");8                 return false;9             }TenConsole.log ("3"); One         })(); AConsole.log ("4");

2 and 4 will be printed at the end.

5. Off- topic: The website is only a combination of documents and data, the picture is just a pixel point composition. Everything is simple, simple and complex.

6. Off- topic: Front-end collection of user data---data stored in the database----generation model----for decision-making, etc.

Decision----Generation Model-----Database generation Data---front-end presentation data

7. off-topic: This book is still quite suitable for the people who have just worked. Can be said to be a leak check

8. Performance optimization: ① to access the DOM as little as possible:

work, will be lazy, write the following code:

1 if(document.getElementById ("Imgshow")) { 2 a Lert () 3 }

but this writes: A, every time you judge, it searches the entire DOM tree. Inefficient, rather than searching once, there are variables in the method of high efficiency.

② reduce DOM tags.

a few days ago, the site carousel needs to be modified, I think is to add a div+js to achieve the effect. And the project manager means to implement it through CSS .

Too many DOM tags increase the size of the DOM tree and increase the search cost.

③ merging and placing scripts:

Always know that JS should be put at the end, when the specific where is not very clear. ---- should be placed at the end of the document,</body> label before

④ Compression Script:

In addition to the three tools mentioned in the book, you can also use grunt.

The sixth chapter:

1. In this chapter, the main idea is to combine the ideas of the previous one into an example.

2. Structured Programming:

at work, the following code is written:

1                 if (222) {2                   if (111) {3                     if (3333) {45                    }6                  }7                 }  

These write, will bring a lot of inconvenience to the later revision. And not easy to read.

The idea is this: if it's the right line. You can modify the idea for, if the error is stopped. Then the code becomes:

                if (222) {returnfalse;}                 if (111) {returnfalse;}                  if (333) {returnfalse

You can also use the If ELSE-IF structure to replace the structured notation:

                if (222) {}                 Else if (111) {}                 Else if

3. Small Knowledge Points:I is often used in the ①for cycle, the variable named I is a traditional practice: I means "increment" (increment)

② can use ternary arithmetic to replace If-else, which makes the code brief, but the logical relationship is not obvious. With which, to see you in the mood

③onclick event support for keyboard access has been good (PS: In all browsers, the TAB key is moved to a link, and then press ENTER will go to the onclick event), so there is no need to specifically bind a keyboard event.

④ How to let ul inside Li horizontal arrangement, and center? UL set to Text-align:center;li set-display-inline can be. There are many ways to use postion:relative online. Good trouble to say.

4. digression: Life is like checking things on the Internet, checking and running off, you have to ask yourself frequently: "What am I doing?"

5. Off- topic: There is a kind of childhood record journal feeling. But can say, read the idea is also a kind of good feeling.

6. digression: There are too many things on the internet is plagiarism, transcription (a word is not bad), copy Baidu Encyclopedia, copy copy, change a background to say that they are written by themselves ....

JavaScript DOM Programming Art-Learning notes (chapters fifth, sixth)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.