Shell中的符号

Major

基础符号

引号

单引号和双引号主要可用于解决字符串中间有空格的问题。
单引号将剥夺字符串中特殊字符的含义。
双引号中的’$’进行参数替换，’'进行命令替换。 反引号与$()是一样的。 `或者$()会将其中的语句当作命令执行一遍，再将结果充当原命令行一部分。

skyline=1
echo '$skyline`echo 1`'
# $skyline`echo 1`
echo "$skyline`echo 1`"
# 11

路径符

阅读全文

排序算法

Major

选择排序

选排的思想

找出每一轮的最值并放在该轮次位置处
核心思想是每轮选最值
外层循环确定轮次，内层循环确定最值。

def selectionSort(nums):
    for i in range(len(nums)):
        pos = i
        for j in range(i + 1, len(nums)):
            if nums[pos] > nums[j]:
                pos = j
        nums[i], nums[pos] = nums[pos], nums[i]
    return nums

时间复杂度

阅读全文

Webpack中DllPlugin使用

Major

DllPlugin 概述

实质

DLL即动态链接库(Dynamic Link Library)。
是指包含可由多个程序同时使用的代码库。
在前端领域里可简单看做缓存，其实质是把项目中引入的较大模块先行分离出来，打包为DLL文件并存到硬盘里。
再次打包时动态链接清单（manifest文件）中的文件就无需再次打包，从而优化打包速度，减少打包时间，其同时兼具分离模块的作用。

webpack v2 时已存在，在 v4+已不推荐使用该配置，新其版本迭代带来的性能提升足以忽略 DllPlugin 所带来的打包优化效益

DllPlugin 配置

阅读全文

ES_Module&CommonJS

Major

模块系统

早期 JS 出现只是作为脚本语言来进行简单的表单验证与控制简单动画，所有操作与变量都在全局进行，设计之初，不需要考虑模块系统。
随着 JS 的发展，其应用越来越复杂，逐渐进入多 JS 脚本通过 script 标签引入的年代。
多脚本需要解决脚本引入的顺序，脚本互相引入，脚本循环引入，全局命名污染，命名冲突等诸多问题，同时后期维护特别困难。
对于复杂 JS 程序，需要解决的主要问题如下

  • 模块隔离（私有代码权限访问控制）
  • 模块间依赖
  • 代码传递到执行环境

早期解决方案如下：

  • 命名空间
  • 立即执行匿名函数 + 闭包

ES5 时代，模块化的标准与方案有很多，亟需统一，ES6 的模块系统应运而生。
由于影响力较大的 NodeJS 大方向参照了 CommonJS 标准，并在其上做了取舍，故本文主要对比 ES6 与 CommonJS 两种方案。
其他规范 AMD（Asynchronous Module Definiton）如 requireJS,CMD(Common Module Definition)如 SeaJS 皆支持异步模块定义，
在 ES6 模块系统后使用频率降低，如下简单对比。

AMD 典型示例

//依赖前置
require(['a', 'b'], function (a, b) {
  a.someFn()
  b.someFn()
})

CMD 典型示例

define('main', function (require, exports, module) {
  var a = require('a') //依赖就近
  a.someFn()
  var b = require('b')
  b.someFn()
})

上述代码可以看到，AMD 规范在于依赖前置、提前执行，CMD 在于依赖就近、延迟执行。
为了兼容各种模块系统，UMD(Universal Module Definition) 通用模块规范进行了兼容处理。
常用的开源库打包后会生成 xxx.umd.js
webpack 打包后 UMD 兼容模块代码的如下：

;(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === 'object' && typeof module === 'object')
    //Node.js (拓展CommonJS),ES6
    module.exports = factory()
  else if (typeof define === 'function' && define.amd)
    //amd cmd
    define([], factory)
  else if (typeof exports === 'object')
    // CommonJS标准方案
    exports['skyline-ui'] = factory()
  else root['skyline-ui'] = factory() // 未引入规范模块，全局申明
})(typeof self !== 'undefined' ? self : this, function () {
  // ...some code
})

ES6 兼容 Node.js 模块方案

ESM VS CJS

模块对比

阅读全文

PS更换指定颜色

Tools

效果展示

PS更换指定颜色20220303173033

替换颜色

素材地址
首先选中图片或图层。

在 图像 > 调整 > 替换颜色 开启颜色替换工具
PS更换指定颜色20220303112019

在工具中，可以通过拾色器选取被替换色与想要的目标色。
选中预览，可通过调整容差可实时预览得到想要的结果。
PS更换指定颜色20220303112437

一个实际的例子如下

PS更换指定颜色20220303170026

按住 command 或 control 键可以在预览中切换选中颜色和原图
PS更换指定颜色20220303170157

颜色叠加

阅读全文

CSS弹性布局主轴元素设置单独对齐方式

Major

效果图示

灰色为 flex 盒子，其水平方向的主轴内部有 4 个子元素。
通过设置特定属性将最后红框圈出的元素置于容器最右侧。

CSS弹性布局flex主轴元素设置单独对齐方式20220617145752
实现效果
CSS弹性布局flex主轴元素设置单独对齐方式20220617145350

效果实现

  • 方案 1
    为红框子元素设定如下属性
.red {
  flex-grow: 1; //红框子项目将占据了所有剩余空间
  display: flex; //将自身设置为flex,作为容器之后就可以单独对内部文字项目进行右对齐
  justify-content: flex-end; // 单独对内部文字项目进行右对齐
}

通过浏览器检视如下
CSS弹性布局flex主轴元素设置单独对齐方式20220617150203

  • 方案 2

将前 3 个子元素进行一层包裹，然后调整容器的 justify-content
justify-content: space-between

  • 方案 3

为红框子项目添加如下属性

margin-left: auto;
  • 方案 4

为红框子项目添加如下属性

.red {
  flex-grow: 1;
  text-align: right;
}

BMW WARNING

阅读全文

ES继承的实现

Major

原型链

概述

由于函数没有签名，ES无法实现接口继承

原型链继承的本质是重写原型对象，代之以一个新类型的实例

通过instanceof isPrototypeOf 来判定原型与实例的关系

给原型添加方法需要在替换原型之后

通过原型链继承，不能通过字面量重写原型

代码示例

阅读全文

Copyright © 2017 - 2024 鹧鸪天 All Rights Reserved.

skyline 保留所有权利