require使用

来源：互联网发布：三体语录知乎编辑：程序博客网时间：2024/06/10 21:54

1. Require是什么？

1）当我们在一个页面中引入很多个js的时候，http请求就增多，浏览器会停止渲染，失去响应的时间会增长

2）因为要根据各js之间的依赖来进行引入，因此必须严格保证加载顺序，依赖性最大的模块一定要放到最后加载有时候依赖过于复杂，引入容易出现问题；

引入require.js就是来解决这两个问题的，require引入的一个js就是一个模块！

2. 怎么引入？

下载并引入require

为了避免出现失去响应的问题，可使用两种方式解决；

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

2）一个是把它放在网页底部加载

3）加载之后引入main.js。<script src="js/require.js"defer async="true" data-main="js/main"></script>

Ps: data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，

所以可以把main.js简写成main。

可能遇到的问题：上面的两个引入必须都要写上，不写任何一个都会出现（require.js和main.js）

3. 引入之后的在主模块内怎么写代码（在main.js）中；

前提：首先我们的require.js只有两个参数，第一个是一个数组，第二个是一个回调函数，这个回调函数里写着我们主模块的代码；

有两种方式来写：（例如引入的是jquery，angular还有angular的ng-grid这几个js）；

首先要进行配置

require.config({

baseUrl: "js/lib", （假如我是在js下的lib文件夹下。我们可以提取出来进行代码优化；这部分根据文件夹来写）;

paths: {

"jquery": "jquery.min"或者也可以直接指定网址,

遇到的问题：1）写网址的时候要注意，如果协议是https的，不会报错，但是不出效果，引用的地址的协议需要是 http的

2）写具体位置的时候，不需要加文件后缀，加上后缀会报错，不出现效果

"angular":"angular",

"ng-grid":"ng-grid"

shim:{

"angular":{exports:"angular"},

"ng-grid":{deps:["jquery"，"angular"],exports:"ng-grid"}

}

})

遇到的问题：引用angular文件出现问题，因为angular不是用AMD规范写的，所以不可以直接使用

require(["jquery","angular","ng-grid","app"],function($,angular){

angular.element().ready(function(){

angular.bootstrap($("#ng-app"),['webApp']); // 手工装配angular app

主模块的代码都在这里

})

require.js会先加载jQuery、angular和ng-grid，然后再运行回调函数。

遇到的问题：这是这几个模块与require在一个js文件夹下的情况。不在就不能这么写；

4.建一个app.js文件（主要模块），因为要符合AMD模块规范，进行defined；

defined(["jquery","angular","ng-grid"],function($,angular){

var app=angular.module('app',['ngGrId']),; 数组中放要依赖的模块

})

下面就是一个实例

使用angular+require.js+na-grid实现数据展示总结

1.建立如图的文件结构

第二步：在index.html页面

<!doctype html>

<html id="ng-app"> 这个id必须写上，不需要写ng-app=“webApp”之类的

<head>

<metahttp-equiv="X-UA-Compatible" content="IE=edge,chrome=1">（可写可不写）

<style>

.gridStyle{

margin: 20px auto;

border:1px solid green;

width:1000px;

height:300px;

}

</style>

</head>

<body>

<div class="gridStyle"ng-grid="gridOptions"></div> （写表格组件）

</div>

</body>

</html>

第三步在main.js文件中

1）指路和配置

require.config({

paths:{

//一些库文件

'jquery': 'lib/jquery.min',

'angular': 'lib/angular',

'angular-route': 'lib/angular-ui-router',

'ng-grid':'lib/ng-grid',

//也可以放一些js文件

‘controll1’：‘controller/controll’’

}，

注意：paths中的一些就是文件的路径，并不代表这些文件已经加载进去了，只是指了路！方便下面加载，其实没有什么根本意义，减少代码吧,而且，这些属性值后缀是js的，不可以写，写上会报错

对于非AMD得文件进行配置

shim:{

'angular':{

exports:'angular'

'ng-grid':{

deps:['jquery','angular'],

exports:'ng-grid'

注意：上面的ng-grid这里错了很多次。在这里进行ng-grid的配置，依赖，在下面有进行的加载。在app.js里边又进行了引用，然后注入，最后成功使用

'angular-route':{

deps:['angular'],

exports: 'angular-route'

}

注意：shim只是配置！，并没有加载

});

2下面就是加载

在加载这块的引入的模块，如果上面路径中指过路，那么这里就直接引入，如果上面paths中没有指过路，那么引入的这个模块写的就是自己的相对路径，以便加载

require([

'jquery',

'angular', 'angular-route',

'ng-grid',

'app'], function ($, angular) {

angular.element().ready(function () {

angular.bootstrap($('#ng-app'), ['webApp']); });

注意：这里的$('#ng-app')就是根据index文件中的id得到的。后面的“webApp”就是我们通过这句话手动加载的一个模块名；这个和我们之后的app.js会有关联；});

-->>第四步在app.js文件中

define(['jquery',"angular",'ng-grid'],

注意：由于ng-grid是依赖于jquery和angular的，所以这里必须要先将这两个模块依赖进来，才可以引入ng-grid，最后注入ngGrid这个模块，不这么写就会报错UncaughtTypeError: Cannot read property 'module' of undefined(…)

function($,angular){var app = angular.module("webApp", ['ngGrid'])

app.controller("myCtrl",function ($scope) {

接下来的这些都是ng-grid的一些代码，我们也可以在这里写一些别的code

$scope.users=[{id:'1',type:'房贷',time:'2016-11-10 11:49:28',name:'李四',id_card:'111',autoCheck:

'未审核',rule:'0',company:'滴滴',personCheck:'未审核',checkPeople:'张三',report:'查看',play:'删除'}

];

$scope.pagingOptions={

pageSizes:[1,10,20],

pageSize:1,

currentPage:1

};

$scope.gridOptions={

columnDefs:[//定义列

{

field:'id',//数据中的属性名

displayName:'序号' // 表头显示的内容

enablePaging:true,//显示分页文本框

showFooter:true,//显示页脚

pagingOptions:$scope.pagingOptions,//设置分页数据

}

})

return app;

})

总结：由于在main.js中也加载过app这个模块，所以，不需要再去写别的，这个表格会找到自己的位置，然后进行展示

之前总出现错的原因是，ng-grid这个插件的引入不正确，bootstrap这个不理解，以及依赖关系不清晰；

Index.html页面写引入文件—>main.js中写指路和配置以及加载（这里边要手动指定ng-app位置）àapp.js中根据引入的模块写依赖关系，进行数据的展示！

在使用angular+require过程中，angular-ui-router模板渲染会在js加载之后进行，这会导致不可以给这些dom元素增加事件，使用 $(document).on("mousedown","div[name='test']",function(e) { });可给动态增加的元素增加效果，事件；

阅读全文

0 0