Javascript模块化开发之初恋例子 ( 弹窗 )

今天是2014年9月30日了,明天就是国庆节了,首先祝咱们伟大的祖国生日快乐.

还有几分钟就要下班了,研究了几天关于require这个库的模块化开发的相关文章,

终于写出了初恋的模块化例子:弹出一个登陆框:

第一:首先在静态页面引入require库文件,并在该引入标签中引入主脚本文件( main.js )

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

2:首先在写程序之前需要分清楚需要加载的模块文件和模块文件的依赖关系:

(模块文件:其实就是js功能文件,封装起来的文件,只是返回一个公开使用这些文件的api接口以供我们在主文件使用)

我这个有3个文件:一个jquery 一个封装创建弹窗和相关方法的js文件 一个require文件

3:因为我要在弹窗这个模块文件中实现创建和运动的效果,其依赖的文件是jquery文件,所以要在弹窗这个模块文件中引入jquery文件

方法是:define([‘模块文件1‘,...],function(模块文件1返回的接口对象){  ...  })

我的弹窗模块文件代码:

 1 define([‘jquery‘],function($){
 2
 3         var loginBox={
 4             left:600,
 5             top:200,
 6             create:function(){
 7                 var box=document.createElement(‘div‘);
 8                 box.className=‘box‘;
 9                 box.innerHTML="<div class=‘title‘>title</div><div class=‘cont‘>cont</div>";
10                 document.body.appendChild(box);
11                 return this;
12             },
13
14             run:function(){
15                 $(‘.box‘).animate({
16                     left:this.left,
17                     top:this.top,
18                 });
19             }
20
21
22         }
23
24         return loginBox;
25
26
27  })

4:在main.js主文件中添加如下代码即可实现很好的效果:

require.config({ //配置jquery文件
        paths: {
            jquery: ‘jquery.min‘
        }
    })

    });*/

    require([‘jquery‘,‘div‘],function($,o){

            $(‘#btn‘).click(function(){
                    o.create().run(); //实现的链式操作:链式操作的关键点在于在方法中返回当前的对象应用
            })

    })

下班撸!!!!!!!!!!!!!!国庆大乐