apm29.github.io/index.html at master · apm29/apm29.github.io

History

1887 lines (826 loc) · 69.5 KB

Raw

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

595

596

597

598

599

600

601

602

603

604

605

606

607

608

609

610

611

612

613

614

615

616

617

618

619

620

621

622

623

624

625

626

627

628

629

630

631

632

633

634

635

636

637

638

639

640

641

642

643

644

645

646

647

648

649

650

651

652

653

654

655

656

657

658

659

660

661

662

663

664

665

666

667

668

669

670

671

672

673

674

675

676

677

678

679

680

681

682

683

684

685

686

687

688

689

690

691

692

693

694

695

696

697

698

699

700

701

702

703

704

705

706

707

708

709

710

711

712

713

714

715

716

717

718

719

720

721

722

723

724

725

726

727

728

729

730

731

732

733

734

735

736

737

738

739

740

741

742

743

744

745

746

747

748

749

750

751

752

753

754

755

756

757

758

759

760

761

762

763

764

765

766

767

768

769

770

771

772

773

774

775

776

777

778

779

780

781

782

783

784

785

786

787

788

789

790

791

792

793

794

795

796

797

798

799

800

801

802

803

804

805

806

807

808

809

810

811

812

813

814

815

816

817

818

819

820

821

822

823

824

825

826

827

828

829

830

831

832

833

834

835

836

837

838

839

840

841

842

843

844

845

846

847

848

849

850

851

852

853

854

855

856

857

858

859

860

861

862

863

864

865

866

867

868

869

870

871

872

873

874

875

876

877

878

879

880

881

882

883

884

885

886

887

888

889

890

891

892

893

894

895

896

897

898

899

900

901

902

903

904

905

906

907

908

909

910

911

912

913

914

915

916

917

918

919

920

921

922

923

924

925

926

927

928

929

930

931

932

933

934

935

936

937

938

939

940

941

942

943

944

945

946

947

948

949

950

951

952

953

954

955

956

957

958

959

960

961

962

963

964

965

966

967

968

969

970

971

972

973

974

975

976

977

978

979

980

981

982

983

984

985

986

987

988

989

990

991

992

993

994

995

996

997

998

999

1000

<!DOCTYPE html>

<head>

<title>生活中的Design</title>

@font-face {

font-family: 'Oswald-Regular';

src: url("/font/Oswald-Regular.ttf");

}

body {

margin: 0;

}

header,

footer,

.back-top,

.sidebar,

.container,

.site-intro-meta,

.toc-wrapper {

display: none;

}

.site-intro {

position: relative;

z-index: 3;

width: 100%;

/* height: 50vh; */

overflow: hidden;

}

