require(jquery); 内部处理是先替换 alias, 再替换 paths, 1) require('jquery') 当前解析为 jquer...
本周跟大家分享6月1日在深圳举办的腾讯大讲堂【Sea.js与前端技术平台梦】讲座视频。...下面为本期主讲嘉宾 支付宝前端基础技术负责人王保平(玉伯)的主题分享:《Sea.js 与前端技术平台梦》 视频内容
本文给大家分享sea.js知识总结,感兴趣的朋友一起学习吧 http://reactjs.cn/ http://reactjs.cn/react/docs/getting-started-zh-CN.html... ]; let map = new Map(); // 返回模块的输出对象 //modue.exports = arr; // es6 模块返回的对象 // 使用 import * as...function onload(){ var style = { "color" : "red", "fontSize" : "24px" }; //组件的使用...Image.png 我们使用bind强制转换这个函数的对象;转换为当前的.
配置 可以对 Sea.js 进行配置,让模块编写、开发调试更方便。 ---- seajs.config seajs.config(options) 用来进行配置的方法。...paths Object 当目录比较深,或需要跨目录调用模块时,可以使用 paths 来简化书写。...vars Object 有些场景下,模块路径在运行时才能确定,这时可以使用 vars 变量来配置。...base String Sea.js 在解析顶级标识时,会相对 base 路径来解析。详情请参阅 模块标识 注意:一般请不要配置 base 路径,把 sea.js 放在合适的路径往往更简单一致。...插件的配置 插件可以给 Sea.js 添加配置项,请查看具体插件了解相关配置。 配置文件 配置可以直接写在 html 页面上,也可以独立出来成为一个文件。
SeaJS 是一个遵循 CMD 规范的模块化加载框架 CommonJS,CMD,AMD等规范后文会提到,这里主要先了解如何在代码中使用。 如果你有使用过nodejs ,那么理解起来就容易多了。...我们通过sea.js来加载我们定义的模块(这会儿遵循CMD规范)并使用相应的数据。...首先,当然是要下载sea.js,可以直接去 http://seajs.org/docs/#downloads 直接下载代码包,解压后 在 /dist/目录下可以 找到 sea.js CMD规范是懒加载,...index.html: 首先包含资源sea.js ,再包含主模块,这里因为要执行主模块中返回的数据,所以使用了回调函数的处理 //加载入口文件main.js,默认后缀js自动匹配 seajs.use('.
参考seajs快速入门 一、前端模块化的价值 解决命名冲突 摆脱文件依赖 性能优化 提高可维护性 seajs.use方法调用 通过exports暴露接口 通过require引入依赖 二、Sea.js...的常用 API seajs.config base string Sea.js 在解析顶级标识时,会相对 base 路径来解析 seajs.use 用来在页面中加载模块 require...顶级标识:顶级标识不以点(.)或斜线(/)开始, 会相对模块系统的基础路径(即 Sea.js 的 base 路径)来解析 四、 使用步骤 引入sea.js文件(方法与引用jQuery相同) 配置信息 在...'' : 'json' 29 ], 30 31 // 调试模式 32 debug: true, 33 34 // Sea.js 的基础路径 35 base: 'http://example.com.../path/to/base/', 36 37 // 文件编码 38 charset: 'utf-8' 39 }); 配置sea.js的基础路径 及加载模块 1 通过 use 方法,可以在页面中加载任意模块
本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发。 恼人的命名冲突 我们从一个简单的习惯出发。...为了方便描述,我们使用 Sea.js 来作为模块化开发框架。 使用 Sea.js 来解决 Sea.js 是一个成熟的开源项目,核心目标是给前端开发提供简单、极致的模块化开发体验。...使用 Sea.js,在书写文件时,需要遵守 CMD (Common Module Definition)模块定义规范。一个文件就是一个模块。...想在页面中使用某个组件时,只要通过 seajs.use 方法调用。 好好琢磨以上代码,我相信你已经看到了 Sea.js 带来的两大好处: 通过 exports 暴露接口。...小结 除了解决命名冲突和依赖管理,使用 Sea.js 进行模块化开发还可以带来很多好处: 模块的版本管理。通过别名等配置,配合构建工具,可以比较轻松地实现模块的版本管理。提高可维护性。
解决方案: 每个程序员定义一个匿名函数,在自己的匿名函数中定义局部变量来使用: 使用匿名函数解决变量作用域问题 ( function...doctype html> 使用全局变量解决在多个匿名函数共享数据的问题 //...解决方案: 将多个全局变量包装在一起,使用一个hash全局变量,类似于一个集合一样的用。 使用hash变量作为全局变量 //hash全局变量
如果满足,则使用require.js提供的define函数定义模块。...起飞,直接UMD 同理,接着判断当前环境是否满足CommonJS或CMD规范,分别使用相应的模块定义方法进行模块定义。...root.umdModule = factory(); } }(this, function() { return { name: '我是一个umd模块' } })) 最终,使用...require.js, sea.js, nodejs或全局对象挂载属性等方式都能完美地使用umd-module.js这个模块,实现了大一统。...给个sea.js调用UMD的效果页面链接,sea.js调用UMD模块[9] 而nodejs调用UMD模块需要执行node命令, node umd-simple-used-by-nodejs 效果如下:
数据类型丰富(支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等) 方便扩展(支持支持扩展更多数据类型,支持自定义函数和正则) 安装 npm install mockjs 使用...mock: 'http://mockjs.com/dist/mock' } }) // 加载 Mock require(['mock'], function(Mock){ // 使用...(CMD) 因为 Sea.js 社区尚未提供 webpack 插件,所以 Mock.js 暂不完整支持通过 Sea.js 加载。...一种变通的方式是,依然通过 Sea.js 配置和加载 Mock.js,然后访问全局变量 Mock。...://mockjs.com/dist/mock.js' } }) // 加载 Mock seajs.use('mock', function(__PLACEHOLDER) { // 使用
v=20170215:61) t.exec (sea.js:2) t.use.e.callback (sea.js:2) t.onload (sea.js:2) t.load (sea.js:2...) d (sea.js:2) onload (seajs-css.js:110) ==== line:6272, [http://tmisc.home.news.cn/search/...v=20170215] , [] line:2, [http://tmisc.home.news.cn/search/font/js/base/sea.js] , [t.exec] line:2,.../search/font/js/base/sea.js] , [t.onload] line:2, [http://tmisc.home.news.cn/search/font/js/base/sea.js...] , [t.load] line:2, [http://tmisc.home.news.cn/search/font/js/base/sea.js] , [d] line:143, [http:/
Sea.js 则专注于 Web 浏览器端,同时通过 Node 扩展的方式可以很方便跑在 Node 环境中。 遵循的规范不同。...Sea.js 更贴近 CommonJS Modules/1.1 和 Node Modules 规范。 推广理念有差异。...Sea.js 不强推,采用自主封装的方式来“海纳百川”,目前已有较成熟的封装策略。 对开发调试的支持有差异。...Sea.js 采取的是通用事件机制,插件类型更丰富。 总之,如果说 RequireJS 是 Prototype 类库的话,则 Sea.js 致力于成为 jQuery 类库。...UMD先判断是否支持Node.js的模块(exports)是否存在,存在则使用Node.js模块模式。 在判断是否支持AMD(define是否存在),存在则使用AMD方式加载模块。
模块系统 Sea.js 是一个适用于 Web 浏览器端的模块加载器。在 Sea.js 里,一切皆是模块,所有模块协同构建成模块系统。Sea.js 首要要解决的是模块系统的基本问题: 模块是什么?...在 Sea.js 里,我们专注于 JS 模块(其他类型的模块可以转换为 JS 模块): 模块是一段 JavaScript 代码,具有统一的基本书写格式。模块之间通过基本交互规则,能彼此引用,协同工作。...Sea.js 遵循的是 CMD 规范,会在接下来的文档中详细阐述。 延伸阅读 function / bind 的救赎 继承与混合,略谈系统的构建方式
Sea.js 则专注于 Web 浏览器端,同时通过 Node 扩展的方式可以很方便跑在 Node 环境中。 遵循的规范不同。...RequireJS 遵循 AMD(异步模块定义)规范,Sea.js 遵循 CMD (通用模块定义)规范。规范的不同,导致了两者 API 不同。...Sea.js 不强推,采用自主封装的方式来“海纳百川”,目前已有较成熟的封装策略。 对开发调试的支持有差异。...Sea.js 采取的是通用事件机制,插件类型更丰富。 执行机制不同。 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。.../A'; 详解 而我们这里要说的是在使用import语法引用模块时,如何正确使用{}。
简言之,除了在浏览器项目中使用 sea.js,其它类型项目均建议直接使用原生的 ES6 模块规范。...使用 sea.js 定义和使用模块的示例如下所示: /** sea.js **/ // 定义模块 math.js define(function(require, exports, module) {...sea.js 作为 AMD 规范的升级版,简化了使用方法,在使用上更加方便,值得推崇。但是 sea.js 便是浏览器开发中最佳的模块化解决方案吗?未必,还要看是什么类型的项目,后面会讲到。...在浏览器 JS 开发项目中,因为从服务器加载文件需要时间,使用 CommonJS 规范肯定是不合适了。至于是使用原生的 ES 模块规范,还是使用sea.js,要看具体场景。...如果想页面尽快加载,sea.js 适合;如果是单页面网站,适合使用原生的 ES6 模块规范。
它非常适合在浏览器中使用,但它也可以用在其他 js 环境, 就像 Rhino 和 Node。使用 RequireJS 加载模块化脚本能提高代码的加载速度和质量。...2、CMD (Common Module Definition) 和 AMD 类似,CMD 是 Sea.js 在推广过程中对模块定义的规范化产出。Sea.js 是阿里的玉伯写的。...Sea.js 官网这么介绍 Sea.js: "Sea.js 追求简单、自然的代码书写和组织方式,具有以下核心特性:" "简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js...来看看 CMD 规范的实现: 首先要在 html 文件中引入 sea.js 工具库...所以在引入 sea.js 文件后,再引入的其它文件,都可以使用 define 来定义模块。
有的推荐第三方框架,比如 In.js、requrieJS、sea.js、lab.js等。这个开阔了眼界,以前只知道sea.js,省去了自己搜索的麻烦。...也用了点时间简单看了一下,因为每一个都是大块头,都有自己的理念,如果只是简单使用的话,那么谁便找一个就可以了,但是我习惯把原理弄清楚。...因为我觉得虽然不知道原理也可以使用,但是知道了原理后,可以用的更好。 主要看的是sea.js,目前简单的理解是:一个加载js的机制 + 模块化编程(CMD规范)的理念。...这时候可以考虑使用第三方框架,当然也可以自己写。因为我可以用boot.js来确保加载哪些文件,以及加载最新的文件。在第二步就需要确定一个解决方案。我的想法就是做一个js文件服务。
JS模块化和使用 很久以前就知道js模块化开发可以使用require.js和sea.js,就一直没去看看。...最近在了解查看的,度一下require.js相关的博客和文章,写得真是操蛋的疼,都是互相抄来抄去,博主应该都没有自己实际去敲过,哪怕给我写一个完整的简单应用示例我都可以上手,结果把自己折腾得……后面也看来sea.js...这样的话,开发者可以使用CommonJS API编写应用程序,然后这些应用可以运行在不同的JavaScript解释器和不同的主机环境中。...RequireJS 和 Sea.js 都是模块加载器,倡导模块化开发理念,核心价值是让 JavaScript 的模块化开发变得简单自然。...requirejs的使用代码示例 我在使用requirejs的时候踩最多坑的引入文件的地址,所以请读者注意define中引入其他模块所写的地址 示例一 /* 语法结构: 1. define
2、 各个项目如果使用通用js,可(bi)以(xu)使用js服务实现加载。 3、 Js服务只提供通用的js,比如jQuery、my97、easyUI等(可根据实际情况设定具体的js文件)。...(正在考虑要不要使用sea.js) 5、 Js服务加载的js文件,不需要做任何修改。当然也不负责各个文件里的函数名称是否冲突。 Sea.js追求自然编程,代码要写的自然。...只是在加载js这块和sea.js的思路有点不同。 ...因为可能大家都没有想过在子页里使用top页里的函数吧,所以写插件的时候根本就没考虑。...看了sea.js的介绍,里面也提到了命名空间的方式,是yahoo用过。Sea.js并不推荐,因为使用的时候要记住长长的命名空间。但是我觉得这个不算事呀。
领取专属 10元无门槛券
手把手带您无忧上云