码迷,mamicode.com
首页 > Web开发 > 详细

sea.js简单实现(转载)

时间:2016-07-11 20:54:20      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

原文链接:http://my.oschina.net/centerLife/blog/138251

源代码链接https://github.com/lvshuang/seajs_exampl

功能:点击一个div弹出一个框 (CSS样式没写,主要是为了使用sea.js,加深对sea.js的熟练)

技术分享

目录图:

技术分享  技术分享

代码

alert.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点我点我。。。</title>
    <style>
        #al{
            padding: 10px 20px;
            background: green;
            float: left;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="al">点我</div>
    <script src="../js/alert/sea-debug.js?t=123" data-config="./js/alert/sea-js-config.js?t=123"></script>
    <script type="text/javascript">
        seajs.use([‘./js/alert/app‘],function(app){
            app.script_load(‘alert‘)
        })
    </script>
</body>
</html>

路由需要添加index.js

router.get(‘/alert‘,function(req,res,next){
  res.render(‘alert‘,{ title: ‘sea.js‘ });
})

 app.js

/**
 * Created by Administrator on 2016/7/8.
 * 项目主模块
 */
define(function(require,exports,module){
    //加载jQuery,并把$设置为全局变量
    window.$ = window.jQuery = $ = require(‘/jquery‘)
    /*require(‘/jquery.validate‘);*/
    //定义一个全局的模块加载函数.module为模块名,options为参数
    exports.script_load = function(module,options){
        //使用require.async异步加载模块。模块需要提供一个固定的对外调用接口,这里定义为run。
        require.async(‘/js/alert/alert.js‘,function(m){
            if(typeof(m.run) === ‘function‘){
                m.run(options)
            }
        });
    }
    window.script_load = exports.script_load();
});

 其中require.async(a,b(m){})函数a是路径,如果a是null,如果不为空,比如:"/js/alert/alert.js",不能编写 "js/alert/alert.js"或者"./js/alert/alert.js",会报if(typeof(m.run) === ‘function‘) 的 undefined bug;b函数m则会报undefined错误,具体错误原因我也在寻求。。。

alert.js

/**
 * Created by Administrator on 2016/7/8.
 */
define(function(require,exports,module){
    exports.run = function(){
        var $ = function(id){
            return document.getElementById(id);
        }
       /* $(‘al‘).click(function(){
            alert(‘弹出一个框。。。‘);
        });*/
        $(‘al‘).onclick = function(){
            alert(‘弹出一个框。。。。‘)
        }
    };
})

没使用jQuery,所以click()函数使用会报错,使用onclick()

sea-js-config.js

seajs.config({
  // 配置插件
  plugins: [‘shim‘],

  // 配置别名
  alias: {
    // 配置 jquery 的 shim 配置,这样我们就可以通过 require(‘jquery‘) 来获取 jQuery
    ‘jquery‘: {
      src: ‘/jquery.js‘,
      exports: ‘jQuery‘
    },
    // 配置 jquery validate
    ‘jquery.validate‘: {
      src: ‘/jquery.validate.js‘,
      deps: [‘jquery‘]//validate依赖jquery,所在在这里做了配置
    }
  }
});

 

sea.js简单实现(转载)

标签:

原文地址:http://www.cnblogs.com/six4/p/5661328.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!