The way of Web front-end development--notes

It took one weeks to finish the book, write the essays, and extract some of the functions that were encapsulated in the book, and occasionally take a look (only the things that feel important)

The HTML (model) +css (View) +javascript (Controller) quirks mode is because of a DTD trigger, which is the document type definition, which defines the type <! DOCTYPE html> Multiple organization CSS way for example can be divided by function font.css color.css layout.css This book recommended BASE.CSS (Universal layer) +common (site-level) +css+page (page-level). css All the styles within the site are divided into three main categories: base Common page if the function requirements on the page are simple, the page can have no base layer code, there is no common layer code, but there will be page layer code. Both the base layer and the common layer belong to the frame level, and the page layer belongs to the application level, which can call the base layer interface and the components of the common layer. base and common are interface interface interfaces, and the underlying interfaceBase is like a road smoothed, common is the road paved asphalt, page is a car, and then let it gallop ~ ~ ~ HTML specification:DTD Unified with <! DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/>strictly distinguish the picture as the content and the picture as the background. The picture used as a background is csssprite technology, which is placed in a big picture. Large map of the arrangement also comply with Common+app way, the whole station adopts the picture should inform the common component maintainer, add into the common.gif, each column picture, should put in app.gif. The advantage of CSS sprite technique is that it reduces the number of HTTP requests, but it increases the coupling degree and the maintenance cost for the background-position of the image oriented CSS. If the picture has been modified, do not delete the added picture, add the modified picture in the space, reduce the risk of modification. CSS specification: CSS reset with Yui's CSS resetcss using Cssreset+common. css+ APP.CSS to avoid the upper and lower margins of the component of the problem and IE haslayout caused by the bug, each module in addition to special needs, all use margintop set up and down the margin, the following chestnuts: <p>000000000</p><p class= "MARGINTOP10 MARGINBOTTOM10" >00000000</p><p>000000</p> error <p>000000000</p><p class= "MARGINTOP10" >00000000</p><p class= "MARGINTOP10" >000000 </p> correct CSS with a line of writing, to avoid the function is too long, not conducive to find--------------------------JS----------------------(function () {}) (): The anonymous function to wrap up the script, It can control the global variables effectively and avoid the hidden conflict. Window.onload event: The Window object triggers the OnLoad event after all elements in the page have been loaded but there is a problem, and the OnLoad event of window requires that all elements in the page be loaded before they are triggered. You can use the Domready event provided by the JS framework instead of window.onload, but domready only determines if all the DOM nodes within the page have been generated and then triggers the load. CSS placed in the page header, JavaScript at the end of the page and if you want to put the CSS file must be in front of the JS file, JS is easy to block the Web page JS layered also with CSS layered from bottom to top in turn is the base layer, common layer, The page layer base JavaScript is independent of the specific application logic in the page and is at the framework level, and the interface it provides needs to be called by the global scope. Use namespaces as much as possible to reduce the number of global scope variables a very painful thing to do when you read cookies natively! The cookie cannot read directly the value saved in a key, read all the key-value pairs from Ducument.cookie, and then use the Split,indexof,slice method to manipulate the string to intercept the value of the key you need! to make it easy to tell if class is a hook for CSS or a hook for JavaScript, we can prefix the class with "j_" for JavaScript;The dry rule----don ' t repeat yourself (do not repeat the same code multiple times in the program) when you pass parameters to a function, there is a common way to pass the arguments, but you can use the method of the hash object to pass the argument, so that you can avoid not having to pass in the unnecessary parameters. You also have to set a value such as null; The following is a chestnut://Common way pass function test (a,b,c) {var oa=a| | 1,ob=b| | 2,oc=c| | 3;} Test (4,5,6); test (null,7,8); test (null,null,9);//Use hash object to pass parameter function test2 (config) {var oa=config.a| | 1,ob=config.b| | 2,oc=config.c| | 3;} Test ({a:4,b:5,c:6}); Test2 ({b:7,c:8}); Test2 ({c:9}); Using hash object, you can increase the flexibility of function call and improve function extensibility. The process-oriented thinking mode is a typical computer thinking mode---input data to the processor, the processor performs operations internally, and the processor returns the results. Process-oriented approach programming var name= "Adang"; var state= "Awake"; var say=function (oname) {alert ("I ' M" +oname);} var sleep=function (ostate) {ostate= "asleep";} Say (name); Sleep (state); Object-Oriented Programming var adang={name: "Adang", State: "Awake", Say:function () {alert ("I ' M" +this.name);},sleep:function () {this.state= " Asleep ";}}; Adang.say (); Adang.sleep (); The nature of the attribute is actually a variable, that is, the process-oriented data, and the nature of the behavior is actually a function, that is, process-oriented processing function。 The difference is that, in the process, data and processing functions are not associated and belong to an object together. Object-oriented objects define data and processing functions inside an object, and the properties and behavior of the object exist. Outside the object, properties and behaviors can be invoked with the properties of the object and the behavior of the object, allowing the program to have the ability to describe in a real-world way of thinking. Within an object, the properties and behavior of an object are associated with the This keyword. Process-oriented programming all the data and processing functions are public, the whole process of thinking is to define the data, define the processing function, and then pass the data to the processing function for processing, processing functions can also call each other, the data and processing functions tightly coupled. object-Oriented programming thinking process is to define objects, objects have their own properties and behavior, because the property and behavior are subordinate objects, so the "object" and "outside the object" concept, the entire program can be oil a bunch of objects, objects and objects may have communication, in order to achieve this communication, Objects will design their own partial properties and behaviors into public, exposing them as interfaces to communication. The communication between the object and the object is based on the interface. Of course, we can set all the properties and behavior of the object is public, all as the interface, but the more interfaces, will make the coupling between the object more tightly, increase maintenance difficulty, so in general, we will try to set the object's properties and methods as private, only the necessary behavior is set to public. Object-oriented English full name object oriented, referred to as OO. Oo actually includes OOA (object Oriented analysis, OO parsing), OOD (object oriented design, OO), and OOP (Object oriented programming, Object-oriented programming). A typical OO programming process should be to collate the requirements, according to the requirements of OOA, the real world Sir objects abstracted into the class or object of the Hum program, this process is often used in UML language, also known as UML modeling, OOA output is a class or object model diagram. Then use Ood, here is generally to deal with the coupling between classes, design class or Object interface, this time will use a variety of design models, such as observer mode, responsibility chain mode. Ooa and Ood are iterative processes that have no clear boundaries in themselves and are influenced and constrained by one another. After the end of Ooa and Ood, only to OOP, the actual coding work. Ooa and Ood are object-oriented programming ideas that are not relevant to specific languages, while OOP is a tool for object-oriented programming and is related to the chosen language. OOP is the bottom of Ooa and ood, with different syntax for various reasons, so OOP is different, but Ooa and ood have nothing to do with specific language requirements, and can easily be reused across languages in general. But in fact, a OOA ability is very important, OOP is generally less complex design, oop only a fraction of the time   "high cohesion, low coupling"Aggregation refers to the assembly of a complex thing as several simpler things, thus simplifying the description of complex things, "high cohesion" means that an object (or Class) provides an interface that is very simple to understand, complex underlying operations are encapsulated within the interface of an object (or class), transparent to the user. Coupling refers to the degree of association and dependency between classes and classes, and low coupling refers to the low degree of dependency between classes and classes, the fewer interfaces the class communicates with the class, and the lower the degree of coupling. The degree to which aggregation and coupling is determined is OOA and Ood,ooa and Ood work at the architectural level, while OOP is working at the coding level. It is not oop, but Ooa and Ood, which many engineers should pay attention to in deciding the quality of the program from the big picture.   The original JavaScript also has a class  function as normal function Sayhi () {Alert ("HI");} Sayhi (); function as class function Animal (name) {this.name=name;this.type= "Animal"; This.say=function () {alert ("I m A (an)" +this.type+ " , my name is "+this.name);}} var mydog=new Animal ("Wangcai");Mydog.say (); Such an instance method, and then an instance of the animal class, when instantiating a class, there is no obvious difference between the Orthodox object-oriented language of JavaScript and C #, which differs mainly in the way the class is defined. JavaScript is a prototype-based language The properties and behaviors of objects that are instantiated from new are derived from two parts, one from the constructor and the other from the prototype. What's the prototype? When we declare a class, we actually generate a corresponding prototype at the same time, for example, when we define the animal class, we generate a prototype corresponding to the animal class. Through the Animal.prototype can point to this prototype, the prototype can be pointed to the animal class through constructor, or, more specifically, the constructor of the animal class. Chestnut://define the constructor function of the Animal class Animal () {...}             var A=animal.prototype;                   A points to the animal class corresponding to the prototype Var B=a.constructor; b The constructor of the class that corresponds to a (b==animal)//true this keyword allows properties and methods to communicate between constructors and prototypes. Public or private in JavaScript is implemented through scopes. The properties defined by THISXXX are public, and properties defined with VARXXX are private, and all properties and behaviors, whether public or private, are all written in the constructor, although it is convenient, but not recommended, because there is only one prototype in memory that is written in the prototype and can be shared by all instances. , instantiation, and will not be copied in the memory of the instance, that is to say, all instances share that memory, and write in the class behavior, instantiation of the time back in each instance of a copy; writing the behavior in a prototype can reduce memory consumption, there are no special reasons, it is recommended to write the behavior in the prototype as far as possible, the behavior written in the prototype must be public, and cannot access the private property, so how to deal with private behavior and private property is a challenge. The private behavior is defined in the prototype, but by adding "_" to the name of the attribute and the behavior to make it private, it is a naming convention that does not actually implement the behavior of the private, but it allows the engineer to know that it is designed to be private, thus avoiding invoking it like public behavior The attribute is written in the constructor, and the behavior method is written in the prototype. avoid direct access to the properties of the class, which can be obtained and set through the Get and set methodsfunction Animal (name) {var name;this.getname=function () {return name;} This.setname=function (o) {name=o;}} After instantiating it, you can call GetName to get the corresponding property value, and SetName can set the property value so that it consumes a lot of memory, but it can better protect the property as long as the class has a prototype, whether it's a custom class or a built-in class for JavaScript, we can get some interesting functionality by modifying the prototype of the built-in class to let the JavaScript base type object.   this points to the instantiated object, whether in the constructor of the class or in the prototype. Expand the example of Array to modify the prototype of the built-in class: Array.prototype.each=function {for (var i=0,n=this.length;i<n;i++) {Fun (this[i],i)}}       var A=[1,2,3];alert (a); 1,2,3array.prototype.tostring=function (str) {return "I ' m an array";}       alert (a); I ' m an array It is worth mentioning that when "alert (a)", the ToString method of a is automatically called. When a string is required, the object implicitly automatically calls the ToString method, including our custom object. Methods for built-in classes can be overridden, but properties cannot be overriddenDefining the ToString method for a custom class allows us to provide more useful information when debugging. in JavaScript, including built-in classes and custom classes, all class ancestor classes are object, so if you want to extend the method to all objects, you can modify the prototype of the object class to implement  Use JavaScript to manipulate HTML Tag properties: Class is a reserved word for JavaScript, so when you get the class attribute of the HTML tag, you should instead switch to classname. Use Node.xxx to get the property values of regular HTML tags, which is better than node.getattribute ("xxx") for cross-browser compatibility. Note that custom tag properties can also be obtained in JavaScript, but unlike regular properties, Firefox cannot get custom attribute values through Node.xxx, only with Node.getattribute ("xxx"). IE under can oh ~! converting complex types of data into strings is called serialization of data, and its inverse operation is deserialization.  The deserialization of a string is achieved through the Eval function.  As long as the string looks like a JavaScript-supported data Format (JSON), it can be deserialized, regardless of whether the return data of Ajax is not. -----------------------------------------------------------------Error------------------------------1.tabContents [I] is undefined (the DOM listener event when traversing an array, the index value is always equal to the value after the traversal) solution: 1) Add the Index property to the DOM node using closure 2, the property value is equal to the index, (you can apply the individual buttons in the Carousel diagram with the picture) 2. ie under JS this point to the problem "' tabcontents[...]. Style ' is empty or not an object '. (JavaScript pseudo-protocol and inline event-to-point different) 1) using anonymous functions can solve this problem Oh! 2) Use call and apply to adjust this point (only know that this thing is inherited, do not know how to adjust) What is event bubblingFires a class of events on an object (such as clicking the OnClick event), and if this object defines a handler for this event, then this event invokes the handler, and if the event handler is not defined or the event returns true, the event propagates to the object's parent object, from inside to outside, Until it is processed (all the same events of the parent object will be activated), or it reaches the topmost level of the object, the Document object (some browsers are windows). ------------extracts a few packaged functions-(good knocks)-------------//Transparency problems using JS code to solve the transparency problem in IE function setopacity (node,level) {    node=typeof node=== "string"? document.getElementById (' node '):node;    if (document.all)     {        node.style.filter= ' alpha (opacity= ' + level + ') ';   }else{      &NB Sp node.style.opacity=level/100;   }} //Block event bubbling function stoppropagation (e) {    e=window.event || e;    if (document.all)     {        e.cancelbubble=true;   }else{         e.stoppropagation ();   }} //remove whitespace characters from the end of a string function trim (OSTR) {    Return Ostr.replace (/^\s+|\s+$/g, "");}  //type judgment function Isnumber (s) {    return!isnan (s);} function isstring (s) {    return typeof s=== "string";} function Isboolean (s) {    return typeof s=== "Boolean";} function Isfunction (s) {    return typeof s=== "function";} function IsNull (s) {    return s===null;} function isundefined (s) {    return typeof s=== "undefined";} function IsEmpty (s) {    return/^\s*$/.test (s);} function IsArray (s) {    return s instanceof Array;}  //The first parameter is the class name, the second parameter is the parent container, the default is the Body node, and the third parameter is the label name of the DOM node. function Getelementsbyclassname (str,root,tag) {    if (root) {        root=typeof root== " String "? document.getElementById (Root):root;   }else{        root=document.body;   }    Tag=tag| | " * ";    var els=root.getelementsbytagname (tag),arr=[];    for (var i=0,n=els.length;i<n;i++) {         for (Var j=0,k=els[i].classname.split ("");,l=k.length;j< 1; J + +) {        if (K[J]==STR) {  &NBsp         Arr.push (Els[i]);            break;        & nbsp  }       }   }    return arr;}  //inherited functions function Extend (subclass,superclass) {    var f=function () {};    f.prototype= superclass.prototype;    subclass.prototype=new F ();    Subclass.prototype.constructor=subclass ;    subclass.superclass=superclass.prototype;    if (superclass.prototype.constructor== Object.prototype.constructor) {        superclass.prototype.constructor=superclass;    }} //cookie Operation Global.namespace ("Cookie"); global.cookie={   //Read     read:function (name) {        var cookiestr= "; "+document. Cookie+ "; ";        var index=cookiestr.indexof ("; " +name+ "=");        if (index!=-1) {            var s=cOokiestr.substring (index+name.length+3,cookiestr.length);            return unescape ( S.substring (0,s.indexof (";")));        }else{            return null;       }&NBSP ;  };   /settings     set:function (name,value,expires) {        var expdays= expires*24*60*60*1000;        var expdate=new Date ();        Expdate.settime ( Expdate.gettime () +expdays);        var expstring=expires? "; expires =" +expdate.togmtstring (): "";        var pathstring= ";p ath=/";        D Ocument. Cookie=name + "=" +escape (value) + expstring +pathstring;   };   //delete     del:function (nam e) {        var exp=new date (new Date (). GetTime ()-1);        var s=this.read (name);         if (s!=null) {&nbsP           document.cookie=name+ "=" +s+ "; expires=" +exp.togmtstring () + ";p ath=/"        };   }}; //encapsulated namespace function, in order to resolve the conflict named Var global={}; Global.namespace=function (str) {    var arr=str.split ("."),o=global;    for (i= (arr[0]== "GLOBAL") 1:0;i<arr.length;i++) {        o[arr[i]]=o[arr[i]]| | {};        o=o[arr[i]];   }}

The way of Web front-end development--notes