搭建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模块化的搭建的更多相关文章

  1. 初学seaJs模块化开发，利用grunt打包，减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  2. gulp基于seaJs模块化项目打包实践【原创】

    公司还一直在延续使用jq+seajs的技术栈,所以只能基于现在的技术栈进行静态文件打包,而众所周知seajs的打包比较"偏门",在查了不少的文档和技术分享后终于琢磨出了自己的打包策 ...

  3. underscore javascript工具库支持seajs模块化

    underscore是一个很有用的js工具库,但是好像默认不支持seajs模块化 新建一个文件例如叫做xx.js 谈后,键入 define(function(require,exports,modul ...

  4. seaJs模块化开发简单入门

    随着前端技术的日益成熟,功能越来越丰富强大,规范也越来越健全,在这样的背景环境下很快便有了CommonJs.AMD.CMD等一系列规范,使前端发开趋向模块化.规范化.CMD模块化的代表之一就是国内开发 ...

  5. RequireJS与SeaJS模块化加载示例

    web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有 Package的Javascript语言变得难以管理, ...

  6. seajs模块化作用理解（一句话）

    seajs是js模块化的工具,主要大文件js不方便其他人理解,加载也较慢,seajs把各个功能模块分开,方便平行化开发,同时易于修改和理解,不用重复写功能需要时就应用 (有什么错误,请指正,缺少多谢补 ...

  7. SeaJS 模块化加载框架使用

    SeaJS 是一个遵循 CMD 规范的模块化加载框架 CommonJS,CMD,AMD等规范后文会提到,这里主要先了解如何在代码中使用. 如果你有使用过nodejs ,那么理解起来就容易多了. 我们通 ...

  8. 轻轻谈一下seaJs——模块化开发的利器

    "仅做一件事,做好一件事." 这个应该就是seaJs的精髓了. 我在自己的一些项目中使用过seaJs.对其算是了解一二.如今就班门弄斧.轻轻地谈一下. 首先上一段度娘的话: &qu ...

  9. seajs模块化加载框架使用

    seajs是模块化加载框架.seajs.org已经打不开了,seajs的github.seajs速查文档 <!--如果完成下面4步,则seajs掌握了80%js模块化1.引入seajs的库 :& ...

随机推荐

  1. 关于codeblock中一些常用的快捷键（搬运）

    关于codeblock中一些常用的快捷键(搬运) codeblock作为一个常用的C/C++编译器,是我最常用的一款编译器,但也因为常用,所以有时为了更加快速的操作难免会用到一些快捷键,但是因为我本身 ...

  2. 数字图像处理作业使用OpenCV - 块提取

    今天要记录的是树图第二次作业的第二题,Image Patch Extraction.这个概念真的不难懂,但是如果要我实际写的话,还真的不知道要怎么去遍历图像矩阵来提取块.在此要多谢邓大神的热心帮助,告 ...

  3. html中给表格添加斜线

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. js效果-多选只能选两项,如果超出自动取消第一次选的

    这个效果很有意思,个人觉得难点在于点击选中状态的多选的数组操作,以下是代码,感谢落梨 <!DOCTYPE> <html> <head> <title> ...

  5. 深入浅出Mybatis系列（八）---mapper映射文件配置之select、resultMap

    上篇<深入浅出Mybatis系列(七)---mapper映射文件配置之insert.update.delete>介绍了insert.update.delete的用法,本篇将介绍select ...

  6. height和line-height有什么区别？

    <div style="height:120px;">是用来规定整个div的高度,文字还是默认会在顶端开始向下排列<div style="line-he ...

  7. hdu 5929 Basic Data Structure

    ゲート 分析: 这题看出来的地方就是这个是左结合的,不适用结合律,交换律. 所以想每次维护答案就不怎么可能了.比赛的时候一开始看成了异或,重读一遍题目了以后就一直去想了怎么维护答案...... 但是很 ...

  8. Windows Store App 全球化 资源匹配规则

    上面几个小节通过示例介绍了如何引用资源以及设置应用语言来显示不同语言的信息,这些示例都只是添加了简体中文和英语两种语言来显示资源,而在一些复杂的应用程序中,字符串资源可能会被定义成多种语言,文件资源也 ...

  9. JavaScript Array对象sort() 方法小结

    sort() 方法用于对数组的元素进行排序. 语法arrayObject.sort(sortfunction) 参数sortfunction 可选.规定排序顺序.必须是函数. 返回值对数组的引用.请注 ...

  10. OC--编码建议

      原文 http://www.cocoachina.com/ios/20151118/14242.html   本文是投稿文章,作者: IOS_Tips(微信公众号) “神在细节之中” Object ...