一切福田，不離方寸，從心而覓，感無不通。

Category Archives: JavaScript

mixins和组件的区别和优缺点

今天呢，就说一说mixins和组件，经常使用vue框架的朋友对这两个应该是不陌生的，他们两个的用法功能好像在项目中的所扮演的角色差不多。我们就带着这个疑问进行扒一扒吧 我们先从api文档中看一看官方是如何定义他们的。 mixins：混入，是一种分发Vue组件中可复用功能的非常灵活的方式，混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。 组件：是vue最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码，在较高层面上，组件是自定义的元素，vue的编译器为它添加特殊功能，在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展 在我的眼中呢，他们的区别是什么呢？ 组件在引用之后，相当于在副组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，但本质上两者还是泾渭分明的，相对独立 而mixins则是在引入组件之后，将组件内部如data等方法，method等属性与父组件相应内容进行合并，相当于在引入后，副组件的各种属性方法被扩充了 组件之间是可以有通信的，而mixins比组件多了一个data的merge。两者使用的场景不同，具体的还要在不同的项目中进行决定使用mixins好还是组件合适 未完待续哦。。。 作者：都市尘埃i 链接：https://www.jianshu.com/p/f2a897cd3d7b 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

龙生   10 Dec 2019
View Details

企业级的 UI 设计语言和 React 实现 Ant Design

授权协议: MIT 开发语言: JavaScript HTML/CSS 操作系统: 跨平台 开发厂商:阿里巴巴 收录时间: 2015-07-27 提 交 者:叶秀兰 Ant Design 是蚂蚁金服开发和正在使用的一套企业级的前端设计语言和基于 React 的前端框架实现。 特性 企业级金融产品的交互语言和视觉体系。 丰富实用的 React UI 组件。 基于 React 的组件化开发模式。 背靠 npm 生态圈。 基于 webpack 的调试构建方案，支持 ES6。 示例

1
2
3
4
<span class="hljs-keyword">var</span> antd = <span class="hljs-built_in">require</span>(<span class="hljs-string">'antd'</span>);
<span class="hljs-keyword">var</span> Datepicker = antd.Datepicker;
 
React.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Datepicker</span> /&gt;</span>, mountNode);</span>

开发说明 本地调试

1
<span class="hljs-meta">$</span><span class="bash"> npm start</span>

然后访问 http://127.0.0.1:8000 。 网站部署

1
<span class="hljs-meta">$</span><span class="bash"> npm run deploy</span>

版本构建

1
<span class="hljs-meta">$</span><span class="bash"> npm run release</span>

  from:https://www.oschina.net/p/ant-design

龙生   05 Dec 2019
View Details

Angular、Vue、React和前端的未来

