使用requirejs编写模块化代码

写在前面

最早接触javascript的时候,javascript代码直接扔在script标签里面就完事了。

反正代码不多,交互简单,逻辑不难,和HTML混在一起也未尝不可。

后来交互越来越复杂,代码越多越多了,我们就开始把JS代码独立到了单独的JS文件中。

公共的库引用在前,自己的逻辑代码引用在后,全局变量定义在HTML内部,在独立JS文件中直接使用变量就好。

我们会经常看到下面这种代码:

123456

<script src="1.js"></script>  <script src="2.js"></script>  <script src="3.js"></script>  <script src="4.js"></script>  <script src="5.js"></script>  <script src="6.js"></script>

通过script标签顺序去js管理依赖关系。

阮一峰老师在Javascript模块化编程(三):require.js的用法 一文中总结了这样写法的缺点:

12345

首先,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序(比如上例的1.js要在2.js的前面),依赖性最大的模块一定要放到最后加载.当依赖关系很复杂的时候,代码的编写和维护都会变得困难。

而requirejs的诞生便是为了解决这个问题。

requirejs

官网把requirejs 下载回来之后。使用一般的方法引入:

1

<script src="js/require.js"></script>

但是这样的方法,还是可能在加载require.js的时候导致网页失去响应。解决方案一般有两种:

  1. 把上面的代码放到网页底部
  2. 使用异步的方法加载,如下:

1

<script src="js/require.js" defer async="true" ></script>

async属性 表明这个文件需要异步加载,避免网页失去响应。

不过IE下不支持这个属性,只支持defer,所以可以把defer也写上。

加载主模块

在上一步,我们已经引入了require了,那么require怎么知道我们究竟要加载什么东西呢?答案是使用data-main属性。 假设我们的主模块为js/home.js,引入代码应该如下:

12

<script src="js/require.js" data-main="js/home"></script>//require.js默认文件后缀为js,所以home.js可以写成home。

接下来我使用58HouseSearch 的代码来讲解重构过程。

在此项目里面,重构前大概就是JS变量漫天飞,js文件里面各种函数到处乱放。一开始用起来还没什么,后来加入了更多功能的时候,JS代码维护起来就疼不欲生了。因此托了个小伙伴帮忙使用模块化思想重构了一下JS代码。

上面说了,我们首先需要创建我们的模块,在这个项目里面,主模块叫home.js。

home.js中我们需要配置一下require.config.

12345678910111213141516171819

require.config({ baseUrl: '/DomainJS/', paths: { jquery: "lib/jquery-1.11.3.min", "AMUI": "lib/amazeui.2.7.1.min", "jquery.range": "lib/jquery.range", "es5": "lib/es5", "mapController": "mapController", "addToolbar": "addToolbar", }, shim: { "addToolbar": { deps: ["jquery"] }, "jquery.range": { deps: ["jquery"] } }});

在这里我主要配置了一下baseURL(所有模块的查找根路径),paths(名称映射),shim( 为那些没有使用define()来声明依赖关系、设置模块的”浏览器全局变量注入”型脚本做依赖和导出配置。)

关于require.config的详细内容可以看下下面这些文章:

  1. RequireJS进阶:配置文件的学习
  2. RequireJS进阶:模块的优化及配置的详解

配置做完了,我们也可以开始真正写我们的逻辑代码了,我们使用require来加载我们需要的库。 代码如下:

1234567891011121314151617181920212223242526272829303132333435

require(['domready!', 'jquery', 'AMUI', 'mapController', 'city', 'commuteGo'], function (doc, $, AMUI, mapController, city, commuteGo) { city.initAllCityInfo(); mapController.init(); $("input[name='locationType']").bind('click', mapController.locationMethodOnChange) $("input[name='vehicle']").bind('click', commuteGo.go) $('#Get58Data').bind('click', function(e) { e.preventDefault(); mapController.Get58DataClick(); e.stopPropagation(); }); $.ajax({ type: "post", url: "../Commom/GetPVCount", data: { }, success: function (result) { if (result.IsSuccess){ $("#lblPVCount").text(result.PVCount); }else { $("#lblPVCount").text(0); console.log(result.Error); } } }); $('#search-offcanvas').offCanvas({ effect: 'overlay' }); $(".amap-sug-result").css("z-index", 9999);})

忽略function里面的具体逻辑,加载如下:

123456

