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

Source: Internet
Author: User

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.