最近社区针对框架的争论，从发文互怼再到粉丝站队再到大漠穷秋准备离职，令人唏嘘不已。不知从何而起，前端圈已经逐步变成了前端娱乐圈。越来越多的人开始站队 Angular、Vue、React，仅仅围绕这些库或者框架进行前端技术讨论，这实在不是什么好的现象。其实我想基于我个人的经验聊下前端的演进和未来，希望可以贡献微薄的力量，消除一些我个人认为的前端社区不太好的风气。 注意：以下只是我个人对于前端和业务的理解和感悟，不代表任何其他人和我所在公司、团队的观点，意见不同欢迎一起讨论。 ======== 以史为鉴，想要知道前端的未来，必须知道前端的过去，抽象前端发展的规律。 前端的历史 前端的发展始终伴随着端的发展。 PC 端的兴起 06 年左右国内互联网公司开始有了前端工程师的概念，原因很简单，是因为上网访问网页的人数增多，大型互联网公司为了提升用户体验专门剥离了这样一个岗位来解决相关问题。这是第一批专业前端工程师的起源。 在这几年中的发展，进行了很多轮的技术方案、框架、浏览器的演进。比如 jQuery 兼容性库，再到 Require.js 异步加载，再到现在 React、Vue、Angular 等附带编程思想的前端库以及前后端分离、前端构建器、样式预处理器等。这些演进都是随着 PC 端的用户量的增多和业务复杂度的提升，为了用户体验和开发者体验而进化的。 移动端的兴起 09 年左右，智能手机的兴起导致了移动端开发的热潮。人人拥有智能手机，这种特殊的端的特性，也产生了新的业务形态。因此无线前端相关需求开始爆发，无线前端开发、iOS/Android 工程师等需求量非常大。 这几年中的发展，先从最初把 PC 端页面放在手机上渲染，再到出来响应式设计的概念，再到专门做无线端页面，再到独立客户端和 Weex、React Native 这些跨终端的方案。也是出现了非常多的技术演进，这些演进不难看出也是因为用户量的增多和业务复杂度的提升，为了用户体验和开发者体验而进行优化的。 PC 端的衰落 14 年左右，其实 PC 端颓废之势早已显现，但在双十一下被放大。因此阿里系前端在这个时间点附近就开始弱化 PC 端前端的投入。 以前 PC 端业务，在无线端流量更大的直接被下掉，核心链路的 PC 端业务能用就可以了，不再做效果、功能迭代优化。甚至很多业务直接不做 PC 端只做无线端。业务指标也从 PC 的 PV、UV 变成了客户端的 DAU 等指标。 在这个时间，只做 PC 端的前端，毫无无线端经验的前端，将会慢慢丧失竞争力。PC 兼容库 jQuery 之流也渐渐被替换废弃，因为 PC 的业务很少花费精力做兼容性测试，甚至目前我们团队的业务从来都只测试最新版 Chrome。可以看到，随着端和业务形态的变化，很多前端演进的产物会逐步被替换废掉。 移动端的衰落 移动端目前还没有衰落，但一个端只要兴起，就会有衰落的时候。总会有新的、更好的、更高效的端来替代老的端。但这个时机是难以预测的。 前端的未来 回顾前端的历史，前端总是伴随的端的变化而变化： 端的出现 -> 业务场景的落地 -> 需要端的开发者 -> 端开发者学习、演进 -> 端的开发效率提升 -> 新的端出现 -> 端的没落 -> 端开发者转领域或者被淘汰 这也就是为什么前端需要学习这么多东西，有这么庞大的体系的原因。每一个端都有它自己的特性。比如未来可能会火的 VR、AR 端，它们的特性就不同于二维平面的移动端，掌握 VR、AR 端的开发就需要新学习很多三维图形图像以及图像识别领域的东西。 因此如果你想要知道前端的未来，你需要预测端的发展。但端的发展是很难预测的，回到 06 年，有谁会想到会有智能手机，并开创了移动端这个端？ 而现在火热的 […]

龙生   17 Oct 2019
View Details

js中的Math.random()

random() 方法可返回介于 0 ~ 1 之间的一个随机数。 这里有几种用法： 1.从数组中随机获取成员 var items = [12,a,9,p,8]; var randomItem = items[Math.floor(Math.random() * items.length)]; 2.生成从0到指定值的数字数组 var numbersArray = [] , max = 100; for( var i=1; numbersArray.push(i++) < max;); // numbers = [1,2,3 … 100] 3.生成随机的字母数字字符串 function radomcharnum(len){ var str = ""; for(;str.length<len;str+=Math.random().toString(36).substr(2)); return str.substr(0,len); } 3.得到指定范围的整数(需要Math.floor()或者parseInt()或者Math.ceil()) var randomNum = Math.random()*5; console.log(parseInt(randomNum));//1 console.log(Math.floor(randomNum));//0   Math.floor(Math.random()*(max-min+1)+min);//max为期待的最大的数，min为最小的数     使用parseInt也是可以的。   from:https://www.cnblogs.com/Catherine001/p/7265597.html

龙生   12 Oct 2019
View Details

一个axios的简单教程

