模块化之seaJs学习和使用

使用seaJs也有一阵子了,一直也想抽个时间写个这方面的博客,直到今天才写……也许写的不是很完善,但跟大伙分享也是一种乐趣,不对之处欢迎指出。[抱拳]

时间有限,我这里不过多介绍前端模块化,有兴趣可以去了解。

一、写在前面

seaJs出自前端工程师玉伯之手,一个文件就是一个模块,实现JavaScript的模块化及按模块加载。使用SeaJS可以提高JavaScript代码的可读性和清晰度,确保各个JS文件先后加载的顺序,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便代码的编写和维护。seaJs遵循的是CMD规范,所以引用一些遵循AMD规范的JS代码,需要进行一些封装处理。譬如常用的JQ就遵循的AMD规范,引用时需要做一些封装:

define(function(){
    //jquery源代码
    return $.noConflict();
});

seaJs浏览器兼容上理论兼容所有的浏览器,包括移动端,所以兼容性很好。同时,API少加上配置简洁清晰,学习成本较低。

二、seaJs的使用

1、模块定义。

define(function(require,exports, module){

});

require是可以把其他模块导入进来的一个参数,而exports是可以把模块内的一些属性和方法导出的,module 是一个对象,上面存储了与当前模块相关联的一些属性和方法。

2、暴露及引入变量

一个模块想要对外暴露变量(函数也是变量),可以用module.exports = variable;,一个模块要引用其他模块暴露的变量,用var ref = require(‘module_name‘);就拿到了引用模块的变量。

3、加载模块,seajs.use 用来在页面中加载模块。通过 use 方法,可以在页面中加载任意模块。

语法: seajs.use(a,function(a){...});,也可以加载多个模块:seajs.use([‘a‘,‘b‘],function(a,b){...});回调函数可选,当没有回调函数的时候,seajs.use(a);即可

来一个最简单的例子。创建学习项目,相关文件及路劲如下:

index.html如下:

<!DOCTYPE html>
<html>
<head>
    <title>seaJs学习 --by WZQ</title>
</head>
<body>
<script src="js/sea.js"></script>
<script>
    seajs.use(‘./js/index.js‘);
</script>
</body>
</html>

index.js如下:

define(function(require,exports, module){
    alert(1);
});

打开index.html,能执行弹出alert框,就说明引用seajs成功

接着说一下sea.config相关方面的配置。

新建一个seajs.config.js

seajs.config({
    // 指定base目录
    base: ‘./js‘,
    // 目录长的可以声明别名, 这点十分人性化
    alias: {
        index: index.js // 左边index是别名,可以直接使用,右边是路径,由于base的存在,只需要雪名称即可,同时.js是可以去掉的
    },
    // 其他配置自行百度,重点是路径的配置
    charset: ‘utf-8‘,
    timeout: 20000,
    debug: 0 ,
    preload: ["jquery"]
});     

有了配置文件,就方便管理全部的js文件,使用别名,还可以不用担心路劲问题,以后搬运js文件的时候也只需要改配置文件就好了。所以引用的时候使用别名,可以这样写:

seajs.use(‘index‘);(注意引入配置js)

接着练习一个复杂点的例子:目录结构:

配置文件seajs.config.js给他们的别名如下:

seajs.config({
    // 指定base目录
    base: ‘./js‘,
    // 目录长的可以声明别名, 这点十分人性化
    alias: {
        ‘index‘: ‘index.js‘, // 左边index是别名,可以直接使用,右边是路径,由于base的存在,只需要雪名称即可,同时.js是可以去掉的
        ‘otherJs‘: ‘a‘,
        ‘bJs‘:‘b‘,
        ‘jquery‘: ‘jquery.js‘
    },
    // 其他配置自行百度,重点是路径的配置
    charset: ‘utf-8‘,
    timeout: 20000,
    debug: 0 ,
    preload: ["jquery"]
});

各个JS文件如下:

index.js

define(function(require,exports, module){
    function Example(){
        this.people = ‘WZQ‘;
        this.address = ‘广州‘;
    }
    Example.prototype.initFn = function(){
        console.log(this.people + ‘在‘ + this.address);
    }
    module.exports = Example;
});

a.js

define(function(require,exports, module){
    function Other(){
        this.nowTime = ‘2018年10月10日‘
    }

    module.exports = Other;
});

b.js

define(function(require,exports, module){
    var $ = require(‘jquery‘),
        AObj = require(‘otherJs‘);

    var aObj = new AObj();
    function TestObj(){
        this.time = aObj.nowTime;
    }
    TestObj.prototype.getTime = function(){
        return this.time;
    }
    var testObj = new TestObj();

    var indexFn = {
        init: function(){
            var time = testObj.getTime();
            console.log(‘这是b.js打印出来的时间:‘+ time);
            $(‘body‘).css(‘background‘, ‘red‘);
        }
    }
    indexFn.init();
});
index.html
<!DOCTYPE html>
<html>
<head>
    <title>seaJs学习 --by WZQ</title>
</head>
<body>
<script src="js/sea.js"></script>
<script src="js/seajs.config.js"></script>
<script>
    seajs.use([‘index‘, ‘otherJs‘, ‘jquery‘, ‘bJs‘], function(Example, Other, $){
        var example = new Example();
        example.initFn();

        var other = new Other();

        console.log(‘今天是‘ + other.nowTime);
        console.log($(‘body‘).length); //引入jquery之后能直接用$是因为对JQ做了CMD封装,最后一行代码return $.noConflict();的缘故
    });
