模块化以及requirejs和seajs
我们用模块化的思想进行网页的编写是为了更好的管理我们的项目
模块与模块之间是独立存在的,每个模块可以独立的完成一个子功能。
模块化所涉及的规范commonjs,AMD,CMD,UMD
其中的commonjs是服务器规范,用到的是同步加载,适用于nodejs后台的操作
由于commonjs的特性是同步加载,并不适用于前端,人们想解决前端异步加载的问题,AMD就应运而生了。
AMD将commonjs的思想全部推翻,产生了一套新的规范,它是专门为前端定制的规范,实现了异步加载。
CMD和AMD的区别是可以实现按需加载。
UMD则是commonjs和AMD的结合。
requirejs遵循的是AMD规范
requirejs:
require.js提供两种加载(前置加载:2.0以前的版本使用,按需加载(异步加载,2.0以后的版本))
requirejs的引入:
页面只需要插入一个script标签:
<script src="js/requirejs_module/require.min.js" data-main="js/require-main"></script>
上面的data-main是用来加载配置文件的。
//require-main的配置如下:
require.config({
paths:{
"m1":"js/js-module/m1",
"m2":"js/js-module/m2",
"my":"js/js-module/me
shim:{
"my":{export:"myFunc"}
}//shim是为不支持AMD的js文件提供的方法(尽量不适用此方法,应该讲js文件进行改造)
}) //paths用来配置所有路径
模块的定义:(define关键字)
define(function(){
})
define(["module2"],function(m2){ })
定义的模块可在其他模块的内部加载
define(function(require,exports,module){
var m2=require("module2");//内部加载模块"module2"
m2.func2
})
模块的加载方法如下:
require(["m1"],function(m1){
var fun1=function(){
}
var fun2=function(){
}
return{fun1:fun1,fun2:fun2
}
//模块的前置加载
require(["fun1,fun2"],function(m1,m2){})
seajs:
1.sea.js的导入
<script src="js/seajs_modules/sea.js"></script>//官网中提供的js文件
<script src="js/seajs_config.js"></script>//自己建立的配置路径
配置路径中:
seajs_config.js代码如下:
seajs.config({
base:".", //指定根路径
alias:{
"jquery":"js/seajs_modules/jquery-1.11.2-min",//导入的jQuery文件
"bootstrap":"js/seajs_modules/bootstrap.min",//导入的框架
"reg":"js/modules/reg/reg",//要进行模块化配置的页面
"login":"js/modules/login/login",
"student":"js/modules/student/register"
} //alias别名
});
使用:
seajs.use("reg",function(reg){
reg.load();
});
seajs中模块的定义:
模块的定义:(关键字:define)
define(function(require){
var $=require("jquery");//加载jQuery
var load=function(){
$("#content").load("js/modules/login/login.html",function(){
。。。。。。
});//在content里面加载页面login.html
};
return{load:load}//定义的模块中返回的方法
});
引入的第三方插件要进行改造:
第三方插件改造:
jQuery改造:
在js代码外面包裹:
define(function(){
。。。。。。
return $.noconflict();
})
上面的return $.noconflict():运行这个函数将变量$的控制权让渡给第一个实现它的那个库(这有助于确保jQuery不会与其他库的$对象发生冲突。 在运行这个函数后,就只能使用jQuery变量访问jQuery对象。例如,在要用到$("div p")的地方,就必须换成jQuery("div p")。 '''注意:'''这个函数必须在你导入jQuery文件之后,并且在导入另一个导致冲突的库'''之前'''使用。当然也应当在其他冲突的库被使用之前,除非jQuery是最后一个导入的。
bootstrap改造:
define(function(require,exports,module){
return function($){
......js内容区.......
}})
模块化实现的都是单页面应用。
模块化以及requirejs和seajs的更多相关文章
- RequireJS与SeaJS模块化加载示例
web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有 Package的Javascript语言变得难以管理, ...
- RequireJS和seaJS的区别与联系
RequireJS和seaJS的区别与联系联系:都是模块加载器,倡导模块化开发理念,核心价值是让 JavaScript 的模块化开发变得简单自然. RequireJS(除了是 ...
- 从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs
[前端神秘的面纱] 对后端开发来说,前端是神秘的, 眼花缭乱的技术,繁多的框架, 如果你还停留在前端等于只用jquery做开发,那么你out了, 本文从Java的角度简述下目前前端流行的一些框架. 水 ...
- LABjs、RequireJS、SeaJS 哪个最好用?为什么?
感谢玉伯在知乎的奉献,下面全文转载:http://www.zhihu.com/question/20342350/answer/14828786 LABjs 的核心是 LAB(Loading and ...
- LABjs、RequireJS、SeaJS 哪个最好用?为什么?- 玉伯的回答
LABjs 的核心是 LAB(Loading and Blocking):Loading 指异步并行加载,Blocking 是指同步等待执行.LABjs 通过优雅的语法(script 和 wait)实 ...
- requirejs和seajs使用感受
这几天看了下前端模块化的知识,主要是requirejs和seajs相关的知识,还未看es6的模块化知识. 由于目前项目组内的开始推广使用vue,并且开始简单的封装组件,但发现组件js的使用方式依然是原 ...
- RequireJS 与 SeaJS 的异同
相同之处 RequireJS 和 SeaJS 都是模块加载器,倡导的是一种模块化开发理念,核心价值是让 JavaScript 的模块化开发变得更简单自然. 不同之处 两者的区别如下: 定位有差异.Re ...
- JavaScript 从入门到放弃(二)模块化工具requirejs
入门教程: 1.JS模块化工具requirejs教程(一):初识requirejs 2.JS模块化工具requirejs教程(二):基本知识 描述 这几天在使用github最活跃的基于bootstra ...
- 【转】JS模块化工具requirejs教程(二):基本知识
前一篇:JS模块化工具requirejs教程(一):初识requirejs 我们以非常简单的方式引入了requirejs,这一篇将讲述一下requirejs中的一些基本知识,包括API使用方式等. 基 ...
随机推荐
- C# GDI+发生一般性错误(A generic error occurred in GDI+))
解决思路: 1. 因为 .net GDI+ 是对底层 的封装. 所以可以尝试用 Marshal.GetLastWin32Error();函数获得底层错误代码. try{ image.Save(file ...
- liunx 系统 git clone ssh代码时需要sshkey
1. 在root用户目录下 执行命令 cd .ssh cat id_rsa.pub 粘贴 ssh key
- 很重要的vue的生命周期
- html/css 布局练习3
效果图:
- Jquery想说爱你不容易
JQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作.由John Resig在2006年1月的BarCamp NYC上发布第一个版本.目前是由 Dave M ...
- Spring相关
一.Spring中ApplicationContext加载机制加载器目前有两种选择:ContextLoaderListener和ContextLoaderServlet. 这两者在功能上完全等同,只是 ...
- django-pagination 分页栏长度控制
在分页页数很多时,分页样式会很长影响美观 我们可以用两个方式控制: 1.找到django-pagination里的pagination\pagination.html,在<ul class=&q ...
- 主板BIOSCOMS故障解决三例
主板故障中因为BIOS/COMS设置不当或者因为主板电池引起的coms故障而导致主板无法正常工作的比例占了不小.今天我们就来说说主板BIOS/COMS的故障和解决.声卡维修 硬盘安装设置 CMOS设置 ...
- Python 之路 Day5 - 常用模块学习
本节大纲: 模块介绍 time &datetime模块 random os sys shutil json & picle shelve xml处理 yaml处理 configpars ...
- Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (default-compile) on project LogTest: Compilation failure -> [Help 1]
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (default ...