常用技巧 tips

启动Mysql ： net start mysql

创建maven项目： mvn archetype:generate -DgroupId=imooc-arthhur -DartifactId=spring-mvc-study -DarchetypeArtifatId=maven-archetype-webapp

获取event及参数： var ev = window.event || arguments[0].target;

组件切换：先加载新组件，等新组件渲染好还没挂载前，销毁旧组件，再挂载新组件；切换执行顺序：：新组件——beforeCreate———created——–beforeMount 旧组件——beforeDestory——–destory 新组件——mounted

全局安装的包 npm list –depth=0 -global

动态添加样式： :class = “{active:isActive}” :class=”[isActive?ActiveClass:’’]”

| 优化层叠的条件判断

原代码：
if (color) {
if (color === " black" ) {
     printBlackBackground();
} else if (color === " red" ) {
     printRedBackground();
} else if (color === " blue" ) {
     printBlueBackground();
} else if (color === " green" ) {
     printGreenBackground();
} else {
     printYellowBackground();
}
}
优化后：（还可以使用switch，但会给debug增加麻烦）
var colorObj = {
" black" : printBlackBackground,
" red" : printRedBackground,
" blue" : printBlueBackground,
" green" : printGreenBackground,
" yellow" : printYellowBackground
};
if (color && colorObj.hasOwnProperty(color)) {
     colorObj[color]();
}

| « => 左移操作;二进制操作

console.log( parseInt(‘1000000000000000000000000’, 2) === (1 « 24)) //true console.log( Math.pow(2,24) === (1 « 24)) //true

解释上面的1«24的操作:其实是1左移24位。 000000000000000000000001左移24位，变成了1000000000000000000000000

| 评级组件

"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate)

rate : 1~5 ; 当 rate 为1，一颗星，当 rate 为2，两颗星，以此类推。

参考：有哪些短小却令人惊叹的 JavaScript 代码？

| 匿名函数写法

( function() {}() );
( function() {} )();
[ function() {}() ];

~ function() {}();
! function() {}();
+ function() {}();
- function() {}();

delete function() {}();
typeof function() {}();
void function() {}();
new function() {}();
new function() {};

var f = function() {}();

1, function() {}();
1 ^ function() {}();
1 > function() {}();

参考：这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已

| 金钱格式化

// 用正则魔法实现：
var test1 = '1234567890'
var format = test1.replace(/\B(?=(\d{3})+(?!\d))/g, ',')

console.log(format) // 1,234,567,890

// 非正则的优雅实现：
 function formatCash(str) {
       return str.split('').reverse().reduce((prev, next, index) => {
            return ((index % 3) ? next : (next + ',')) + prev
       })
}
console.log(formatCash('1234567890')) // 1,234,567,890

| 浏览器运行JS

地址栏输入以下代码然后回车运行，会出现指定的页面内容

data:text/html,<h1>Hello, world!</h1>
浏览器当编辑器

data:text/html, <html contenteditable>

参考：前端不为人知的一面——前端冷知识集锦

[].forEach.call($$("*"),function(a){
    a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

//翻译后
Array.prototype.forEach.call(document.querySelectorAll('*'),
dom => dom.style.outline = `1px solid #${parseInt(Math.random() *
Math.pow(2,24)).toString(16)}`)

参考：从一行代码里面学点JavaScript

(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]] => sb

([][[]]+[])[+!![]]+([]+{})[!+[]+!![]] => nb

参考：一行能装逼的JavaScript代码

| MORE

总结 js 常用函数和常用技巧（持续更新）

JavaScript专业八级测试，你能做对几道？

你所不知道的快速排序（js实现）

200多个js技巧代码