javascript模块化编程库require.js的用法
随着javascript的兴起,越来越多的公司开始将JS模块化,以增加开发的效率和减少重复编写代码的。更是为了能更加容易的维护日后的代码,因为现在的随着人们对交互效果的越来越强烈的需求,我们的JS代码也从以前的几十行代码,慢慢的发展到了现在的几百甚至上千过万,但是要怎么才能把这些代码很好的整合起来呢?
面向对象的编程方法应该是目前最为流行的编程方式,将所有代码都模块化,不仅有利于增加我们开发效率,而且还使我们代码更容易维护。今天就推荐一个目前比较流行的require.js库,用来编写javascript模块化倒是不错的一个选择,以下是我的一些学习总结,希望对大家学习这个库有点帮助
require.js主要特色功能
我们现在写JS一般一个站点最少都会有两到三个JS文件,多则七八个JS文件都很正常。看下淘宝的首页加载的JS文件数量:
:
是不是非常的惊人,巨多的文件,面对这样的多的JS文件,说实在的很头疼,而且许多JS文件是有依赖性的,例如:
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>
<script type="text/javascript" src="3.js"></script>
像上面这样的JS文件,2.js文件要依赖与1.js文件,3.js又要依赖前面两个js文件,他们之间的先后顺序还不能出现错误,否则JS就会报错。像上面这样一个页面需要如此多的JS文件,对我们使用他们的功能时其实是种负担,因为调用一个功能的时候我们需要加载多个JS文件,而且调用JS的顺序必须按照顺序。除了这个问题,我还不知道,我们调用的这些JS会不会跟其他JS发生冲突,这就更加坑爹了
但是上面这些问题,require.js可以很好的解决:
实现js文件的异步加载,避免网页失去响应;
管理模块之间的依赖性,便于代码的编写和维护。
导入require.js文件方法
首先大家可以到require.js的官网去下载最新的文件包。下载完以后我们把require.js放到我们的JS文件目录下,然后把它加载到页面上:
- <script src="js/require.js" defer async="true" ></script>
我们上面给这个JS加了两个额外的属性:defer和async,这两个属性主要是为了让浏览器能在页面元素全部加载完以后再加载JS,我称这个为异步加载JS,这种方法可以避免因为加载JS时页面卡住,出现假死的状态,所以我们让先让页面呈现出来,然后在加载JS,相当于平常我们把JS放到页面底部原理差不多。上面defer属性是因为IE不支持async,所以加上的。
加载require.js以后,下一步就要加载我们自己的JS文件了。假如我们自己的代码文件是main.js,也放在JS目录下面。那么,只需要写成下面这样就行了:
- <script src="js/require.js" data-main="js/main"></script>
data-main属性的作用是,指定网页程序的主模块。在上例中,就是js目录下面的main.js,这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js,所以可以把main.js简写成main。
require.js配置文件方法
我们的JS文件不单单是只要main.js这个文件,我们还需要加载其他文件,这时候我们只需要在main.js这个文件里面编写好你需要另外加载的JS文件,这时我们要用他的require()函数,这个函数有两个参数:第一个参数是一个数组,表示所依赖的模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,我们将调用它;
- require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
- //回调成功后的操作
- });
上面模块会按照你填写的先后顺序异步加载到页面中:A,B,C。加载成功后才会执行操作代码。这样就可以防止页面出现假死的状况了。
可能有很多的人JS都是依赖一些框架来写的,这时候我们就需要加载例如jquery等库进来的时候,我们就可以这样写:
- requirejs(['jquery', 'canvas', 'app/sub'],
- function ($,canvas,sub) {
- //jQuery, canvas and the app/sub module are all
- //loaded and can be used here now.
- });
看上面的代码,jquery他会自动去寻找jquery.js文件,所以你想加载成功你的jquery你就需要将他命名为jquery.js这样才行。但是如果希望你的jquery文件可以带版本号,require.js也可以满足你的需求,它提供了require.config()的函数,可以让我们自定义一些路径,文件名称。我们可以这样写代码:
- require.config({
- paths: {
- "jquery": "jquery-1.8.3.min",
- }
- });
请记住一点,我们的文件名不需要加.js后缀,否则require.js会找不到文件的。
看到上面的代码,有些人可能还会问,如果我的JS文件不是跟main.js在同一个目录的时候怎么办?方法和上面的差不多,直接改目录,假设我们jquery放在JS文件夹下面的libs目录下面时,我们可以这样写:
- require.config({
- paths: {
- jquery: 'libs/jquery-1.8.3.min'
- }
- });
还可以用另外一种写法,直接改变基目录:
- requirejs.config({
- baseUrl: 'js/lib',
- paths: {
- jquery: 'jquery-1.8.3.min'
- }
- });
require.js模块化编程方法
require.js的所有模块必须采用特定的define()函数的来定义。如果一个模块不依赖其他模块,那么就可以直接定义在define()函数中。例如:
- //main.js
- define({
- color: "black",
- size: "unisize"
- });
调用上面方法:
- //main.js
- require(['main'], function (main){
- console.log(main.color); //black
- console.log(main.size); //unisize
- });
如果我们要编写函数,我们可以这样写:
- define(function (){
- var Total = function (x,y){
- return x+y;
- };
- return {
- total: Total
- };
- });
调用上面的代码:
- //main.js
- require(['main'], function (main){
- console.log(wnf.total(5,10));
- });
require.js加载的模块,采用AMD规范。也就是说,模块必须按照AMD的规定来写。具体来说,就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中
如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。
- define(['jquery'], function(){
- var foo = function(){
- $("body").click(function(){
- alert("jquery");
- });
- }
- return {
- foo : foo
- };
- });
然后我们调用上面的方法:
- //main.js
- require(['main'], function (main){
- main.foo();//jquery
- });
上面是我的学习笔记,看完你应该能对require.js有些了解,如果想更详细的了解这个库的功能,建议大家可以到require.js官网去进行深入了解学习。
转载请注明来自 520UED http://www.520ued.com/article/538830e8b992a7c43f5c204d
javascript模块化编程库require.js的用法的更多相关文章
- Javascript模块化编程:require.js的用法
摘自:http://blog.jobbole.com/30046/ 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库 ...
- Javascript模块化编程(三)require.js的用法及功能介绍
这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战.我采用的是一个非常流行的库require.js感兴趣的朋友可以了解下啊 我采用的是一个非常流行的 ...
- Javascript模块化编程-require.js
转自:https://www.cnblogs.com/digdeep/p/4607131.html Javascript模块化编程(一):模块的写法 随着网站逐渐变成"互联网应用程序&quo ...
- JavaScript模块化编程之require.js与sea.js
为什么要模块化:当今,网站以不再是一个简单的页面,JavaScript也不再是做一些简单的脚本验证,随着WEB.20时代到来,前端工程师面临的必将是越来越庞大的JavaScript代码,越来越复杂的内 ...
- Javascript模块化编程(三):require.js的用法
Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...
- (转)Javascript模块化编程(三):Require.js的用法
转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...
- Javascript模块化编程require.js的用法
JS模块化工具requirejs教程(一):初识requirejs http://www.runoob.com/w3cnote/requirejs-tutorial-1.html JS模块化工具req ...
- javascript模块化编程(三):require.js用法
本文来自阮一峰 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require ...
- Javascript模块化编程(三):require.js的用法(转)
这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...
随机推荐
- weex 启动 ios 模拟器
前提需要的安装 node npm weex-toolkit cocoaPods 1. 创建weex工程 weex create helloWolrd 2. 进入helloWolrd文件夹安装依赖,我用 ...
- Python推荐算法学习1
1.闵可夫斯基距离 闵可夫斯基距离可以概括曼哈顿距离与欧几里得距离. 其中r越大,单个维度差值大小会对整体产生更大的影响.这个很好理解,假设当r=2时一个正方形对角线长度,永远是r=3时正方体对角线 ...
- Python实现XML文件解析
1. XML简介 XML(eXtensible Markup Language)指可扩展标记语言,被设计用来传输和存储数据,已经日趋成为当前许多新生技术的核心,在不同的领域都有着不同的应用.它是web ...
- ftp服务配置
文件传输协议(File Transfer Protocol,FTP),基于该协议FTP客户端与服务端可以实现共享文件.上传文件.下载文件. FTP 基于TCP协议生成一个虚拟的连接,主要用于控制F ...
- 《.NET 设计规范》第 3 章 命名规范
<.NET 规范>第 3 章 命名规范 3.1 大小写约定 要把 PascalCasing 用于由多个单词构成的命名空间.类型以及成员的名字. 要把 camelCasing 用于参数的名字 ...
- exp/imp 多用户导入导出
创建用户 创建三个用户test1,test2,test3及表table1,table2,table3 SQL> create user test1 identified by test1 def ...
- SpringBoot与Mybatis整合方式01(源码分析)
前言:入职新公司,SpringBoot和Mybatis都被封装了一次,光用而不知道原理实在受不了,于是开始恶补源码,由于刚开始比较浅,存属娱乐,大神勿喷. 就如网上的流传的SpringBoot与Myb ...
- http目录显示时间与服务器相差8小时
一直用nginx做http服务,代码里访问过文件地址,并未认真关注过访问http目录下的时间戳.今天浏览文件的时候发现一个问题.web上显示的文件时间戳与服务器时间相比差8个小时.具体表现看下图: w ...
- SEO页面优化以及如何对单页面应用进行SEO优化
一.简介 1.何为SEO? SEO(search engine optimization),翻译为搜索引擎优化,是利用搜索引擎的搜索规则来提高在相关搜索引擎的排名以及访问量的方式. 2.目的 为了获取 ...
- 给你的jQuery项目赋予Router技能吧
现在你不会React/Vue都不好意思说自己是前端,不过我相信很多前端项目还是基于jquery类库的传统模式的,假如你有追求的态度使用过requireJs这个库,你一定思考过一个问题,或者说一种组件化 ...