本文对变量的解构赋值(destructing)和展开运算符(spread operator …)做个简单的介绍。
本文首发在前端开发说
记录开发的故事
npm(全称Node Package Manager,即node包管理器)是Node.js默认的、以JavaScript编写的软件包管理系统。 - 来自wikipedia
本文首发在美妆心得技术博客,同步到前端开发者说博客。
1 | $ npm config set registry "https://registry.npm.taobao.org" |
其他镜像,用于提高安装速度,比如用vue-cli
初始化项目。在~/.npmrc
中添加如下配置
1 | registry=https://registry.npm.taobao.org/ |
关于关于更多的镜像资料,可以参考我之前写的文章国内镜像源整理
https://libraries.io/npm 相关资源的各种排行榜
npms A better and open source search for node packages
Top 30 NPM Packages for Node.js Developers 2016
pnpm Fast, disk space efficient package manager
cnpm 淘宝 NPM 镜像
Yarn 对你的代码来说是一个包管理器, 它允许你使用并分享代码给全世界的开发者, Yarn 做这些快捷、安全、可靠,所以你不用担心什么。
设置国内镜像1
2$ yarn config set registry https://registry.npm.taobao.org --global
$ yarn config set disturl https://npm.taobao.org/dist --global
这个facebook应该不会加类似React的协议吧?
会生成一个yarn.lock
锁定依赖。
优点(摘自官网)
例外有看到社区
smart-npm 在各大社区发布后,就没看到更多了。
推荐阅读
Check for outdated, incorrect, and unused dependencies.
相关的介绍可以参考Node.js开源项目推荐:npm模块升级工具 npm-check
Node.js version management: no subshells, no profile setup, no convoluted API, just simple.
Node Version Manager - Simple bash script to manage multiple active node.js versions
Find out which of your dependencies is slowing you down
有时候在git
的操作中相同的功能提交多次。相同git log
看着很难受,特别是有代码洁癖的开发者。本文通过实例来说一说rebase
命令如何修改git
的history
。
遍历对象的方法:
for…in 循环只遍历可枚举属性。像 Array 和 Object 使用内置构造函数所创建的对象都会继承自 Object.prototype 和 String.prototype 的不可枚举属性,例如 String 的 indexOf() 方法或者 Object 的 toString 方法。循环将迭代对象的所有可枚举属性和从它的构造函数的 prototype 继承而来的(包括被覆盖的内建属性)。来自MDN
1 | let o = { |
仅迭代自身的属性
如果你只要考虑对象本身的属性,而不是它的原型,那么使用 getOwnPropertyNames() 或执行 hasOwnProperty() 来确定某属性是否是对象本身的属性 (也能使用propertyIsEnumerable)。另外,如果你知道外部不存在任何的干扰代码,你可以扩展内置原型与检查方法。 来自MDN
1 | let o = { |
object.getOwnPropertyNames 返回一个数组,该数组对元素是 obj 自身拥有的枚举或不可枚举属性名称字符串。 数组中枚举属性的顺序与通过 for…in 循环(或 Object.keys)迭代该对象属性时一致。 数组中不可枚举属性的顺序未定义。
1 | //不可枚举属性 |
1 | let o = { |
for…of语句在可迭代对象(包括 Array, Map, Set, String, TypedArray,arguments 对象等等)上创建一个迭代循环,对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩.
1 | let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]); |
Object.values() 方法返回一个给定对象自己的所有可枚举属性值的数组,值的顺序与使用for…in循环的顺序相同 ( 区别在于for-in循环枚举原型链中的属性 )。来自MDN
1 | let o = { |
兼容性:
Polyfill :
兼容性
1 | let o = { |
整理工作中容易遗忘的小技巧和碰到的问题。
打开 系统偏好设置 -> 共享 -> 屏幕共享。在另外的电脑打开 Finder -> 前往 -> 连接服务器 -> 输入 vnc://ip
访问。或者⌘+K
相关的远程控制s软件splashtop,teamviewer
sudo spctl --master-disable
Command+shift+3
全屏截图,保存截图到桌面Command+shift+4
鼠标选定区域截图,保存截图到桌面
相关的扩展阅读:
Option + Command + P + R + Power
查看是否开启apache
服务 ps aux | grep httpd
或者 apachectl status
开启Apachesudo apachectl start
相关的设置目录 /etc/apache2/
扩展阅读
sudo lsof -iTCP:80 | grep LISTEN
1 | ➜ apache2 sudo lsof -iTCP:80 | grep LISTEN |
sudo lsof -n -i4TCP:80 | grep LISTEN
查看当前所有监听的端口以及对应的Command和PID
1 | ➜ apache2 sudo lsof -nP -iTCP -sTCP:LISTEN |
1 | ➜ desktop brew install nginx |
不过试了一下,不是超级用户登陆,而是普通用户登陆,并且监听的端口在1024以下的(例如把默认的8080端口改为了80端口),nginx 开机是启动不了。因此,要 nginx 开机启动的话,需要给予它管理员权限:
sudo chown root:wheel /usr/local/Cellar/nginx/1.2.6/sbin/nginx
sudo chmod u+s /usr/local/Cellar/nginx/1.2.6/sbin/nginx
来自: http://dhq.me/mac-install-nginx-mysql-php-fpm
==> homestead-7: Checking if box ‘laravel/homestead’ is up to date…
Vagrant cannot forward the specified ports on this VM, since they
would collide with some other application that is already listening
on these ports. The forwarded port to 27017 is already in use
on the host machine.
To fix this, modify your current project’s Vagrantfile to use another
port. Example, where ‘1234’ would be replaced by a unique host port:
config.vm.network :forwarded_port, guest: 27017, host: 1234
Sometimes, Vagrant will attempt to auto-correct this for you. In this
case, Vagrant was unable to. This is usually because the guest machine
is in a state which doesn’t allow modifying port forwarding. You could
try ‘vagrant reload’ (equivalent of running a halt followed by an up)
so vagrant can attempt to auto-correct this upon booting. Be warned
that any unsaved work might be lost.
➜ Homestead git:(master) ✗ sudo lsof -n -i4TCP:27017 | grep LISTEN
mongod 526 huixisheng 11u IPv4 0x40824e155718bce3 0t0 TCP 127.0.0.1:27017 (LISTEN)
原因homestead和mongod的端口冲突了
今天有同事过来问我,给el-input
加了@input
参数$event
变成了input
变化后的值(v-model)。大致伪代码如下:
对于@input
的印象是:
Vue2.x去除了.sync
,需要双向绑定就用到了@input
.sync
在2.3.0又回来了
所以要让组件的 v-model 生效,它必须:
接受一个 value 属性
在有新的 value 时触发 input 事件
于是去看下el-input
源码,截取的伪代码:
1 | <input ref="input" @input="handleInput"> |
可以理解$event
为v-model
没有问题,可是handlerInput($event, index) {
第一反应index的值应该没有才对。于是去Vue的源码找答案,Vue的源码并不是晦涩难懂,相反而是通俗易懂,当然精髓的代码还没有完全参透。接下来要抽段时间好好品味一番。@TODO
打了断点,大致明白了点,不会像一开始那么迷茫。
参阅了下资料:
当
<input>
或<textarea>
元素的值更改时,DOM input 事件会同步触发。(对于 type = checkbox 或 type = radio 的输入元素,当用户单击控件时,输入事件不会触发,因为value属性不会更改。) 此外,当内容更改时,它会在 contenteditable 的编辑器上触发。在这种情况下,事件目标是编辑主机元素。如果有两个或多个具有 contenteditable 的元素为真,“编辑主机”是其父级不可编辑的最近的祖先元素。同样,它也会在 designMode 编辑器的根元素上触发。
来自: https://developer.mozilla.org/zh-CN/docs/Web/Events/input
最后需要注意的是:oninput 和 onpropertychange 这两个事件在 IE9 中都有个小BUG,那就是通过右键菜单菜单中的剪切和删除命令删除内容的时候不会触发,而 IE 其他版本都是正常的,目前还没有很好的解决方案。不过 oninput & onpropertychange 仍然是监听输入框值变化的最佳方案,如果大家有更好的方法,欢迎参与讨论。
来自: http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.html
由于lavarel的环境homestead升级成了7.x,导致在外面跑composer update
会报错,很麻烦,于是需要升级系统自带php的版本。1
2
3
4➜ bin /usr/bin/php -v
PHP 5.6.30 (cli) (built: Feb 7 2017 16:06:52)
Copyright (c) 1997-2016 The PHP Group
Zend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies
1 | # 添加brew的php源 |
1 | # 安装php71 |
1 | ➜ huixisheng.github.com git:(dev) ✗ php -v |
1 | Problem 1 |
1 | brew search mongodb |
居然不用手动配置php.ini
Mac默认安装了较低版本的php,删除之,统一使用brew管理
$ php -v
PHP 5.6.25 (cli) (built: Sep 19 2016 15:45:41)
Copyright (c) 1997-2016 The PHP Group
Zend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies
$ sudo rm -rf /private/etc/php-fpm.conf.default /private/etc/php.ini php.ini.default
$ sudo rm -rf /usr/bin/php /usr/bin/php-config /usr/bin/phpdoc /usr/bin/phpize
$ sudo rm -rf /usr/include/php
$ sudo rm -rf /usr/lib/php
$ sudo rm -rf /usr/sbin/php-fpm
$ sudo rm -rf /usr/share/php
$ sudo rm -rf /usr/share/man/man1/php-config.1 /usr/share/man/man1/php.1 /usr/share/man/man1/phpize.1
$ sudo rm -rf /usr/share/man/man8/php-fpm.8
1 | $ /usr/local/Cellar/nginx/1.10.3/html |
1 | $ sudo php-fpm -c /usr/local/etc/php/7.1/php.ini -y /usr/local/etc/php/7.1/php-fpm.conf |
修改php-fpm.conf
的配置 error_log
为绝对绝对地址
记得开启php-fpm
1 | location ~ \.php$ { |
值得开心的事: 在最新的2017.1版本中,PhpStorm/WebStorm已经对Vue.js 进行了原生支持
引用官网说明:
1 | PhpStorm = WebStorm + PHP + DB/SQL |
.php 文件不高亮 Editor->file types
里面可以设置相同的类的代码高亮。
php类,可以增加:php4,php5,html,phtml
等
phpstorm注释的代码在Sublime中打开,收起代码的时候很不友好,估计有强迫症用户更是受不了吧。
Preferences->Editor->Code Style->PHP->Other
里面取消 Line comment at first column
之前的勾选就行了!
默认注释:1
2
3
4
5
6
7<?php
/**
* Created by PhpStorm.
* User: huixisheng
* Date: 2017/5/26
* Time: 21:00
*/
1 | <?php |
安装Laravel Plugin
。执行php artisan ide-helper:generate
Editor -> Code Style -> PHP
,右侧不要勾选 Use tab character
Editor > Code Style > JavaScript
的设置,Indent键值为4
快捷键 | 描述 |
---|---|
shift+command+↑ | 代码行上移 |
control+g | 选中相同单词 |
Commond+d | 复制行到下一行 |
Command+delete | 删除当前行 |
double shift | 搜索文件 |
⌘ + E | 历史文件 |
⌘⌥O | 搜索函数。全项目范围 |
⌥ + 回车 | 导入包,自动修正 |
⌘ + n | 快事为每个成员属性生成 getter 及 setter 方法 |
苹果键盘修饰键
Command ⌘
Shift ⇧
Option Alt ⌥
Control ⌃
Caps Lock ⇪
Fn
搜狗输入法->详情表情和符号
在项目中开启ES6 Preferences->Languages & Frameworks->JavaScript->JavaScript language version->ECMAScript 6
。 难找的话直接搜索JavaScript
2017-05-28 01:02:06
gif图片可用于博客中文章demo的展示,聊天不发几个表情都不好意思去聊天。
当你做app测试的时候发现了bug,用干巴巴的文字记录,不好描述,或许你的藐视开发人员有可能不懂你在说什么。所以有图有真相,这样方便开发人员重现问题,万一他们自己的设备就是没有问题呢。有图在就不好甩锅了。
Mac系统自带的QuickTime Player
可用于电脑和iphone手机的 屏幕录制导出视频,结合软件可以导出gif图片。
本文介绍了groovy
脚本自定义构建完成后通知邮件的标题和内容。
npm是nodejs的官方包管理,有成千上万的包,方便了前端模块化开发。但有些前端库并没有发布到npm,但有时候项目又需要它。本文介绍通过npm如何安装github仓库代码。从而达到模块化开发的目的。
平常工作中常用的git
操作命令。
本文介绍如何配置ssh-key
本文对国内ruby
、npm
、brew
、Composer
等镜像源做整理,给前端开发这提供方便。
谷歌搜了下网上介绍spawn和exec区别的文章还是很详细的,引用相关主要的提到的点。同时结合项目中使用过的脚步了解相关的使用方法。
开发过程中常用git
操作很碰到的问题进行总结。