sea.js的模块化开发
为什么使用sea.js?
Sea.js 追求简单、自然的代码书写和组织方式,具有以下核心特性:
- 简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像Node.js 一般书写模块代码。
- 自然直观的代码组织方式:依赖的自动加载、配置的简洁清晰,可以让我们更多地享受编码的乐趣。
Sea.js 还提供常用插件,非常有助于开发调试和性能优化,并具有丰富的可扩展接口。
兼容性
Sea.js 具备完善的测试用例,兼容所有主流浏览器:
- Chrome 3+ ✔
- Firefox 2+ ✔
- Safari 3.2+ ✔
- Opera 10+ ✔
- IE 5.5+ ✔
Sea.js 可运行在 Mobile 端,包括 Hybrid 模式的 App 上。理论上,Sea.js 可以运行在任何浏览器引擎上。
下面我用一个简单示例来开启sea.js的模块化开发之旅:
目录结构:
hello.html文档代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>测试sea.js的API</title>
- <style>
- #container{
- width:200px;
- height: 200px;
- margin: 0 auto;
- border: 1px solid #669991;
- }
- .init{
- background-color: #ff6600;
- }
- </style>
- </head>
- <body>
- <div id="container"></div>
- <script src="../sea-modules/seajs/2.2.0/sea.js"></script>
- <script>
- // seajs 的简单配置
- seajs.config({
- // Sea.js 的基础路径
- base:"../sea-modules/",
- // 设置别名,方便调用
- alias:{
- "jquery":"jquery/jquery/1.10.1/jquery.js"
- }
- });
- //for 开发阶段
- if(location.href.indexOf("?dev")>0){
- //加载一个main.js模块
- seajs.use("../static/hello/src/main");
- }
- //for上线阶段
- else{
- //加载一个main.js模块
- seajs.use("examples/hello/1.0.0/main");
- }
- </script>
- </body>
- </html>
main.js的代码:
- //定义一个模块
- define(function(require){
- //获取start.js的接口
- var Start=require('./start');
- //生成Start的实例
- var s=new Start('#container');
- //调用Start的方法
- s.render();
- });
start.js的代码:
- define(function(require,exports,module){
- //获取jQuery的接口
- var $=require('jquery');
- //定义名为Start的构造函数对象
- function Start(container){
- this.container=$(container);
- }
- //对外提供接口
- module.exports=Start;
- //定义Start对象的原型方法
- Start.prototype.render=function(){
- this._init();
- this.container.css('border','5px solid #f00');
- };
- Start.prototype._init=function(){
- this.container.addClass('init');
- return this;
- }
- });
示例效果如下:
sea.js的模块化开发的更多相关文章
- 模块化开发(三)---通过node.js学习模块化开发
由于改文章有点大,部分代码格式有点问题,编辑之后博客园莫名其妙推出,有问题可以留言沟通. 什么是Node? 它是一个在浏览器之外可以解析和执行javascript代码的运行环 境,或者说是一个运行 ...
- JS利用 Sea.js 实现模块化:拖拽、缩放及范围限制
知识点总结: Sea.js的使用:define.export.seajs.use.require等方法: 参考:http://seajs.org/docs/ Sea.js与require.js的区 ...
- 关于require.js的模块化开发
先是自己打了一些demo,然后回过头来看阮大神的博客,感觉很多莫名其妙的问题,瞬间解决了:很舒服,放上链接,希望对其他人也有帮助: 先是在html的末尾引入了require.js . da ...
- 【require.js】模块化开发
一.Require.js及AMD Require.js:是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一. AMD(Asynchronous Module Definit ...
- Sea.js学习1——初识Sea.js
Sea.js 是一个成熟的开源项目,核心目标是给前端开发提供简单.极致的模块化开发体验. 使用 Sea.js,在书写文件时,需要遵守 CMD (Common Module Definition)模块定 ...
- 前端模块化开发的价值(seaJs)
随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做 ...
- 模块化开发--sea.js
当你的网站开发越来越复杂的时候,会经常遇到一下问题吗?1.冲突2.性能3.依赖如果在多人开发或者是复杂的开发过程中会经常遇到这些问 题,就可以用模块化开发来解决.以上问题是如何产生的?1.冲突:如果你 ...
- Sea.js提供简单、极致的模块化开发体验
为什么使用 Sea.js ? Sea.js 追求简单.自然的代码书写和组织方式,具有以下核心特性: 简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码. ...
- JS模块化开发:使用SeaJs高效构建页面
一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...
随机推荐
- Python中的exec、eval的区别
通过exec可以执行动态Python代码,类似Javascript的eval功能: 而Python中的eval函数可以计算Python表达式,并返回结果: (exec不返回结果,print(eval( ...
- phpexcel如何读取excel的数据和如何导出数据到excel
phpexcel如何读取excel的数据和如何导出数据到excel 一.总结 一句话总结:去官网看参考手册和api,或者找中文的博客或者参考手册 1.phpexcel插件如何下载? 其实这些插件不仅可 ...
- 计时器(C#)
很多项目要用到计时器,我就自己包装了一个,倒计时还没加,有时间再加上吧.持续更新 using UnityEngine; using UnityEngine.UI; /// <summary> ...
- Uploading files using ASP.NET Web Api
http://chris.59north.com/post/Uploading-files-using-ASPNET-Web-Api
- hdu5692 dfs序线段树
这是补的知识点,按先序遍历的顺序建立dfs序,用左右两个值代表整个区间,因为dfs序最重要的特点就是子树的区间是连续的 建立线段树时,需要用重新标过的 下标来建立 #pragma comment(li ...
- 关于C++中的pow小记(转)
昨天在敲一个数位DP的问题,但是用到了这个坑D的问题,找了半天错,还以为又是什么奇怪的算法,结果发现思路一致,然后自己各种YY修改,最后不得不和正确答案比对,但是最后发现标准答案和自己的想法几乎一模一 ...
- 关于WM8741对于32位音频的支持
WM8741据说是支持到32位192K,但实际上,对于32位,它只是支持I2S总线上32位数据输入,内部还是转换成24位来做滤波处理的,DA转换的精度是达不到32位的.不过它在转换到24位的时候有一个 ...
- Kali 2.0 日常软件
目的 如果你用Kali作为学习安全之类的作业,那么他预装的一些软件已经够用了,但是,如果你打算用它来当做日常主要OS,那么安装一些常用软件就是一项重要作业. 软件 如果你是在标准用户下安装,别忘了su ...
- 条款36:绝对不要重新定义,继承而来的non-virtual函数
重新定义一个继承而来的non-virtual函数可能会使得导致当函数被调用的时候,被调用的函数不是取决于调用的函数究竟属于的对象,而是取决于调用函数的指针或者引用的类型. 所以一般的说主要有两种观点在 ...
- New Concept English three (49)
31w/m 51error It is a good thing my aunt Harriet died years ago. If she were alive today she would n ...