1. Advantages of using constructor mode for development
1. The business logic ideas are clearer;
2. Avoid the generation of a large number of global variables. There is only one global variable, which is equivalent to the only interface exposed to this functional module;
3. If combined with modular development, it is very convenient to add custom modules to unified modules. As long as the custom module names do not conflict, they will not interfere with each other when used;
4. The code is maintained well and beneficial to others;
2. Let’s use this model to explain it using drag and drop as an example.
1、html,as follows:
<body> <div class="box" ><div class="main"><div class="bar">Drag area</div><div class="content">Content blocks</div></div></div> <div class="box" ><div class="main"><div class="bar">Drag area</div><div class="content">Content blocks</div></div></div> <div class="box" ><div class="main"><div class="bar">Drag area</div><div class="content">Content blocks</div></div></div> </body>
2、css
<style type="text/css">
.box{position:absolute;left:100px;top:100px;padding: 5px;box-shadow:2px 2px 4px #666666; font-size:12px;}
#box2{left:500px;}
#box3{left:900px; }
.main{border:1px solid #a0b3d6;background-color: #fff; }
.bar{line-height:24px;padding-left:5px;border-bottom:1px solid #a0b3d6;background-color:#beceeb;cursor:move;}
.content{padding: 10px 5px;height:200px;width:250px;}
</style>
3、js
// Define the Drag constructor and set the privileged attributes of each instance (that is, the attributes private to each instance object to be created in the future);function Drag(bar, target) {
// The bar here refers to the object that triggers the drag event; = bar;
// The target here is the object whose value is actually dragged; = target;
// This flag is equivalent to a switch, which is used to determine whether the event can be executed; = false;
}
// Adding methods on the constructor prototype is also adding common methods to their examples; = {
// Redeclare the constructor attribute of the prototype, that is, specify the real creator for the instance; it is no problem not to re-specify it here, just for the sake of. . . constructor : Drag,
// Initialize the properties of each instance to prepare for binding events; init : function(){
// This on this actually refers to the object that calls this init function method, which is the instance we created; // This is beneficial to write it like this, and then explain it in detail when executing the code to the binding event; var temp = this;
// Get the first style value set on the instance object, and this is the left and top attributes; = (, "left");
= (, "top");
// Pre-declare the value to be used below. This refers to the position of the mouse relative to the screen when the mouse is clicked (clientX, clientY) = null;
= null;
// Issue a command to bind events to an instance object; ();
},
//
getCss : function(o , prop){
// The object pointed to by the style attribute of the Dom object can only obtain the value of the embedded style, such as <a style="..."></a>, which can be obtained by writing inside the element; // However, the style values set by outline style sheets and inline style sheets can only be obtained through the following methods: currentStyle corresponds to Ie, and the other corresponds to other browsers; return ? [prop] : (o, null)[prop];
},
bindEvent : function(){
// First pass this object (that is, the instance object we created) that calls this bindEvent method to the temp variable, so temp points to the instance object; // Therefore, in the execution environment of the current function, if you want to call this instance object, you do not need to use this, because this may point to other objects; // For example, when binding an event for an object, this inside the event must point to the bound object, rather than the "this" we want to start var temp = this;
// Listen to the event function under the mouse click = function(e){
// The e on this side refers to the event object. Old Ie cannot be used directly, so it must be referenced through; e = e || ;
// Turn on this switch the moment you click, indicating that you can drag it now; = true;
// Get the mousePos attribute relative to the browser window and assign it to the mousePos attribute of the instance object; = ;
= ;
};
// Listen to the mouse movement event, pay attention to the event bound to the document object, because the mouse moves across the entire document; // You cannot use the onmousemove method to bind events, because our instance may have multiple. If we use the second method, the last initialized instance will be bound to the event function; ('mousemove' ,function(e){
e = e || ;
// Because flag is specified as true when clicking on the mouse, the following code will be executed; // If there is no control of this switch, when we move the mouse, all the instance objects we create must be moved; if(){
// (- ) represents the distance the mouse slides after pressing; // parseInt() refers to the initial position of the dragged object when the mouse has not yet slided; = parseInt() + - + "px";
= parseInt() + - + "px";
}
});
// Event after the mouse is released ('mouseup', function(e){
// After the mouse is released, turn this switch, which means that the dragged object cannot be dragged; = false;
// Record the dragged position of the object = (, "left");
= (, "top");
});
}
}
// Get the Dom element, oBar refers to the drag bar, oBox refers to the actual dragging object;var oBox = ('box');
var oBar = ('bar');
// Create instance objects, pay attention to the order of parameters;var drag1 = new Drag(oBar[0], oBox[0]);
var drag2 = new Drag(oBar[1], oBox[1]);
var drag3 = new Drag(oBar[2], oBox[2]);
// Call the init method on the instance object to specify the designed operation process for the instance object;();
();
();
The specific process is explained through js annotations, hoping to help everyone better use the constructor to achieve drag and drop effect.