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
配置 可以对 Sea.js 进行配置，让模块编写、开发调试更方便。 ---- seajs.config seajs.config(options) 用来进行配置的方法。...'' : 'json' ], // 调试模式 debug: true, // Sea.js 的基础路径 base: 'http://example.com/path/to/base...base String Sea.js 在解析顶级标识时，会相对 base 路径来解析。详情请参阅 模块标识 注意：一般请不要配置 base 路径，把 sea.js 放在合适的路径往往更简单一致。...插件的配置 插件可以给 Sea.js 添加配置项，请查看具体插件了解相关配置。 配置文件 配置可以直接写在 html 页面上，也可以独立出来成为一个文件。
先看问题： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>变量作用域问题</title...
（图片来源于菜鸟教程- Webpack入门教程 ） webpack的工作虽然是模块打包工具，但也能代替类似gulp等自动构建工具的部分功能！经过2017的发展，webpack的火热程度也是有目共睹。...（图片来源于阮一峰的网络日记-- Flex 布局教程：语法篇 ） 而grid，网格布局号称是下一代的布局方式，但是浏览器兼容方面就没有flex那么好。但是这个也是有必要了解的。...参考资料 Flex 布局教程：语法篇 Flex 布局教程：实例篇 CSS Grid布局：什么是网格布局 （看完这篇，建议连着看下面的几篇，都是大漠写的一个系列的文章，质量非常高） CSS Grid VS...sea.js sea.js由国人开发，当时使用的时候还满心欢喜，终于有国人的东西登上舞台了。sea.js凭借简单，轻量等优势火极一时。...但是有了es6的模块化之后，就连sea.js的作者玉伯也在微博发言：应该给 Sea.js 和 KISSY 也树一块墓碑了。
参考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 方法，可以在页面中加载任意模块
555833956-5681fa0572441_articlex.png （图片来源于菜鸟教程-Webpack入门教程） webpack的工作虽然是模块打包工具，但也能代替类似gulp等自动构建工具的部分功能...3272665928-584976f99c546_articlex.png （图片来源于阮一峰的网络日记--Flex 布局教程：语法篇） 而grid，网格布局号称是下一代的布局方式，但是浏览器兼容方面就没有...1176183574-5a507b82ae787_articlex.png 参考资料 Flex 布局教程：语法篇 Flex 布局教程：实例篇 CSS Grid布局：什么是网格布局（看完这篇，建议连着看下面的几篇...sea.js sea.js由国人开发，当时使用的时候还满心欢喜，终于有国人的东西登上舞台了。sea.js凭借简单，轻量等优势火极一时。...但是有了es6的模块化之后，就连sea.js的作者玉伯也在微博发言：应该给 Sea.js 和 KISSY 也树一块墓碑了。
我们通过sea.js来加载我们定义的模块（这会儿遵循CMD规范）并使用相应的数据。...首先，当然是要下载sea.js,可以直接去 http://seajs.org/docs/#downloads 直接下载代码包，解压后 在 /dist/目录下可以 找到 sea.js CMD规范是懒加载，...index.html: 首先包含资源sea.js ，再包含主模块，这里因为要执行主模块中返回的数据，所以使用了回调函数的处理 //加载入口文件main.js，默认后缀js自动匹配 seajs.use('.
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 进行前端的模块化开发。 恼人的命名冲突 我们从一个简单的习惯出发。...为了方便描述，我们使用 Sea.js 来作为模块化开发框架。 使用 Sea.js 来解决 Sea.js 是一个成熟的开源项目，核心目标是给前端开发提供简单、极致的模块化开发体验。...使用 Sea.js，在书写文件时，需要遵守 CMD （Common Module Definition）模块定义规范。一个文件就是一个模块。...*/); }); 首先要在页面中引入 sea.js 文件，这一般通过页头全局把控，也方便更新维护。...Sea.js 还提供了 nocache、debug 等插件，拥有在线调试等功能，能比较明显地提升效率。前端性能优化。Sea.js 通过异步加载模块，这对页面性能非常有益。
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 来定义模块。...具体语法讲解请参考阮一峰老师的教程，示例如下： // a.js export const name = 'morrain' const age = 18 export function getAge (
回顾 之前也写了几篇关于javascript模块的博客，链接如下： 回头再看JS模块化编程[2] 回头再看JS模块化编程之AMD[3] sea.js的同步魔法[4] 近几天准备总结一下javascript...factory()) } else if (typeof define === 'function' && define.cmd) { console.log('是CMD模块规范，如sea.js...给个sea.js调用UMD的效果页面链接，sea.js调用UMD模块[9] 而nodejs调用UMD模块需要执行node命令， node umd-simple-used-by-nodejs 效果如下：...'我调用了依赖模块', depModule) // ...省略了一些代码，去代码仓库看吧 return { name: '我自己是一个umd模块' } })) 给个sea.js...的同步魔法: http://hexo.wbjiang.cn/sea.js%E7%9A%84%E5%90%8C%E6%AD%A5%E9%AD%94%E6%B3%95.html [5] Git仓库: https
模块系统 Sea.js 是一个适用于 Web 浏览器端的模块加载器。在 Sea.js 里，一切皆是模块，所有模块协同构建成模块系统。Sea.js 首要要解决的是模块系统的基本问题： 模块是什么？...在 Sea.js 里，我们专注于 JS 模块（其他类型的模块可以转换为 JS 模块）： 模块是一段 JavaScript 代码，具有统一的基本书写格式。模块之间通过基本交互规则，能彼此引用，协同工作。...Sea.js 遵循的是 CMD 规范，会在接下来的文档中详细阐述。 延伸阅读 function / bind 的救赎 继承与混合，略谈系统的构建方式
在 Sea.js 中，所有 JavaScript 模块都遵循 CMD模块定义规范。.../module4') m1.show() m4.show() }) (2)sea.js简单使用教程 ①下载sea.js, 并引入 官网: http://seajs.org/ github : https...://github.com/seajs/seajs 然后将sea.js导入项目: js/libs/sea.js ②创建项目结构 |-js|-libs|-sea.js|-modules|-module1....(3) ES6-Babel-Browserify使用教程 简单来说就一句话：使用Babel将ES6编译为ES5代码，使用Browserify编译打包js。...Javascript模块化编程 Javascript标准参考教程 CMD 模块定义规范 理解CommonJS、AMD、CMD三种规范 完
在 Sea.js 中，所有 JavaScript 模块都遵循 CMD模块定义规范。.../module4') m1.show() m4.show() }) (2)sea.js简单使用教程 ①下载sea.js, 并引入 官网: http://seajs.org/ github : https...://github.com/seajs/seajs 然后将sea.js导入项目: js/libs/sea.js ②创建项目结构 |-js|-libs|-sea.js|-modules|-module1....(3) ES6-Babel-Browserify使用教程 简单来说就一句话：使用Babel将ES6编译为ES5代码，使用Browserify编译打包js。...Javascript模块化编程 Javascript标准参考教程 CMD 模块定义规范 理解CommonJS、AMD、CMD三种规范
Sea.js 则专注于 Web 浏览器端，同时通过 Node 扩展的方式可以很方便跑在 Node 环境中。 遵循的规范不同。...RequireJS 遵循 AMD（异步模块定义）规范，Sea.js 遵循 CMD （通用模块定义）规范。规范的不同，导致了两者 API 不同。...Sea.js 更贴近 CommonJS Modules/1.1 和 Node Modules 规范。 推广理念有差异。...Sea.js 不强推，采用自主封装的方式来“海纳百川”，目前已有较成熟的封装策略。 对开发调试的支持有差异。...Sea.js 采取的是通用事件机制，插件类型更丰富。 总之，如果说 RequireJS 是 Prototype 类库的话，则 Sea.js 致力于成为 jQuery 类库。
}, { "id": 2 }, { "id": 3 } ] } Sea.js...(CMD) 因为 Sea.js 社区尚未提供 webpack 插件，所以 Mock.js 暂不完整支持通过 Sea.js 加载。...一种变通的方式是，依然通过 Sea.js 配置和加载 Mock.js，然后访问全局变量 Mock。
image.png 参考资料 Flex 布局教程：语法篇 Flex 布局教程：实例篇 CSS Grid布局：什么是网格布局 CSS Grid VS Flexbox：实例对比 rxjs rxjs...sea.js sea.js由国人开发，当时使用的时候还满心欢喜，终于有国人的东西登上舞台了。sea.js凭借简单，轻量等优势火极一时。...但是有了es6的模块化之后，就连sea.js的作者玉伯也在微博发言：应该给 Sea.js 和 KISSY 也树一块墓碑了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
