前端设计走查平台实践（前端篇）（走前端要学java吗）

项目背景

随着前端业务的不断发展，前端对设计稿的还原程度也成为了影响用户对产品体验的一个关键指标，作为最靠近用户侧的研发，前端工程师通常需要和设计师同学通力配合来提升用户体验其中，设计走查是设计同学最常见的测试前端同学是否完美还原了自己设计理念的方式，本文旨在通过设计走查平台在前端侧的实践总结下在前端上游研发链路中的一些基础建设，以期能够为其他有相关需要的同学提供一些实践思路。

方案

一个前端工程师的主要目标是寻找一款贴近浏览器原生的框架，svelte 是你不二的选择前端架构选型，从整体的产品业务形态来看，属于较为简单的单一页面形态，并且考虑到要支持浏览器的插件生态，因而前端部分选择使用了。

svelte的框架方案选择 svelte 作为本业务的前端技术选型主要考虑到以下两方面原因：一是考虑到业务形态较为简单，只有一个上传图片的页面；二是由于浏览器插件相关的编写还是更加偏向原生js一些，使用大型框架有些大材小用。

综合近几年 svelte 的迅猛发展，小型业务还是考虑使用它作为一个框架使用的，其在编译时利用位掩码做的脏值检查的思路其实还是可以作为框架开发者借鉴的一个思路的(ps：对这个感兴趣的同学，可以看一下新兴前端框架 Svelte 从入门到原理

这篇文章的介绍)，但是目前发展相对还是比较初期，整个生态相对还不够完善，同时也是给广大开发者提供了很好的蓝海空间，比如：目前还没有出现类似 Element UI 和 Ant Design 这种十分好用的组件库系统，虽然有几个，但是个人感觉很不好用，作者在本项目中对需要用到的几个组件做了简单的封装，有需要的同学可以参考借鉴一下。

目录public buildbg.jpegfavicon.pngglobal.cssindex.htmlmanifest.jsonscripts setupCrxScript.jssetupTypeScript.js

src components Button.svelteDialog.svelteIcon.svelteInput.svelteMessage.svelteTooltip.svelteUpload.svelte

utils function.jsimage.jsindex.jsApp.sveltemain.jsrollup.config.js实践

设计走查平台提供了管理平台及对应的Chrome插件，可提供给测试及UI同学用于图片的比对，提升研发效率源码

svelte作者--前端著名的轮子哥Rich Harris，同时也是rollup的作者，因而本项目中就选择了 rollup 作为打包构建的工具，同时为了将Chrome插件发布到内网中(ps：本项目主要用于项目内部基建应用，因而未在公有云及Chrome官方平台去发布，服务端涉及到了图片的比对计算)；在scripts目录下内置了两个脚本，一个用于生成ts，一个用于向云平台发送压缩包；由于

svelte 的组件库生态相对不是特别丰富(ps：业界常见已经开源的 svelte 组件库可以参看这篇文章Svelte的UI组件库)，对比了业界几个相关的组件库后，决定自己实现下业务中需要用到的组件，具体组件放在了components目录下

rollup.config.jsimportsveltefromrollup-plugin-svelte;importcommonjsfrom@rollup/plugin-commonjs;import

resolvefrom@rollup/plugin-node-resolve;importlivereloadfromrollup-plugin-livereload;import{terser}from

rollup-plugin-terser;importcssfromrollup-plugin-css-only;constproduction=!process.env.ROLLUP_WATCH;function

serve(){letserver;functiontoExit(){if(server)server.kill(0);}return{writeBundle(){if(server)return;server

=require(child_process).spawn(npm,[run,start,--,--dev],{stdio:[ignore,inherit,inherit],shell:true});process

.on(SIGTERM,toExit);process.on(exit,toExit);}};}exportdefault{input:src/main.js,output:{sourcemap:true

,format:iife,name:app,file:public/build/bundle.js},plugins:[svelte({compilerOptions:{// enable run-time checks when not in production, k% {$ k/ @- q

dev:!production}}),// well extract any component CSS out into) K/ K2 d4 @1 T4 R# F6 { // a separate file - better for performance # O+ H1 \3 p( N* n

css({output:bundle.css}),// If you have external dependencies installed from9 v) c" ]4 m" t& ]# n# {9 ? // npm, youll most likely need these plugins. In/ e+ |( V$ M) Y) ?( s

// some cases youll need additional configuration -4 Q3 i1 X+ G; B/ ?- N) L6 ?2 b // consult the documentation for details:5 \: d# }4 I; e( H0 i" ? // https://github.com/rollup/plugins/tree/master/packages/commonjs . c2 [4 P/ ~. ]8 g! @3 U/ g- L

resolve({browser:true,dedupe:[svelte]}),commonjs(),// In dev mode, call `npm run start` once: S( l3 i! p% b1 u5 h // the bundle has been generated$ ~4 s1 I* g" J

!production&&serve(),// Watch the `public` directory and refresh the4 c- w- v( P2 |, a8 D* k( f8 j: \' T/ G // browser on changes when not in production' H: w7 d& b9 A2 ^& B0 s

!production&&livereload(public),// If were building for production (npm run build $ I/ C' S7 J$ z/ |" P" u // instead of npm run dev), minify8 @% j3 \+ X% ?( N( a

production&&terser()],watch:{clearScreen:false}};scriptssetupCrxScript.js通过minio这个库来进行私有云平台的对象存储库上传，archiver

这个主要用于压缩constfs=require(fs);constpath=require(path);constarchiver=require(archiver);constMinio=require

(minio);constminio=newMinio.Client({endPoint:,port:80,useSSL:false,accessKey:,secretKey:})constoutput

