前端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 具体如下：
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
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
define({
"author": '西红柿炒番茄',
"blog": 'http://www.cnblogs.com/Iwillknow/'
});
style.css
.author {
color: red;
font-size: 16px;
}
.blog {
font-size: 16px;
}
test-export.js
define(function(require,exports,module) {
exports.test = function() {
console.log("hello wolrd");
};
});
前端MVC学习——模块发开发、seajs学习的更多相关文章
- Flutter开发进阶学习指南Flutter开发进阶学习指南
Flutter 的起源 Flutter 的诞生其实比较有意思,Flutter 诞生于 Chrome 团队的一场内部实验, 谷歌的前端团队在把前端一些"乱七八糟"的规范去掉后,发现在 ...
- 吴裕雄--天生自然Android开发学习：android开发知识学习思维导图
- 侃侃前端MVC设计模式
前言 前端的MVC,近几年一直很火,大家也都纷纷讨论着,于是乎,抽空总结一下这个知识点.看了些文章,结合实践略作总结并发表一下自己的看法. 最初接触MVC是后端Java的MVC架构,用一张图来表示之— ...
- Web前端MVC框架的意义分析
前言: Web前端开发是Web技术发展中的一个重要组成部分,在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点,即以页面为主体来展示界面中的信息.然而随着科学技术的不断进步,Web前 ...
- 前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...
- 前端MVC学习总结——AngularJS验证、过滤器
前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...
- 前端MVC学习笔记（一）——MVC概要与angular概要、模板与数据绑定
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...
- 前端MVC Vue2学习总结（一）——MVC与vue2概要、模板、数据绑定与综合示例
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.Vue是框架而jQuery则是库. 1.2.AMD与CM ...
- iOS开发如何学习前端(2)
iOS开发如何学习前端(2) 上一篇成果如下. 实现的效果如下. 实现了一个横放的<ul>,也既iOS中的UITableView. 实现了当鼠标移动到列表中的某一个<li>,也 ...
随机推荐
- Objective-C 【电商APP应用代码-系统分析-详细注释-代码实现】
------------------------------------------- 电商APP应用 ************************************************ ...
- Xcode6 模拟器不显示键盘
在学习加法计算器时,程序运行后发现点击模拟器上的输入框时有时候键盘可以弹出来,有时候又弹不出来. 网上查询结果只需要在模拟器的菜单中找到hardware -> keyboard -> 取消 ...
- java静态代码块、初始化块和构造方法的执行顺序
分析:当执行new Child()时,它首先去看父类里面有没有静态代码块,如果有,它先去执行父类里面静态代码块里面的内容,当父类的静态代码块里面的内容执行完毕之后,接着去执行子类(自己这个类)里面的静 ...
- 阿里巴巴2013年实习生笔试题A
一.单项选择题 1.下列说法不正确的是:(B) A.SATA硬盘的速度速度大约为500Mbps/s B.读取18XDVD光盘数据的速度为1Gbps C.前兆以太网的数据读取速度为1Gpbs D.读取D ...
- Template_17_metaprogram
1,模板实例化机制是一种基本的递归语言机制,可以用于在编译期执行复杂计算.2,枚举值和静态常量在原来的C++编译器中,在类声明的内部,枚举值是声明"真常值"(常量表达式)的唯一方法 ...
- android:layout_weight越大所占比例越大和越大所占比例越小的两个例子
摘要: 我的技术博客经常被流氓网站恶意爬取转载.请移步原文:http://www.cnblogs.com/hamhog/p/3907146.html,享受整齐的排版.有效的链接.正确的代码缩进.更好的 ...
- Vim保存文件命令 ":wq" 与 ":x" 的区别
CSDN转载 [1] Vim是Unix/Linux系统最常用的编辑器之一,在保存文件时,我通常选择":wq",因为最开始学习vim的时候,就只记住了几个常用的命令:也没有细究命令的 ...
- <Linux下FTP服务的搭建>
默认安装好ftp软件包匿名用户是可以下载的.匿名以后可以上传:anon_upload_enable=YES# getsebool -a | grep ftpallow_ftpd_anon_write ...
- SequoiaDB数据库集群部署
一般在多机环境下部署数据库的集群模式是比较繁琐的,下面我来分享一个如何通过shell脚本的方式简单.方便地部署我们的集群. 首先,我们要给机器配置信任关系,这样我们就无需手动的输入密码来执行ssh和s ...
- 【Delphi】圆角窗体
procedure TForm1.FormCreate(Sender: TObject); var hr :thandle; begin hr:=createroundrectrgn(1,1,widt ...