写在前面

seajs是什么？

  1. Seajs是一个js文件加载器。
  2. 遵循 CMD 规范模块化开发，依赖的自动加载、配置的简洁清晰。
  3. 用于Web开发的模块加载工具，提供简单、极致的模块化体验

一：使用

文件目录：

demo_1.html

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="seajs/sea.js"></script>

    <script src="seajs-config.js"></script>

</head>

<body>

<script>

    //seajs.use(['./model.js','./model_2.js'])    //没有使用别名的写法

    seajs.use(['m','m_2'])    //使用base路径的写法

</script>

</body>

</html>

**注解：

seajs.use:用来在页面中加载一个或多个模块。

seajs-config.js文件

seajs.config({

 //两种写法，一个是paths，一个是base

    /*paths:{

        'baseUrl':'.'

    },

    alias:{

        'm':'baseUrl/model.js',

        'm_2':'baseUrl/model_2.js'

    }*/

    base:"./",

    alias:{

        'm':'model.js',

        'm_2':'model_2.js'

    }

})

**注解：

base:是sea.js的基础路径，也就是sea.js的路径。

paths:当目录比较深，或需要跨目录调用模块时，可以使用paths来简化书写。

如：

seajs.config({

  paths: {

    'gallery': 'https://a.alipayobjects.com/gallery',

    'app': 'path/to/app',

     ...

  }

});

//模块中

define(function(require, exports, module) {

   var underscore = require('gallery/underscore');

     // 加载的是 https://a.alipayobjects.com/gallery/underscore.js

   var biz = require('app/biz');

     // 加载的是 path/to/app/biz.js

});

paths 配置可以结合 alias 配置一起使用，让模块引用非常方便。

在使用中路径问题出错了。

路径问题：https://github.com/seajs/seajs/issues/258 seajs都有相关解释。

alias:别名配置，用变量表示文件，解决路径层级过深和实现路径映射

model.js文件：

define(function(){

    alert("AAA")

})

**注解：

define：用来定义一个模块。

model_2.js文件：

define(function(){

    alert("BBB")

})

结果：根据两个文件在seajs中的加载顺序，分别弹出AAA与BBB。

二：使用

页面：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="seajs/sea.js"></script>

    <script src="seajs-config.js"></script>

</head>

<body>

<div></div>

</body>

<script>

seajs.use(['jquery','m_3'],function($,m_3){

    //这里是callback

    //$对应jquery,在回调中使用的别名
　　//调用接口变量
   alert(m_3.msg);

})

</script>

</html>

seajs-config.js文件

seajs.config({

    /*paths:{

        'baseUrl':'.'

    },

    alias:{

        'm':'baseUrl/model.js',

        'm_2':'baseUrl/model_2.js'

    }*/

    base:"./",

    alias:{

        'jquery':'jquery.js',

        'm':'model.js',

        'm_2':'model_2.js',

        'm_3':'model_3.js'

    }

})

model_3.js文件：

define(function(require, exports, module){

    var $=require('jquery');

    $("div").text("模块中调用jquery操作dom");

    exports.msg="对外接口，变量a";

})

结果：

**注解：

require：用来获取指定模块的接口。

exports：用来在模块内部对为提供接口。

三：jQuery在seajs中的使用

需要使用seajs来定义一下，包装成一个模块。

define(function(){

    //jquery源代码

    return $.noConflict();

});

四：有时候，我们添加前端框架的时候，需要引入css文件时。

以bootstrap为例：两个文件，bootstrap.js与bootstrap.css文件。

bootstrap.js文件做一下的修改即可。

define(function(require, exports, module){

    require('bootstrap.css');

    //里面是bootstrap.js的源码 

})

