前端MVC学习——模块发开发、seajs学习

　　这份学习链接已经足够了：http://seajs.org/docs/#intro

 

　　我假设你至少已经浏览过上述链接文档、并且掌握了基本的seajs基础知识~

　　手把手教你创建helloworld~

　　HelloWorld

　　程序员嘛，难免有helloworld情结~

　　平台：win7、chrome

　　① 创建helloworld文件夹

　　② 在helloworld文件夹下，创建index.html、style.css、init.js、data.js、test-export.js、还有一个 lib 文件夹

　　③ 将网上download来的sea.js和jquery-1.10.2.min.js放在由第②步创建的 lib 文件夹中

　　下面来看看我们在上述创建的文件里放入了什咩代码

　　sea.js和jquery-1.10.2.min.js是库文件，理论上不需要我们修改或添加什么，但是这里有一个小细节，因为sea.js专注模块化开发，对于jquery-1.10.2.min.js的库文件引入，我们也需要将jquery-1.10.2.min.js进行模块化，模块化处理很简单——打开jquery-1.10.2.min.js文件，将jquery-1.10.2.min.js所有代码包括在define中，并且返回$.noConflict();

　　jquery-1.10.2.min.js 具体如下：

?
1
2
3
4
5
6
7
define(function() {
      
     //jquery-1.10.2.min.js的源码部分
 
     return $.noConflict();
 
});

　　index.html:

?
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>seajs</title>
    </head>
    <body>
        <div id="content">
            <p class="author"></p>
            <p class="blog"><a href="#">blog</a></p>
        </div>
         
        <script src="./lib/sea.js"></script>
        <script>
            seajs.use("./init");
        </script>
         
    </body>
</html>

　　init.js

?
1
2
3
4
5
6
7
8
9
10
11
define(function(require,exports,module) {
    var $ = require('./lib/jquery-1.10.2.min');
    var data = require('./data');
    var css =  require('./style.css');
    var textExport = require('./test-export');
     
    $('.author').html(data.author);
    $('.blog a').attr('href',data.blog);
     
    textExport.test();   /在控制台输出hello world
});

　　data.js

?
1
2
3
4
define({
    "author": '西红柿炒番茄',
    "blog": 'http://www.cnblogs.com/Iwillknow/'
});

　　style.css

?
1
2
3
4
5
6
.author {<em id="__mceDel"> color: red;
    font-size: 16px;
}
.blog {
    font-size: 16px;
}</em>

　　test-export.js

?
1
2
3
4
5
define(function(require,exports,module) {
    exports.test = function() {
        console.log("hello wolrd");
    };
});

　　

posted @   gyy_Jade  阅读(428)  评论(0)  编辑  收藏  举报
编辑推荐：
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
阅读排行：
· ThreeJs-16智慧城市项目（重磅以及未来发展ai）
· .NET 原生驾驭 AI 新基建实战系列（一）：向量数据库的应用与畅想
· Ai满嘴顺口溜，想考研？浪费我几个小时
· Browser-use 详细介绍&使用文档
· 软件产品开发中常见的10个问题及处理方法
点击右上角即可分享
微信分享提示