参考seajs快速入门 一、前端模块化的价值 解决命名冲突 摆脱文件依赖 性能优化 提高可维护性 seajs.use方法调用 通过exports暴露接口 通过require引入依赖 二、Sea.js...的常用 API seajs.config base string Sea.js 在解析顶级标识时，会相对 base 路径来解析 seajs.use 用来在页面中加载模块 require...顶级标识：顶级标识不以点（.）或斜线（/）开始， 会相对模块系统的基础路径（即 Sea.js 的 base 路径）来解析 四、 使用步骤 引入sea.js文件（方法与引用jQuery相同） 配置信息 在...中，方式与写jQuery代码相同 1 seajs.config({ 2 3 // 别名配置 4 alias: { 5 'es5-safe': 'gallery...11 paths: { 12 'gallery': 'https://a.alipayobjects.com/gallery' 13 }, 14 15 // 变量配置 16
仔细查看了一下seajs的源码，确实写的挺赞的。...我在写例子之前是参考过这篇文章的：《JavaScript模块化开发库之seajs》 Seajs适用于分模块化开发的应用，比如类似QZone，点击“装扮空间”时需要动态加载CSS、JS，在资源加载完成后渲染装扮...，监听事件、回调…使用seajs来开发的话会很方便，主体的逻辑结构也将十分清晰。..._util, seajs._data, seajs....Seajs的简单使用示例： 1、定义模块 1: define('.
配置 可以对 Sea.js 进行配置，让模块编写、开发调试更方便。 ---- seajs.config seajs.config(options) 用来进行配置的方法。...seajs.config({ // 别名配置 alias: { 'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe', 'json': '.../b'); preload 配置不能放在模块文件里面： seajs.config({ preload: 'a' }); define(function(require, exports) {...seajs.config 可以多次运行，每次运行时，会对配置项进行合并操作： seajs.config({ alias: { 'jquery': 'path/to/jquery.js',...插件的配置 插件可以给 Sea.js 添加配置项，请查看具体插件了解相关配置。 配置文件 配置可以直接写在 html 页面上，也可以独立出来成为一个文件。
GitHub上可以下载； Alice： 是支付宝的前端css解决方案, 是arale的子集； seajs（ 现在由淘宝和腾讯的人在维护这个项目.seajs简单来说, 就是类似与labjs, requirejs...seajs安装 首先安装node.js：直接到官网下载安装； 再用npm（node.js模块管理工具）安装seajs模块，命令行：npm install seajs -g；-g：全局安装； 说明：推荐使用淘宝...npm install spm-build # 必装 npm install spm-doc # 必装 npm install spm-publish # 这个命令发布你的模块到seajs.org..., 必须注册seajs.org网站用户 npm install spm-deploy # 这个命令是ssh发布到服务器 方法二：在spm装好了之后, 使用如下命令 spm install init
seajs鼓励使用define(function(require,exports,module){})这种模块定义方式，这是典型的Module/wrappings规范实现。...back // to use onload event to get the uri } // Emit `define` event, used in nocache plugin, seajs...在seajs中，是采用script element方式来并行加载js/css资源的，并针对旧版本的webkit浏览器加载css做了hack。...这些逻辑在fetch方法中得以体现： // Fetch a module // 加载该模块，fetch函数中调用了seajs.request函数 Module.prototype.fetch = function...requestCache[emitData.requestUri] = sendRequest : sendRequest() } function sendRequest() { seajs.request
入口方法 每个程序都有个入口方法，类似于c的main函数，seajs也不例外。系列一的demo在首页使用了seajs.use()，这便是入口方法。...加载依赖之load方法 load方法可谓是seajs的精华所在。该方法主要加载依赖模块并依次执行依赖模块的回调函数，最终执行的回调函数则是通过seajs.use(“....例证 通过一个简单的例子，论证上述过程： tst.html seajs.use('....模块执行之exec 模块执行是在seajs.use中定义的mod.callback中调用的，依次调用所有依赖的exec方法，执行程序逻辑。...对于seajs，前前后后花了不下一个星期来阅读源码，从刚开始的一知半解到如今的拜服，我真切的领会到了设计思想的重要性。
SeaJS是一个遵循CMD规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制，兼容所有主流浏览器 SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载...模块的定义 SeaJS中使用“define”函数定义一个模块 define(id?, deps?.../a"); （3）基址地址——如果载入字符串既不是绝对路径也不是以”./”开头的相对位置，则相对SeaJS全局配置中的“base”来寻址
通过定义grunt的配置文件Gruntfile.js，配置并注册grunt的任务，最终我们可以通过命令行来执行任务。 ...具体的seajs实现可通过本博客的系列博文--Seajs源码解析系列来进一步了解。 ...这项工作听起来很简单，但是在笔者的实践过程中出现的问题却不少，因此本文着重讲解transport任务的相关配置。... while ((m = mods.shift())) m.load() } 此时anonymousMeta已在模块define时设置，因此将该meta配置文件配置到...concat、uglify、clean任务 这两个任务很容易定义，而且grunt官网上就是以uglify为例讲解Gruntfile的配置，因此，这两个任务的配置我们有很多资料可以参考。
这也就是Module/Wrappings规范，而seajs基本实现了该规范。...剖析 阅读seajs官网的入门demo，首先在主页面引入seajs文件，并设置入口 // seajs 的简单配置 seajs.config({ base: "...../sea-modules/", alias: { "jquery": "jquery/jquery/1.10.1/jquery.js" } }) // 加载入口模块 seajs.use...exports.doSomething = ... // 或者通过 module.exports 提供整个接口 module.exports = ... }); 这样，当打开页面时，会调用seajs.use
前端js实现模块化的历史进程中有两个库不得不提，那就是seajs和requirejs，这两个库分别对应CMD和AMD规则，这里咱们先不讨论AMD和CMD的异同，先看看用seajs和requirejs分别来实现一个计算器的功能怎么来实现...四则运算的函数和初始化的函数可以作为模块抽离出来，不论是seajs实现还是requirejs实现都需要一个主文件，seajs实现效果如下：index.html ?...首先是配置模块的路径和别名，然后引入并执行主文件main.js,man.js代码如下： ? 这里通过 require导入了 calculate模块，calculate模块内容如下： ?...以上便是seajs实现计算器功能。 用requirejs来实现计算器功能也很简单，写法不同而已，首先看index.html ? main.js代码： ? calculate模块内容如下： ?...很多人说requireJS是异步加载模块，SeaJS是同步加载模块，这么理解实际上是不准确的，其实加载模块都是异步的，只不过AMD依赖前置，js可以方便知道依赖模块是谁，立即加载，而CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块
seajs遵循CMD规范，requirejs遵循AMD规范。AMD规范是预加载，CMD规范是赖加载。...对依赖模块只加载不执行，requirejs对依赖模块既加载也执行 运行代码： // seajs <!...控制台：b is loaded 3. seajs可以在任意处直接require文件，无需提前写依赖模块；一旦提前写了任意一个依赖模块，下面的所有require的使用必须保证也有其对应的依赖模块 seajs...对依赖模块加载并执行 2. seajs ，requirejs在 require具体文件时既加载也执行 3. seajs可以在任意处直接require文件，无需提前写依赖模块；一旦提前写了任意一个依赖模块.../seajs-requirejs-demo
seajs.config 这个有点像 webpack 的配置项，可以方便我们配置一些路径，以及一些简化路径等等，比如下面的代码： seajs.config({ // 设置路径，方便跨目录调用...arale/class/1.0.0/class', 'jquery': 'jquery/jquery/1.10.1/jquery' } }); 上面可以给项目设置一些全局的 js 代码，以及配置别名等等...seajs.use 用来在页面中加载一个或多个模块。有点像 es6 中的 import 关键字，就是用来导入文件的 但是 seajs.use 是用来加载模块的。...// 就比如说我们创建了一个 a.js 文件，我们就可以使用 seajs.use 加载一个模块 seajs.use('..../a'); // 加载一个模块，在加载完成时，执行回调 seajs.use('.
SeaJS 是一个遵循 CMD 规范的模块化加载框架 CommonJS，CMD，AMD等规范后文会提到，这里主要先了解如何在代码中使用。 如果你有使用过nodejs ，那么理解起来就容易多了。...首先，当然是要下载sea.js,可以直接去 http://seajs.org/docs/#downloads 直接下载代码包，解压后 在 /dist/目录下可以 找到 sea.js CMD规范是懒加载，...index.html是主界面，main.js这里充当了主模块文件（一般需要 seajs.use('.main') 的方式来加载主模块），然后主模块main又调用main1,main2小模块，理解执行过程...DOCTYPE html> Seajs .../sea.js"> //加载入口文件main.js，默认后缀js自动匹配 seajs.use('.
SeaJS路径配置 //seajs所在的路径为默认根目录 seajs.config({ //配置根目录 base： “.....了解SeaJS，以及Seajs与requirejs之间的区别？...module.exports = ... }) 启动模块 seajs.use 加载入口模块，我们把define定义的js就叫模块 这个用于在html代码里面的加载 seajs使用的时候，可以先在配置文件中...，修改base设置基本路径，以后加载，都是相对seajs文件所在文件，但是安全起见，最好少用。...js 代码，一定要在 seajs.use 内部通过 window.onload 或者 $(function(){}) requirejs与seajs的区别 requirejs是优先加载的 seajs
(['myModule.js'], function(my){ }); 4.1、Seajs Seajs是一个加载器、遵循 CMD 规范模块化开发，依赖的自动加载、配置的简洁清晰。.../docs/#downloads 在页尾引入seajs： 然后在它下面写模块的配置和入口。...// 加载入口模块 seajs.use("../static/hello/src/main"); 配置和入口 这里解释下配置和入口的意思。 配置 通常在配置上修改seajs的路径和别名。...而在seajs是相对于seajs文件的，一律直接使用main.js就OK了，是不是很方便呢？ 既然这么方便那在什么情况需要配置呢？一般情况是用不到的。...Sea.js 官方示例 API 快速参考 4.3.2、基础 模块系统 CMD 模块定义规范 模块标识 require 书写约定 模块的加载启动 配置 构建工具 4.3.3、插件 seajs-css seajs-preload
’],function(){}) //指明依赖模块和定义模块 加载非amd规范的模块，shim require.config({ shim: { //shim配置不兼容模块... deps: ['underscore', 'jquery'], exports: 'Backbone' } } }); CMD 淘宝工程师编写seajs...，提出cmd规范 define(function(require, exports, module){}） seajs.use() cmd和amd区别 define(function(require,...require, exports, module){ //AMD a.dosomething(); b.dosomething(); }); js模块化方案 seajs
seaJS 官网 http://seajs.org/docs/ API快速参考 https://github.com/seajs/seajs/issues/266 sea.js...依赖自动加载，配置清晰简洁。 兼容 Chrome 3+，Firefox 2+，Safari 3.2+，Opera 10+，IE 5.5+。 ...seajs.use 用来在页面中加载一个或者多个模块 // 加载一个模块 seajs.use('./a'); // 加载模块，加载完成时执行回调 seajs.use('....CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。 ...另外，SeaJS 和 RequireJS 的差异，可以参考：https://github.com/seajs/seajs/issues/277 原文地址：http://blog.chinaunix.net
require.config 通过这个函数可以对requirejs进行灵活的配置，其参数为一个配置对象，配置项及含义如下： baseUrl——用于加载模块的根路径。...shims——配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。.../b'); b.test(); } }); SeaJs https://github.com/seajs/seajs https://seajs.github.io/seajs/docs/...SeaJS 的主要目的是让开发人员更加专注于代码本身，从繁重的 JavaScript 文件以及对象依赖处理中解放出来。 毫不夸张的说，我们现在详情页就是 SeaJS+Kissy。。。...在 hello.html 页尾，通过 script 引入 sea.js 后，有一段配置代码 // seajs 的简单配置 seajs.config({ base: "..
/bower_components/mockjs/dist/mock.js"> RequireJS (AMD) 配置 Mock 路径 require.config({ paths...一种变通的方式是，依然通过 Sea.js 配置和加载 Mock.js，然后访问全局变量 Mock。...配置 Mock 路径 seajs.config({ alias: { mock: 'http://mockjs.com/dist/mock.js' } }) // 加载...Mock seajs.use('mock', function(__PLACEHOLDER) { // 使用 Mock（全局变量） var data = Mock.mock({
模块化编程 CommonJS AMD（Asynchronous Module Definition）规范 requireJS与seaJS requireJs 以及 seaJs 的区别 模块化编程： @...，然后再诞生了SeaJS。...但其实requirejs 和 seajs其实都是模块加载器，只是遵循的模块规范不同，加载机制有所不同。...SeaJS 则专注于 Web 浏览器端，同时通过 Node 扩展的方式可以很方便跑在 Node 服务器端。 遵循的规范不同。...SeaJS 不强推，采用自主封装的方式来“海纳百川”，目前已有较成熟的封装策略。 代码质量有差异。RequireJS 是没有明显的 bug，SeaJS 是明显没有 bug。 对调试等的支持有差异。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