首先要明白的是axios是什么：axios是基于promise（诺言）用于浏览器和node.js是http客户端。 axios的作用是什么呢：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。 特点：支持浏览器和node.js 支持promise 能拦截请求和响应 能转换请求和响应数据 能取消请求 自动转换JSON数据 浏览器支持防止CSRF（跨站请求伪造） 这里你一定会想promise是什么东西，以下是promise的个人理解： promise是什么：是一个对象用来传递异步操作的信息，它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的api，可供进一步的处理。 promise的作用：Promise的出现主要是解决地狱回调的问题，比如你需要结果需要请求很多个接口，这些接口的参数需要另外那个的接口返回的数据作为依赖，这样就需要我们一层嵌套一层，但是有了Promise 我们就无需嵌套。 promise的本质是什么：分离异步数据获取和业务 基本使用方法： axios执行GET请求 GET 请求方法 执行POST请求 POST请求方法 执行多个并发请求 多个并发请求 get和post都是基于promise的所以写法上很相似，是用then和catch，使用这种方法来进行发送请求。 还有一个axios重要的知识点就是拦截器 拦截器 在请求或响应被 then 或 catch 处理前拦截它们（拦截器可以做什么：在请求或者响应时拦截下来进行处理） 拦截器分为请求拦截器和响应拦截器 请求拦截器（interceptors.requst）是指可以拦截每次或指定HTTP请求，并可修改配置项。 响应拦截器（interceptors.response）可以在每次HTTP请求后拦截住每次或指定HTTP请求，并可修改返回结果项。 拦截器的写法 拦截器的工作流程： 拦截器工作流程 移除拦截器 移除拦截器 自定义 axios 实例添加拦截器 添加拦截器 取消 使用 cancel token 取消请求 可以使用 CancelToken.source 工厂方法创建 cancel token 参考资料：axios中文文档   from:https://www.jianshu.com/p/13cf01cdb81f

龙生   10 Oct 2019
View Details

vue 页面跳转传参

页面之间的跳转传参，正常前端js里写 window.location.href="xxxxx?id=1" 就可以了； 但是vue不一样 需要操作的是路由history，需要用到 VueRouter, 示例： 常用的场景是：列表页点击“查看”按钮，跳转到详情页。 在列表页（list.vue）按钮点击事件里写上

