作者：冰weiter | 来源：互联网 | 2023-05-19 04:38
本文不谈如下概念：1.AMDCMD；2.F2E模块化开发。是的，本文就是要指向内心，为需要使用requirejs构建中小型web应用的亲们提供参考。我们在创建项目时，一般都需要先考虑以
本文不谈如下概念：1. AMD/CMD；2. F2E模块化开发。是的，本文就是要指向内心，为需要使用requirejs构建中小型web应用的亲们提供参考。
我们在创建项目时，一般都需要先考虑以下几个问题，那我们就从问题入手，来陈述。
团队协作
项目成员一块为项目模块，功能添砖加瓦，那么最直接的手段就是分功能模块来并行开发，公共模块还能提升开发效率。这里的动作就好比是张开手臂，是开放的动作，后面的构建上线
就是一个合的动作，这样一个完美的拥抱才算是完成了。那么这里的模块，具体来说就是JS组件，我们全部采用requirejs的风格来定义，来看代码
// 1.标准的原生JS类定义
(function() {
function Validation(args) {
this.init(args);
}
Validation.prototype = {
constructor: Validation,
init: function(args) {
}
}
Validation.defaults = {
};
if (typeof define === "function" && define.amd) {
define(["bin/parsley"], function() {
return Validation;
});
} else {
window.Validation = Validation;
}
})(window);
// 2.利用模拟OOP的类库来定义
(function(window, document) {
var Dropdown = Class.extend({
className: 'dropdown'
/**
* 构造函数
* @param {Object} args 单一配置对象
*/
init: function(args) {
}
});
if (typeof define === 'function' && define.amd) {
define(function() {
return Dropdown;
});
} else {
window.Dropdown = Dropdown;
}
})(window, document);
你写一个Validation，我写一个Dropdown，你又写一个Slider，我再写一个Autocomplete，从此我们大手拉小手，再也不乱了...
本地调试
做到只需要改资源引用目录就实现切换开发与调试（未打包压缩）版本，以下是目录结构
jssrc
bin
lib
widget
effect
js
与jssrc一致
其中js中的目录与jssrc一致并且是由grunt中requirejs任务生成的。做好这些，只需要在程序的layout文件引用资源时，通过改变脚本资源的目录即可实现开发与调试的切换。
构建上线
使用grunt.js，在package.json中加入 "grunt-contrib-requirejs" 依赖，然后在Gruntfile.js中加入name为"requirejs"的task，代码如下
requirejs: {
compile: {
options: {
appDir: 'jssrc/',
dir: 'js/',
baseUrl: '.',
optimize: 'uglify2',
// optimize: 'none', // for development
mainConfigFile: 'jssrc/main.js',
modules: [
{
name: 'common'
},
{
name: 'index'
},
{
name: 'house-base'
},
{
name: 'effect/house-detail'
},
{
name: 'collection'
},
{
name: 'effect/house-photo-play'
},
{
name: 'activity-base'
},
{
name: 'esf-base'
},
{
name: 'mfb-base'
}
],
// generateSourceMaps: true,
// preserveLicenseComments: false,
logLevel: 0,
findNestedDependencies: true,
fileExclusionRegExp: /^\./,
inlineText: true
}
}
}
关键在"modules"的节点的配置，例"common"这个，在jssrc中存在common.js这个文件，是一个模块，看定义代码
define([
'ga',
'widget/tooltip',
'widget/autocomplete',
'widget/slider',
'effect/global',
'bin/jquery.placeholder'
], function(
GA,
Tooltip,
Autocomplete,
Slider,
EffectGlobal
) {}
那么我们通过grunt之后，即会在js目录中生成同名的common.js文件，此文件是将所有依赖的模块合并且压缩的结果。那么我们这里再回头看调试的实现，生产页面中引用的是js/common.js，爽死全部依赖都已正确合并到一个文件里并且压缩了。要切换成调试通过统一修改脚本目录为jssrc，则引用jssrc/common.js，如此这样，commons.js中会去拉同在jssrc中的所有依赖的模块，且都是未压缩的独立文件，哪里出个错，直接定位过去，再也不用担心找不到错误啊！~~
京公网安备 11010802041100号