=fs.createWriteStream(path.resolve(__dirname,../pixelpiper.zip));constarchive=archiver(zip,{zlib:{level

:9}});output.on(close,function(){console.log(archive.pointer()+ total bytes);console.log(archiver has been finalized and the output file descriptor has closed.

);// 压缩完成后向 cdn 中传递压缩包 ' j* N$ p; Z4 |5 }! p, T constfile=path.resolve(__dirname,../pixelpiper.zip);fs.stat(file,function(error

,stats){if(error){returnconsole.error(error)}minio.putObject(cdn,pixelpiper.zip,fs.createReadStream(file

),stats.size,application/zip,function(err,etag){returnconsole.log(err,etag)// err should be null7 O% v0 q) F' G) A3 C })})

});output.on(end,function(){console.log(Data has been drained);});archive.on(warning,function(err){if

(err.code===ENOENT){}else{throwerr;}});archive.on(error,function(err){throwerr;});archive.pipe(output

);archive.directory(path.resolve(__dirname,../public),false);archive.finalize();setupTypeScript.js// @ts-check ) {6 L( v' _, d" ~

/** This script modifies the project to support TS code in .svelte files like:* U [, v& ]/ F! D 0 X) j U6 q3 Q, J" t, O/ `. X3 k export let name: string;5 r; m" R" e. |, i; L* h6 u, U6 S6 c

- ~+ k! ]4 O0 A6 m, L/ t5 j As well as validating the code for CI./ e6 ~4 N; T( I, U% A% D1 ~$ c% E *//** To work on this script: . N; x- \* j/ \ rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template* y; e3 w s7 n( `- V" v m8 u

*/constfs=require("fs")constpath=require("path")const{argv}=require("process")constprojectRoot=argv[2

]||path.join(__dirname,"..")// Add deps to pkg.json! N: K/ e0 G6 c( \ n. o3 Y* Z5 N constpackageJSON=JSON.parse(fs.readFileSync(path.

join(projectRoot,"package.json"),"utf8"))packageJSON.devDependencies=Object.assign(packageJSON.devDependencies

,{"svelte-check":"^1.0.0","svelte-preprocess":"^4.0.0","@rollup/plugin-typescript":"^8.0.0","typescript"

:"^4.0.0","tslib":"^2.0.0","@tsconfig/svelte":"^1.0.0"})// Add script for checking " O: e% C, ^, F# I packageJSON.scripts

=Object.assign(packageJSON.scripts,{"validate":"svelte-check"})// Write the package JSON * E0 t* L4 b9 v4 b& V) {- t; }9 L fs.writeFileSync

(path.join(projectRoot,"package.json"),JSON.stringify(packageJSON,null," "))// mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too / ]# u3 f" ^+ I, J

constbeforeMainJSPath=path.join(projectRoot,"src","main.js")constafterMainTSPath=path.join(projectRoot

,"src","main.ts")fs.renameSync(beforeMainJSPath,afterMainTSPath)// Switch the app.svelte file to use TS$ [5 n1 e' Y4 B$ e8 Y) ]

constappSveltePath=path.join(projectRoot,"src","App.svelte")letappFile=fs.readFileSync(appSveltePath,

"utf8")appFile=appFile.replace("",)appFile=appFile.replace("export let name;"

,export let name: string;)fs.writeFileSync(appSveltePath,appFile)// Edit rollup config+ z* |3 A8 g' R7 e8 P+ i constrollupConfigPath

=path.join(projectRoot,"rollup.config.js")letrollupConfig=fs.readFileSync(rollupConfigPath,"utf8")// Edit imports/ w* L! D/ q1 D5 {' n

rollupConfig=rollupConfig.replace(`rollup-plugin-terser;`,`rollup-plugin-terser;# K. `# e. s- x) R" f+ ^9 q import sveltePreprocess from svelte-preprocess; N6 u- I; g7 T* V3 v7 r

import typescript from @rollup/plugin-typescript;`)// Replace name of entry point / T) ]% [$ x+ D% p* S rollupConfig=rollupConfig

.replace(`src/main.js`,`src/main.ts`)// Add preprocessor! }6 C0 e( p/ X9 K& o- ~& q rollupConfig=rollupConfig.replace(compilerOptions:

,preprocess: sveltePreprocess({ sourceMap: !production }),\n\t\t\tcompilerOptions:);// Add TypeScript ! |$ z$ {2 [3 i5 r

rollupConfig=rollupConfig.replace(commonjs(),,commonjs(),\n\t\ttypescript({\n\t\t\tsourceMap: !production,\n\t\t\tinlineSources: !production\n\t\t}),

);fs.writeFileSync(rollupConfigPath,rollupConfig)// Add TSConfig& {6 V: U" w, f# u, h consttsconfig=`{ " Q. d6 t( Y+ l" L "extends": "@tsconfig/svelte/tsconfig.json"," a$ d4 F; W3 p6 B$ f

"include": ["src/**/*"],7 C2 X' K- T. Q* q7 } "exclude": ["node_modules/*", "__sapper__/*", "public/*"] 6 n1 U: d8 [; O7 S2 f, k; P3 N }`consttsconfigPath

=path.join(projectRoot,"tsconfig.json")fs.writeFileSync(tsconfigPath,tsconfig)// Delete this script, but not during testing y; Q- l7 D, u4 @

if(!argv[2]){// Remove the script 6 V' ^; ^4 v. L- G/ s! Z5 } fs.unlinkSync(path.join(__filename))// Check for Macs DS_store file, and if its the only one left remove it 2 ^" ^+ a9 p, k0 @$ S

constremainingFiles=fs.readdirSync(path.join(__dirname))if(remainingFiles.length===1&&remainingFiles[

0]===.DS_store){fs.unlinkSync(path.join(__dirname,.DS_store))}// Check if the scripts folder is empty - i; H6 J _& b) d/ {# e

if(fs.readdirSync(path.join(__dirname)).length===0){// Remove the scripts folder ! w; u: B, F( h) s |5 D fs.rmdirSync(path.join

(__dirname))}}// Adds the extension recommendation S4 b' Y3 l* k; J fs.mkdirSync(path.join(projectRoot,".vscode"),{recursive

:true})fs.writeFileSync(path.join(projectRoot,".vscode","extensions.json"),`{ , X8 M3 M) z; C4 a9 n "recommendations": ["svelte.svelte-vscode"] - h" D& z5 c! _6 p5 h/ H

} ! F$ f* K+ A8 ]4 {" D `)console.log("Converted to TypeScript.")if(fs.existsSync(path.join(projectRoot,"node_modules"))){console

.log("\nYou will need to re-run your dependency manager to get started.")}components项目中用到了一些通用组件，借鉴了下

Element UI的组件样式和思路，主要封装了 Button(按钮) 、 Dialog(对话框) 、 Icon(图标) 、 Input(输入框) 、 Message(消息) 、 Tooltip(提示工具)

