2.精通前端系列技术之JavaScript模块化开发 seajs(一)
在使用seajs模块化开发之前,直接在页面引用js会容易出现冲突及依赖相关的问题,具体问题如下
问题1:多人开发脚本的时候容易产生冲突(比如全局参数冲突,方法名冲突),可以使用命名空间降低冲突,不能完全避免冲突
// JavaScript Document /*var a = 10; function tab(){} function drag(){} function dialog(){}*/ var miaov = {}; //名字比较长 , 只能降低冲突,不能完全避免 miaov.a = ; miaov.tab = function(){}; miaov.drag = function(){}; miaov.dialog = function(){};
问题2:依赖问题,js引用的依赖关系,如下代码b.js依赖于a.js,那么b.js不能再a.js之前加载。
传统脚本所依赖的脚本必须全部引用进来
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script> /*一个页面中:
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
<script src="d.js"></script>*/ show.js : 日历组件 你的同事:
<script src="a.js"></script>
<script src="show.js"></script>
show(); 你的同事:
<script src="a.js"></script>
<script src="b.js"></script>
<script src="show.js"></script>
show(); 你的同事:
<script src="a.js"></script>
<script src="b.js"></script>
<script src="show.js"></script>
<script src="hide.js"></script>
show(); </script>
</head> <body>
</body>
</html>
当网站开发越来越复杂的时候,经常遇到冲突、依赖问题,如何解决以上这些问题,就是我们js模块化所要解决的问题。
JS模块化
如何解决?
Seajs库
解决刚才出现的问题,提升代码的可维护性
模块的概念
http://seajs.org
Seajs 与 jQuery的区别
query像是冲锋陷阵的士兵(操作DOM操作,用于实际开发),seajs就像是管后勤的(模块开发,不涉及逻辑)
1.使用seajs
seajs如何解决?
①引入sea.js的库
②如何变成模块?
define
③如何调用模块?
exports
seajs.use
④如何依赖模块?
require
// JavaScript Document define(function(require,exports,module){ //sea下的参数 : 不允许修改的 //exports : 对外提供接口的对象 function show(){
alert();
} exports.show = show; });
// JavaScript Document define(function(require,exports,module){ //sea下的参数 : 不允许修改的 //require : 模块之间依赖的接口 var a = require('./module3.js').a; //当引入的是sea下面的模块的时候,那么require执行完的结果就是exports function show(){
alert(a);
} exports.show = show; });
// JavaScript Document //var a = 100; define(function(require,exports,module){ //alert( module.exports == exports ); /*require.async('.js/module2.js',function(){
alert('模块加载完的回调');
});*/ var a = ; module.exports = {
a : a
}; });
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="sea/sea.js"></script>
<script> //两个参数 : 第一个参数 : 模块的地址 第二个参数 : 回调函数(回调函数的参数代表exports) //localhost/seajs+gruntjs/sea/js/module1.js //sea的默认根目录 : sea.js这个文件 seajs.use('./js/module1.js',function(ex){ ex.show(); // show(); // function show(){
alert();
} }); seajs.use('./js/module2.js',function(ex){ ex.show(); // show(); // function show(){
alert();
} }); </script>
</head> <body>
</body>
</html>
2.精通前端系列技术之JavaScript模块化开发 seajs(一)的更多相关文章
- 2.精通前端系列技术之JS模块化开发-深入学习seaJs(四)
深入学习seajs 配置信息 alias : 别名配置 paths : 路径配置 vars : 变量配置 map : 映射配置 preload : 预加载项 debug : 调试模式 base : 基 ...
- 2.精通前端系列技术之seajs模块化使工作更简单(二)
drag.js // JavaScript Document //B开发 define(function(require,exports,module){ function drag(obj){ ; ...
- 2.精通前端系列技术之seajs和gruntJs结合开发(三)
1.我们先来了解下模块化历史 模块化历史 nodeJS的出现(http://nodejs.org/) commonJS规范(http://www.commonjs.org/) 浏览器JS的模块化? A ...
- 3.精通前端系列技术之深入学习Jquery(一)
使用Jquery的好处: •简化JS的复杂操作 •不再需要关心兼容性(原生js获取元素样式.事件需要做兼容性) •提供大量实用方法 1.选择网页元素 <!DOCTYPE html PUBLIC ...
- 1.精通前端系列技术之js正则表达式
在不会正则的时候,我们寻找字符串某些规律或者截取部分特殊字符的时候,我们需要写很多行代码来获取我们想要的字符串,在使用正则之后,代码量会大量简洁很多 1.字符串的比较,判断是否数字类型的字符串,我们用 ...
- Javascript模块化开发-轻巧自制
Javascript模块化开发-轻巧自制 一.前言现在javascript的流行,前端的代码越来越复杂,所以我们需要软件工程的思想来开发前端.模块化是必不可少的,这样不仅能够提高代码的可维护性.可扩展 ...
- Javascript模块化开发,使用模块化脚本加载工具RequireJS,提高你代码的速度和质量。
随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...
- Javascript 模块化开发上线解决方案
最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...
- JavaScript模块化开发的那些事
模块化开发在编程开发中是一个非常重要的概念,一个优秀的模块化项目的后期维护成本可以大大降低.本文主要介绍了JavaScript模块化开发的那些事,文中通过一个小故事比较直观地阐述了模块化开发的过程. ...
随机推荐
- mysql 事件调度器
1.mysql事件调度器,也就是计划任务,计划做某事,有两种方式: 2.在某个时间点做某事,AT TIMESTAMP [+ INTERVAL INTERVAL] 某个时间点加上偏移. 3.定时地做某事 ...
- STM32学习笔记(二) 基于STM32-GPIO的流水灯实现
学会了如何新建一个工程模板,下面就要开始动手实践了.像c/c++中经典的入门代码"hello world"一样,流水灯作为最简单的硬件设备在单片机领域也是入门首推.如果你已经有了一 ...
- 最大的LeftMax与rightMax之差绝对值
这两天去 牛客网 混了下,遇到的几道题都很有意思,尤其是今晚这道,比赛时不会做,后来看了别人的代码才突然想通的,题目链接: 最大的LeftMax与rightMax之差绝对值,大意是: 想了一晚都没想出 ...
- RTC框架
RPC是系统间的一种通信方式,系统间常用的通信方式还有http,webservice,rpc等,一般来讲rpc比http和webservice性能高一些,常见的RPC框架有:thrift,Finagl ...
- redhat 6.4 yum 本地配置简记
准备工作 ----------------------------------------------------------------------------- 1. 加载光驱 将iso镜像文件 ...
- sql中charindex
假如你写过很多程序,你可能偶尔会碰到要确定字符或字符窜串否包含在一段文字中,在这篇文章中,我将讨论使用CHARINDEX和PATINDEX函数来搜索文字列和字符串.我将告诉你这两个函数是如何运转的,解 ...
- 实战微信JS SDK开发:贺卡制作与播放(1)
前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细 ...
- Spring表达式语言 之 5.4在Bean定义中使用EL(拾伍)
5.4.1 xml风格的配置 SpEL支持在Bean定义时注入,默认使用"#{SpEL表达式}"表示,其中"#root"根对象默认可以认为是Applicati ...
- Web网页性能管理详解
你遇到过性能很差的网页吗? 这种网页响应非常缓慢,占用大量的 CPU 和内存,浏览起来常常有卡顿,页面的动画效果也不流畅. 你会有什么反应?我猜想,大多数用户会关闭这个页面,改为访问其他网站.作为一个 ...
- 怎么在Form1调用Form2中的成员?
第一种情况,form1和form2有关系,也就可以说成是form1里面有个事件,通过这个事件来打开form2在这个情况下这么写form2 f2 = new form2(这里写form1中的变量值)f2 ...