# JavaScript编码规范 - [JavaScript编码规范](#JavaScript_1) - [\*\*使用说明\*\*](#_2) - [1. require.js 加载 （已默认加载，无需手动引用）](#1_requirejs___3) - [2. 模块调用](#2__4) ### JavaScript编码规范 微擎系统中，公共引用的js文件包括 **Jquery**、**Util** 在使用以上两个Js文件时不需要require引用，使用其它Js文件需要遵循 **AMD** 的引用方式。 我们先介绍下 **AMD** ( Asynchronous Module Definition )——“**异步模块定义**”。 **require.js** 是微擎系统默认采用的 **AMD** 加载类 采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。 实现 AMD 规范的加载器其实很多,微擎系系统使用的是 require.js 。 微擎系统使用 require.js 的好处： - 实现 js 文件的异步加载,避免网页失去响应; - 管理模块之间的依赖性,便于代码的编写和维护。 \>\[warning\] 注意系统中已经默认jquery、bootstrap、angularjs、util等js文件，无需要重复引用 #### **使用说明** #### 1. require.js 加载 （已默认加载，无需手动引用） ``` <script src="js/require.js" defer async="true" ></script> ``` #### 2. 模块调用 - 如果我们的代码不依赖任何其他模块,那么我们就没有必要使用 require.js . - 如果我们的代码依赖其他的模块,那么就需要requrie.js , 例如： ``` require(['jquery', 'underscore', 'util'], function ($, _, u){ ``` // code here 主模块代码 $('#id').show(); var index = \_.inArray(1, \[1,2,3\]); u.message('hehe'); }); ``` require.js 会先加载 jQuery、underscore 和 backbone, 然后再运行回调函数。主模块的代码就写在回调函数中。 ##### 2.1 调用自定义 js 如果调用非模块化的 js, 以**require.config** 中配置的 **baseUrl** 为基路径, 采用相对路径直到所需要的 js 文件, 一定要带后缀 **.js**. ``` < javascript addons/we7\_store/template/js/amd.js> /\*\* - 路径: addons/we7\_store/template/js/amd.js \*/ define(\['util'\], function(u){ ``` var module = {}; module.msg = function(message){ u.message(message); } return module; ``` }); /\*\* \* 路径: addons/we7\_store/template/js/test.js \*/ function hello(){ return 'hello world'; } ``` 注意: require 引入的 js 都需要从 "/app/resource/js/app" 开始定位到 app 转到 addons , 最后定位到模块文件夹. ```