SeaJs learning notes: seaJs implements some webQQ functions 1

I have already introduced some general usage of seaJs, the seaJs library is introduced, define is used to convert to a module, and the use is used to call the module. The external interface exports is used to find the module's external interface and require is used for inter-module dependency.

The basic usage is the above methods. Next, let's take a concrete example to illustrate how the module makes work easier. This example is to implement some functions of webQQ to implement seaJs to make work easier. Open webQQ, mainly including the drag and drop function, the drag and drop function to change the layer size, and the drag restriction function. We use seaJs to implement these small functions. The drag and drop functions are not described too much here. We will mainly explain how to use seaJs.

Create a home page first. There are four friends to complete this arduous task.

 

　　HTML code for simple layout on the page

 

Preview of a simple page

 

 

For example, when you click, the Red Bullet layer appears. You can drag the yellow square to change the red size. Drag the green block to move it. It is hidden when the bullet layer comes up. This homepage is developed by A partner. A's friend wants to drag it first. Before doing so, A's friends found that B's friends had made A drag and drop, so they introduced it with seaJs.

 

　　Javascript code of main. js dependent on the drag-and-drop module of drag. js

 

// Module define (function (require, exports, module) developed by A partner {var oindium = document. getElementById (inp1); var oDiv1 = document. getElementById (div1); var oDiv2 = document. getElementById (div2); var oDiv3 = document. getElementById (div3); // A calls by relying on require, depending on the drag developed by B. js require (. /drag. js ). drag (oDiv3 );})

 

　　Javascript code of drag. js dependent on the drag-and-drop module of drag. js

 

// Drag the define (function (require, exports, module) {function drag (obj) {var disX = 0; var disY = 0; obj. onmousedown = function (ev) {var ev = ev | window. event; disX = ev. clientX-obj. offsetLeft; disY = ev. clientY-obj. offsetTop; document. onmousemove = function (ev) {var ev = ev | window. event; obj. style. left = ev. clientX-disX + px; obj. style. top = ev. clientY-disY + px;} document. onmouseup = function () {document. onmousemove = null; document. onmouseup = null;} return false} exports. drag = drag ;})

 

　　HTML code of the drag-and-drop module dependent on drag. js

 

<Script type = text/javascript src = sea/sea. js> </script> <Script type = text/javascript> seajs. use (./js/main. js) </script>

 

Preview URL

 

 

So little partner A only needs to rely on the drag and drop written by little partner B. Next, A's friends continued to develop the bullet layer.

 

　　Javascript code of main2.js on the bullet Layer

 

// Module define (function (require, exports, module) developed by A partner {var oindium = document. getElementById (inp1); var oDiv1 = document. getElementById (div1); var oDiv2 = document. getElementById (div2); var oDiv3 = document. getElementById (div3); // A calls by relying on require, depending on the drag developed by B. jsrequire (. /drag. js ). drag (oDiv3); // The elastic layer oindium developed by A partner. onclick = function () {oDiv1.style. display = block ;}})

 

　　HTML code of the bullet Layer

 

<Script type = text/javascript src = sea/sea. js> </script> <Script type = text/javascript> seajs. use (./js/main2.js) </script>

 

　　 Display the preview address of the bullet Layer
Http://www.leemagnum.com/seaJs/h/ex/ B .html

 

 

A click layer is displayed. Next, let's start development and drag to change the layer size. A's friend finds out again, and drag and drop to change the layer size. This effect has already been done by C's friends. So A's friends can directly introduce the modules that C's friends do.

 

　　C's drag-and-drop operation changes the javascript code of the layer size module scale. js.

 

// The drag-and-drop operation developed by the C partner changes the layer size. define (function (require, exports, module) {/* obj1 large divobj2 small div */function scale (obj1, obj2) {var disX = 0; var disY = 0; var disW = 0; var disH = 0; obj2.onmousedown = function (ev) {var ev = ev | window. event; disX = ev. clientX; disY = ev. clientY; disW = obj1.offsetWidth; disH = obj1.offsetHeight; document. onmousemove = function (ev) {var ev = ev | window. event; obj1.style. width = ev. clientX-disX + disW + px; obj1.style. height = ev. clientY-disY + disH + px;} document. onmouseup = function () {document. onmousemove = null; document. onmouseup = null;} return false} exports. scale = scale ;})

 

　　A's main3.js javascript code

 

// Module define (function (require, exports, module) developed by A partner {var oindium = document. getElementById (inp1); var oDiv1 = document. getElementById (div1); var oDiv2 = document. getElementById (div2); var oDiv3 = document. getElementById (div3); // A calls by relying on require, depending on the drag developed by B. js require (. /drag. js ). drag (oDiv3); // The elastic layer oindium developed by A partner. onclick = function () {oDiv1.style. display = block; // drag the C partner to change the layer size module require (. /scale. js ). scale (oDiv1, oDiv2 );}})

 

　　Drag and Drop HTML code to change the layer size

 

<Script type = text/javascript src = sea/sea. js> </script> <Script type = text/javascript> seajs. use (./js/main3.js) </script>

 

Drag and Drop the preview address to change the layer size

 

 

This section describes how to use seaJs to implement some webQQ functions. Through examples, it is not difficult to find that seaJs is quite useful and solves many javascript problems. For more seaJs-related knowledge, please stay tuned to Menglong xiaozhan's seaJs updates.