本文主要是讲述如何使用requirejs这个模块化管理工具来搭建前端项目结构，适合内网开发以及还在使用比较旧的技术栈（如jQuery）的前端同学。
github地址： >
js 是JavaScript的源码文件。js文件可读性好，便于调试和修改，但是其相对压缩后的minjs所占用空间较大
minjs 是JavaScript的源码文件压缩之后产生的文件。minjs文件可读性差，所占用空间相对较小，可用于源码防窃
将js压缩为minjs主要包括两个方面：去掉无用的空格、换行符号、注释等，从而压缩js文件大小；将原js中变量和函数的命名修改为没有实际意义的名称，进行语句的等价替换，如条件判断修改为使用三目运算符，从而尽可能实现源码防窃
JavaScript的代码压缩工具
在前端模块化的时候，不仅仅是js需要进行模块化管理，html有时候也需要模块化管理。这里就介绍下如何通过requirejs，实现html代码的模块化开发。
如何使用requirejs加载html
Reuqirejs有一个text的插件，它可以读取指定文件的内容，读取到的内容就是文本。
如何下载text插件
第一种方法，可以通过npm下载：
npm install requirejs/text
第二种方法，也可以直接去官方github上面直接下载。
直接拷贝内容到textjs中即可。
如何安装text插件
在requirejs的mainjs中配置text插件的依赖即可，跟jquery差不多，只要保证能通过正常的加载方式加载到它就行。
requirejsconfig({
baseUrl: '/',
paths: {
'text':path+'/require/text',
},
shim: {
}
});
也可以直接放在baseUrl里面。
如何使用text
在目标模块中，按照下面的语法即可：
define(function(require){
var html = require("text!html/testhtml");
consolelog(html);
});
或者
define(["text!html/testhtml"],function(html){
consolelog(html);
});
如何进行html的模块化开发？
看过上面你已经会使用text了，但是仍然不知道怎么组织前端代码。
举个栗子：
博客园的网站页面会根据上方的导航跳转到不同的页面。如果是在单页面中，很容易想到原始的做法是，导航的按钮对应不同的div，点击那个按钮，就显示与之对应的div；其他的div则隐藏掉。
那么，前端的代码可能会这样：
<html>
<body>
<nav>
导航按钮1、导航按钮2、导航按钮3
</nav>
<div style="display:block">按钮1对应的页面</div>
<div style="display:none">按钮2对应的页面</div>
<div style="display:none">按钮3对应的页面</div>
</body>
</html>
这样的代码会很杂乱而且前端Html会很长不利于维护。
那么有了reuqirejs的text插件以后，就可以这样了：
<html>
<body>
<nav>
导航按钮1、导航按钮2、导航按钮3
</nav>
<div id="target"></div>
</body>
</html>
然后在对应的模块中：
$('#target')html(require("text!目标按钮对应的页面html"));
这样就随性多了吧！前端代码也可以跟着模块一起有效的管理了！
不过需要注意的是：这种方式会导致Jquery绑定的事件失效——所以一定要在html()方法后面，重新绑定下事件。
requirejs 是一个根据需要加载javascript模块的框架。但是有时候在一个项目中，我们可能需要根据不同的平台或者浏览器加载不同的模块，下面我们通过举一个例子介绍一个简单的方法解决这些问题。
工具/原料
假如我们现在有以下需要
1、如果浏览器原生支持JSON对象，则不加载JSON2模块，否则，加载JSON2
2、我们现在有2个文件，一个用来 *** 作localStorage，命名为StorageModeljs，一个用来 *** 作cookie，命名为CookieModeljs；假如浏览器支持localStorage，则我们加载StorageModeljs而不加载CookieModeljs，否则加载CookieModeljs而不加载StorageModeljs
下面我们来解决这个问题
方法/步骤
1
判断是否支持
//-------------下面是代码-----------
var SUPPORT_JSON=(typeof(JSON)!=='undefined');//如果支持则为true，不支持则false
var SUPPORT_STROAGE=(typeof(Storage)!=='undefined')
//----------------------------------
2
requirejs配置
//-------------------------
requireconfig({
paths:{
/ 当SUPPORT_STORAGE 的值为true时，表达式的值为'/StorageModel'；为false时，表达式的值为'/CoookieModel'；这样就达到了根据情况加载其中一个模块的效果
'model':(SUPPORT_STORAGE && '/StorageModel')||'/CookieModel',/
'json':'/json2'
}
});
//-------------------------
3
载入代码
//--------------------------------
//下面 (SUPPORT_JSON &&'model')||'json' 当SUPPORT_JSON 的为true时，则表达式的值为'model'，而前面已经载入'model'所以会被忽略，当SUPPORT_JSON为false时，则表达式的值为'json'，那么就会载入json2模块
require('model',(SUPPORT_JSON &&'model')||'json'],
function(){
//
});
//--------------------------------
自己单独运行js文件时，报错 了。
然后发现报错了，function (exports, require, module, __filename, __dirname) { import sum from '/sum'
^^^
原来export输出和import 引入是ES6的语法，单个js文件的运行是node,所以不支持 这里改成node中的moduleexports和require就好了
兼容模式实际是兼容IE7的，360“极速”实际就是Chrome。
你的问题应该是“页面 渲染 慢”，是布局不合理，
1 全部页面的css样式文件都合并成一段代码，压缩后放到<style>中，这个<style>页面只能存在一个并且必须在<head>中
2 页面的所有 <script>不管是外部文件，还是内部嵌套，都放到 </body> 之前。(<body>结束标签)
如果<script>标签的位置移动不了，就改js，务必要放到页面的最后。
比如<script>中有documentwrite();可以预先在指定位置放一个隐藏的<div>，
然后通过页面底部的js，innerHTML到<div>中。
3 最好把小的零碎的js代码都合并到一个文件中。但是单个js文件也不要太大，一般不超过25k。
这几点做到了，你页面的首屏速度能在1秒左右。（1秒已经很快了，没几个能达到1秒的）。
具体为什么就不在这里解释了。
1 所有js文件打包到1个文件
2 在1的基础上可以给js按照模块分组，支持多个模块在1个js文件中
BUT 都是最终归结为1个js文件。。。。。。
但是这不是我想要的，我就想要一个页面相关的js打包成一个js文件包，每个页面都有自己的js文件包
方法很简单 基于grunt+grunt-contrib-requirejs
代码如下 复制代码
// rjs 打包 准备
var files = gruntfileexpand('js/app//mainjs'); //读取要打包的js入口 一般都为 main的js
var requirejsOptions = {}; //用来存储 打包配置的对象
//遍历文件
filesforEach(function(file) {
var filenamelist = filesplit('/');
var num = filenamelistlength;
var filename = filenamelist[num - 2]; //获取目录名称，因为这里的文件名都是main的js
requirejsOptions[filename] = {
options: {
baseUrl: "js/",
paths: {
"text": 'lib/text',
"jquery": 'lib/jquery',
"backbone": 'lib/backbone',
"underscore": 'lib/underscore',
"Highcharts": 'lib/highcharts/highcharts',
"select2": 'lib/select2/select2',
"moment": 'lib/moment',
"jquery-ui": 'lib/jquery-ui/jquery-ui',
"jq(:>
以上就是关于使用requirejs搭建前端项目全部的内容，包括:使用requirejs搭建前端项目、requirejs与jquery的getscript方法有什么不同、js里面suiper.min是什么等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）