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

2024-08-27 13:32

本文主要是介绍快速上手seajs——简单易用Seajs,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Seajs 简易文档:http://yslove.net/seajs/

什么是Seajs

  1. Seajs是一个加载器 http://kb.cnblogs.com/page/211942/
  2. 遵循 CMD 规范模块化开发,依赖的自动加载、配置的简洁清晰。
  3. 兼容性

    • Chrome 3+
    • Firefox 2+
    • Safari 3.2+
    • Opera 10+
    • IE 5.5+


导入Seajs库

  1. 去官网下载最新的seajs文件, http://seajs.org/docs/#downloads
  2. 在页尾引入seajs: 
    <script src="/site/script/sea.js"></script>
  3. 然后在它下面写模块的配置和入口。

    // seajs 的简单配置
    seajs.config({base: "../sea-modules/",alias: {"jquery": "jquery/jquery/1.10.1/jquery.js"}
    });// 加载入口模块
    seajs.use("../static/hello/src/main");

配置和入口

这里解释下配置和入口的意思。

配置

通常在配置上修改seajs的路径和别名。

seajs的 路径是相对于前面引入的seajs文件的 。假如是这样的目录结构:

examples/|-- index.html|`--about|     |-- news.html|`-- script|-- seajs.js|-- jquery.js`-- main.js

我们平时如果我们在index.html上引用main.js路径应该是这样写的 script/main.js ,从news.html引用main.js就要这样写, ../script/main.js 。

而在seajs是相对于seajs文件的,一律直接使用 main.js 就OK了,是不是很方便呢?

既然这么方便那在什么情况需要配置呢?一般情况是用不到的。但是假如你的路径特别深 或者要做路径映射的时候它的作用就来了。下面介绍下常用的几个配置。

seajs.config({
  // Sea.js 的基础路径(修改这个就不是路径就不是相对于seajs文件了)
  base: 'http://example.com/path/to/base/',
  // 别名配置(用变量表示文件,解决路径层级过深和实现路径映射)
  alias: {
    'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
    'json': 'gallery/json/1.0.2/json',
    'jquery': 'jquery/jquery/1.10.1/jquery'
  },
  // 路径配置(用变量表示路径,解决路径层级过深的问题)
  paths: {
    'gallery': 'https://a.alipayobjects.com/gallery'
  }
});

查看更多

入口

入口即加载,需要加载什么文件(模块加载器)就在这里引入。 sea.js 在下载完成后,会自动加载入口模块。

seajs.use("abc/main");  //导入seajs.js同级的abc文件夹下的main.js模块的(后缀名可略去不写)

seajs.use()还有另外一种用法。

有时候我们写一个简单的单页并不想为它单独写一个js文件,选择在直接把js代码写在页面上,seajs通过 seajs.use() 实现了这个。 接收两个参数第一个是文件依赖(单个用字符串数组都可以,多个需用数组表示),第二个是回调函数。

加载单个依赖

//加载模块 main,并在加载完成时,执行指定回调
seajs.use('./main', function(main) {main.init();
});

加载多个依赖

//并发加载模块 a 和模块 b,并在都加载完成时,执行指定回调
seajs.use(['./a', './b'], function(a, b) {a.init();b.init();
});

这里回掉函数中的a和b参数是与前面的模块暴露出来的接口一一对应的。有时候也许只需要使用b的接口,但是也要把a参数写上。什么是暴露接口下面会解释。

模块开发

这里才是重点,其实也很简单就是一个书写规范(CMD)而已。

// 所有模块都通过 define 来定义
define(function(require, exports, module) {// 通过 require 引入依赖var $ = require('jquery');var Spinning = require('./spinning');// 通过 exports 对外提供接口exports.doSomething = ...// 或者通过 module.exports 提供整个接口module.exports = ...});

模块是通过define()方法包装的,然后内部痛过require()方法引入需要的依赖文件(模块)。(也可以引入.css文件哦~)

模块最好是面向对象开发的,这样最后可以方便的通过 exports.doSomething 或module.exports 把模块的接口给暴露出来。如果你是写的是jq插件的话就不需要这个功能了,因为你的接口是写在jquery的对象里的。如果你不需要提供接口的话也可以不使用这两个属性哦!

事实上define方法还有另外几个参数,一般情况我们用不到。具体看 官方API 。

小结

其实Seajs的基本使用就这么简单,日常使用足够了,之前看官网的 5分钟教程 楞是没看懂,后来想想真的是5分钟学会啊,悟性太低- -||

注意事项

  1. 模块内的函数依赖必须交代清楚,防止模块在函数依赖加载前先加载出来。而且还增强了模块的独立性。
  2. 引入seajs的时候最好给 <script> 标签加个id,可以快速访问到这个标签(我是在模块合并时用到它的)
  3. 还有前面提到的使用 seajs.use() 在.html页面上写js时如果有多个模块依赖,需要使用暴露出来的接口就要让参数与它一一对应。



这篇关于快速上手seajs——简单易用Seajs的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1111808

相关文章

springboot security快速使用示例详解

《springbootsecurity快速使用示例详解》:本文主要介绍springbootsecurity快速使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录创www.chinasem.cn建spring boot项目生成脚手架配置依赖接口示例代码项目结构启用s

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》:本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig(自定义资源权限规则

如何使用Python实现一个简单的window任务管理器

《如何使用Python实现一个简单的window任务管理器》这篇文章主要为大家详细介绍了如何使用Python实现一个简单的window任务管理器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起... 任务管理器效果图完整代码import tkinter as tkfrom tkinter i

C++中函数模板与类模板的简单使用及区别介绍

《C++中函数模板与类模板的简单使用及区别介绍》这篇文章介绍了C++中的模板机制,包括函数模板和类模板的概念、语法和实际应用,函数模板通过类型参数实现泛型操作,而类模板允许创建可处理多种数据类型的类,... 目录一、函数模板定义语法真实示例二、类模板三、关键区别四、注意事项 ‌在C++中,模板是实现泛型编程

C++快速排序超详细讲解

《C++快速排序超详细讲解》快速排序是一种高效的排序算法,通过分治法将数组划分为两部分,递归排序,直到整个数组有序,通过代码解析和示例,详细解释了快速排序的工作原理和实现过程,需要的朋友可以参考下... 目录一、快速排序原理二、快速排序标准代码三、代码解析四、使用while循环的快速排序1.代码代码1.由快

使用EasyExcel实现简单的Excel表格解析操作

《使用EasyExcel实现简单的Excel表格解析操作》:本文主要介绍如何使用EasyExcel完成简单的表格解析操作,同时实现了大量数据情况下数据的分次批量入库,并记录每条数据入库的状态,感兴... 目录前言固定模板及表数据格式的解析实现Excel模板内容对应的实体类实现AnalysisEventLis

Win32下C++实现快速获取硬盘分区信息

《Win32下C++实现快速获取硬盘分区信息》这篇文章主要为大家详细介绍了Win32下C++如何实现快速获取硬盘分区信息,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 实现代码CDiskDriveUtils.h#pragma once #include <wtypesbase

Java中数组转换为列表的两种实现方式(超简单)

《Java中数组转换为列表的两种实现方式(超简单)》本文介绍了在Java中将数组转换为列表的两种常见方法使用Arrays.asList和Java8的StreamAPI,Arrays.asList方法简... 目录1. 使用Java Collections框架(Arrays.asList)1.1 示例代码1.

Spring AI与DeepSeek实战一之快速打造智能对话应用

《SpringAI与DeepSeek实战一之快速打造智能对话应用》本文详细介绍了如何通过SpringAI框架集成DeepSeek大模型,实现普通对话和流式对话功能,步骤包括申请API-KEY、项目搭... 目录一、概述二、申请DeepSeek的API-KEY三、项目搭建3.1. 开发环境要求3.2. mav

Python如何快速下载依赖

《Python如何快速下载依赖》本文介绍了四种在Python中快速下载依赖的方法,包括使用国内镜像源、开启pip并发下载功能、使用pipreqs批量下载项目依赖以及使用conda管理依赖,通过这些方法... 目录python快速下载依赖1. 使用国内镜像源临时使用镜像源永久配置镜像源2. 使用 pip 的并