、 Upload(上传) 几个组件Button.svelte , [' P s3 G: l import Icon from ./Icon.svelte;8 Q! D" b6 |: T8 U/ {; O; v4 o7 m import { createEventDispatcher } from svelte;; |' g/ q5 B! a- v9 R const dispatch = createEventDispatcher();( A0 Q/ ]* ]! m7 M8 c/ ]" ~' S% b export let icon, type=default; & L* o( s1 T9 Q- y) z9 Q function handleClick() {6 S" {9 o7 B% w: i+ U, d dispatch(click) 2 p+ b+ V: R6 k' ` R% s } D& f- g% ~# N# l6 a function computedButtonClass(type) { + N. m4 Z7 z3 V' m! I% J8 t1 @$ v switch (type) {" w8 h* ?/ s; ]+ }( W. o case primary:1 G; t/ X5 F$ A3 l( p return button button-primary;* X, k- H5 H& W4 y. ` ` case default: ; z9 l: {0 G1 i( J return button button-default;# L7 L& N2 P2 d& A case text:/ A0 E1 V9 x& A9 h8 p; K return button button-text; x7 u7 C+ S( M# R4 g default: . U$ g8 n, o5 k ^ Y return button button-default; ( |4 `; p/ r3 Z* n9 G% Z9 ^+ b S } o$ [8 O' }% m" s5 |1 F3 z } 4 L3 e+ n V% b" \2 |7 @8 \6 C2 t9 S1 S' \& x 2 r& U( k9 e+ w& i2 a) \ _2 f ) _8 W$ e% S5 Q+ T- q .button {& X/ o9 W6 y9 ~7 L2 Y border: 0;* M* L0 ]5 X* s3 I6 a5 W border-radius: 2px; 5 N+ \: [2 k; z+ I, m. m* O) a } 6 h, h/ R& I8 T; ?* e5 L6 V& F/ N& b , D N5 o- B; X, } .button:hover { ( g/ O7 N/ {7 e. J1 u9 F cursor: pointer;1 `: b6 ~0 K5 P } + @% w2 q+ z" H% _6 G8 U, q $ ~0 a' K1 L4 l* f# B! `7 a .button-primary {/ b& Q8 u. A! c+ y& r& \. y background-color: rgb(77, 187, 41, 1); $ o& h: @% l" C! b. m* g0 ` color: white; n) o1 w( W3 d9 e border: 1px solid rgb(77, 187, 41, 1); ; d; ?3 _7 o9 \/ b+ g: e } ) I9 {$ l z c, ?9 }4 t6 M% o( B% S- [- T% D5 r .button-primary:hover {% M/ B5 E/ Q. x4 n background-color: rgba(77, 187, 41,.8);4 ]* `- ~6 G2 q8 r- c( B) q( t' v, U( Q } # ], ]7 }# |6 J9 n* p$ ]" l1 i/ T* x: t" n6 ^& c c .button-default { ' B$ {" |! k" E background-color: white; + D! a) o+ d7 _5 A8 L5 T. @. M, e color: #999; 3 t- i: N& K2 M border: 1px solid #e0e0e0;# L* ?3 @/ \1 Z! q6 L4 d5 g+ B }, M, H e& P x . a1 `7 x+ ~6 ?% F3 A .button-default:hover {8 b3 B' D* `4 G& N background-color: rgba(77, 187, 41,.1);( X8 ^& T# v; V; ?+ c" y4 ^ color: rgba(77, 187, 41,.6);7 c0 q# g+ y7 x$ Q* ^7 `' S border: 1px solid #e0e0e0;3 |+ ], S0 q0 {* G0 F- v } 7 M$ ^# v) H' z9 n6 i+ T, U. S" \% {4 E% B5 S4 B7 S$ s .button-text { E( x" C, W$ Z9 ]. w3 S background-color: transparent; $ x) I L- X! N, p7 T/ H' R. `; ~ border: none;- m6 N% Y% g- [1 h& m }4 y0 G4 e5 c3 t, L# K 4 u9 i6 g1 D3 X0 a- L( }7 p + s. w- d5 V$ O8 W- @, d* ~# n$ i 9 Y. X: I4 @! O4 T {#if icon} {0 [, S1 S' p8 E$ B6 j 7 G& @) v; y U7 W/ T {/if}: p+ j H0 q3 V G ! I1 }7 G' j0 w5 K/ x7 r6 K5 `

Dialog.svelte z+ W; m+ ~# a import Icon from "./Icon.svelte"; % ]! m& G* z% Z6 ]/ himport Button from "./Button.svelte"; # k- h, t( Q nimport { createEventDispatcher } from svelte;. k" q+ O! P! p9 S const dispatch = createEventDispatcher(); # h8 u! T1 Q0 ^export let title, visible = false; ; g9 t! U. K5 q5 m! cfunction handleClose() {0 |6 j# A# w- z- A, x _2 I# ~- E visible = false; - l. x( _2 h' O0 v9 s9 O9 r, H' X}7 q: f) K% h0 P4 t8 Z; j function handleShade() { ' l( t# d r( M8 x" | visible = false; % ~* k) {& ?7 \+ C% r, x} ! u0 S' s/ E5 p5 s& p+ T9 i( n5 Ifunction handleCancel() {. A6 W3 s/ c6 T$ r# ~' O visible = false;6 x! A- @& a0 d0 k6 ~6 f }& h; ` l/ D- L. c x @- c function handleSubmit() {" k/ C& ]7 b! V dispatch(submit)( H+ A/ \4 o4 c; ~ } " m7 p% G) v: P& y# p , c) D. p% @8 F8 s 2 O1 B( [9 t4 o, Z; Q+ g) n- \! s$ ~) `' x( B7 r; I4 s. y" ?0 @, C .dialog-wrapper { " x* Y# c6 ]6 c width: 100vw;& Q, f% c7 ^! b, G height: 100vh; % C/ F7 B4 T. W; P+ J3 C& N position: absolute; 2 w$ j; A! w5 i7 l" B z-index: 100000; . r' t: ]- [# S; C& a6 w( q background-color: rgba(0, 0, 0, .3);1 M% `: G% [. C. [/ _ } . i: e) u; G% e: ?( Q! E3 [; ^- l6 t/ P .dialog { ; G) E8 r1 [! x/ b width: 400px;6 Q7 Q B) ^1 t# s. K height: max-content; 5 O0 b8 U* O. v$ j' h background-color: white;; c$ x3 l. Q! n. F3 K. M. q, h box-shadow: 0 0 10px #ececec; & d9 I( |. `( l4 M position: absolute; 8 y/ Z9 j8 |$ |! l% Y8 e% L z-index: 100001;- E& ], A2 C/ z border-radius: 2px;: F3 G4 N" r) V* N: h1 I9 t2 L margin: auto;2 }* Q, y& `% U8 G5 u1 w$ @ top: 0; u+ b/ a8 }( J* B @& X bottom: 0;* \3 l+ z9 h7 a- c5 A left: 0; 4 s# C' c! l+ ]/ J" V/ X6 } right: 0; ! m- A" y" U; ]% G# [}) ]( F! u- w, |: [- f7 u .dialog-header { - }. i7 M* H, r( U5 l7 j. p0 [1 a- N display: flex;- H! w" ]( j! G! ~8 V align-items: center;% Q/ R k4 X* M) s, M justify-content: space-between;, r/ v& n, C* n8 T+ S border-bottom: 1px solid #ececec;* E) B! a4 r: f h, v# i1 |. S G padding: 10px; : X/ [' R3 q( R- k8 ^" n3 {1 \}. l/ u, u6 E# O . J" r' a/ |: ^6 l% I .dialog-header .dialog-title { 6 U2 y( d) r* M k8 X) Q font-size: 16px; ( @. L" T5 x( D/ s}( K) T/ t3 D8 w% B L z/ v1 p 3 l w) i& M- T.dialog-body {, w# E7 U% t5 F" F0 F" ~6 I padding: 10px;) d# w; t) _; W* R1 S+ _ }" n8 H3 I; v5 W, {% g! A ; b0 b( l2 ?8 f$ J* E .dialog-footer {- x* o, j8 C' F. v, ]( a: X display: flex; ) ^- w2 T8 `9 V! D$ L: C; w justify-content: right; / q2 [- a3 A! x9 } padding: 10px; $ P- N0 L4 F2 w. s' ?}6 L+ {7 q) K: A5 n0 a" N$ y& ?& C5 a6 { , }6 h; p3 P& T: H# T$ l . U: d* B0 O2 O5 {6 F) u. j{#if visible}, \' L4 _/ g C

Icon.svelte常用的icon主要通过iconfont来引入 / Y' c& w5 e6 {! f! i7 k: u( M4 z export let name;8 c ]' v/ W& ]* v. |/ X" P 3 T7 U8 Q+ W7 B, ?2 \3 ~) C0 u 7 F5 g% [& o! G& y* K, J9 `

