ljw1412-CSDN博客

原创 [朝花夕拾 | html] meta的定义和常用功能

meta定义<meta> 元素表示那些不能由其它HTML元相关元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元数据信息。meta 元素定义的元数据的类型包括以下几种：如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。如果设置了 http-equiv 属性，meta 元素则是编译指令，提供的信息与

2020-07-21 10:41:05 420

原创 [ web前端 ] 使用 CSS Variables 实现主题切换

本文介绍了另一种实现主题功能的思路，简洁，使用原生Css实现。但是请注意兼容性！CSS Variables变量声明使用两根连词线"--"表示变量，"$color"是属于Sass的语法，"@color"是属于Less的语法，为避免冲突css原生变量使用"--"// 声明变量--color:#000;// 读取变量var(--color)兼容性效果展示源代码<!DOCTYPE html><html> <head>..

2020-07-10 18:35:32 1709

原创 [ scss | webpack ] 实现页面主题思路(2)

2020-07-10 18:12:44 570

原创 [ scss | webpack ] 实现页面主题思路

2020-07-10 11:44:09 523

原创 [ sass/scss ] Sass 函数功能汇总

本文介绍Sass自备的字符串函数、数字函数、列表函数、Introspection函数、三元函数等等。Sass函数1. 字符串函数unquote($string) 删除字符串中的引号quote($string) 给字符串添加引号to-upper-case($string) 将字符串小写字母转换为大写字母to-lower-case($string) 将字符串大写字母转换为小写字2. 数字函数percentage($value)：将不带单位的数转换成百分比值round($value)：将数值四舍五入，转换成.

2020-07-08 18:30:56 564

原创 [ javascript ] 使用Object.create()创建对象

Object.create()创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。具体文档语法Object.create(proto[, propertiesObject])参数proto: 新创建对象的原型对象。propertiesObject: 可选。如果没有指定为 undefined，则是要添加到新创建对象的不可枚举（默认）属性（即其自身定义的属性，而不是其原型链上的枚举属性）对象的属性描述符以及相应的属性名称。这些属性对应Object.defineProper

2020-06-01 16:13:23 407

