Vue Code Snippet

重置 data 的数据为初始状态 this.$data = { ...this.$data, ...this.$options.data() }; // Object.assign(this.$data, this.$options.data()); Object.assign({}, this.$options.data().form, { type: 1 }); 修改 ElementUI 默认样式 vue 中令人头疼的 element-ui 组件默认 css 样式修改 | juejin <template> <div class="my-class"> <el-table> </el-table> </div> </template> <style lang="scss" scoped> .my-class__expand-column .cell { display: none; } .my-class .el-table tbody tr:hover > td { cursor: pointer; } </style> watch 对象的属性 data: { a: 100, msg: { channel: "音乐", style: "活泼" } }, watch: { a(newval, oldVal) { console.log("new: %s, old: %s", newval, oldVal); } } watch: { msg: { handler(newValue, oldValue) { console.log(newValue) }, // 深度监听 deep: true } } 监听对象内的某一具体属性,可以通过 computed 做中间层来实现: computed: { channel() { return this.msg.channel } }, watch:{ channel(newValue, oldValue) { console.log('new: %s, old: %s', newValue, oldValue) } } 判断 data 中的对象是否为空 1、利用 jQuery 的 isEmptyObject: ...

August 8, 2019 · 3 min · 437 words · Me

npx 入门使用

今天在使用的 Gulp 时看到首页的一段命令: ... npx -p touch nodetouch gulpfile.js ... npx 是个啥?决定一探究竟。 调用项目安装的模块 npx 是 npm 的自带模块,可以直接使用,手动安装为: npm install -g npx npx - execute npm package binaries. 它解决的问题是:更方便的从本地 node_modules/.bin 或中央缓存中执行命令。 比如项目安装了 gulp 需要执行命令时需要: node_modules/.bin/gulp -v 如果使用 npx 只需要: npx gulp -v npx 的原理很简单,就是运行的时候,会到 node_modules/.bin 路径和环境变量 $PATH 里面,检查命令是否存在。由于 npx 会检查环境变量 $PATH,所以系统命令也可以调用。 # 等同于 ls npx ls 注意,Bash 内置的命令不在 $PATH 里面,所以不能用。比如,cd 是 Bash 命令,因此就不能用 npx cd。 避免全局安装模块 create-react-app 这个模块是全局安装,npx 可以运行它,而且不进行全局安装: ...

July 17, 2019 · 1 min · 167 words · Me

VSCode 使用经验