Input.svelte $ T$ x% C* W5 p: `" U$ ]& N export let value; " ?. X$ O1 ^( y! B import { createEventDispatcher } from svelte;3 Y" I: x5 A) t- L1 [ const dispatch = createEventDispatcher();7 E! t; w. U" `! k# a function handleChange() {% s @4 v/ Q/ h. S% g! @0 y dispatch(input): d5 r9 Y; c, A k A } 2 I4 O# ~4 I5 y2 r # B: ]9 Y. p; E1 D ) t: |) B# d- V7 F# i" R9 n3 l1 M, ?1 m .input {( c4 K0 W0 y' t5 }2 Z8 y! ^" k8 J border: 1px solid rgb(77, 187, 41, 1); 4 B, G. Y6 P" c% f: u3 r width: 100px;' d3 i2 `/ W( {1 |1 ?9 p( ?7 G2 m }) B8 F" L; i4 r$ k5 l4 b / R H0 i5 k# f! n .input:focus {/ K) K& Y+ `8 |, f u/ I% X border: 1px solid rgb(77, 187, 41, .5);( Y9 A) ?( h P8 A2 s ` outline: none; b! G7 T$ x" W Z) U } 6 N5 {* Y; S8 I% ? $ S9 H9 P9 [; |" j# x8 `, i+ J: w + b, t; S! s3 {

