Home > Developer > JavaScript
Description (2017.3.28):
1. JavaScript is an object-based, multi-paradigm programming language, not object-oriented, but cannot live without objects.
Paradigm programming refers to programming habits and methods, which are divided into procedural, object and functional programming.
2. Object-oriented refers to the use of objects for development, object-oriented is the process-oriented encapsulation.
3. JavaScript Object-oriented three features, abstraction, inheritance and encapsulation.
Abstract refers to the extraction of core properties and methods, not under certain conditions can not determine the specific meaning of the object.
Inheritance refers to the use of properties and methods that I do not have, and to become my own properties and methods.
Encapsulation refers to the packaging of methods and properties into an object.
4. JavaScript objects are a collection of key-value pairs.
The key value is the data (basic data, composite data, empty data), called attributes.
A key value is a function, which is called a method.
5. Example is to add a div inside the body and set the style.
For the first time, use the Process method, add Div First, then set the style separately.
The second time, using the object-oriented approach, create the DIV as a property dom, add div to Body as Method Appendto (), set the style as the method CSS ().
The third time, set the CSS () parameter to the JSON format object, just call the CSS () method once.
For the fourth time, each method finally returns this, implementing chained programming like jquery.
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>Document</title>67<body>8 9</body>Ten<script type= "Text/javascript" > One //draw a div box A //method of the process - //var divtag = document.createelement ("div"); - //DivTag.style.border = "1px solid red"; the //divTag.style.width = "200px"; - //divTag.style.height = "100px"; - //DivTag.style.backgroundColor = "Pink"; - //Document.body.appendChild (divtag); + //Object-oriented approach - varDivtag =function(){ + This. DOM = document.createelement ("div") A This. AppendTo =function(){ atDocument.body.appendChild ( This. DOM) - return This; - }; - //Note that for the in loop here for JSON, I is the key name, not the index - This. CSS =function(option) { - for(varIinchoption) { in This. Dom.style[i] =Option[i]; - } to return This; + //This . Dom.style[name] = value; - }; the }; * $ varDivtag =NewDivtag ();Panax Notoginseng divtag.appendto (); -Divtag.css ({border: "1px dotted Blue", Width: "100px", Height: "100px"}); theDivtag.appendto (). CSS ({border: "3px dotted Yellow", Width: "100px", Height: "100px"}); + //divtag.css ("Border", "1px solid Red"); A //divtag.css ("width", "200px"); the //divtag.css ("height", "200px"); +</script> -JavaScript Advanced Object-oriented (1)--add a div tag
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