require(['domready!', 'jquery', 'AMUI', 'mapController', 'city', 'commuteGo'], function (doc, $, AMUI, mapController, city, commuteGo){//todo});

第一个参数为一个数组,表示所依赖的模块,此处为[‘domready!’, ‘jquery’, ‘AMUI’, ‘mapController’, ‘city’, ‘commuteGo’];

第二个参数为回调函数,当前面指定的模块都全部加载成功之后,便调用此函数。加载的模块会以参数形式传入此函数,从而在回调函数内部就可以使用这些模块啦。

require()异步加载所需模块的时候,此时浏览器并不会失去响应;当前面的模块加载成功之后,执行回调函数才会运行我们的逻辑代码,因此解决了依赖性问题。

讲完了模块加载,我们下面讲一下模块编写。

AMD模块编写

require.js加载的模块的采用的AMD规范。所以我们的模块必须按照AMD的规定来写。

关于AMD规范详情可以看这个文章:Javascript模块化编程(二):AMD规范

模块有两个情况,不依赖其他模块和依赖其他模块。

不依赖其他模块

直接define定义,使用function回调。

58HouseSearch/DomainJS/helper.js

123456789101112

define(function () { //获取URL中的参数 var getQueryString= function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } return { getQueryString: getQueryString, };})

依赖其他模块

define中如同require一样,用数组表明需要加载的模块,function回调。

58HouseSearch/DomainJS/marker.js

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455

define(['mapSignleton', 'city', 'transfer'], function(mapSignleton, city, transfer) { var _map = mapSignleton.map; var _workMarker = null; var _markerArray = []; var load = function(x, y, locationName) { _workMarker = new AMap.Marker({ map: _map, title: locationName, icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png', position: [x, y] }); } var add = function(address, rent, href, markBG) { new AMap.Geocoder({ city: city.name, radius: 1000 }).getLocation(address, function(status, result) { if (status === "complete" && result.info === 'OK') { var geocode = result.geocodes[0]; var rentMarker = new AMap.Marker({ map: _map, title: address, icon: markBG ? 'IMG/Little/' + markBG : 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', position: [geocode.location.getLng(), geocode.location.getLat()] }); _markerArray.push(rentMarker); rentMarker.content = "<div><a target = '_blank' href='" + href + "'>房源:" + address + " 租金:" + rent + "</a><div>" rentMarker.on('click', function(e) { transfer.add(e, address); }); } }) }; var clearArray = function() { if (_markerArray && _markerArray.length > 0) _map.remove(_markerArray); _markerArray = []; } var clear = function() { if (_workMarker) { _map.remove(_workMarker); } } return { load: load, add: add, clearArray: clearArray, clear: clear };});

这样的话,一个供require调用的模块也就写好了。

最后感谢小伙伴Larry Sean 帮忙重构代码。

全文完。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Spark学习技巧

Kafka源码系列之以kafka为例讲解分布式存储系统

Kafka源码系列,浪尖是以kafka 0.8.2.2为例给大家讲解。由于公众号阅读不适大量文字,所以浪尖会尽量精简文字。目标是大家读完kafka源码系列能彻底...

35650
来自专栏黑白安全

社会工程学之手机号伪造

任意显示手机号,使用者想令对方看到你的手机号是怎样的,对方就看到是怎样的,不会显示机主号。

34930
来自专栏Linyb极客之路

杂谈Java高并发

对于我们开发的网站,如果网站的访问量非常大的话,那么我们就需要考虑相关的并发访问问题了。而并发问题是绝大部分的程序员头疼的问题,但话又说回来了,既然逃避不掉,那...

63050
来自专栏happyJared

程序员神器,IntelliJ IDEA 2018.1 正式发布

3月27日,jetbrains正式发布期待已久的IntelliJ IDEA 2018.1,再次让人眼前一亮:什么,还能这么玩?

11310
来自专栏微服务生态

深入浅出Netflix Conductor使用

Netflix Conductor框架是典型的服务编排框架,通过Conductor还可以实现工作流和分布式调度,性能非常卓越。

1.3K30
来自专栏杨建荣的学习笔记

crontab设置导致的服务器进程异常问题 (r10笔记第4天)

前几天的时候,有个同事问我一个问题,大体的意思是突然收到报警,服务器的进程数翻了好几倍,其实那个服务器也没有任何操作。所以想让我帮忙看看。 他自己也做...

37460
来自专栏老九学堂

Java开发常用工具

Java开发常用工具 小贴士 Java是目前最流行的软件开发语言,其IDE环境也备受开发者关注,IDE可以极大的提高开发速 一 UltraEdit ? Ultr...

36850
来自专栏AhDung

弹出移动设备时报正在使用肿么办

当确信没有程序在占用该设备时,这种提示让我觉得很操蛋,NTM说明白点会死啊~好吧,这时还不忍心直接拔的童鞋可以接着往下看:

15920
来自专栏静晴轩

Gulp探究折腾之路(I)

前言: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完...

38080
来自专栏FreeBuf

JIS-CTF靶机+Kioptrix靶机渗透

最近一直在down各种CTF靶机玩,本次分享的2个靶机因较基础,故合并成一篇文章发表,本文章仅为初学者练手学习使用,大神们勿喷,感谢各位大佬!

17740

扫码关注云+社区

领取腾讯云代金券