关于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的库 :& ...
随机推荐
- java_ee_sdk-7u2的安装与 启动
1.在oracle官方网站上下载JAVA EE SDK,现在最新的版本是java_ee_sdk-7u2 2.最新的版本是免安装模式,所以比较方便.但是通常免安装模式没有快捷方式,不知道怎么启动.怎么使 ...
- Web之路笔记之二 - CSS Positioning
CSS中控制各个Block element的位置方式之一,tag为position,有4种属性. 1. static 一般网页默认的属性,表示element根据页面正常流(normal flow)进行 ...
- Elasticsearch5.0.1 + Kibana5.0.1 + IK 5.0.1安装记录
最近工作需要,开始研究ES,当前ES的最新版本为5.0.1,从之前的2.x的版本号一下升级到5.x,主要是之前Elastic的产品版本号因为收购等原因很乱,ES 2.X版本的和Kibana 4.x版本 ...
- 简单谈一谈JavaScript中的变量提升的问题
1,随笔由来 第一天开通博客,用于监督自己学习以及分享一点点浅见,不出意外的话,应该是一周一更或者一周两更. 此博客所写内容主要为前端工作中遇上的一些问题以及常见问题,在此基础上略微发表自己的一点浅 ...
- 从下往上看--新皮层资料的读后感 第三部分 70年前的逆向推演- 从NN到ANN
第三部分 NN-ANN 70年前的逆向推演 从这部分开始,调整一下视角主要学习神经网络算法,将其与生物神经网络进行横向的比较,以窥探一二. 现在基于NN的AI应用几乎是满地都是,效果也不错,这种貌似神 ...
- C# 反射浅析
反射是一个运行库类型发现的过程.通过反射可以得到一个给定程序集所包含的所有类型的列表,这个列表包括给定类型中定义的方法.字段.属性和事件.此外,通过反射也可以动态的发现一组给定类支持的接口.方法的参数 ...
- VHDL学习之模块调用
http://wenku.baidu.com/link?url=SsRPUVQAOKDR8yWfDhQlceCwfZQkI-KQMLFKTDGAh3KAPr2NwEgvj0d_EZjdnsB99Upp ...
- Node.js 事件循环
Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发. Node.j ...
- Kotlin Groovy Style Builder
fun main(args:Array<String>):Unit{ val x = a{ aa{ +"01.01" +"01.02" } aa{ ...
- 深入了解 Scala 并发性
2003 年,Herb Sutter 在他的文章 “The Free Lunch Is Over” 中揭露了行业中最不可告人的一个小秘密,他明确论证了处理器在速度上的发展已经走到了尽头,并且将由全新的 ...