关于seajs模块化的搭建
搭建seajs这个鬼吧!好像必须要用服务器起。。。。
然后我开始弄了个nodejs服务器。
安装nodejs:在网站上下载,安装,安装。。
打开命令行,输入cdm。
输入node -v ,输出版本信息,则安装成功。
建个空文件夹.
把路径弄进去!
安装express模块。
输入express,创建结构。
输入npm install 下载控件。
接下来介绍构建seajs,实现单页面跳转。
在主页面的html中引入sea.js文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>seaJS</title>
<style media="screen">
#content{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>hello</h1>
<ul>
<li id="index1">点击显示模块1</li>
<li id="index2">点击显示模块2</li>
</ul>
<div id="content"></div> <h1>bye</h1> <script type="text/javascript" src="js/sea.js"></script> <script type="text/javascript">
seajs.config({
// seajs的基础路径
base:".",
// 别名配置
alias:{
"jquery":"js/jquery-1.12.4.seajs.min",
"index1":"modules/index1/index1",
"index2":"modules/index2/index2",
}
});
// 自动跳转main.js
seajs.use("js/main");
</script>
</body>
</html>
跳转main.js。
define(function(require,exports,module){
// 定义js,给JS起别名
var $ = require("jquery");
var index1 = require("index1");
var index2 = require("index2"); // 实现跳转
$('#index1').on('click',function(){
// 跳转index1中的loadHtml方法
index1.loadHtml();
});
$('#index2').on('click',function(){
index2.loadHtml();
}); });
index1.js文件
define(function(require, exports, module){
var $ = require("jquery"); var loadHtml = function(){
// 把地址栏变为:index.html#index1
window.location.replace("index.html#index1");
// load().引入index1.html页面,function里面接需要引用的方法
$("#content").load("modules/index1/index1.html",function(){
console.log(1111111111);
});
};
// 暴露模块
module.exports.loadHtml = loadHtml;
});
index1.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title></title>
<style media="screen">
.div{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="div"> </div>
</body>
</html>
index2.js和index2.html和1都差不多。所以。你懂的。。。
关于seajs模块化的搭建的更多相关文章
- 初学seaJs模块化开发,利用grunt打包,减少http请求
原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...
- gulp基于seaJs模块化项目打包实践【原创】
公司还一直在延续使用jq+seajs的技术栈,所以只能基于现在的技术栈进行静态文件打包,而众所周知seajs的打包比较"偏门",在查了不少的文档和技术分享后终于琢磨出了自己的打包策 ...
- underscore javascript工具库支持seajs模块化
underscore是一个很有用的js工具库,但是好像默认不支持seajs模块化 新建一个文件例如叫做xx.js 谈后,键入 define(function(require,exports,modul ...
- seaJs模块化开发简单入门
随着前端技术的日益成熟,功能越来越丰富强大,规范也越来越健全,在这样的背景环境下很快便有了CommonJs.AMD.CMD等一系列规范,使前端发开趋向模块化.规范化.CMD模块化的代表之一就是国内开发 ...
- RequireJS与SeaJS模块化加载示例
web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有 Package的Javascript语言变得难以管理, ...
- seajs模块化作用理解(一句话)
seajs是js模块化的工具,主要大文件js不方便其他人理解,加载也较慢,seajs把各个功能模块分开,方便平行化开发,同时易于修改和理解,不用重复写功能需要时就应用 (有什么错误,请指正,缺少多谢补 ...
- SeaJS 模块化加载框架使用
SeaJS 是一个遵循 CMD 规范的模块化加载框架 CommonJS,CMD,AMD等规范后文会提到,这里主要先了解如何在代码中使用. 如果你有使用过nodejs ,那么理解起来就容易多了. 我们通 ...
- 轻轻谈一下seaJs——模块化开发的利器
"仅做一件事,做好一件事." 这个应该就是seaJs的精髓了. 我在自己的一些项目中使用过seaJs.对其算是了解一二.如今就班门弄斧.轻轻地谈一下. 首先上一段度娘的话: &qu ...
- seajs模块化加载框架使用
seajs是模块化加载框架.seajs.org已经打不开了,seajs的github.seajs速查文档 <!--如果完成下面4步,则seajs掌握了80%js模块化1.引入seajs的库 :& ...
随机推荐
- c#数据绑定(5)--LINQ
嶽永鹏/文 本实例以MS AdventureWorks2008Entities数据库为基础,演示了LINQ TO ENTITY.LINQ TO ENTITYSQL和LINQ TO ENTITYCLIE ...
- Css Js Loader For Zencart
Css Js Loader 描述:这个插件很早就出来了,可能知道人非常少 这个插件的功能是整合所有的网站的CSS和JS内容到一个文件里边. 因为CSS和JS文件到了一个文件,加快了程序的运行 在配合其 ...
- vs2015打包winform程序遇到的一系列问题
1.因为打包的时候用的是release版本的东西,所以就先把项目按release编译一下,然后一大波bug,后来修改了生成目标平台为x86,我的解决方案里面加上安装部署项目共5个(ui配置:活动rel ...
- 每个部门绩效成绩第二名 sql server 查询 ( 替代 not in )
原题: 集团中有多个部门,部门底下有多个员工,求每个部门绩效分数排名第二的人员,数据表结构如下: DEPAR NAME SCORE A ...
- C#如何通过Socket的方式获取httponly cookie
正常情况下C#可以使用HttpWebRequest.HttpWebResponse和CookieContainer类来获取Cookie,但是当Cookie设置为httponly,我们就不能用上面的方法 ...
- sql语句判断默认值为getdate()的约束是否存在
TFlowCreateTask--表名 AddDate--字段名 if not exists( select d.name from syscolumns a join sysobjects b on ...
- python中引用
python中的可变类型与不可变类型: 在讲python深浅拷贝之前,我们首先应该明白python中元素的类型:主要分为可变类型和不可变类型. 可变类型,就是值可以改变的类型有两个: 列表:list ...
- linux php 安装 memcache 扩展
1. memcached依赖于libevent,需要先安装libevent. tar zxvf libevent-2.0.21-stable.tar.gz cd libevent-2.0.21-sta ...
- 异步编程模型(APM)模式
什么是APM .net 1.0时期就提出的一种异步模式,并且基于IAsyncResult接口实现BeginXXX和EndXXX类似的方法. .net中有很多类实现了该模式(比如HttpWebReque ...
- JQUERY MOBILE 中文API站 和 官方论坛
中文API站:http://www.jqmapi.com/api1.2/preview/quickstartquide.html 官方论坛:http://bbs.phonegapcn.com/foru ...