关于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都差不多。所以。你懂的。。。