编辑 settings.json command + , 右上角点击 打开设置。 { // 通过整体放大窗口比例 "window.zoomLevel": 1.1, // 字体 "editor.fontSize": 14, // 软换行 "editor.wordWrap": "on", } 显示空格和 tab 符号 Editor: Render Whitespace 控制编辑器在空白字符上显示符号的方式。 all Settings 同步 只需从左下角的设置齿轮启用内置同步。 扩展推荐 Community Material Theme EditerConfig For VS Code ESLint Git History GitLens — Git supercharged markdownlint Material Icon Theme Material Theme Prettier - Code formatter Terminal Vetur – EOF –

June 11, 2019 · 1 min · 62 words · Me

Git 提交 message 规范

commit message 应该清晰明了,说明本次提交的目的。基本公式: <type>(<scope>): <subject> 完整公式: <type>(<scope>): <subject> <BLANK LINE> <body> <BLANK LINE> <footer> type 用于说明 commit 的类别,只允许使用下面 7 个标识。 feat:新功能(feature) fix:修补 bug docs:文档(documentation) style:格式(不影响代码运行的变动) refactor:重构(即不是新增功能,也不是修改 bug 的代码变动) test:增加测试 chore:构建过程或辅助工具的变动 scope 用于说明 commit 影响的范围,比如数据层、控制层、视图层等等,视项目不同而不同。 subject 是 commit 目的的简短描述,不超过 50 个字符。 以动词开头,使用第一人称现在时,比如 change,而不是 changed 或 changes 第一个字母小写 结尾不加句号 . cli 工具 commitizen cli commitizen/cz-cli 使用它提供的 git cz 命令替代我们的 git commit 命令,帮助我们生成符合规范的 commit message。 除此之外,我们还需要为 commitizen 指定一个 Adapter 比如:commitizen/cz-conventional-changelog(一个符合 Angular 团队规范的 preset)使得 commitizen 按照我们指定的规范帮助我们生成 commit message。 ...

June 4, 2019 · 1 min · 178 words · Me

最左前缀原理与相关优化

MySQL 中的索引可以以一定顺序引用多个列,这种索引叫做联合索引,一般的,一个联合索引是一个有序元组 <a1, a2, …, an>,其中各个元素均为数据表的一列。另外,单列索引可以看成联合索引元素数为 1 的特例。 我们在 Employees Sample Database 中实验,MySQL 版本 5.7。 以 employees.titles 为例,查看其索引: SHOW INDEX FROM employees.titles; +--------+------------+----------+--------------+-------------+-----------+-------------+----------+--------+------+------------+---------+---------------+ | Table | Non_unique | Key_name | Seq_in_index | Column_name | Collation | Cardinality | Sub_part | Packed | Null | Index_type | Comment | Index_comment | +--------+------------+----------+--------------+-------------+-----------+-------------+----------+--------+------+------------+---------+---------------+ | titles | 0 | PRIMARY | 1 | emp_no | A | 301292 | NULL | NULL | | BTREE | | | | titles | 0 | PRIMARY | 2 | title | A | 442605 | NULL | NULL | | BTREE | | | | titles | 0 | PRIMARY | 3 | from_date | A | 442605 | NULL | NULL | | BTREE | | | +--------+------------+----------+--------------+-------------+-----------+-------------+----------+--------+------+------------+---------+---------------+ 全列匹配 EXPLAIN SELECT * FROM employees.titles WHERE emp_no = '10009' AND title = 'Senior Engineer' AND from_date = '1995-02-18'; +----+-------------+--------+------------+-------+---------------+---------+---------+-------------------+------+----------+-------+ | id | select_type | table | partitions | type | possible_keys | key | key_len | ref | rows | filtered | Extra | +----+-------------+--------+------------+-------+---------------+---------+---------+-------------------+------+----------+-------+ | 1 | SIMPLE | titles | NULL | const | PRIMARY | PRIMARY | 159 | const,const,const | 1 | 100.00 | NULL | +----+-------------+--------+------------+-------+---------------+---------+---------+-------------------+------+----------+-------+ 当按照索引中所有列进行精确匹配(这里精确匹配指 = 或 IN 匹配)时,索引可以被用到。 ...

May 25, 2019 · 7 min · 1297 words · Me

归并排序

归并排序(英语:Merge sort,或 mergesort),是创建在归并操作上的一种有效的排序算法,效率为 O(nlogn)。1945 年由约翰·冯·诺伊曼首次提出。该算法是采用分治法(Divide and Conquer)的一个非常典型的应用,且各层分治递归可以同时进行。 采用分治法: 分割:递归地把当前序列平均分割成两半。 集成:在保持元素顺序的同时将上一步得到的子序列集成到一起(归并)。 归并操作(merge),也叫归并算法,指的是将两个已经排序的序列合并成一个序列的操作。归并排序算法依赖归并操作。 <?php function mergeSort($arr) { $len = count($arr); if ($len <= 1) { return $arr; } // 递归结束条件, 到达这步的时候, 数组就只剩下一个元素了, 也就是分离了数组 $mid = $len / 2; $left = array_slice($arr, 0, $mid); // 拆分数组0-mid这部分给左边left $right = array_slice($arr, $mid); // 拆分数组mid-末尾这部分给右边right $left = mergeSort($left); // 左边拆分完后开始递归合并往上走 $right = mergeSort($right); // 右边拆分完毕开始递归往上走 $arr = merge($left, $right); // 合并两个数组,继续递归 return $arr; } // merge函数将指定的两个有序数组(arrA, arr)合并并且排序 function merge($arrA, $arrB) { $arrC = array(); while (count($arrA) && count($arrB)) { // 这里不断的判断哪个值小, 就将小的值给到arrC, 但是到最后肯定要剩下几个值, // 不是剩下arrA里面的就是剩下arrB里面的而且这几个有序的值, 肯定比arrC里面所有的值都大所以使用 $arrC[] = $arrA[0] < $arrB[0] ? array_shift($arrA) : array_shift($arrB); } return array_merge($arrC, $arrA, $arrB); } $startTime = microtime(1); $arr = range(1, 1000); shuffle($arr); echo 'before sort: ', implode(', ', $arr), "\n"; $sortArr = mergeSort($arr); echo 'after sort: ', implode(', ', $sortArr), "\n"; echo 'use time: ', microtime(1) - $startTime, "s\n"; 假设被排序的数列中有 N 个数。遍历一趟的时间复杂度是 O(N),需要遍历多少次呢? ...

May 23, 2019 · 1 min · 156 words · Me

My MacBook

个人 MacBook 食用说明。推荐自动化环境配置脚本项目 imzyf/dotfiles。 软件下载 使用 brew cask 安装软件,非常方便。 安装 brew: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" # 查找软件 brew desc iterm2 brew search iterm2 brew info iterm2 # 安装软件 brew install --cask iterm2 软件清单 brew cask arc Chromium based browser chromium - Free and open-source web browser 🌐 dbeaver-community - Universal database tool and SQL client 🌐 docker - App to build and share containerised applications and microservices 🌐 office network can’t access https://desktop.docker.com/, have to manual install. drawio - Online diagram software 🌐 figma - Collaborative team software 💅🏼 firefox fork GIT client github - Desktop client for GitHub repositories 🌐 google-chrome - Web browser 💻 iina - Free and open-source media player 💻 imageoptim - Tool to optimise images to a smaller size 💻 iterm2 - Terminal emulator as alternative to Apple’s Terminal app 💻 itsycal - Menu bar calendar 💻 licecap - Animated screen capture application 💻 logitech-g-hub - Support for Logitech G gear 💻 mysqlworkbench notion - App to write, plan, collaborate, and get organised 💻 openinterminal orbstack Replacement for Docker Desktop phpstorm postman - Collaboration platform for API development 💻 qlstephen - Quick Look plugin for plaintext files without an extension 💻 raycast Control your tools with a few keystrokes sequel-ace slack snipaste - Snip or pin screenshots 💻 sourcetree - Graphical client for Git version control 💻 the-unarchiver - Unpacks archive files visual-studio-code warp - Rust-based terminal 💻 wetype - Text input app from WeChat team for Chinese users 💻 youdaodict - Youdao Dictionary 💻 zoom-for-it-admins brew cask archive adrive - Intelligent cloud storage platform 💻 another-redis-desktop-manager - Redis desktop manager 🌐 baidunetdisk - Cloud storage service 💻 blender - 3D creation suite 💅🏼 lens - Kubernetes IDE 🌐 mongodb-compass - Interactive tool for analyzing MongoDB data 🌐 fliqlo - Flip clock screensaver - 可以配合 触发角 使用 paper - Pap.er, 4K 5K HD Wallpaper Application 💻 wireshark - Network analyzer and capture tool - without graphical user interface 🌐 path-finder - 💰 dash - API documentation browser and code snippet manager - 💰 Medis 2 - 💰 redisinsight GUI for streamlined Redis application development craft Native document editor input-source-pro Tool for multi-language users cleanshot Screen capturing tool cleanmymac-zh - Tool to remove unnecessary files and folders from disk - 💰 # brew list # brew list --cask # # ==> Casks # # arc # chromium # dbeaver-community # drawio # eudic # figma # firefox # fork # github # google-chrome # iina # imageoptim # iterm2 # itsycal # licecap # logitech-g-hub # mysqlworkbench # notion # openinterminal # orbstack # phpstorm # postman # qlstephen # raycast # sequel-ace # slack # snipaste # sourcetree # the-unarchiver # visual-studio-code # warp # wetype # youdaodict # zoom-for-it-admins # # 💻 brew install --cask adrive alfred google-chrome visual-studio-code brew install --cask visual-studio-code wetype youdaodict # 🌐 brew install --cask itsycal # 💅🏼 brew install --cask blender brew mas Mac App Store command-line interface nvm curl jmeter - Load testing and performance measurement application wget yarn protobuf - Protocol buffers (Google’s data interchange format) ripgrep recursively searches directories for a regex pattern while respecting your gitignore fish Manual charles - Web debugging Proxy application - 💰 Navicat Premium - 💰 oh-my-zsh ClashX Pro axure-rp - Planning and prototyping tool for developers - 💰 Badgeify Add Any App to Your Mac Menu Bar one-key-hidpi 3182x1332 App Store  Xnip - Handy Screenshot App for Mac iHosts - /etc/hosts 编辑器 Xiaomi Home # brew install mas # mas search Xnip # mas upgrade # Xnip mas install 1221250572 # iHosts mas install 408981434 # WeChat mas install 836500024 # QQ音乐 mas install 595615424 # Xcode mas install 497799835 # MoneyThings 记账 mas install 1549694221 # Xiaomi Home, needed manual install mas install 957323480 AI BoltAI TypingMind LobeChat Ollama 快捷键 Mac 键盘快捷键 Chrome 键盘快捷键 个性化设置 触发角:系统偏好设置 -> 桌面与屏幕保护程序 -> 屏幕保护程序 -> 触发角 – EOF – ...

May 20, 2019 · 4 min · 649 words · Me

Laravel 中 composer 加载流程

启动 Laravel 5.8 文章以 Laravel 学习。入口文件 public/index.php: // Register The Auto Loader require __DIR__.'/../vendor/autoload.php'; autoload.php 不负责具体功能逻辑,只做了两件事:初始化自动加载类、注册自动加载类。 autoload_real.php 中的类名为 ComposerAutoloaderInit... 这可能是为防止与用户自定义类名跟这个类重复冲突,加上了哈希值。 其实还有一个做法我们更加熟悉,是定义一个命名空间。这里为什么不定义一个命名空间呢?一种理解:命名空间一般都是为了复用,而这个类只需要运行一次即可,以后也不会用得到,用哈希值更加合适。 autoload_real.php autoload.php 主要调用了 getLoader(): public static function getLoader() { // 单例模式,自动加载类只能有一个 1 if (null !== self::$loader) { return self::$loader; } // 获得自动加载核心类对象 2 spl_autoload_register(array('ComposerAutoloaderInit76e88f0b305cd64c7c84b90b278c31db', 'loadClassLoader'), true, true); self::$loader = $loader = new \Composer\Autoload\ClassLoader(); spl_autoload_unregister(array('ComposerAutoloaderInit76e88f0b305cd64c7c84b90b278c31db', 'loadClassLoader')); // 初始化自动加载核心类对象 3 $useStaticLoader = PHP_VERSION_ID >= 50600 && !defined('HHVM_VERSION') && (!function_exists('zend_loader_file_encoded') || !zend_loader_file_encoded()); if ($useStaticLoader) { require_once __DIR__ . '/autoload_static.php'; call_user_func(\Composer\Autoload\ComposerStaticInit76e88f0b305cd64c7c84b90b278c31db::getInitializer($loader)); } else { $map = require __DIR__ . '/autoload_namespaces.php'; foreach ($map as $namespace => $path) { $loader->set($namespace, $path); } $map = require __DIR__ . '/autoload_psr4.php'; foreach ($map as $namespace => $path) { $loader->setPsr4($namespace, $path); } $classMap = require __DIR__ . '/autoload_classmap.php'; if ($classMap) { $loader->addClassMap($classMap); } } // 注册自动加载核心类对象 4 $loader->register(true); // 自动加载全局函数 5 if ($useStaticLoader) { $includeFiles = Composer\Autoload\ComposerStaticInit76e88f0b305cd64c7c84b90b278c31db::$files; } else { $includeFiles = require __DIR__ . '/autoload_files.php'; } foreach ($includeFiles as $fileIdentifier => $file) { composerRequire76e88f0b305cd64c7c84b90b278c31db($fileIdentifier, $file); } return $loader; } 单例模式 1 if (null !== self::$loader) { return self::$loader; } 构造 ClassLoader 核心类 2 spl_autoload_register(array('ComposerAutoloaderInit76e88f0b305cd64c7c84b90b278c31db', 'loadClassLoader'), true, true); self::$loader = $loader = new \Composer\Autoload\ClassLoader(); spl_autoload_unregister(array('ComposerAutoloaderInit76e88f0b305cd64c7c84b90b278c31db', 'loadClassLoader')); public static function loadClassLoader($class) { if ('Composer\Autoload\ClassLoader' === $class) { require __DIR__ . '/ClassLoader.php'; } } composer 先向 PHP 自动加载机制注册了一个函数,这个函数 require 了 ClassLoader 文件。成功 new 出该文件中核心类 ClassLoader() 后,又销毁了该函数。 ...

April 28, 2019 · 7 min · 1435 words · Me

PHP 请小心判断 strpos

又开始写世界上最后的语言 PHP 了(狗头保命)。一个很简单的字符串是否包含判断就掉坑了。 方法签名: strpos ( string $haystack , mixed $needle [, int $offset = 0 ] ) : int $mystring = 'abc'; $findme = 'a'; if (strpos($mystring, $findme)) { dump('yes'); } 注意这时是不会输出 yes,因为 strpos($mystring, $findme) 返回的是 0。就想官方文档说的: Warning 此函数可能返回布尔值 FALSE,但也可能返回等同于 FALSE 的非布尔值。应使用 === 运算符来测试此函数的返回值。 正解: if (strpos($mystring, $findme) !== false) { dump('yes'); } 这次问题是网上一搜,找到 strpos 后看到 如果没找到 needle,将返回 FALSE 就没多想就用了。语言间的差异还有注意。 References php.net - strpos – EOF –

April 10, 2019 · 1 min · 68 words · Me

ES6 中使用 jQuery $(this) 的问题

在老项目中,我开始使用 laravel-mix 和 ES6 进行逐渐过渡。在这个过程中,发现了一个问题:当 jQuery 和 箭头函数 一起使用时,$(this) 的含义会发生变化。 问题解释 这个问题主要是因为没有理解 箭头函数 的特性。箭头函数不会创建自己的 this 上下文,而是继承父作用域的 this。 看下面的例子: // 问题代码 $('.js-bottom-btn').click(() => { let flag = $(this).data('flag'); // ... }); 在箭头函数中,this 不是指向被点击的元素,而是指向父作用域的 this(可能是 window 或 undefined)。 解决方案 根据 jQuery click 文档,可以使用以下方法解决: 方法 1: 使用传统函数 $('.js-bottom-btn').click(function() { let flag = $(this).data('flag'); // ... }); 方法 2: 使用事件参数 $('.js-bottom-btn').click(event => { let flag = $(event.currentTarget).data('flag'); // ... }); 其他常见场景 jQuery 的 .each() 方法中也会遇到类似问题: // 问题代码 $("jquery-selector").each(() => { $(this).click(); }); 需要修改为: $("jquery-selector").each((index, element) => { $(element).click(); }); 箭头函数和 this 绑定 箭头函数的一个主要特点是词法绑定(lexical binding)。这意味着: 箭头函数不创建自己的 this 上下文 箭头函数继承定义它的外部作用域的 this 值 这种行为与传统函数不同,传统函数中的 this 是根据调用方式决定的 参考资料 Using jQuery $(this) with ES6 Arrow Functions (lexical this binding) – EOF – ...

April 10, 2019 · 1 min · 113 words · Me