requirejs 使用实例

作为前端开发人员，模块化编程是其身边一个重要工具。它可以规范你的代码，解决由于多个js之间的可能存在的依赖关系，并且提升网页渲染速度。

首先来个简单的例子，实现一个简单的jia,jian,cheng,chu。

先看例子：
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title></title><script type="text/javascript" data-main="page.js" src="require.js"></script>
</head>
<body>
</body>
很简单，data-main设置主模块page.js。这个模块一开始就加载执行。
console.log("马上执行")
require(['math'], function( _m ){console.log(_m)console.log(_m.jia(1,2))
})

然后是math.js

define(function(){var jia = function(a, b){return a+b;}var jian = function(a, b){return a-b;}var cheng = function(a, b){return a*b;}var chu = function(a, b){return a/b;
    }return {jia: jia,jian: jian,cheng: cheng,chu: chu}
})

输出：

马上执行

Object { jia=function(), jian=function(), cheng=function(), 更多...}

3

这个例子非常简单，所有文件都在同一个目录下。但是还有一些情况

情景一：如果我的js是在另外一台主机，如何使用require.js

还是上面的html，main.js改成
requirejs.config({paths: {'jquery': 'http://skin.huitu.com/js/jquery-1.8.3.min'//注意，这里没有.js。在这里很容易出错}
});require(['jquery'], function ($) {console.log($)
});
情景二：我在维护一个稳定的项目，之前的开发没有用到require.js，新需求的开发我想用require.js。
require(['old1', 'old2', 'old3']);requirejs.config({paths: {'jquery': 'http://skin.huitu.com/js/jquery-1.8.3.min'}
});require(['jquery'], function ($) {console.log($)
});

转载于:https://www.cnblogs.com/pfzeng/p/4184862.html

requirejs 使用实例相关推荐

前端JAVASCRIPT模块化开发
什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...
前端开发基础知识汇总
一.HTML 1.前言与常用标签浏览器内核备注 IE Trident IE.猎豹安全.360极速浏览器.百度浏览器 firefox Gecko 可惜这几年已经没落了,打开速度慢.升级频繁.猪一样 ...
Spring Cloud微服务系统架构的一些简单介绍和使用
Spring Cloud 目录特征云原生应用程序 Spring Cloud上下文:应用程序上下文服务引导应用程序上下文应用程序上下文层次结构改变Bootstrap的位置Properties ...
尚学堂requireJs课程---2、模块
尚学堂requireJs课程---2.模块一.总结一句话总结: # 将代码以及使用放到独立的闭包中去,并且赋值给了变量,便于外部访问 # return出了函数和变量(放在一个json对象中) # ...
菜鸟requireJS教程---2、基本知识
菜鸟requireJS教程---2.基本知识一.总结一句话总结: 1.requireJS中的api就define(比如定义自己的函数)和require 2.requireJS使用的话就是配置req ...
菜鸟requireJS教程---1、初识requirejs
菜鸟requireJS教程---1.初识requirejs 一.总结一句话总结: Using a modular script loader like RequireJS will improve ...
requireJS 从概念到实战
requireJS 可以很轻易的将一个项目中的JavaScript代码分割成若干个模块(module).并且requireJS推荐一个模块就是一个文件,所以,你将获得一些零碎的具有互相依赖关系的JS文 ...
requirejs、vue、vuex、vue-route的结合使用，您认为可行吗？
在五一节之前和一网友讨论前端技术时,对方提到vue.vue-route如果配合requirejs应用.当时的我没有想得很明白,也没能这位网友一个准确的回复,但我许诺于他五一研究后给他一个回复.本是一天 ...
java模块化按需加载,JavaScript模块化之使用requireJS按需加载
模块加载器的概念可能稍微接触过前端开发的童鞋都不会陌生,通过模块加载器可以有效的解决这些问题: JS文件的依赖关系. 通过异步加载优化script标签引起的阻塞问题可以简单的以文件为单位将功能模块化 ...

requirejs 使用实例

requirejs 使用实例相关推荐

最新文章

热门文章