Message.svelte8 v1 }7 w; c' x% v/ y1 l6 }" E import Icon from ./Icon.svelte; * A" J7 p" q, J! l% rexport let type = info, show = false; G/ m. R i/ h* p8 y/ f6 c4 ~# Y* U const computedMessageClass = type => { : h+ k6 y& S: U switch (type) {" l9 F; U8 b5 j5 e9 n7 O/ A case success: ) K' v# E4 _. q' c! m return message message-success;" S5 ~6 j9 |4 T4 `% P2 U case warning:2 |. B2 q1 M/ |/ Q3 [ k return message message-warning; $ U' q) r R* h: K& h case info: ; X1 Q/ ~$ W' z- l return message message-info; " B+ _) i1 Y1 \4 @. q# w1 K- Z case error: $ w M; E& q% H, |4 A- m- m return message message-error;2 e6 C) Z9 V8 L( z% ^+ [0 ?/ A default:# x: y& F2 O7 f' t4 Y% {5 l return message message-info; % N6 `- q; C+ U3 V } # j0 J* A4 h$ V5 D' B0 N( B: u& S7 P2 Z}% Y% V6 q# C3 @' g2 } B W) \ * ]& H# M: B3 F8 Aconst computedIconName = type => { 8 c* ^* \9 P9 k! X7 b8 i switch (type) {# J9 F( q/ @* l$ m3 B% Q. Q case success: K$ y0 C, m& c3 b7 g5 l( O return iconsuccess;# m& S, R/ a* C: C case warning:6 ] o i: r W t& b: T; J: } return iconwarning; ) Y9 K' S; E3 v" } T6 C( J$ U case info: 1 R6 [$ t0 w) p" z" U return iconinfo;3 t6 c+ m+ S0 T0 f3 v% y case error: , D2 F4 }. w Z return iconerror;2 B& f4 l, X. Z. t5 M default: # `$ G; [3 A! `" t, \3 N return iconinfo;/ g6 j: h- V. v8 F } ! e3 N* v t3 ~( u' d6 ]" U}1 K" }- c( A- | 8 |: x0 R% B6 U' j8 V! n' t 1 i+ y( D) x7 u8 \' C U2 ^; B% `8 p! {- ^: P$ E3 i .message {) g/ \ ^% H7 k position: absolute;& n; ]5 @( v$ F( q3 A; P z-index: 100000; ; E7 R/ n+ x8 b" m+ \, k3 R6 ? width: 200px;$ q$ v. {7 Y4 g" B height: max-content; 2 S0 m3 _& ?. R. Q6 e left: 0; . q1 t- v! Q% R right: 0; ; R6 h; ]1 e) Y: t7 C5 O margin: auto; " z9 B8 B! ?# S# R padding: 4px 10px; 3 e1 K( @( H3 @. S) Y animation: show 2s ease-in-out forwards;# y% P4 A: h% Y' r$ ], V display: flex;; v8 j1 k; s4 ]7 j9 t justify-content: left;* W" l' ~; h4 i. k align-items: center; - M% O: F$ R+ Q, q: l2 ` n! I border-radius: 4px;' n! a8 l* J' ^9 q- t4 _ } 8 R4 ?7 n$ ~: o) W8 b; v4 S6 U" U, B7 W+ C .message-content { 1 H" T% V( M4 S margin-left: 10px;, r h( z" r& o9 w4 o) z } / ?; Y* B5 K$ r% m: e. d, D ) v1 f! Q2 o) G@keyframes show {/ y. \7 |' a n from {# b, x' g+ k/ @9 k opacity: 1;4 c; @) G/ F! n2 g' v* A top: 0;8 X6 u( `3 q; x* z } 3 d& c2 `' [( l; G% m: Y0 u: j, ^ ) D) p7 A. f d5 Y1 [8 R to {' N& q) @' }* B+ @ opacity: 0; I- n; t% I' } Y. B; y) [ top: 100px; $ F. o/ j( _3 [ } } / K: q* r7 K; D( u5 J} . `5 \: X2 N# U& n5 r1 ]- T" S1 V, X% e* q i .message-success { 5 _, q1 E$ b7 ]2 Q- b* m/ U background-color: rgba(77, 187, 41, .2);) \% ?6 s' \7 n4 s; D; i! d color: rgba(77, 187, 41, 1); $ i+ G2 U. c5 H- j% l' v9 [}8 @% q* B- N+ ?3 G/ G 3 _( Z8 s2 a6 {.message-info { 7 d$ {# Y8 T$ g6 T; M# ] ^& T3 x0 x% w5 Q background-color: rgb(144, 147, 153, .2);2 @0 F J0 {* ?# I& } color: rgb(144, 147, 153, 1); 3 _: E9 V0 B( b0 B, a! c} 2 i9 d( C. |9 U8 Y% k2 j 6 O" X2 a5 H( \, E; w e8 `2 }6 m.message-warning { R) ~, [, \( `) p4 }! g4 y# Q7 N" K background-color: rgb(230, 162, 60, .2);, z U F: V& I$ I; d4 y color: rgb(230, 162, 60, 1); " }- ~* h1 N# D$ P}! G4 ^6 T3 j9 o: U ; |+ V% T( t5 L* g1 v) P# r7 t) S.message-error {6 ^7 R' n' Z; [, y( D background-color: rgb(245, 108, 108, .2); ( ~4 U& M5 u( C5 @% X color: rgb(245, 108, 108, 1);* }0 W5 u8 _0 p: |5 D! X4 |$ Q1 q9 N% y } 1 z$ E* E; ^3 x) Z/ ~% B / D; w8 U7 ]* |& b: J; E2 k - ]9 @& N6 K. n P{#if show}4 z% X) k2 U* t, ^3 c

Tooltip.svelte / f: \" e% X" Q% G j# @5 v export let content, tooltip;8 F$ c; O- X' ?5 I) ^ 8 u6 X: r: [: `, w' c 2 j0 Y% A% b& g: ?2 r8 K0 f" n ' D! F' c2 D2 f, G 9 n# Z4 W; Z7 Q3 B7 o! o.tooltip {" {2 n3 U% w b, S position: relative;! ]0 W; O9 o' r7 X, ^ } 0 _1 {9 {8 x5 l& l3 j& q: u , Y2 [0 y4 c: T.tooltip .tip-container { * N, {$ ]) S; _! I position: absolute; ( _" W: Q& [6 }7 W background: #666; % b) L) ?3 ?: X padding: 0 10px; ( B' A p& T5 c: p6 P2 n% K) G border-radius: 4px; ; x% \% D5 \8 K' R right: -180px;1 q! R j. @8 Y% @ top: 50%; # x; k% d. a9 `, i; H/ n* o- u( |; E8 T margin-top: -24px; ; \/ M) |, z! r}1 r# D [0 m2 N; e: r: u, F: r5 R ( `/ u7 b+ _6 I$ M1 V [; b .tip-container .tip-triple { : b* k4 H! n5 t8 l7 N1 I4 R. U. h width: 0;3 l( ~6 b4 }' _ z8 C height: 0;1 H4 ]+ n" D6 W& ^8 O" x* ?( M border: 8px solid transparent; , D7 H& R% X1 O+ {; B' p+ c$ d. m border-right-color: #666;) u: D {! z- Q6 X# B" W- h position: absolute; & A% i3 R- [# N' ~0 n$ T left: -16px; : e6 P; B( i4 ^9 T6 q top: 16px;3 N: V4 d" A% e4 Y } ! u6 C( `' ^ z' P; _: q# ~3 [# V' L* F* v( a% H, u6 g! d .tip-container .tip-content {+ b( Y: J- Y, l) a T. k line-height: 24px;! V# D% M5 x8 z l0 ~ font-size: 12px; ( `# j( v/ Q. @ color: white;. f9 K2 c! g n' J }1 ?3 ]9 G- i2 t! r3 p. e : b9 k: X7 L' ?3 @) A$ U+ N . m9 Y- S5 ^9 H9 Y& {

