吼吼吼: 喊出程序员的心声,远离jsp,前后端分离!!!!!!
1、常用的js开发模式,尤其是jquery开发模式,一般都是重复累赘的书写,毫无维护性和可读性而言,例如
要是有一天id变了,需求变了,就jj了
2、所以,设计模式是多么多么的重要,本文只阐述简单的mvc设计模式,淌水不深,有什么问题还望各位大神多多指点!
3、例如,现在需求来了,需要一个pdf数据流预览弹窗,可以上下翻页,类似这种
4、mvc设计模式的开始。。。
(1) 用到的技术:jquery、pdf.js ( 链接:http://mozilla.github.io/pdf.js/ )
(2)html结构:
<body>
<!-- pop弹窗 -->
<div class="index-wrapper">
<span title="上一张" class="toggle-hook prev-btn" data-type="prev"> < </span>
<span title="下一张" class="toggle-hook next-btn" data-type="next"> > </span>
<div class="canvas-page">
<!-- pdf的canvas容器 -->
<canvas id="the-canvas" class="canvas-cont"></canvas>
<div class="page">
<span>页码: <span class="page-num-hook">0</span> / <span class="page-count-hook"></span></span>
</div>
</div>
</div>
<!-- plugin -->
<script src="js/pdf.js" type="text/javascript"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<!-- 自定义的js -->
<script src="js/index.js" type="text/javascript"></script>
</body>
(3)model层返回初始化数据,并且根据用户事件返回处理后的新数据
/*
* 定义pdfModel
* 所有的数据初始化和更改在model层进行
*/
pdfController.model = {
PDFJS: PDFJS,
src: pdfWorkSrc,
pdfData: atob(
`JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog
IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv
TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K
Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg
L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+
PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u
dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq
Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU
CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu
ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g
CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw
MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v
dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G`
),
setSrc: function() {
this.PDFJS.workerSrc = this.src;
},
loadPdf: function() {
this.setSrc();
pdfController.view.updatePdf();
},
pageNum: 1,
pageCount: 10,
type: 'next', // 翻页类型
initData: function() {
// http请求,获取pdf数据
},
// 上下翻页
togglePage: function (type) {
if(!type) return;
if(type === 'next') {
if(this.pageNum === this.pageCount) return;
this.pageNum ++;
}else {
if(this.pageNum === 1) return;
this.pageNum --;
}
this.onchange();
},
//通知视图更新
onchange: function () {
pdfController.view.pageChange();
pdfController.view.updatePdf();
},
getPageNum: function() {
return this.pageNum;
},
getPageCount: function() {
return this.pageCount;
},
getPdfData: function() { // 返回pdf的相关数据
return {
PDFJS: this.PDFJS,
pdfData: this.pdfData
}
}
};
(4)view层,负责更新视图,所有的dom操作都在view层进行
/*
* 定义pdfView
* 所有的dom操作只在view层进行
*/
pdfController.view = {
// 初始化
start: function () {
this.pageChange();
this.initPdf();
$('.toggle-hook').click(this.onClick);
},
onClick: function() { // 初始化分页点击事件
pdfController.setPage($(this).data('type'));
},
// 更新视图的页码
pageChange: function () {
$('.page-num-hook').html(pdfController.model.getPageNum());
$('.page-count-hook').html(pdfController.model.getPageCount());
},
initPdf: function() { //初始化pdf图
pdfController.setPdf();
},
// 更新pdf图
updatePdf: function() {
// 这里要判断,如果已经绘制过,则return
var pdfData = pdfController.model.getPdfData();
var loadingTask = pdfData.PDFJS.getDocument({data: pdfData.pdfData});
// 加载pdf方法
loadingTask.promise.then(function(pdf) {
console.log('PDF加载完成');
// 页面
pdf.getPage(1).then(function(page) {
console.log('页面初始化完成');
var scale = 1.5;
var viewport = page.getViewport(scale);
// 准备canvas的数据
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// 将pdf数据写入canvas
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.then(function () {
console.log('页面渲染完成');
});
});
}, function (reason) {
// PDF 加载出错
console.error(reason);
});
}
};
// 初始化
pdfController.start();
(5)controller层,关联view(视图)和model(数据)
// pdf.worker.js路径
const pdfWorkSrc = 'js/pdf.worker.js';
// 服务器url
const httpUrl = '';
//定义pdfController
var pdfController = {
// 初始化视图
start: function () {
this.view.start();
this.model.initData(); // 初始化model层数据
},
setPage: function (type) {
this.model.togglePage(type); // 上、下翻页映射到数据模型
},
setPdf: function() {
this.model.loadPdf(); // 加载pdf图的数据模型
}
};