</script>
</body>
</html>

然后最后运行结果如下即可:

原文地址:https://www.cnblogs.com/wuzhiquan/p/9767997.html

时间: 2024-11-05 20:40:07

模块化之seaJs学习和使用的相关文章

javascript 模块化 (切记:学习思想)

模块化(切记:学习思想) 如果不用模块化编写代码,那么会具有以下问题: 代码杂乱无章,没有条理性,不便于维护,不便于复用 很多代码重复.逻辑重复 全局变量污染 不方便保护私有数据(闭包) 模块化的基本实现:闭包的自调用函数 //日期控件 var DatePicker = (function(){ return { init(){ } } })(); //Header // tabbar // login //Content // sidebar // table //Footer var KTV

模块化之SeaJS

模块化(之SeaJS) 刚接触的童鞋可能会有很多疑惑,比喻:什么是模块?模块的目的是干嘛呀?接着就想,玛德怎么样实现模块化呢? 不要急,博主正是带着这三个问题来写这篇文章的. 一,什么是模块化? 在前端开发领域,一个模块,可以是JS 模块,也可以是 CSS 模块,或是 Template 等模块.在 Sea.js 里,我们专注于 JS 模块(其他类型的模块可以转换为 JS 模块):模块是一段 JavaScript 代码,具有统一的基本书写格式.模块之间通过基本交互规则,能彼此引用,协同工作(怎么书

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

原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最近在学习seaJs和AngualrJs的指令和服务,感觉angularjs实在太强大了,好吧,步入主题,今天在深入了解seaJs的时候发现了一款神器,不过这款神奇貌似没有更新和维护了,但我测试了一下,还是可以用的. 这款神奇就是SeaJS 组件库 ,Sea.js 是一个适用于 Web 浏览器端的模块

2.精通前端系列技术之JS模块化开发-深入学习seaJs(四)

深入学习seajs 配置信息 alias : 别名配置 paths : 路径配置 vars : 变量配置 map : 映射配置 preload : 预加载项 debug : 调试模式 base : 基础路径 charset : 文件编码 深入学习seajs module id : 模块唯一标识 uri : 模块绝对路径 dependencies : 当前模块依赖 exports : 当前模块对外接口 require.async 异步加载模块 // JavaScript Document //va

该如何理解AMD ,CMD,CommonJS规范--javascript模块化加载学习总结

是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激. 本篇默认读者大概知道require,seajs的用法(AMD,CMD用法),所以没有加入使用语法. 1.为何而生: 这三个规范都是为javascript模块化加载而生的,都是在用到或者预计要用到某些模块时候加载该模块,使得大量的系统巨大的庞杂的代码得以很好的组织和管理.模块化使得我们在使用和管理代码的时候不那么混乱,而且也方便了

seajs学习一天后的总结归纳

公司项目最近需要将js文件迁移到seajs来进行模块化管理,由于我以前主要接触模块化开发是接触的AMD规范的requireJS,没有接触过CMD规范,而且在实际项目中还没有用过类似技术. 于是,我非常兴奋的开始了seajs的学习,正好对模块化开发仰慕已久,终于有机会大展身手了! 一开始总是有点曲折的,我照着玉伯的github上的教程一步步来,然后发现在我引入jquery的时候,require到的jquery竟然是undefined 经过一番摸索,我发现原来jquery是基于amd规范的,seaj

自学了三天的SeaJs学习,解决了前端的一些问题,与小伙伴们一起分享一下!

我为什么学习SeaJs ? [第一]:为了解决项目中资源文件版本号的问题,以及打包压缩合并等问题. [第二]:好奇心和求知欲.[我发现很多知名网站也都在使用( qq空间 , msn ,淘宝 等等),而且 SeaJs 也得到了很好的推广与应用]. [第三]:经过了解得知 淘宝的 玉伯 是 湖南炎陵 人,觉得他很牛X. [强烈]给小伙伴们推荐一个   玉伯   的讲的 SeaJs PDF 学习资料,下载地址:http://pan.baidu.com/s/1CCz4C 第一步 [ 版本号问题的解决] 

seajs学习笔记(基础)

一:前端开发中常遇到的问题       如果我们的网站简单的时候,结构上也许不会有什么问题,但是如果我们的网站越来复杂的时候(比如功能越来越多的时候,加入项目的人越来越多的时候),我们书写的代码就会遇到下面的两个问题: 1. 恼人的命名冲突 比如我们多人开发一个项目,事先由我自己写好了一个共公的组件库common.js供大家调用,里面的包括 function tab(){ 实现代码: }; function drag(){ 实现代码: }; function dialog(){ 实现代码: };

seajs学习笔记一

一.模块化管理的重要性     1.解决冲突问题 2.解决性能问题 3.解决依赖问题 二.为何选择seajs 1.有完整的中文文档 2.符合中国国情 三.seajs如何使用 1.引入seajs库文件 2.如何变成模块 define /*引入好seajs后如何将js文件变成模块*/ define(function(require,exports,module){ /*require,exports,module-seajs规定写法不可修改,变值,重命名*/ /*exports:对外接口 */ fu