1
2
3
4
<span class="token function">detail</span><span class="token punctuation">(</span>row<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      this<span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">"detail"</span><span class="token punctuation">,</span> query<span class="token punctuation">:</span> <span class="token punctuation">{</span> id<span class="token punctuation">:</span> row<span class="token punctuation">.</span>id <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
 

运行时浏览器地址栏展示： http://localhost:8080/#/orders/detail?id=31 在详情页(detail.vue)里写上

1
2
<span class="token keyword">let</span> id <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>
 

即可获取到参数id了。 解析 先看看 route是什么,在vscode f12后 看到

1
2
3
4
5
6
7
<span class="token keyword">declare</span> module <span class="token double-quoted-string string">"vue/types/vue"</span> <span class="token punctuation">{</span>
  <span class="token keyword">interface</span> <span class="token class-name">Vue</span> <span class="token punctuation">{</span>
    <span class="token variable">$router</span><span class="token punctuation">:</span> VueRouter<span class="token punctuation">;</span>
    <span class="token variable">$route</span><span class="token punctuation">:</span> Route<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
 

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。 VueRouter官网 传送门 route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等   其中 params {}对象，包含路由中的动态片段和全匹配片段的键值对 用来实现 /order.detail/1 query {}对象，包含路由中查询参数的键值对。 用来实现 /order/detail?id=1   from:https://www.jianshu.com/p/45163cb031be

龙生   06 Oct 2019
View Details

pdf.js使用方法

项目中 显示 pdf 的功能,浏览过不少的技术帖,都不太理想,花了点时间研究了下pdf.js正确使用方法,总结下:1.防止自己忘记 2.工作留有痕迹 3.供大家参考借鉴

1
2
3
4
5
6
7
pdf.js: 将 PDF 文件解析后生成一张 .png 图片,利用 canvas 元素显示在页面上,此方法不推荐使用,
 
呈现在页面上的pdf会模糊,目前没有找到有效解决办法,给爱钻研的小伙伴提供个思路,在pdf.js官网上有这样一句话 :
 
Each PDF page has its own viewport which defines the size in pixels(72DPI) and initial rotation.
 
猜想如果可以改变默认72DPI就可改变呈现的清晰度

上面是最开始探索 pdf.js 使用的方法 时 的猜想 其实 pdf.js 真正使用方法非常简单 (一行代码就可以搞定) pdf.js使用步骤 一. 到官网下载 pdf.js 插件并解压  (地址: http://mozilla.github.io/pdf.js/ ) 1: 进入官网  2 : 选择稳定版 下载 3: 下载至本地 4 : 解压 5:创建PDF.js文件夹 并将刚解压的文件放入其中 二.将 PDF.js 文件夹 放到 项目服务器根目录下 小伙伴 可能会有点头晕 先跟着做 稍后解释 1.登录 项目服务器 2.登录 服务器 后将 PDF.js 文件夹 拷贝 到 项目 服务器 的根目录 三. 使用 pdf.js 显示 pdf 文件 1.打开浏览器 新建一个 标签页 输入 你的项目服务器 地址 这里我用我的服务器 地址进行演示 10.0.0.5 2.当 你访问 项目 服务器 根目录(10.0.0.5) 能够 看到 PDF.js 这个文件夹 说明 这一步已经完成了 3.在PDF.js 中 依次打开 web 文件夹 viewer.html 文件 (PDF.js/web/viewer.html) 4.随后会显示 截图上的 […]

龙生   04 Sep 2019
View Details

在线查看PDF文件,pdf.js使用方法

PDF.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件，非常强大，能将PDF文件渲染成Canvas。PDF.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，一个负责API解析，一个负责核心解析。 首先引入pdf.js文件<script type="text/javascript" src=’pdf.js'></script> PDF.js大部分用法都是基于Promise的，PDFJS.getDocument(url)方法返回的就是一个Promise：

1
2
PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
});

PDF的解析工作需要通过pdf.getPage(page)去执行，这个方法返回的也是一个Promise，因此可以去逐页解析PDF：

1
2
pdf.getPage(1).then(function(page) {
});

官网地址：http://mozilla.github.io/pdf.js/ 渲染页面 各PDF页面有它自己的视窗，它定义了像素大小(n.72dpi和初始旋转。默认情况下，该窗口将缩放到PDF但是通过修改视图可以更改此操作。当创建了视图时，还会创建一个初始转换矩阵，它考虑到期望的规模、旋转，并转换坐标系统(0点)PDF文档底部左边，而画布0是 左。

1
2
3
4
5
6
7
8
9
10
11
12
13
var scale = 1.5;
var viewport = page.getViewport(scale);
 
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
 
var renderContext = {
  canvasContext: context,
  viewport: viewport
};
page.render(renderContext);

1
还可以自定义canvas大小：

1
2
3
4
var desiredWidth = 100;
var viewport = page.getViewport(1);
var scale = desiredWidth / viewport.width;
var scaledViewport = page.getViewport(scale);

官方给出的示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
ar url = '//cdn.mozilla.net/pdfjs/helloworld.pdf';
PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
 
var loadingTask = PDFJS.getDocument(url);
loadingTask.promise.then(function(pdf) {
  console.log('PDF loaded');
  
  var pageNumber = 1;
  pdf.getPage(pageNumber).then(function(page) {
    console.log('Page loaded');
    
    var scale = 1.5;
    var viewport = page.getViewport(scale);
 
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
 
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);
    renderTask.then(function () {
      console.log('Page rendered');
    });
  });
}, function (reason) {
  console.error(reason);
});

  另外较大的PDF文件可以用base 64编码方式加载，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
var pdfData = atob(
  'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
  'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
  'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
  'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
  'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
  'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
  'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
  'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
  'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
  'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
  'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
  'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
  'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');
 
PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
 
var loadingTask = PDFJS.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
  console.log('PDF loaded');
  
  var pageNumber = 1;
  pdf.getPage(pageNumber).then(function(page) {
    console.log('Page loaded');
    
    var scale = 1.5;
    var viewport = page.getViewport(scale);
 
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
 
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);
    renderTask.then(function () {
      console.log('Page rendered');
    });
  });
}, function (reason) {
  console.error(reason);
});

  pdf翻页处理:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
var url = '//cdn.mozilla.net/pdfjs/tracemonkey.pdf';
 
// The workerSrc property shall be specified.
PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
 
var pdfDoc = null,
    pageNum = 1,
    pageRendering = false,
    pageNumPending = null,
    scale = 0.8,
    canvas = document.getElementById('the-canvas'),
    ctx = canvas.getContext('2d');
 
/**
* Get page info from document, resize canvas accordingly, and render page.
* @param num Page number.
*/
function renderPage(num) {
  pageRendering = true;
  pdfDoc.getPage(num).then(function(page) {
    var viewport = page.getViewport(scale);
    canvas.height = viewport.height;
    canvas.width = viewport.width;
 
    var renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);
 
    renderTask.promise.then(function() {
      pageRendering = false;
      if (pageNumPending !== null) {
        renderPage(pageNumPending);
        pageNumPending = null;
      }
    });
  });
 
  document.getElementById('page_num').textContent = num;
}
 
