The first love example of JavaScript modular development (pop-up window)

Today is September 30, 2014, tomorrow is the National day, first of all, I wish our great Motherland Happy birthday.

A few minutes to get off work, to study a few days about the require library of the modular development of related articles,

Finally wrote the first love of the modular example: Pop up a login box:

First: Introduce the Require library file to the static page and introduce the main script file (main.js) in the introduction tag

1 <script data-main='main' src='./require.js' ></script>

2: First, before writing the program, you need to know the dependencies of the module files and module files that need to be loaded:

(module file: is actually JS function files, encapsulated files, just return a public use these files API interface for us to use in the main file)

I have 3 files in this: A jquery one encapsulates the creation of a popup and related methods of JS file a require file

3: Because I want to be in the pop-up window This module file to achieve the effect of creation and motion, its dependent files are jquery files, so in the pop-up window This module file to introduce jquery file

The method is: define ([' Module file 1 ',...],function (Interface object returned by module file 1) {...})

My pop-up module file code:

1Define (['jquery'],function ($) {2         3         varloginbox={4Left -,5Top $,6 create:function () {7                 varBox=document.createelement ('Div');8Box.classname='Box';9Box.innerhtml="<div class= ' title ' >title</div><div class= ' cont ' >cont</div>";Ten document.body.appendChild (box); One                 return  This; A             }, -  - run:function () { the$('. Box'). Animate ({ -Left This. Left, -Top This. Top, -                 });  +             } -              +  A         } at  -         returnLoginbox; -          -   -})

4: Add the following code to the Main.js master file for a good result:

Require.config ({//config jquery file        paths: {            'jquery.min'}    })     }); *    /require (['jquery','div' ],function ($,o) {                                $ ('#btn'). Click (function () {                    O.create (). run (); Chained operation implemented: The key point of a chained operation is to return the current object application in the method     })

Off-duty!!!!!!!!!!!!!! National Day Big Music

The first love example of JavaScript modular development (pop-up window)