首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

前端模块化开发的价值

本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发。 恼人的命名冲突 我们从一个简单的习惯出发。...的 YUI2 项目。下面是一段真实代码,来自 Yahoo! 的一个开源项目。...在 YUI3 项目中,引入了一种新的命名空间机制。...当项目越来越复杂,众多文件之间的依赖经常会让人抓狂。下面这些问题,我相信每天都在真实地发生着。 通用组更新了前端基础类库,却很难推动全站升级。...为了方便描述,我们使用 Sea.js 来作为模块化开发框架。 使用 Sea.js 来解决 Sea.js 是一个成熟的开源项目,核心目标是给前端开发提供简单、极致的模块化开发体验。

1K20

关于 JS 模块化的最佳实践总结

模块化开发是 JS 项目开发中的必备技能,它如同面向对象、设计模式一样,可以兼顾提升软件项目的可维护性和开发效率。 模块之间通常以全局对象维系通讯。在小游戏中,GameGlobal 是全局对象。...简言之,除了在浏览器项目中使用 sea.js,其它类型项目均建议直接使用原生的 ES6 模块规范。...sea.js 是一个模块加载器,是 AMD 规范的主要实现者之一。...sea.js 作为 AMD 规范的升级版,简化了使用方法,在使用上更加方便,值得推崇。但是 sea.js 便是浏览器开发中最佳的模块化解决方案吗?未必,还要看是什么类型的项目,后面会讲到。...在浏览器 JS 开发项目中,因为从服务器加载文件需要时间,使用 CommonJS 规范肯定是不合适了。至于是使用原生的 ES 模块规范,还是使用sea.js,要看具体场景。

2.4K10

js的动态加载、缓存、更新以及复用(二)恼人的命名冲突

有的推荐第三方框架,比如 In.js、requrieJS、sea.js、lab.js等。这个开阔了眼界,以前只知道sea.js,省去了自己搜索的麻烦。...主要看的是sea.js,目前简单的理解是:一个加载js的机制 + 模块化编程(CMD规范)的理念。这个是淘宝用的,肯定很强大、很结实了。那么我是不是拿来用呢?...如果我们要做五个项目,每个项目都是一个独立的站点,那么对于共用的js文件是怎么处理的呢?1、每个项目站点都放一份,引用自己站点里的。2、做一个独立的站点存放共用的js,然后其他的项目都统一到这里引用。...目前我做的项目是,由js文件服务来搞定js文件的加载,然后写点处理业务逻辑的代码就ok了。   想说的还有很多,只是思路有点乱。后续要上具体的代码了,不知道大家是不是喜欢。 ps: 面对的问题。...我做项目时,常常会将一些通用的、底层的功能抽象出来,独立成一个个函数,比如 function each(arr) { // 实现代码 } function log(str) { // 实现代码

2.1K80

seajs简记

参考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 方法,可以在页面中加载任意模块

1.4K20

js的动态加载、缓存、更新以及复用(三)

(正在考虑要不要使用sea.js) 5、  Js服务加载的js文件,不需要做任何修改。当然也不负责各个文件里的函数名称是否冲突。   Sea.js追求自然编程,代码要写的自然。...只是在加载js这块和sea.js的思路有点不同。   ...就像我们写C#代码,新建一个项目的时候,VS会把常用的dll引用进来;新建一个页面的时候,VS会把常用的命名空间using上,不需要我没再去操心了。...尤其是一边开发UI,一边开发项目的时候。 6、 怎么还有css的事?   Css也是要加载的,一般一个项目的各个页面用的css都是一样的。这里也顺便一起加载了。 7、 配置信息里都有啥?     ...看了sea.js的介绍,里面也提到了命名空间的方式,是yahoo用过。Sea.js并不推荐,因为使用的时候要记住长长的命名空间。但是我觉得这个不算事呀。

6.3K90

前端科普系列(3):CommonJS 不是前端却革命了前端

先来看下,它在维基百科上的定义: CommonJS 是一个项目,其目标是为 JavaScript 在网页浏览器之外创建模块约定。...创建这个项目的主要原因是当时缺乏普遍可接受形式的 JavaScript 脚本模块单元,模块在与运行JavaScript 脚本的常规网页浏览器所提供的不同的环境下可以重复使用。...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 工具库

1K40

可能是最详细的UMD模块入门指南

回顾 之前也写了几篇关于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

2.8K20
领券