function queueRenderPage(num) {
  if (pageRendering) {
    pageNumPending = num;
  } else {
    renderPage(num);
  }
}
 
function onPrevPage() {
  if (pageNum &lt;= 1) {
    return;
  }
  pageNum--;
  queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);
 
function onNextPage() {
  if (pageNum &gt;= pdfDoc.numPages) {
    return;
  }
  pageNum++;
  queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);
 
 
PDFJS.getDocument(url).then(function(pdfDoc_) {
  pdfDoc = pdfDoc_;
  document.getElementById('page_count').textContent = pdfDoc.numPages;
 
  renderPage(pageNum);
});

    关于page方式的使用： 解析结果，我们可以看下这个对象提供的方法： 方法 返回 getAnnotations A promise that is resolved with an {Array} of the annotation objects. getTextContent That is resolved a TextContent object that represent the page text content. getViewport Contains ‘width’ and ‘height’ properties along with transforms required for rendering. render An object that contains the promise, which is resolved when the page finishes rendering. 我们可以试试调用getTextContent方法，并将其结果打印出来：

1
2
3
pdf.getPage(1).then(function(page) {
    console.log(page);
});

输入格式大致如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
{
    "items": [
        {
            "str": "xxx",
            "dir": "xxx",
            "width": xxx,
            "height": xxx,
            "transform": [
                48,
                0,
                0,
                48,
                45.32495,
                679.04
            ],
            "fontName": "g_d0_f1"
        },
        {
            "str": " ",
            "dir": "ltr",
            "width": 9.600000000000001,
            "height": 2304,
            "transform": [
                48,
                0,
                0,
                48,
                285.325,
                679.04
            ],
            "fontName": "g_d0_f2"
        }
      ],
    "styles": {
        "g_d0_f1": {
            "fontFamily": "monospace",
            "ascent": 1.05810546875,
            "descent": -0.26171875,
            "vertical": false
        },
        "g_d0_f2": {
            "fontFamily": "sans-serif",
            "ascent": 0.74365234375,
            "descent": -0.25634765625
        }
    }
}

PDF.js能将每页文本的字符串、位置、字体都解析出来。 官网用的viewer.js：http://mozilla.github.io/pdf.js/web/viewer.html，首先底图是一个Canvas，内容和PDF一样（通过下面介绍的page.render方法可以得到），底图之上是一个textLayer，这一层就是通过page.getTextContent()得到了字体的位置和样式，再覆盖在Canvas上。 […]

龙生   04 Sep 2019
View Details

js闭包用法

闭包 既保证了 内部函数的私有性 又可以向外公开 通过一个已有对象 向它注入属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/**
* 闭包
*    在函数中定义的函数，在外部使用
*  1、在函数内部定义的函数，在外部不能访问
*/
function a(){
    /**
     * b函数是一个私有函数
     */
    function b(){
        alert("aaaa");
    }
    return b;
}
//var bb = a();
//bb();
(function(){
    var aa = 5;
    function a(){
        /**
         * 公开api
         */
        return {
            b:b,
            c:c
        }
    }
    function b(){
        alert("b");
    }
    function c(){
        alert("c");
    }
    window.a = a;
})();
var json = window.a();
json.b();
json.c();

  from:https://www.cnblogs.com/friends-wf/p/3781859.html

龙生   12 Jul 2019
View Details

javascript – 闭包之一些常见的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/**
* 防御型分号
*/
; (function () {
    //code....
    console.log('一开始，我自己执行了！！！');
})();
 
 
 
/**
* 形参 -> 实参
* 定义形参->接收实参->最后打印.
*/
(function (a, b, c) {
    console.log(a + b + c);
})(1, 2, 3)
 
// (function(i){
//     console.log(i);
// })(window);
 
 
/**
* 声明了不需要返回函数(return)
*/
void function () {
    // code....
    console.log('不需要返回return!');
}();

  from:https://www.cnblogs.com/cisum/p/9577246.html

龙生   12 Jul 2019
View Details
1 … 15 16 17 … 37

Copyright © 2025 Longsheng All rights reserved