一篇掌握RequireJS常识的文章

本文采取循序渐进的方式，从理论到实践，从required js的官方API文档中，我们总结了一些在使用required js过程中最常用的用法，并对文档中不清晰、具体的内容进行了举例和分析，与大家分享，供大家参考。具体内容如下。

1.模块化认为，每个前端开发人员在第一次接触js编程时，都编写过类似以下风格的代码：

脚本类型=' text/JavaScript ' var a=1；var b=2；var c=a * a b * bif(C1){ alert(' C1 ')；}函数add(a，b){ return a b；} c=add(a，b)；/script a href=' JavaScript :'onclick=' click(this)；'标题=' '请单击/a这些代码的特点是：

无处不在的全局变量，大量嵌入html元素的函数，以及各种js调用。当然，这些代码本身在实现功能上没有错误，但是这种编程方法在代码的可重用性、健壮性和可维护性方面存在问题，尤其是在页面逻辑复杂的应用中，这些问题会暴露得特别明显：

全局变量容易导致命名冲突。函数式编程不利于代码的组织和管理。嵌入式js调用不利于代码的维护。因为html代码有时候非常臃肿庞大，当这些问题出现的时候，js巨头们就开始寻找这些问题的最终解决方案，于是模块化开发就出现了。就像模块化概念的表面含义一样，它要求在编写代码时将独立的逻辑按照层次和功能封装到可重用的模块中，并向外部提供直接清晰的调用接口，内部实现的细节完全私有，模块之间的内部实现在执行过程中互不干扰。最终的结果是解决了前面例子中提到的问题。简单遵循模块化开发要求的例子；

//module . jsvar student=function(name){ return name { getname : function(){ return name；} };}，course=function(name){ return name { getname : function(){ return name；} } }，控制器=function(){ var data={ }；return { add: function (stu，cour){ var stuName=stu . getname()，courName=cour cour.getName()，current，_ filter=function(e){ return e===cour name；};if(！stuName ||！courName)返回；current=data[stuName]=data[stuName]| |[]；if (current.filter(_filter)。length===0){ current . push(courName)；} }，list:函数(stu) { var stuName=stu stu.getName()，current=data[stuName]；当前console . log(current . join('；'));} } };//main.jsvar stu=新学员(' lyzg ')，c=新控制器()；c.add(stu，新课程(' JavaScript '))；c.add(stu，新课程(' html '))；c.add(stu，新课程(' CSS '))；c . list(stu)；上面的代码定义了三个模块分别表示学生、课程和控制器，然后在main.js中调用控制器提供的add和list接口，为lyzg添加三门课程，然后在控制台上显示。活结