• sea.js 学习


    开篇:终于学习了sea.js的使用了,因为它是一个模块加载工具,所以首先要了解javascript的模块编程,然后对sea.js的了解和使用

    javascript 模块编程

    为什么要模块化编程,为了让开发人员只需要实现业务逻辑代码,只要加载别人写好的模块化代码即可。
    '简单的说,模块化就是实现特定功能的一组方法'

    javascript 本身并不支持模块,但是却可以实现“模块”的效果。
    从原始写法,将函数和变量写在一起的,即可称为模块,但是这样会污染全局变量。

    对象写法

    var module = new Object({
    	_count : 0,
    	m1 : function(){
    		// 
    	},
    	m2 : function(){
    		//
    	}
    });
    

    对象写法的缺点是模块的方法和变量可能会被重写。

    高级写法

    var module = (function(mod){
    	mod.m1 = function(){
    
    	}
    	return mod;
    })(jquery || {});
    

    sea.js 是什么?

    sea.js 是一款web开发 模块加载工具
    因为sea.js 遵循CMD 模块定义规范,所以有必要了解下

    碎言:很早就看到过AMD 和CMD ,但是每次看到都不太明白,因为当时也没有用到,所以就没有认真的去看,估计当时去看,也看不明白,今天终于有机会,把它弄清楚了

    AMD 和 CMD

    CMD common module definitime 基本模块定义,一个文件就是一个模块
    AMD asynchronous module definitime 异步模块定义,它采用异步加载模块方式,模块的加载不影响后面语句的运行

    你可能会问,他们之间有什么区别呢?我暂时了解到的就是一CMD是同步的,AMD是异步的,语法不一样。

    主要用来解决什么问题?

    主要用来解决多模块,命名冲突等问题,举例来说,当一个项目很大时,团队之间的合作可能存在命名冲突的问题,可能有些js文件需要优先加载,但是其他成员不知道,这个时候就需要sea.js 了,简单的从我个人理解来看,它就是一种规范。
    能解决什么问题,网上描述的太多了,可自行搜索

    sea.js 怎么用?
    要了解一个东西的使用,首先要查看它的API 接口,sea.js API接口
    在使用seajs 时,首先要加载seajs,为了让seajs 能更快获取自身路径,建议手动添加id属性
    下面列出个人经常在前端中使用的代码,以前我们可能是如下加载的

    <script type="text/javascript" src="js/lib/zepto-1.1.4.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    
    

    学习 sea.js 7个API

    sea.js 配置 seajs.config

    详细的就不介绍了,这里只介绍几个常用的,

    seajs.config({
    	// sea.js 的基础路径
    	"base" : "",
    	// 路径配置 ,如果目录较深,或跨目录时,使用paths配置
    	"paths" : "",
    	// 别名配置,方便调用
    	"alias" : 
    });
    

    seajs.use 加载一个或多个模块

    // 加载多个模块,在加载完成时,执行回调
    seajs.use(['./a','./b'],function(a,b){
    	a.dosomething();
    	b.dosomething();
    });
    

    seajs 与 DOM 优先加载没有关系,如果确保DOM ready,需要使用jquey 等类库来实现

    define 定义模块,seajs 推崇一个模块一个文件

    define 是一个全局函数,用来定义模块
    define(factory) ,factory 可以是字符串、json对象、函数
    factory 为对象、字符串时, 模块的接口就是 对象或字符串
    factory 为函数时,表示模块的构造方法,执行构造方法,可以得到函数向外提供的接口,factory 在执行,会默认传入三个参数:require、exports、module

    define(function(require,exports,module){
    	// 模块代码
    });
    

    define(id?, deps?, factory)

    define 也可以接受两个以上的参数,id 表示 模块标识,deps 数组表示模块依赖,例如

    define("a",['./b.js'],function(require,exports,module){
    	// 模块代码
    });
    

    前两个参数可省略,可以通过构建工具生成
    下面来说下factory函数中的三个参数
    require 是一个方法,用来接受模块标识,用来获取其他模块提供的接口,可以使用相对路径和绝对路径
    require.async(id, callback?) 用来在模块内部异步加载模块,加载完成后,执行指定回调
    exports 是一个对象,用来提供模块接口,还可以使用return 直接向外提供接口
    module 是一个对象,存储了当前模块相关联的属性和方法
    module.uri String 模块绝对路径
    module.dependencies Array 当前模块的依赖
    module.exports Object 当前模块对外提供的接口

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

    require 的参数必须字符串直接量
    动态依赖,推荐使用 require,async,异步加载一个或多个模块
    require.async(['./a','./b'],function(a,b){
    // 执行回调
    })

    在项目中使用

    简单的使用

    首先加载sea.js ,然后加载 后面的两个模块,这样写可以,但是就失去了,sea.js 的意义,和我之前引入没有什么区别,下面我们使用 模块化的写法来加载

    <script type="text/javascript" src="js/lib/sea-2.2.1.min.js" id="seajsnode"></script>
    <script type="text/javascript">
    
    seajs.config({
    	"base" : "./js/",
    	"alias" : {
    		"zep" : "./js/lib/zepto-1.1.4.min.js"
    	}
    });
    
    seajs.use(["common","index"]);
    </script>
    
    // jquery.js
    define(function(require, exports, module){
    	// jquery 代码
    module.exports = $.noConflict(true);
    });
    
    // common.js
    define(function(require,exports,module){
    	var $ = require("lib/jquery.js");
    	exports.doit = function(){
    		console.log($("body"));
    	}
    	
    });
    
    // index.js
    define("index",["common"],function(require,exports,module){
    	var common = require("common");
    	console.log($);
    	common.doit();
    
    });
    

    总结

    以后每一个文件都是一个模块,每一个文件都要遵循CMD规范去编写,就连我们的jquery库也是

  • 相关阅读:
    多态
    课堂动手动脑
    凯撒加密
    构造方法、类初始化
    课堂动手动脑------随机数的产生
    课堂内容小结
    JAVA数字求和
    运行上次失败用例(--lf 和 --ff)
    conftest.py作用范围
    fixture作用范围
  • 原文地址:https://www.cnblogs.com/geek12/p/4994940.html
Copyright © 2020-2023  润新知