原创 [ css ] backdrop-filter 增加元素背后滤镜

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。/* 关键词值 */backdrop-filter: none;/* 指向 SVG 滤镜的 URL */backdrop-filter: url(commonfilters.svg#filter);/* <filter-function> 滤镜函数值 */backdrop-filter: bl.

2020-05-28 15:17:06 669

原创 [ vue ] 函数式组件中的class与style处理

引言：什么是函数式组件没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法。实际上，它只是一个接受一些 prop 的函数。在这样的场景下，我们可以将组件标记为 functional，这意味它无状态 (没有响应式数据)，也没有实例 (没有 this 上下文)。一个函数式组件就像这样：Vue.component('my-component', { functional: true, // Props 是可选的 props: { // ... }, // 为了弥补缺

2020-05-15 16:51:13 2412

转载 [ typescript ] 深度定义对象只读

As of TypeScript 2.8, this is now possible and actually an example in the PR for Conditional Types:https://github.com/Microsoft/TypeScript/pull/21316Also see the notes on type inference for Condi...

2020-04-26 18:34:24 730

原创 [ javascript ] 简易表单验证

function checkRule(obj, key, rule) { return rule.valid ? rule.valid(obj[key]) : true}function validator(obj, rules) { for (let key in rules) { const rule = rules[key] // 如果为空 if (o...

2020-04-22 16:02:17 126 1

原创 [ npm ] 配置与Registry管理

npm config首先使用 npm config -h ，查看它的相关信息以及命令行。npm config set <key> <value> # 设置 npm 配置npm config get [<key>] # 获取 npm 指定配置的值npm config delete <key> # 删除 npm 指定配...

2020-04-19 17:28:12 1189

原创 [ sass/scss ] 自定义函数去单位 px转em

在使用scss过程中，一直会有个疑惑它的内部是如何运作的。实际上它的运作与现实生活中一直。如果你想要移除一个值的单位，你想要将它除以1单位。比如 50cm 我想取它的数字，那么我们除以1cm，得到结果是 50。反过来就是 1cm x 50 = 50cm。同理这个原理也适用于scss$length: 50px;$value: $length / 1px;// -> 50...

2020-04-06 14:04:01 1909 2

原创 [ javascript ] 数字类型转换字符串性能测试 (benchmark)

1. 拉取依赖yarn add benchmark2. 编写测试用例const Benchmark = require('benchmark')const suite = new Benchmark.Suite()const a = 123456789suite .add('String', () => { String(a) }) .ad...

2020-03-26 18:23:26 817

原创 [ webpack ] 在HTML源代码前加上自动加上备注说明

打包环境：webpack41. 思考如何在打包过程中在<html>标签前自动生成备注说明？使用html-webpack-plugin进行html生成。翻阅源代码，发现有`html-webpack-plugin-before-html-processing`, `html-webpack-plugin-after-html-processing`, `html-webpa...

2020-03-10 10:14:00 1096 1

原创 [ javascript ] 如何判断元素内容被截断。

可以用元素的scrollWidth属性和元素的clientWidth属性进行大小比较就可以判断。高也是同理。Demo代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=...

2020-02-19 11:04:12 885

原创 [ vue-cli3 | typescript ] moment 全局引入

第一步：引入包1. npm引入npm install moment 配置vue.config.jsconst webpack = require('webpack')module.exports = { configureWebpack: { plugins: [ new webpack.ProvidePlugin({ mom...

2019-12-19 13:25:13 3584

原创 [ javascript ] 推荐调用原型链上真正的方法

// 不推荐obj.hasOwnProperty('a')// 推荐Object.prototype.hasOwnProperty.call(obj,'a')那为什么推荐需要使用原型链上真正的 hasOwnProperty 方法？大概有以下几种原因：1.obj 继承于null 而非 Object.prototype ，那也不存在 hasOwnProperty 方法。2....

2019-12-13 09:47:45 666

原创 [ linux | centos7 ] 防火墙相关

防火墙服务查看防火墙服务状态systemctl status firewalld关闭防火墙服务systemctl stop firewalld开启防火墙服务systemctl start firewalld也可以使用以下指令# 开启service firewalld start# 重启service firewalld restart#...

2019-11-21 14:14:50 103

原创 [ gitlab | CI/CD ] 部署页面打包文件到另一台服务器 (解决 Host key verification failed.)

研究CI/CD部署页面打包文件时，复制报错:Host key verification failed.解决方法：1. 注册 gitlab-runner连接自己的gitlab的服务器，按照界面的参数进行填写[root@localhost home]# gitlab-runner registerRunning in system-mode.Please enter th...

2019-11-14 11:23:33 2444 3

原创 [ Vue | 组件 ] 自定义滚动条

<template> <div ref="wrapper" class="scrollbar-view-wrapper" @mousewheel="onMousewheel" @touchstart=" handleTouchstart"> <div ref="content" class="scrollbar-...

2019-10-29 16:55:42 794

原创 [ Vue ] 给 slot 插槽绑定事件

最近写了一个下拉组件，希望任意形式的触发源点击都可以展开这个组件。最终效果图如下：方案一：slot-scope 传方法<template> <slot change-display="changeDisplay"></slot> <div v-show="mVisiabl...

2019-10-11 17:51:09 15799 3

原创 [ npm ] 发布属于自己的包——我的vue组件ui库 (use vue-cli3)

前置步骤：使用 vue-cli 3 创建项目。1. 删除 public 文件夹2. 清空 src 文件夹3. 在 src 中创建入口文件 main.js4. 在 src 中创建组件文件夹 components得到以下结构第一步：在 src/components 中创建组件（以简单的TButton 按钮组件为例）<template> <...

2019-09-23 19:07:54 1093

原创 [ Vue ] vue-cli3生成项目下的自定义 svg 图标库

前置步骤：添加依赖yarnaddsvg-sprite-loader-D[可选] yarn add svgo svgo-loader -D依赖说明：svg-sprite-loadersprites 会被自动渲染和注入页面，您只需通过 <svg><use xlink:href="#id"></use></svg>工作...

2019-09-09 11:47:03 1061

原创 [ electron | ipc通信 ] 自定义标题栏，实现最小化、最大化、关闭、全屏

前置步骤：BrowserWindow 实例化，将 frame 设为 false创建无边框窗口，即不带外壳（包括窗口边框、工具栏等），只含有网页内容的窗口。// 创建浏览器窗口win = new BrowserWindow({ width: 1200, height: 800, frame: false, webPreferences: { nodeIntegra...

2019-09-08 11:28:47 1771

原创 [ Vue | Electron ] 使用 vue-cli3.x 快速构建 electron 项目

重要此方法仅用于 Vue-CLI 3 (vue create my-app) 创建的项目，不适用Vue-CLI 2 (vue init webpack my-app)!如果想使用 Vue-CLI 2 ，可以参考electron-vue1. 使用Vue CLI3 创建项目("my-project" 改为自己想要取是项目名称)vue create my-project...

2019-08-29 16:27:33 3824

原创 [ Node | koa2 ] 喜马拉雅JSSDK签名服务

[ node | koa2 ] 喜马拉雅JSSDK签名服务Github项目支持sdk版本: @xmly-fem/web-jssdk v1.1.1服务端 Node 版本：v10.16.0喜马拉雅web-jssdk相关文档配置在 config.js 中配置 app_secret (在喜马拉雅开发平台-管理中心-应用中心-网页应用中查看)module.exports = { app_s...

2019-08-22 16:40:38 681

原创 [ javascript | console ] 如何用 console 输出 HTML元素属性，而不是元素文档

如果用 console.log 去输出 DOM 会出现如下图的结果方法一：console.log('%O',DOM)方法二：输出 DOM 数组的形式方法三：使用console.dir

2019-08-08 14:42:10 4895 1

原创 [ webpack | moment ] moment精简打包

moment默认导入，会引入全部的语言资源文件。而我们最终使用到的语言资源仅仅是其中的一部分。默认导入打包后文件大小情况：我们现在的目的是精简左边的 locale 语言资源文件。方案一：使用 webpack.IgnorePlugin1. webpack.config.jsconst webpack = require('webpack')// 其他相关配置已省略...

2019-08-06 18:30:44 1182

转载 [ Node ] module.exports 和 exports

module 对象在每个模块中，module的自由变量是对表示当前模块的对象的引用。为方便起见，还可以通过全局模块的exports访问module.exports。module实际上不是全局的，而是每个模块本地的。module.exportsmodule.exports对象由Module系统创建。有时这是不可接受的；许多人希望他们的模块成为某个类的实例。 ...

2019-08-02 17:11:17 152

原创 [ Node | PM2 ] watch 模式下无限重启

最初配置的ecosystem.config.jsmodule.exports = { apps: [ { name: 'development_platform_server', script: 'bin/www', instances: 1, autorestart: true, watch: true, ou...

2019-07-30 15:12:37 5832

原创 [ H5 | canvas ] 图像变形和模糊问题

图像变形：当你在支持html5 canvas的浏览器下查看页面的时候，canvas画布的默认大小是300*150，当在css设置画布大小时比如300*300实际是将原画布（300*150）进行了拉伸，所以会导致图像变形解决方法：将想要设置的画布大小直接设置在canvas标签上<canvas id="canvas" width="300px" height="300px"&gt...

2019-07-08 14:02:35 1201

原创 [VUE | UI组件] 图片预览

效果图依赖1. 使用 element-ui 中的 icon (可自行修改)2. file-saver.js功能支持拖拽、放大缩小、上一张、下一张、点击百分比复位。代码file.js:import FileSaver from 'file-saver'export function download(url, name) { const...

2019-07-04 10:30:55 533

原创 [ Node ] require 的单例现象

以下内容为初步的实践，并未深入探究。可能纯在片面性。仅仅为开发过程中发现的问题，以及原因的笔记(不一定正确)。NodeJS的模块默认情况下是单例性质的，不过其并不能保证如我们编程时设想的那样一定是单例，根据NodeJS的官方文档中描述，某个模块导入是否为单例受以下两个因素的影响: Node 模块的缓存机制是大小写敏感的，譬如如果你require('/foo')与require('/F...

2019-02-01 13:23:47 372

原创 [ 微信小程序 ] 使用mpvue绑定微信picker(mode:date)

<picker mode="date" name="activity.endDate" v-bind:value="activity.endDate" start="2015-09-01" end="2017-09-01" @change="bindDateChange"> <...

2018-03-28 15:26:24 4009

原创 [ ES6 ] 扩展运算符(...)与Object.assign()中的部分深拷贝

部分深拷贝个人笔记，学习过程中的发现，不一定正确。如果对象或者数组中包含子数组和子对象，那一部分为浅拷贝原因应该是是...遍历时那部分为对象/数组类型指向原来的地址对象var obj = {a: 1, b: 2, c: { a: 3 },d: [4, 5]}var obj1 = objvar obj2 = JSON.parse(JSON.stringify(obj))//...

2018-03-22 11:45:02 9327 1

ljw1412的博客