seajs的使用的更多相关文章

  1. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

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

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

  3. JS模块化开发：使用SeaJs高效构建页面

    一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...

  4. 用spm2构建seajs项目的过程

    前言 Javascript模块化规范有CommonJs规范,和主要适用于浏览器环境的AMD规范,以及国内的CMD规范,它是SeaJs遵循的模块化规范.因为以前项目中用SeaJs做过前端的模块管理工具, ...

  5. jquery插件封装成seajs模块

    jquery直接在html中引入. jquery插件修改为: define(function (require, exports, moudles) { return function (jquery ...

  6. 快速上手seajs——简单易用Seajs

    快速上手seajs——简单易用Seajs   原文  http://www.cnblogs.com/xjchenhao/p/4021775.html 主题 SeaJS 简易手册 http://yslo ...

  7. seajs学习一天后的总结归纳

    公司项目最近需要将js文件迁移到seajs来进行模块化管理,由于我以前主要接触模块化开发是接触的AMD规范的requireJS,没有接触过CMD规范,而且在实际项目中还没有用过类似技术.于是,我非常兴 ...

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

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

  9. 新手 gulp+ seajs 小demo

    首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...

随机推荐

  1. Hawk 6. 高级话题：子流程系统

    子流程的定义 当流程设计的越来越复杂,越来越长时,就难以进行管理了.因此,采用模块化的设计才会更加合理.本节我们介绍子流程的原理和使用. 所谓子流程,就是能先构造出一个流程,然后被其他流程调用.被调用 ...

  2. UWP开发之Mvvmlight实践六：MissingMetadataException解决办法（.Net Native下Default.rd.xml配置问题）

    最近完成一款UWP应用,在手机端测试发布版(Release)的时候应用莫名奇妙的强行关闭,而同样的应用包在PC端一点问题都没有,而且Debug版在两个平台都没有问题,唯独手机的Release版有问题. ...

  3. nodejs项目mysql使用sequelize支持存储emoji

    nodejs项目mysql使用sequelize支持存储emoji 本篇主要记录nodejs项目阿里云mysql如何支持存储emoji表情. 因由 最近项目遇到用户在文本输入emoji进行存储的时候导 ...

  4. python通过protobuf实现rpc

    由于项目组现在用的rpc是基于google protobuf rpc协议实现的,所以花了点时间了解下protobuf rpc.rpc对于做分布式系统的人来说肯定不陌生,对于rpc不了解的童鞋可以自行g ...

  5. docker – 你应该知道的10件事

      容器并不是一个全新的技术,但这并不妨碍Docker如风暴一样席卷整个世界. 如果你在IT圈里,你一定听说过Docker.就算与其他热门技术,如:Puppet/Chef,Hadoop或者MongoD ...

  6. TFS 2015 敏捷开发实践 – 看板的使用

    看板在现代应用开发过程中使用非常广泛,不管是使用传统的瀑布式开发还是敏捷开发,都可以使用看板管理.因为看板拥有简单的管理方法,直观的显示方式,所以很多软件开发团队选择使用看板进行软件开发管理.本文不在 ...

  7. Linux上课笔记--随手记Linux命令

    初次接触Linux就是感觉这系统不够友好不够人性化,因为首先接触电脑就是win,图形化界面什么操作都可以清晰看到.随着更多的接触越来越发现Linux的强大,虽然我只是一个小白,可我就是爱上他了.现在就 ...

  8. TypeScript

    TypeScript: Angular 2 的秘密武器(译)   本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch? ...

  9. EChart系列：在echart3中使用百度地图扩展之后，如何获取到百度地图对象

    最近做项目想要在百度地图上叠加显示echart的散点图,然后根据地图的缩放等级和区域范围要显示不同的散点图,这中间折腾了好久.功能要求包括: (1)底图使用百度地图: (2)可以在地图上叠加显示ech ...

  10. 一年之计在于春，2015开篇：PDF.NET SOD Ver 5.1完全开源

    前言: 自从我2014年下半年到现在的某电商公司工作后,工作太忙,一直没有写过一篇博客,甚至连14年股票市场的牛市都错过了,现在马上要过年了,而今天又是立春节气,如果再不动手,那么明年这个无春的年,也 ...