文档章节

JavaScript模块化编程和项目实施心得

漂泊者及其影子
 漂泊者及其影子
发布于 2016/03/30 13:40
字数 427
阅读 54
收藏 1

一、模块化

    同过JavaScript我们可以很方便去去引入js调用其中的方法,但由于JavaScript淡化了类的概念,我们会比较困难去按模块去调用既定已封装好的特定功能的方法。目前关于模块化的规范有amd和commonjs,AMD是浏览器端模块化开发的规范(requirejs采用此规范),CommonJs是服务器端模块化开发规范(nodejs采用此规范)


二、模块化js的异步加载方案

    由于市面上大多浏览器JavaScript引擎都是单线程机制的,也就是说浏览器无论是渲染ui还是运行JavaScript都是单线程执行的,一般的web项目我们调用api都会通过异步JavaScript实现,但大部分项目JavaScript文件的加载实际上都是同步的。

     实际上采用AMD规范的requirejs加载所有模块化的js都是通过异步实现的,甚至requirejs其本身也可以通过异步加载实现。

        requirejs下载链接 https://github.com/amdjs/amdjs-api/wiki/require

三、代码实现

    1、html页面中引入requirejs

<script  data-main="/res/js/product.buy" src="/res/js/require.js" defer async="true" ></script>




    2、product.buy.js中加载当前页面需要引入的模块

var shim = {    
	'scroll': {      
		deps: ['jquery'],
		exports: 'jQuery.fn.scroll'    
	},
	"jquery.json-2.4": {
		deps: ['jquery'],
		exports: "JSON" 
	} 
};
require.config({    
	paths: {      
		"jquery": "/res/js/jquery-2.1.4.min",
		"cookie": "/res/js/jquery.cookie"
	},
	shim: shim
});

require([
		"xboss.wap.common.1.0",
		"module.product",
		"module.customer",
		"module.cart",
		"module.check",
		"module.collection",
		"module.praise",
		"module.render"
	],



	function (common, product, customer, cart, check, collection, praise, render) {
		$(function () {
			"user strict";
	});



3、模块定义的方法

define([
		'jquery', 
		"xboss.wap.common.1.0", 
		"module.render", 
		"module.check",
		"module.cart",
		"module.http"
	],
	function ($, common, render, check, cart, http) { 
              var product = {};
              return product;

	});






© 著作权归作者所有

共有 人打赏支持
漂泊者及其影子
粉丝 42
博文 121
码字总数 72105
作品 0
广州
程序员
私信 提问
RequireJS与SeaJS模块化加载示例

web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有Package的Javascript语言变得难以管理,于是出现CommonJS项目...

nosand
2014/05/04
0
10
JavaScript模块化进阶

写在前面 模块化简单来说就是是指把一个复杂的系统分解到多个模块以方便编码。JS模块化的大致流程为:CommonJS(服务端) -> AMD(浏览器端)-> UMD(兼容了CommonJS和AMD) -> ES Module(E...

Jee
2018/12/12
0
0
一个合格的前端工程师必看的书籍

以我的经验,大部分技术,熟读下列四类书籍即可。 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列 全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解...

财富江湖
2014/12/23
1K
1
前端开发,从菜鸟到大牛的取经之路

以我的经验,大部分技术,熟读下列四类书籍即可。 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列 全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解...

modernizr
2014/05/05
2.4K
14
前端工程师必经的几个境界

以我的经验,大部分技术,熟读下列四类书籍即可。 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列 全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解...

chromeplugin
2014/06/19
342
0

没有更多内容

加载失败,请刷新页面

加载更多

Error inflating class android.webkit.WebView Caused by: ...: String resource ID #0x2040003

Error inflating class android.webkit.WebView ..... Caused by: android.content.res.Resources$NotFoundException: String resource ID #0x2040003 Android5.1.1 Lollipop (API 22) 上通过......

ccMagic
29分钟前
1
0
Docker相关常用命令

systemctl stop firewalld.service 关闭防火墙 docker inspect 容器id 查询容器信息 docker stop 容器id 停止容器id docker rm 容器id 删除容器id systemctl restart docker 重启docker容器 ......

须臾之余
35分钟前
1
0
密信国密浏览器:推动SM2国密算法和国密SSL证书应用

国密浏览器的普及是推广我国国产密码算法的关键生态要素。日前,沃通CA子公司密信技术发布密信浏览器公测版,支持SM系列国密算法和安全协议,为国密算法及国密SSL证书的应用建立完整生态支持...

wossl
37分钟前
1
1
UCloud基于Linux内核新特性的下一代外网网关设计及相关开源工作

UCloud外网网关是为了承载外网IP、负载均衡等产品的外网出入向流量,当前基于Linux内核的OVS/GRE tunnel/netns/iptables等实现,很好地支撑了现有业务。同时,我们也在不断跟踪开源社区的新技...

UCloudTech
41分钟前
0
0
解决 Zabbix 监控选项中文乱码问题

Zabbix中文监控选项字体显示不全,如图所示。 首先查找zabbix安装目录,找到字体具体位置。 #查找zabbix安装位置[root@promote ~]# whereis zabbixzabbix: /usr/lib/zabbix /etc/zabbix...

白豆腐徐长卿
53分钟前
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部