As you all know , An important skill of front-end programmers is to be able to write excellent javascript code . A good front-end programmer and a rookie programmer are writing javascript What are the differences in code ? Let's talk about my study Javascript Some experience in .


I always agree with one thing : Good and ordinary are habits .

therefore , I think the difference between a good front-end programmer and a rookie programmer is in the programming habits . As we all know, for programmers , Staying up late is common , But a good programming habit can keep you up , Why? ? Because we 80% It's not about writing code , It's for reform bug upper , and 80% Of bug From our programming habits .

Programming habits

Once you hear the programming habits , It's estimated that rookies say that it's habit ? I don't listen to music when I program , Don't eat , Not one mind, two uses , Isn't that a good habit ? exactly , It's a good habit , But it's a little different from the programming habits we're talking about today .

stay javascript In good programming habits, I will mainly talk about one principle and three suggestions .

A rule

One rule is “ Separation of behavior and content ”.
javascript Main control html Document behavior , The content is html file . The separation of behavior and content is javascript Code and html Documents to be separated , Don't js Code embedded in html In document .

such as :
<input type="button" onclick="fun()"> <script type="text/javascript"> function
fun(){... } </script>

Rookie writing javascript That's what I like when I write code , But it's not recommended . Because once it's written to death , If it needs to be modified later, it will be very troublesome , It needs to be modified html Content of the document . This is a simple example , Maybe you feel like changing one onclick It's very simple , But what if it's modified in tens of thousands of code projects ! So your html The content of the document will be very large , It's obviously not expected to happen !

Three suggestions

The three suggestions are “ proceed in an orderly way and step by step ”,“ Reserved exit ”,“ Backward compatibility ”.

proceed in an orderly way and step by step :

Start with the core content , Add additional features step by step . You should first use markup language to mark the core content to get the right structure , And then gradually enrich the content that has been correctly marked , The substantial content can be css style , Or through javascript Add various operation behaviors .

In short, we can't pass the very important content javascript Add to html In the document , In case of browser failure javascript function , Then the important content will not be displayed !

If you are using javascript Technology add core content , So it's too late for you to add them — The core content should be written at the beginning html Document time html Part of the document .

Reserved exit :

To reserve a way out is to solve a problem : If javascript Feature disabled , What will happen ?

So you have to be in your javascript The code considers that if javacript Feature disabled , How can I maximize my presentation? I want to show my content , Protect it from javascript Effects of disabled features .

Backward compatibility :

Backward compatibility means compatibility with older browsers . It is a common practice to conduct necessary inspections . What to check ? For example, if you want to use a function of your own , So we need to check whether a function is available in the old version .

as :
function displayCite() { // These three if Statement is the necessary check if(!document.getElementsByTagName)
return false; if(!document.createElement) return false; if(!document
.createTextNode)return false; var quote=document.getElementsByTagName(
'blockquote'); var h2=document.createElement("h2"); var h2_txt=document

It can be seen that , All three suggestions are based on
“ The core content should be written at the beginning html Document time html Part of the document .” Based on . So it can't pass javascript towards html Document add core content .

©2019-2020 Toolsou All rights reserved,
Thread.getContextClassLoader And Thread.getClassLoader() difference ( Essence )2020 year 6 month 26 day C# Class library Log help class el-ui:select Get value [AndroidO] [RK3399] -- GPIO Drive and control mode vue obtain el-select Of the selected item label value vue vue-element-admin Summary of the project ( Essence )2020 year 7 month 21 day ASP.NET Core Use of global filters PowerShell Use in WebClient Download the file and get the download progress airflow Timed tasks + Time setting +cron expression mybatis Return result mapping of series