使用seajs主要解决了现有项目前端开发中的如下问题:
- js文件依赖,js文件的加载顺序。
- js命名空间。
- js模块化开发。
- 业务模块的版本问题。
- 性能提升,主要是网络传输。
- js文件跨域异步加载问题。
- js、css文件打包和压缩合并。
简单的做了一个demo,项目使用maven构造,结构如下:
- webapp/resources:静态资源目录
- webapp/resources/js:js文件目录
- webapp/resources/js/core :业务模块目录,各个子模块单独构造。
- webapp/resources/js/core/hello:hello模块目录,包含package.json,独自构造。
- webapp/resources/js/core/user:user模块目录,包含package.json,独自构造。
- webapp/resources/js/modules:第三方js库目录,不需要单独构造,使用spm构造完成之后放入当前目录即可。
- WEB-INF/views:前端页面目录
具体的seajs应用、相对于传统js开发的改进及api,参考:http://seajs.org/docs/ 。 以下主要说明seajsdemo中的相关实践内容。
引入seajs依赖。sea.js和seajs-warp.js,其中seajs-wrap.js只需要在开发阶段引入,主要为了给每个js模块动态添加define(function(require , exports , module )){ }的包装。使用spm压缩合并后能够为每个js文件添加define包装,所以压缩完成之后部署时不要引入seajs-wrap.js。
模块配置管理。在一个单独的js配置文件(seajs.config.js)中进行配置,主要配置了三部分内容,分别是第三方js库、业务模块库和业务模块basepath。第三方js库:通过绝对路径配置,在开发和生成环境中不需要改变,能够启用浏览器缓存;业务模块库:主要为了方便不同模块的相互引用,使用相对路径配置。在打包时,只合并本模块内部的js,忽略其它模块的js依赖,在生产环境中每个业务模块库单独加载,降低模块之间的耦合;业务模块basepath:业务模块所处的根路径,如果启用了浏览器缓存,在版本升级时可以改变根路径目录,例如添加版本号目录,加载新的静态文件。参考如下:
seajs.config({
//use absolute path for the third lib
alias: {
//the third lib
'jquery': '/seajsdemo/resources/js/modules/jquery/1.9.1/jquery' ,
'cookie': '/seajsdemo/resources/js/modules/jquery_cookie/0.0.1/jquery.cookie' ,
//local lib
'user' : 'user/main'
},
//base path for business module
base: '/seajsdemo/resources/js/core/0.0.1',
charset: 'utf-8'
});
业务模块管理。每个业务模块一个文件夹,并且包含一个package.json,在package.jso中需要指定name、spm.main和spm.buildArgs,其中name是打包之后输出文件的目录,必须和模块文件夹名称相同;spm.main指定需要模块入口的js文件;spm.buildArgs是spm build的参数,需要指定在seajs.config.js中忽略的第三方库和其他业务模块库。参考如下:
{
"name": "hello",
"spm": {
"main": "index.js",
"buildArgs": "--ignore jquery,user,cookie"
}
}
业务模块打包。打包工具spm的安装参考 http://lpyyn.iteye.com/blog/2232659 ,为了方便每个模块的打包,在模块文件夹同级目录下建了一个打包脚本package.sh,能够将各个模块打包到指定的目录下。参考如下:
#!/bin/bash
# package module js
spm build -I ./hello -O ../dist
spm build -I ./user -O ../dist
echo 'spm complete .'
注: 附件seajsdemo.rar解压后放到tomcat下运行。
- 大小: 147 KB
分享到:
相关推荐
使用 创建基于seajs和less的前端开发工作流程. 什么是前端工作流 随着web的日益发展,前端的工作越来越繁多,使用的工具也越来越多 目前一个基本的web开发流程类似下面的结构 1、建立项目,梳理目录结构 2、coding.....
产品发布之后,我们会投入更多全职的工程师来专心打磨这个产品,同时也呼吁更多的前端开发爱好者共同来完善这个框架。Amaze UI的目标帮助开发者提高开发效率,提升网页效果,即用最短的时间做出最赞的网页,使更多的...
##基于seajs和grunt的前端目录结构 |--static |-- demo 例子 |-- app 业务demo |-- js 源码 |--app 业务逻辑代码 |--public 公共资源 |--js 部署代码 |--dist 部署业务逻辑代码 |--jquery |--seajs |--...
熟悉及构建工具,并掌握和构建配置方式环境要求:Linux 2.6+ / Nodejs / rsync / inotifywait标签:基于SeaJS , Web前端集成自动化构建 , Buildjs前序随着项目业务逻辑的增加,先前的开发方式已经多少会对效率产生...
然后一开始在解决这个问题的时候,并不是很顺利,在npm上并没有那种特别流行的专门用来做seajs合并压缩的gulp插件,虽然在seajs的github上也看了不少的issue,但是大多数都是只能将所有的模块文件合并成一个总的文件...
Magix 是用于构建大型富交互单页应用的前端MVC框架。它提供了基于树状结构的视图系统,页面初始渲染以及URL 变动都将从根 View 开始逐层进行, 这使得局部变化井然有序;同时遵循Magix的开发约定可以很好的控制页面...
小工具游乐场介绍前端组件管理系统,前端基于Vue2 / Vue-router / Vuex实现,基于实现,而基于野狗云实现。除了组件管理之外,本项目同时演示了一种不依赖构建工具开发Vue项目的思路,详细介绍了功能组件管理二级...
闲着无聊,写了一个支持seajs模块化项目的构建工具(前端集成解决方案),具有以下功能: 以 seajs 作为模块化框架 所有静态资源自动加 md5版本戳,seajs均可加载定位 支持给所有静态资源添加域名前缀,seajs加载...
闲着无聊,写了一个支持seajs模块化项目的构建工具(前端集成解决方案),具有以下功能: 以 seajs 作为模块化框架 所有静态资源自动加 md5版本戳,seajs均可加载定位 支持给所有静态资源添加域名前缀,seajs加载...
LEGO-Mobile 是 LEGO 移动前端开发框架,提供简单、快速的 Web 开发体验。Lego Mobile 是基于 zepto 和 seajs 的轻量级移动组件库,提供了一系列webapp的UI解决方案。支持 UC,QQ,Opera,Safari,Chrome 等国内主流...
在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工具, 更多有关AMD和CMD的区别, 后面参考给了...
在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工具, 更多有关AMD和CMD的区别, 后面参考给了...
系统基于业内主流WEB框架LAMP进行应用的开发(LAMP框架具有Web资源丰富、轻量、快速开发等特点) 软件系统整体设计方案全文共25页,当前为第9页。 系统WEB前端使用主流的模块加载框架SeaJS,轻量级的js库JQuery, ...