Upload.svelte ' X/ m" W2 V9 h! F0 w3 ~$ [ export let action, onSuccess, beforeUpload, id;+ k h. q- i1 E function ajax(options) {1 i, {# C8 I/ w1 h6 ~, E const xhr = new XMLHttpRequest();% y7 T; B6 D; o, S const action = options.action; / y$ x3 }% [2 L5 [5 @ let fd = new FormData();; I( }% R) v% ^: U 8 {- q! t8 W5 T" } fd.append(options.filename, options.file);% U! J. D$ C9 D5 E( I ! ~% k. M' X" h8 S7 ~1 a# N xhr.onerror = function (err) { 4 v+ z+ l1 B7 l L6 j console.error(err)" _6 t4 B' _: a/ C6 T) t8 P' K! y } ' t ?5 ]$ f p6 c) O" v. I( ?/ @ xhr.onload = function() {( Q k9 P8 m% a! w+ \; Q+ p5 c& s z const text = xhr.responseText || xhr.response;+ B1 u5 x) e! @1 {; p7 v console.log(text, text) ; s+ C8 _; r; i' r9 J# r: c text && options.success(JSON.parse(text)) D. ^$ ^+ k! F% z8 `! o }" |& Y+ g+ f' w$ t : j7 H) k5 N" b+ {' O; j4 G xhr.open(post, action, true);6 U7 l- n1 b: y4 [1 e; L xhr.send(fd); & p( ~! r8 ~# u m7 v" X) N, x% U0 _+ k 0 U/ x! s3 X' c+ S" K, u return xhr; 5 P0 {/ P& I( k6 j$ { }: m k% v8 O7 g function post(rawFile) { - y/ H/ h0 P7 D1 v. U) L const options = {; z6 r) {4 i/ O+ R; { id: id,' K1 W6 \7 i. S3 N) r file: rawFile,3 M5 u! F* t: m1 | filename: img, . U: u* k8 y: P action: action, ^, z0 q7 f& s. g' `. p4 m success: res => onSuccess(res, rawFile, id) n$ u) ~4 K% r) ?* L. A }. b. t- a0 `% Z" A$ H const req = ajax(options); % c% f1 \' y! ^3 i4 I! L if(req && req.then) { }+ P% t: ~' n req.then(options.onSuccess) & s/ ] ?6 e- ? } 9 ]' s# j" l i* p/ l } ( {! ^ j* {& s5 t4 W async function handleChange(e) { . r: C: k/ { U9 r, p& b u6 ] const rawFile = e.target.files[0]; ! g3 l t3 y; O9 a3 p" z j0 B7 t if(!beforeUpload) {: h4 _. S8 t+ o0 u return post(rawFile)2 E( o5 h$ R5 f- {& R7 R } `3 F! S$ y$ j. W g let flag = await beforeUpload(rawFile, id);7 Y( J. R# Y; _! P- `1 Z if(flag) post(rawFile) ' g4 n7 p3 f0 [" C0 a% p: v } ( K+ r# h- N$ ]: P0 o function handleClick() { + Q+ v7 C% n+ K7 a! ^ const plus = document.getElementById(id);- x6 W( _; f+ O; `. D* F2 C/ E plus.value = ; * o& l! G d! r; a2 E plus.click()9 D) x* Q4 D, s5 t, c+ N } 9 k( }8 O% _: v; g+ W" M) I( l i( j! J7 v; f& @" ~ ( w9 t! q! w& Q1 \* [. Q u# w: d, t% y .upload {8 _! s; e. x; ]! y width: 250px;& L& d) C. C/ a9 d3 B7 Q height: 250px;$ f) N" n, |9 d$ d, A. y h border: 1px dashed #ececec;1 U, y. \0 q2 k" ~+ _/ _ text-align: center; ; j: y* D; Z! b2 D6 d$ Y display: flex; 1 s+ x& I8 J8 Z6 r' a2 m4 a0 F+ d justify-content: center;3 F' m! i6 A/ H5 N% D# [ align-items: center;: O" A/ Z, A! _" b } ) X& S3 v1 {7 a) z3 ~# S) ~- W8 u* g- A .upload:hover {- b, o. r* f& @ cursor: pointer; 7 Q2 a/ q R9 e/ H! Z2 H }/ {$ [" q- g8 l4 N3 E ' P" G! F$ G: Y% v1 e7 M B .native-input {/ L$ O6 |1 V& g' L9 w display: none; 9 d, `0 M5 a5 o } - T% L0 o- h+ l' K- ~; e4 F- i+ W6 |- v- @2 `, W7 k/ C' c5 P ; ~0 P, K0 u$ ~$ C

utils通用工具库主要封装了图片及函数式编程需要用到的一些工具函数function.jsexportconstcurry=(fn,arr=[])=>(...args)=>(arg=>arg.length

===fn.length?fn(...arg):curry(fn,arg))([...arr,...args]);exportconstcompose=(...args)=>args.reduce((prev

,current)=>(...values)=>prev(current(...values)));image.jsexportconstgetBase64=file=>{constreader=new

FileReader();reader.readAsDataURL(file);returnnewPromise((resolve)=>{reader.onload=()=>{resolve(reader

.result);};});};exportconstgetPixel=img=>{constimage=newImage();image.src=img;returnnewPromise((resolve

)=>{image.onload=()=>{constwidth=image.width;constheight=image.height;resolve({width,height});};});}App.svelte