.site-intro-placeholder {

position: absolute;

z-index: -2;

top: 0;

left: 0;

width: calc(100% + 300px);

height: 100%;

background: repeating-linear-gradient(-45deg, #444 0, #444 80px, #333 80px, #333 160px);

background-position: center center;

transform: translate3d(-226px, 0, 0);

animation: gradient-move 2.5s ease-out 0s infinite;

}

@keyframes gradient-move {

0% {

transform: translate3d(-226px, 0, 0);

}

100% {

transform: translate3d(0, 0, 0);

}

</style>

<!-- /*! loadCSS. [c]2017 Filament Group, Inc. MIT License */

/* This file is meant as a standalone workflow for

- testing support for link[rel=preload]

- enabling async CSS loading in browsers that do not support rel=preload

- applying rel preload css once loaded, whether supported or not.

*/ -->

(function( w ){

"use strict";

// rel=preload support test

if( !w.loadCSS ){

w.loadCSS = function(){};

}

// define on the loadCSS obj

var rp = loadCSS.relpreload = {};

// rel=preload feature support test

// runs once and returns a function for compat purposes

rp.support = (function(){

var ret;

try {

ret = w.document.createElement( "link" ).relList.supports( "preload" );

} catch (e) {

ret = false;

}

return function(){

return ret;

};

})();

// if preload isn't supported, get an asynchronous load by using a non-matching media attribute

// then change that media back to its intended value on load

rp.bindMediaToggle = function( link ){

// remember existing media attr for ultimate state, or default to 'all'

var finalMedia = link.media || "all";

function enableStylesheet(){

link.media = finalMedia;

}

// bind load handlers to enable media

if( link.addEventListener ){

link.addEventListener( "load", enableStylesheet );

} else if( link.attachEvent ){

link.attachEvent( "onload", enableStylesheet );

}

// Set rel and non-applicable media type to start an async request

// note: timeout allows this to happen async to let rendering continue in IE

setTimeout(function(){

link.rel = "stylesheet";

link.media = "only x";

});

// also enable media after 3 seconds,

// which will catch very old browsers (android 2.x, old firefox) that don't support onload on link

setTimeout( enableStylesheet, 3000 );

};

// loop through link elements in DOM

rp.poly = function(){

// double check this to prevent external calls from running

if( rp.support() ){

return;

}

var links = w.document.getElementsByTagName( "link" );

for( var i = 0; i < links.length; i++ ){

var link = links[ i ];

// qualify links to those with rel=preload and as=style attrs

if( link.rel === "preload" && link.getAttribute( "as" ) === "style" && !link.getAttribute( "data-loadcss" ) ){

// prevent rerunning on link

link.setAttribute( "data-loadcss", true );

// bind listeners to toggle media back

rp.bindMediaToggle( link );

}

};

// if unsupported, run the polyfill

if( !rp.support() ){

// run once at least

rp.poly();

// rerun poly on an interval until onload

var run = w.setInterval( rp.poly, 500 );

if( w.addEventListener ){

w.addEventListener( "load", function(){

rp.poly();

w.clearInterval( run );

} );

} else if( w.attachEvent ){

w.attachEvent( "onload", function(){

rp.poly();

w.clearInterval( run );

} );

}

// commonjs

if( typeof exports !== "undefined" ){

exports.loadCSS = loadCSS;

}

else {

w.loadCSS = loadCSS;

}

}( typeof global !== "undefined" ? global : this ) );

</script>

<a class="home-link" href=/>生活中的Design.</a>

</header>

<div class="site-intro" style="

height:50vh;

生活中的Design.

</h1>

it's better to burn out than to fade away

</p>

</div>

// get user agent

var browser = {

versions: function () {

var u = window.navigator.userAgent;

return {

userAgent: u,

trident: u.indexOf('Trident') > -1, //IE内核

presto: u.indexOf('Presto') > -1, //opera内核

webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核

gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核

mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端

ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端

android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器

iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者安卓QQ浏览器

iPad: u.indexOf('iPad') > -1, //是否为iPad

webApp: u.indexOf('Safari') == -1, //是否为web应用程序，没有头部与底部

weixin: u.indexOf('MicroMessenger') == -1, //是否为微信浏览器

uc: u.indexOf('UCBrowser') > -1 //是否为android下的UC浏览器

};

}()

}

console.log("userAgent:" + browser.versions.userAgent);

// callback

function fontLoaded() {

console.log('font loaded');

if (document.getElementsByClassName('site-intro-meta')) {

document.getElementsByClassName('intro-title')[0].classList.add('intro-fade-in');

document.getElementsByClassName('intro-subtitle')[0].classList.add('intro-fade-in');

var postIntros = document.getElementsByClassName('post-intros')[0]

if (postIntros) {

postIntros.classList.add('post-fade-in');

}

// UC不支持跨域，所以直接显示

function asyncCb() {

if (browser.versions.uc) {

console.log("UCBrowser");

fontLoaded();

} else {

WebFont.load({

custom: {

families: ['Oswald-Regular']

loading: function () { //所有字体开始加载

// console.log('loading');

active: function () { //所有字体已渲染

fontLoaded();

inactive: function () { //字体预加载失败，无效字体或浏览器不支持加载

console.log('inactive: timeout');

fontLoaded();

timeout: 5000 // Set the timeout to two seconds

});

}

function asyncErr() {

console.warn('script load from CDN failed, will load local script')

}

// load webfont-loader async, and add callback function

function async(u, cb, err) {

var d = document, t = 'script',

o = d.createElement(t),

s = d.getElementsByTagName(t)[0];

o.src = u;

if (cb) { o.addEventListener('load', function (e) { cb(null, e); }, false); }

if (err) { o.addEventListener('error', function (e) { err(null, e); }, false); }

s.parentNode.insertBefore(o, s);

}

var asyncLoadWithFallBack = function (arr, success, reject) {

var currReject = function () {

reject()

arr.shift()

if (arr.length)

async(arr[0], success, currReject)

}

async(arr[0], success, currReject)

}

asyncLoadWithFallBack([

"https://unpkg.com/[email protected]/webfontloader.js",

"https://cdn.bootcss.com/webfont/1.6.28/webfontloader.js",

"/lib/webfontloader.min.js"

], asyncCb, asyncErr)

</script>

<span>使用KeepAlive动态缓存标签页</span>

</a>

使用KeepAlive动态缓存标签页很多管理系统都有已打开的标签功能,类似于现在浏览器的顶部标签栏,打开过的页面一般会缓存一段时间,在这段时间内打开,页面不会重新加载.基于vue 2.x版本的keep-alive标签可以实现缓存页面的需求,但是如何去除缓存呢?

假设这样一个场景,用户打开了标签页-A和标签页-B,停留在标签-A,用户希望重新加载下标签页-B,这个时候keep-alive已经缓存了两个页面,如何单独去掉B页的缓存,使得B页面可以重新进入?

keep-alive的基本功能可以传入的三个props:

include 字符串或正则表达式。只有名称匹配的组件会被缓存

exclud...

</div>

</div>

</div>

</article>

<span>SheetJS -- 前端(浏览器)导出Excel文件</span>

</a>

SheetJS – 前端(浏览器)导出Excel文件项目中有需求导出业务报表为Excel文件,并且需要有一定的样式和格式要求,后端导出的Excel样式设置比较困难于是只好让前端整了┓( ´∀` )┏

需求调研前端导出Excel的库基本上大家用的都是SheetJS,我也不找其他了,直接整个SheetJS社区版开干了(SheetJS CE)

SheetJS的功能SheetJS可以实现数据导入/导出/处理,文档上有一些实际的示例,比如将文档流中的table标签导出为Excel文件, 读取Excel文件生成table标签,将CSV文件转换为HTML表格或者Excel文件. 社区版(CE)的功能相...

</div>

</div>

<a class="post-tag" href="javascript:void(0);" data-tags = "SheetJS">SheetJS</a>

</div>

</article>

</a>

钉钉H5应用踩坑(1)钉钉H5微应用开发踩坑,钉钉的Webview内核据说是UC浏览器内核,许多CSS/JS的兼容性问题,例如thead/tr不能使用position:sticky, 还有table标签的滚动行为两个端(iOS/Android)不一致,和table的宽度设置相关.在Android端一个overflow-y:auto的容器中,直接放个table(宽度比父容器大),是无法滚动的,而iOS端可以.

兼容全面屏iOS底部动作条

为Html设置meta,主要是设置viewport-fit

Auto：默认值。这个值不影响初始布局视窗，整个 Web 页面是可视的，与Contain表...

</div>

</div>

</div>

</article>

<span>使用@vue/composition-api</span>

</a>

使用@vue/composition-api1.安装与引入

安装

1npm i @vue/composition-api

引入

123import Vue from "vue";import VueCompositionAPI from "@vue/composition-api";Vue.use(VueCompositionAPI);

配置setup标签支持,$ref等语法的支持

vue.config.js

1234567891011121314const ScriptSetup = require("unplugin-...

</div>

</div>

</div>

</article>

<span>Python清除NodeModules文件夹脚本</span>

</a>

Python清除NodeModules文件夹脚本用于清除node_modules文件夹的脚本。copy的

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051import osimport timeimport shutil# 脚本名称：autoDelete.py# 脚本目的：自动删除指定文件夹下的相关文件夹如批量删除node_modules依赖def get_dirsize(dirPath): size = 0 for root, dirs...

</div>

</div>

<a class="post-tag" href="javascript:void(0);" data-tags = "Tools">Tools</a>

<a class="post-tag" href="javascript:void(0);" data-tags = "Python">Python</a>

</div>

</article>

<span>对最近写的Android应用的总结(1)</span>

</a>

对最近写的Android应用的总结(1)去年公司的Android应用,主要语言是Kotlin,基本架构如下(取自项目README.md):

ViewModel 负责从 UI 层接受事件，然后向 repository 请求更新的数据。它使用 LiveData 来存储当前排序的列表数据，以供 UI 进行展示

ViewModel 负责启动协程，并保证用户离开了相应界面时它们就会被取消。它本身并不会做一些耗时的操作，而是依赖别的层级来做。一旦有了结果，就使用 LiveData 将数据发送到 UI 层。因为 ViewModel 并不做一些耗时操作，所以它是在主线程启动协程的，以便能够更快地响...

</div>

</div>

<a class="post-tag" href="javascript:void(0);" data-tags = "Android">Android</a>

<a class="post-tag" href="javascript:void(0);" data-tags = "Kotlin">Kotlin</a>

</div>

</article>

<span>Vite-Plugin-Pages与Keep-Alive</span>

</a>

Vite-Plugin-Pages与Keep-Alivevite-plugin-pages是一个Vite插件，用于在Vite中使用基于文件的路由。(Vue3+ Vite项目)

安装1npm install -D vite-plugin-pages

配置123456789//vite.config.jsimport Pages from 'vite-plugin-pages'export default { plugins: [ // ... Pages(), ],}

使用默认在src/pages文件夹下的vue/js文件夹下的文件...

</div>

</div>

</div>

</article>

<span>VSCode配置与插件（Vue开发）</span>

</a>

VSCode配置与插件（Vue开发）插件列表123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263code --install-extension adpyke.codesnapcode --install-extension afzalsayed96.iconescode --install-extension Anan.jetbrains-darcula-themecode --install-extens...

</div>

</div>

<a class="post-tag" href="javascript:void(0);" data-tags = "Tools">Tools</a>

</div>

</article>

<span>静态网站生成器 Gatsby 学习</span>

</a>

1.环境设置GIT略

Node.js略

Gatsby CLI 安装npm安装 npm i -g gatsby-cli查看版本 gatsby --version

2.部署首个静态站示意图

新建Gatsby站点gatsby new,按要求输入站点信息,输入站点名称和文件夹路径后，其他选项先选No(或者稍后添加)，完成之后，gatsby会生成必要的文件

本地运行进入创建的文件夹下，运行命令gatsby develop,(也可以使用npm等：npm run develop)

如果一切正常的话，本地服务将会成功运行在8000端口

1234567You can now view my-first-g...

</div>

</div>

</div>

</article>

<span>Kotlin协程相关</span>

</a>

基础概念关于kotlin中的协程，kotlin的标准库里只包含了协程的抽象，放在kotlin.coroutines包下比如：

Continuation

CoroutineContext

具体的实现则需要另外引入依赖kotlinx.coroutines,里面会有关于协程的高级原语（High-level Primitives）:

launch:启动一个协程，他将会与其他剩余代码同时（concurrently）执行,返回一个Job

async:类似launch，不过返回一个Defer

结构化并发Structured concurrency协程遵循结构化并发的原则，所有的协程必须在限...

</div>

</div>

<a class="post-tag" href="javascript:void(0);" data-tags = "Kotlin">Kotlin</a>

<a class="post-tag" href="javascript:void(0);" data-tags = "Coroutines">Coroutines</a>

</div>

</article>

</nav>

</main>

It's better to burn out than to fade away

</div>

</div>

<div>FRIENDS</div>

<span>

<a href= //juejin.im/user/58bfdc3744d9040068da0ce3 target="_black">juejin</a>

</span>

</div>

<a href = "/about" >ABOUT ME</a>

</div>

</div>

<span id="hexo-power">Powered by <a href="https://hexo.io/" target="_blank">Hexo</a></span><span class="iconfont-archer power"></span><span id="theme-info">theme <a href="https://github.com/fi3ework/hexo-theme-archer" target="_blank">Archer</a></span>

</div>

<a href="https://beian.miit.gov.cn/" style="color:#f72b07" target="_blank">浙ICP备20011000号-1</a>

</div>

</div>

</footer>

</div>

<li class="sidebar-tab-archives"><span class="iconfont-archer"></span><span class="tab-name">Archive</span></li>

</ul>

View remainder of file in raw view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

index.html

Latest commit

History

index.html

File metadata and controls