sea.js

renweihub 发布于2019-08-19 17:48 / 2942人阅读

摘要：目标了解目前公司所用得代码模块式开发。比较目前比较流行得框架。模块化可以让每个文件的职责单一，非常有利于代码的维护。模块定义规范与的模块规范非常相近。一类是以国内的等类库为代表的大教堂模式。

目标：1.了解目前公司所用得sea.js,代码模块式开发。

 2.比较目前比较流行得bootstrap,angularJS,reactJS框架。

参考：http://seajs.org/docs/#docs
1）除了解决命名冲突和依赖管理，使用 Sea.js 进行模块化开发还可以带来很多好处：
1.模块的版本管理。通过别名等配置，配合构建工具，可以比较轻松地实现模块的版本管理。

2.提高可维护性。模块化可以让每个文件的职责单一，非常有利于代码的维护。Sea.js 还提供了 nocache、debug 等插件，拥有在线调试等功能，能比较明显地提升效率。

3.前端性能优化。Sea.js 通过异步加载模块，这对页面性能非常有益。Sea.js 还提供了 combo、flush 等插件，配合服务端，可以很好地对页面性能进行调优。

4.跨环境共享模块。CMD 模块定义规范与 Node.js 的模块规范非常相近。通过 Sea.js 的 Node.js 版本，可以很方便实现模块的跨服务器和浏览器共享。

前端的模块化构建可分为两大类。一类是以 Dojo、YUI3、国内的 KISSY 等类库为代表的大教堂模式。在大教堂模式下，所有组件都是颗粒化、模块化的，各组件之间层层分级、环环相扣。另一类是以 jQuery、RequireJS、国内的 Sea.js、OzJS 等类库为基础的集市模式。在集市模式下，所有组件彼此独立、职责单一，各组件通过组合松耦合在一起，协同完成开发。

AngularJs:开源得javascript框架，适合于开发客户端得单页面应用，它实现了前端MVC架构，专注于扩展html功能，提供动态技术绑定，且能与其他框架合作融洽。（大概有个概念，今后再详细了解）

API 快速参考
1）seajs.config 用来对 Sea.js 进行配置。
https://github.com/seajs/seajs/issues/262
2）seajs.use 用来在页面中加载一个或多个模块。
https://github.com/seajs/seajs/issues/260
3）define 用来定义模块。Sea.js 推崇一个模块一个文件，遵循统一的写法：
https://github.com/seajs/seajs/issues/242
https://github.com/seajs/seajs/issues/259
4）require 用来获取指定模块的接口
https://github.com/seajs/seajs/issues/242
https://github.com/seajs/seajs/issues/259
5）require.async 用来在模块内部异步加载一个或多个模块。
https://github.com/seajs/seajs/issues/242
6）exports 用来在模块内部对外提供接口。
https://github.com/seajs/seajs/issues/242
7)module.exports 用来在模块内部对外提供接口。
https://github.com/seajs/seajs/issues/242

深度探讨：
一.CMD 模块得构建过程
CMD模块在构建时，有两个基本操作：
1.提取操作，用来提取模块得标识id和一来dependencies.

a.js

define(function(require, exports) {
  var b = require("./b");
})
经过提取操作后，a.js 的源码会转换成临时文件：

define("xxx/1.0.0/a", ["./b"], function(require, exports) {
  var b = require("./b");
})

2.压缩操作。经过上面得提取操作后，构建工具就可以调用任何JS压缩工具来进行压缩了，require 参数也可以被压缩成任意字符。

GPU云服务器云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78848.html

sea.js的同步魔法

摘要：写法加载完后，得到的执行结果作为参数传入了回调函数写法预加载了执行模块，并得到结果赋值给调用模块提供的方法从这一点上来看，两者在性能上并没有太多差异。前些时间也是想写点关于CMD模块规范的文字，以便帮助自己理解。今天看到一篇知乎回答，算是给了我一点启发。同步写法却不阻塞？先上一个sea.js很经典的模块写法： // 定义一个模块 define(function(require, ...

cloud 2019-08-26 18:42 评论0 收藏0
阅读sea.js源码小结

摘要：依赖信息是一个数组，比如上面的依赖数组是源码如下是利用正则解析依赖的一个函数时间出发函数主要看这个部分注释是防止拷贝该时间的回调函数，防止修改，困惑了一下。对的赋值需要同步执行，不能放在回调函数里。 sea.js想解决的问题恼人的命名冲突烦琐的文件依赖对应带来的好处 Sea.js 带来的两大好处：通过 exports 暴露接口。这意味着不需要命名空间了，更不需要全局变量。...

chavesgu 2019-08-19 18:37 评论0 收藏0
前端模块化之AMD/require.js、CMD/sea.js

摘要：代码地址模块化的主要区别此前年前前前前前端模块化，主流的就是，支持的二者都可以用为什么模块化一直以来，前端开发的痛点之一就是代码复用职责划分问题，兼容性比如等新语法的支持组件化代码压缩等不在本文讨论范围。showImg(https://user-gold-cdn.xitu.io/2019/5/22/16adee75f360801a); 前言请注意，现在是2019/05/22，这！不！是！坟...

buildupchao 2019-05-22 19:38 评论0 收藏0
前端seajs模块化实践

摘要：前端模块化开发的价值恼人的命名冲突烦琐的文件依赖使用来解决除了解决命名冲突和依赖管理，使用进行模块化开发还可以带来很多好处模块的版本管理。模块化可以让每个文件的职责单一，非常有利于代码的维护。模块定义规范与的模块规范非常相近。前端模块化开发的价值1、恼人的命名冲突2、烦琐的文件依赖使用 Sea.js 来解决除了解决命名冲突和依赖管理，使用 Sea.js 进行模块化开发还可以带来很多好...

SHERlocked93 2019-08-22 16:06 评论0 收藏0
vue2.0+seajs开发

摘要：官方推荐使用开发项目但是在我在打包后没有解决好如何打包成的问题。在页尾，通过引入后，有一段配置代码的简单配置加载入口模块在下载完成后，会自动加载入口模块。即入口文件语法规范遵循规范，可以像一般书写模块代码。 vue官方推荐使用webpack+vue-cli开发Vue项目但是在我在webpack npm run dev 打包后没有解决好如何打包成apk的问题。所以就无奈的使用的sea...

wangtdgoodluck 2019-08-20 14:17 评论0 收藏0