原 荐 自己写代码对比工具

作者:汪娇娇

时间:2018年1月19日

上一篇:自己写JSON编辑器

基于上一次做的JSON编辑器,继而衍生出这一次的代码对比工具,本来打算写在一块的,想想懒得在写好的一堆东西里倒持,就单独起一个博客吧,也无所谓。

今天要说的主角就是mergely。样式也很简单,但用起来真的很方便。如果不引入自己的项目的话,直接打开mergely的官网首页,直接用就OK。如果要引入自己的项目,比如说我上一篇写的JSON编辑器,编辑完JSON后,人工校验和原有数据的差别,仅凭肉眼看肯定活活累死,而且还不保证准确性。在自动化这么发达的时代,也不允许人工来操作吧,哈哈哈。mergely有文档,照着文档接入也很方便,提供的API也比较全,完全能hold得住平时的工作。

好了,话不多说,下面就是mergely 代码对比的一张截图。

接着,就来说怎么接入。

一、安装

1、用npm和webpack来安装依赖

这种方法就不细说了,对于用惯了webpack的盆友来说,应该很简单。

2、直接引入cdn

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/search/searchcursor.min.js"></script>

//mergely.js和mergely.css官网是没有直接提供的,我也是直接扒官网首页的代码的,哈哈哈
<script src="lib/mergely/lib/mergely.js" type="text/javascript"></script>
<link rel="stylesheet" media="all" href="lib/mergely/lib/mergely.css">

二、使用

  • index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>代码对比工具</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.css">
		<link rel="stylesheet" href="css/mergely.css">
	</head>
	<body>
		<div class="mergely-full-screen-8">
		  <div class="mergely-resizer">
		    <div id="mergely"></div>
		  </div>
		</div>
	</body>
	<script src="js/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/search/searchcursor.min.js"></script>
	<script src="js/mergely.js"></script>
	<script src="js/index.js"></script>
</html>
  • index.js
//初始化代码对比区域
$('#mergely').mergely({
    license: 'lgpl-separate-notice',
    width: 1200,
    height: 350,
    wrap_lines: true,
    line_numbers: false,
    lhs: function (setValue) {
        setValue("the quick red fox\njumped over the hairy dog"); //初始化左边区域
    },
    rhs: function (setValue) {
        setValue("the quick brown fox\njumped over the lazy dog"); //初始化右边区域
    }
});

//只读,不可编辑,根据个人需要,要或不要
$('#mergely').mergely('cm', 'lhs').options.readOnly = true;
$('#mergely').mergely('cm', 'rhs').options.readOnly = true;

结果:

一边编辑,就会一边对比,方便得很nei~

上面写的js就能完成很基础的功能,一般也都可用了,至于其他的功能,可详见mergely官网 http://www.mergely.com/doc

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏算法修养

java后台设计简单的json数据接口,设置可跨域访问,前端ajax获取json数据

在开发的过程中,有时候我们需要设计一个数据接口。有时候呢,数据接口和Web服务器又不在一起,所以就有跨域访问的问题。 第一步:简单的设计一个数据接口。 数据接口...

76070
来自专栏Kirito的技术分享

解析Spring中的ResponseBody和RequestBody

spring,restful,前后端分离这些关键词都是大家耳熟能详的关键词了,一般spring常常需要与前端、第三方使用JSON,XML等形式进行交互,你也一定...

4.1K170
来自专栏我爱编程

Day1爬虫原理

爬虫基本流程 发起请求 通过HTTP库向目标站点发起请求,即发送一个Request,请求可以包含额外的headers等信息,等待服务器响应。 获取响应内容 如果...

34060
来自专栏Kirito的技术分享

八幅漫画理解使用JSON Web Token设计单点登录系统

博主前言 这篇转载的文章和上一篇《JSON Web Token - 在Web应用间安全地传递信息》文章均为转载,是我个人在研究 jwt 时浏览下来发现的两篇质...

40950
来自专栏菜鸟致敬

【Lua菜鸟②】数据类型

Lua是动态类型语言,变量不要类型定义,只需要为变量赋值。 值可以存储在变量中,作为参数传递或结果返回。(我想了想python) -- 用来单行注释 --[[...

49060
来自专栏从零开始的linux

安装express

安装express [root@alex ~]#yum -y install npm [root@alex example]# yum install node...

48280
来自专栏文武兼修ing——机器学习与IC设计

JavaScript入门笔记(6)标准对象面向对象编程

标准对象 正则对象 正则表达式是一种处理文本信息的神器,在JavaScript中可以方便的使用正则对象对文本进行处理。JavaScript中声明正则对象可以使用...

34080
来自专栏SeanCheney的专栏

Python模拟登陆 —— 征服验证码 5 拉钩

拉钩使用了动态token,但是在源代码中又写出来了。。。 密码采用了md5双重加密 ? 登录界面 ? 动态token import os import time...

50560
来自专栏闰土大叔

从零开始:一个正式的vue+webpack项目的目录结构是怎么形成的

如何从零开始一个vue+webpack前端工程工作流的搭建,首先我们先从项目的目录结构入手。一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样...

63370
来自专栏Kirito的技术分享

深入理解JWT的使用场景和优劣

经过前面两篇文章《JSON Web Token - 在Web应用间安全地传递信息》《八幅漫画理解使用JSON Web Token设计单点登录系统》的科普,相信大...

98380

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励