: x& I$ H. L( m0 h0 L6 h' h import Icon from ./components/Icon.svelte;- y7 p. N" |8 X import Button from ./components/Button.svelte;2 n4 ]& o$ d7 V( l9 M import Upload from ./components/Upload.svelte; % h1 B- K4 i: i; Z; \# p import Input from ./components/Input.svelte; & _+ |# D# M5 f( ?5 @ import Message from ./components/Message.svelte; : }7 t8 i3 A' s4 ? import Tooltip from ./components/Tooltip.svelte; ( \1 ]. d$ j# [5 t7 W/ n& G7 [$ l! B import axios from axios;; b9 b! j( i" I5 F* b' @ import { getBase64, getPixel } from ./utils; 8 Y. y, {4 p8 \7 e% Y7 s5 S. k : f% O8 N; g0 |& H) S6 @2 H& X `& Y const bgUrl = ./bg.jpeg,# ?, s$ e6 q# L5 O/ W6 K logoUrl = ./favicon.png, 4 V) X# p. G7 }/ T' l actionUrl = , F3 D! F0 I1 r% I' `2 O( R" `( y compareUrl = , 2 E* A) D, F5 }9 `4 a downloadUrl = ,6 d$ `+ q" {. S$ @. } crxUrl = ; 9 K# h3 L6 k3 o" j let width = 0, height = 0, flag, compareName, errorMsg, successMsg, show, tooltip; ! p- ~( |4 M3 x let uploaders = [* {( M$ j1 P! c) ? {, c4 d& ~: k$ c3 j id: design,5 d# ^- g2 {* b P: Y4 C title: 设计图, 5 t3 p" P f. H) T: l% l, c filename: ,+ S0 T7 C- b4 V url: 3 W# M" H$ _6 g" V- D },: b: j: B0 j$ r {! q8 p8 N& L! a. W id: code,* x* @, S5 L# W title: 实现图,9 G( _# g3 \/ n8 j& `: h filename: , 9 @) d5 L" Q7 I4 @9 T url: % F G* k1 z' r' L& R' j, F }5 n" k2 T6 d0 v8 n ]; - ]$ {% U; k& p! F6 P$ ` * P8 ^2 R A8 x o' A const handleCompare = () => {1 p# _5 b. n8 Y6 W show = false; + O9 ?8 I9 h* `' l. B, d L const len = uploaders.filter(f => !!f.filename).length;/ v. j; G- j! k8 s9 z if(len == 2) { ) n0 P4 N0 @9 P9 a axios.post(compareUrl, {+ |* p$ T D) e c7 H7 ^ designName: uploaders[0][filename],1 b! a9 f- E8 W codeName: uploaders[1][filename],2 k3 Z% ]& u0 ^1 x }).then(res => { # f# C( i, g" p7 g6 G console.log(compare, res) 1 }2 A/ n( `) ^" v3 H% ^ if(res.data.success) { 9 N3 U3 H$ i) C8 \8 {3 |* k9 V compareName = res.data.data.compareName;2 M8 |% W1 _4 I, n return true; P' N) k4 g9 O, i0 { } else {! u. i% }5 p$ t; L+ J& a0 A" f4 e( a flag = error; & w0 c/ }# {5 [2 N show = true; / {4 L% m: g3 c errorMsg = res.data.data 8 ~. I7 N3 J7 u4 d3 O } : C$ C, O; h2 @# M }).then(c => { # N2 P8 |9 M! g if(c) {) r$ Z4 _5 x- p0 l. b flag = success; 0 R0 o" X4 M6 S! [& m9 u g) f M successMsg = 对比成功;3 }9 N) L+ ^6 [& h# y/ d show = true; $ @( `4 m; l. L0 G handleDownload()% f! W3 I6 u; g5 h; d* P ]( \% P' n handleDelete() q) m' I6 j( r+ ]- a. T( R. { } : g/ \: w( ?3 ?3 U4 \2 X& X" D3 g })/ a5 S* j# P$ G2 U B } else if(len == 1) {/ G2 c, \/ o0 H+ x% U! j3 D" } window.alert(设计图或开发图缺少，请确认已全部上传后再进行比较！)9 a8 {0 d/ a/ m7 G! A5 H } else { 9 `: c9 N: F: W window.alert(必须有图片才能进行比较！)0 d4 l" I% y% \# T2 ` s% b } 3 }. n \: J* x1 w: u$ ~' e! Z" n" U }; 6 q) E- \! ~" R' g7 i- w6 j$ E& W- J8 @9 E6 B const handleBeforeUpload = async function(rawFile, id) { 3 G) G s( f1 I5 ]& b ? const fileBase64 = await getBase64(rawFile); 9 D" y% C" ^9 y/ T3 X const res = await getPixel(fileBase64); : B6 x' s4 T: X1 @( ~ // console.log(res, res) 9 ]& L) f. q# i9 [ if(res.width == width && res.height == height) { , m4 {8 u1 H( Y% ? Z switch (id) { 9 a! H# g5 N. b) l4 Y. g case design: 2 u( \7 X; D' F" D) J- i6 O uploaders[0][url] = fileBase64 ; T# h) [( A4 `' x break;9 W; f7 a0 M R8 N6 c0 \7 [9 _1 |" G% Q case code: : {0 e& e0 w. k/ D' i5 g uploaders[1][url] = fileBase64 1 ?. \- U# o6 U4 h4 { break;, {. h' g6 M2 {/ Q+ T% F9 f1 i4 p default:5 O. R- u* R% c6 m2 s; G break; # l# o6 }& P1 @2 d9 D } 7 \2 P" Y. d. {: B% X& Q, \/ M return true;- _3 d. A$ y+ x8 @ } else { 5 @. F$ G* K+ m window.alert(上传图片不符合分比率要求);+ ` T0 h1 B z6 P, u$ {# ?& L return false;6 Y3 U* t% c2 G4 I8 F }* h* P r: w' n4 T } : `0 {2 `7 G" p5 B, D/ W , l8 j8 J! O, D) s {7 e const handleSuccess = (response, rawFile, id) => {( N% f, L% O3 C7 R console.log(response, response, rawFile, id);( T# h& [* s8 o# U3 h# i. B if(response.success) {9 B# r9 H* g2 J: D switch (id) { & M3 R; a+ J( p5 v5 z8 {! _0 K case design: ; N$ A9 i$ @; |/ D3 _5 l# v uploaders[0][filename] = response.data.filename 5 ^' ], J/ I! O( U% U4 g& `3 t break; 1 E; y; Z- ?% A9 P6 c case code: : Z# q5 N1 `8 P0 p, e uploaders[1][filename] = response.data.filename P% k" z6 J$ K7 M break; ) r ?' _7 s; D3 F' V. h default: 2 X: w, v! S2 `* R break; - B! q$ [+ I( h } 2 i$ Q- U$ V. M$ [: a } - h8 o7 Z& l7 s3 z6 A }, Y. S8 |- W8 O$ K3 ?/ z ! D2 h8 G; t! ~5 `. { function handleDownload() { , ?( X' y5 m; i8 J8 L n axios({& ~, w" E# s- H7 p' ~7 G2 G+ J method: POST," q3 O$ z i) H6 t: m url: downloadUrl, s& w5 w& t9 { responseType: blob, * u g3 `; n5 o" K data: { 0 o7 F0 j! F5 v, ?& E# ]& o compareName: compareName , |0 b5 v6 U0 ^6 N @4 V }4 Q1 o9 E1 Z0 b8 e. t }).then(res => { 9 `' z, w6 k% n console.log(download, res)' @( F7 f! N. D; J if(res.status == 200) { & F; } x$ {5 |( C, [4 G) B* ` var blob = new Blob([res.data]);8 N" A- s( e& x) x // 创建一个URL对象 0 ^1 D, T l# @3 o9 D var url = window.URL.createObjectURL(blob);% ?, r- d3 \. k }, P console.log(url, url)+ e+ N; A4 f! I9 { // 创建一个a标签$ }1 K ?! b: S: x* R1 s var a = document.createElement("a");- P i- m& q' ]7 ^) v/ X a.href = url; L* n. P" {1 T% ` a.download = compareName;// 这里指定下载文件的文件名 5 w7 l5 r$ e. C9 `- b. f a.click();! C2 A; [( W1 M2 M( w- H! q# l // 释放之前创建的URL对象 8 r2 E+ T! {0 B! F, F0 G window.URL.revokeObjectURL(url); 7 u$ S5 k) l+ z y' C } $ s# n, I5 z3 m) A7 n) ? }) - Z! S* r: J) E6 r" F* o+ P } " x+ _8 l: i$ P8 q/ x. a1 B3 m! @! _ function handleDelete() { , ^; c7 Y f. n# d; @4 {# Z uploaders = [ , x5 R2 p1 [% l1 b. R {5 `+ U ]' c8 g" F- Z id: design,1 x ~. V# b |% X- X) I title: 设计图, 7 X2 h+ Z9 d# x+ S' D filename: , # m/ Q: q/ [- o" l2 `; a4 ] url: 3 Z" K6 o# b0 ]0 q |& R- M# T }, @% v' D" V& \4 e7 v. l { + H& _& v% i: \# o: h7 }% A id: code, & A! D4 n% y: ?- @ title: 实现图, * G# {$ \$ E @+ g" B filename: ,: W% m: [( ^, t& A; Y url: / K' H9 N: r# Q: ~6 S a# o Z }! R0 l7 r T2 Q: f' x ]; * t) Q# Z; }! J% `( M! N" O } , A a8 ?$ G! V4 x" a. W - K4 e+ b% }- |$ g" q3 W " f5 M4 ]3 o# R+ X6 Q6 @+ F7 b3 P& G- \' @/ k1 R7 o1 f .pixel-piper { ! C3 `" l# _! c$ [ width: 100%;' N+ n; H N8 \) L8 V height: 100%; 2 D/ L# d5 h5 L; Z O display: flex; ?! G% y7 b4 ]! o- V$ y! l2 X justify-content: center; # l) s% ^( l+ J5 O3 ? align-items: center;) D, \$ d: m' d$ W" f" n. l) d( e } + S5 H5 k: o, ~+ {% P; j, y ' ]. y0 o# T, s4 D .main { , ]9 X |: f4 ?" |- j width: 600px; , G, ^ x0 T1 `, A( S6 }3 K s, k- N margin: 0 auto;! I! P( I. q' ^( B7 j' U padding: 20px; 0 r) s H* A% x ~) i7 u border: 1px solid #eee; 2 n0 b) P8 h6 N background-color: #fff; ) l& u9 }8 b# p" ]8 O7 P border-radius: 4px; 8 S2 i; s# P7 n9 ~8 k2 G& f box-shadow: 0 0 10px #e0e0e0;" }8 S& V# G; h, K# f$ r } 0 S! H8 E& I# ~" c4 ^ 6 X' \5 P8 k" R7 B .main .logo-container {6 Q. h, E. W' ]+ I display: flex; / `+ V' v1 r2 x6 e- K) u+ l( U9 R justify-content: center; f: Z; a4 z! v( E/ G align-items: center; ) G8 h5 P$ p4 {+ c. E t }2 d6 }" B9 D l: ^7 c + h% H/ S8 m7 d1 J I7 N: x! g1 ^3 v .logo-container .logo:hover {; A3 L4 G3 _2 S) e* _3 @ opacity: 90%; # ~. D0 p' S$ C7 K cursor: pointer; 7 Q& p T7 O$ k0 |* O9 ]2 \ }6 u! a( u, j3 z v+ @! ^) t 6 V. B8 y. i- Z, ?5 p; {) d( q4 R3 p/ D .main .select-container { - d" K/ l* a1 r! P/ B8 _ display: flex; 5 f* ~5 l; i' a. ?: C; d align-items: center; 9 Z% |0 q, h" ^" v7 a3 z align-content: center; 6 w3 w7 J' r) R$ b justify-content: center;+ R5 K8 p& w1 y justify-items: center; 1 n) {! Y4 R. t- Z line-height: 40px; $ {4 S1 M, @' I' a# o% R }0 T. D5 [7 j4 [! W! S8 h & c" U b) m7 o% Q' v .main .upload-container { $ a$ D+ B. ~% [/ X, h( c# L, k$ _ display: flex; : E8 I* A2 S2 y2 ]1 d padding: 0 0 10px 0;& Y: r' R. z; L/ w5 Z9 s4 e0 x justify-content: space-between;/ f8 {# j; f( P) J8 P text-align: center; ; m" G0 Q+ Q7 }' |: ~9 H! Y) I6 ~/ ?1 { } , V& J! M- T) l% k+ @7 ] / n5 `6 [) j" C$ m .main .button-container { / e% Y% _, d( b display: flex; 9 q4 t6 K$ w# `. j: Q7 E" k4 V4 q justify-content: center; + a( o5 D7 B1 s1 R- x" f9 z# B0 k align-items: center; x& r. D( x$ `* u9 V& r } + s1 t" ], N! V9 Q3 ]; t- b& J' s" r .main .info-container { 4 U$ l& l3 U+ A8 h text-align: center;, S+ P* `: t# B- K color: red;: y& N; o2 t5 S$ p- _# u- W font-size: 12px;* j( V- ~9 F) ` margin: 10px 0;4 b( ^' D8 Y/ x' ]4 e+ P }- I8 u7 B2 N; Y c' E6 T1 v( H; j! {: e & D4 m6 l4 x; u& _- X

总结作为前端工程师，我们是距离用户侧最近的研发同学，不仅仅在于完成业务的代码实现，而且不同于其他研发同学，我们也承担着产品用户体验的重要职责，而这其中页面的还原程度是一项重要的指标，能够让设计同学认可我们完成的工作也是评价大家前端能力的一个维度，毕竟上下游通力合作，才能把产品体验做到最佳，共勉！！！

参考Svelte 中文文档一文详解 Svelte干货 | 携程机票前端Svelte生产实践Svelte 原理浅析与评测新兴前端框架 Svelte 从入门到原理被称为“三大框架”替代方案，Svelte如何简化Web开发工作

设计小姐姐都说好的视觉还原对比利器使用Svelte开发Chrome ExtensionChrome插件manifest.json文件详解30分钟开发一款抓取网站图片资源的浏览器插件一天学会Chrome插件开发