初学 require.js(一)
来源:互联网 发布:cf卡数据恢复公司 编辑:程序博客网 时间:2024/06/14 10:00
作用:
- 实现js文件的异步加载,避免网页失去响应;
- 管理模块之间的依赖性,便于代码的编写和维护。
require必须掌握三点:
requirejs.config : 配置别名requirejs : 引入其他模块define : 定义新的模块
具体使用
第一步:官网下载:require.js
第二步: 在html中引入文件:
<script src="js/require.js" type="text/javascript" charset="utf-8" data-main="js/main"></script>
其中:data-main 定义了入口文件是main.js ,data-main默认不写文件后缀.js
第三步: 在该入口文件中main.js做相关配置:
- 1、引入jq文件
//main.js requirejs.config({ paths:{ jquery: 'jquery-1.11.0.min' //为 jquery-1.11.0.min 定义别名:jquery } });
- 2、 使用jquery
requirejs(['jquery'],function($){ $('body').css('background-color','#02B2B5');//观察背景色是否改变 })
3、 编写validate模块
模块必须采用特定的define()函数来定义,当该模块依赖其他模块时,define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。使用return 返回定义好的函数,必须要有返回值,否则其他模块无法成功加载该模块
define(['jquery'],function($){ return { isEmpty: function(){ }, //定义函数isEmpty(),判断是否为空 isEqual: function(str1,str2){ //定义函数isEqual(),判断密码是否一致,参数:() return str1 == str2; } } })
4、 加载主模块依赖的其他模块
这里加载上面编写好的validate模块
//main.js requirejs(['jquery','validate'],function($,validate){ $('body').css('background-color','#02B2B5'); console.log(validate); // 打印出 validate模块中定义的函数 })
requirejs() 函数接收两个参数。第一个参数是一个数组,表示所依赖的模块, 如上例中的[‘jquery’,’validate’],即主模块依赖这两个模块; 第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。 加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。)
- 5、在main.js中使用validate模块中定义的方法
requirejs(['jquery','validate'],function($,validate){ $('body').css('background-color','#02B2B5'); //观察背景色是否改变 console.log(validate); console.log(validate.isEqual(1,2)) //--结果是false,则说明调用validate模块调用成功 })
第一次写文章,记录自己的前端生涯。
阅读全文
0 0
- 初学 require.js(一)
- require js(一)
- Node初学(一)require方法
- Require js 简介(一)
- Require.js初探(一)
- require.js使用(一)
- require.js学习笔记(一)
- node.js初学(一)
- js初学笔记(一)
- advanced JavaScript Skills ——Require.js(一)
- js 初学之路(一)
- js初学(一),按钮响应
- require.js
- require.js
- require.js
- require.js
- Require.js
- require.js
- 验证哥德巴赫猜想(范围不大)
- html初学笔记6
- 网路流24题-10
- 去除点击元素后的高亮效果。
- Ubuntu14.04,openjdk8 cacerts的丢失
- 初学 require.js(一)
- C++ primer 学习笔记
- Analyzing Crash Reports——分析崩溃报告之一
- Ubuntu 14.04 LTS Apache2 开启 SSI 功能
- Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli)
- python安装pywin32问题
- 开始学习Lwip -- Lwip移植 --20170830
- linux 管道传递参数xargs 用法
- js面向对象详解