js现在可以运行在
1.浏览器端
2.计算机操作系统上
通过大名鼎鼎的node， node是由c/cpp编写的js运行环境，大概是js通过编译变成c变成汇编变成机器语言。。。大概
#mermaidChart0 .node>rect { }
#mermaidChart0 .node text { font-weight: 300; font-family: "Helvetica Neue", Helvetica, Arial, sans-serf; font-size: 14px }
#mermaidChart0 .edgeLabel text { font-weight: 300; font-family: "Helvetica Neue", Helvetica, Arial, sans-serf; font-size: 14px }
#mermaidChart0 .cluster rect { }
.markdown-body * { }
.mermaid .label { color: rgb(51, 51, 51) }
.node circle,.node ellipse,.node polygon,.node rect { }
.edgePath .path { }
.edgeLabel { background-color: rgb(232, 232, 232) }
node编译
js
操作系统可执行机器语言
包安装工具
1.npm
2.bower
3.yarn
现在大家都推荐这个。。。据说更快更好
构建打包工具（说实话这个我现在还是分不清）
构建工具 任务执行器
帮助压缩文件？sprite？混淆等等需需要手工操作的简化？手工劳动 gulp grunt
打包工具 模块打包工具
模块化的代码最后组装打包上线用的，webpack browserify ，seajs require这两个是在浏览器端js现场打包，现在已经不推荐了
页面中的js
传统引入方式 script src
node动态引入
这个是个很神奇的 node的工具webpack动态的组装你的页面 比如使用node modules里面的插件 你并没有实际用script引入到页面中这样子？暂时不理解的时候，不能用常理来考虑（vue-cli）dev时是动态组装build才把所有动态组装的打包好成一个。。。
es2015==es6 =>true
jquery 属性自加
a.css({‘property‘:‘+=value‘})
目前我对vue的感想
首先，说下优点确实有的，只操作数据不用操作dom
再说下缺点，搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c，最后搞得很难看懂。为了变方便变得更麻烦要加更多东西
contenteditable
div 模拟textarea 富文本编辑器
<div class="simutextarea">
<span class="simut-fastenbegin">#youCantDeleteMe</span>
<span class="simut-textwrapper">
<span class="simut-textplaceholder">Hot or not? Tell it like it is and hashtag!</span>
<span class="simut-textplaceinput" contenteditable="true"> </span>
</span>
</div>但是有些问题的，解决不了光标的问题（跳首），百度贴吧的发帖框就是用这个模拟的，有时间看看他们怎么做的
根据设备跳转
三方可以跳转，都可以获得浏览器传来的userAgent
- 运维跳转
- 程序跳转
- 前端跳转
同时，这三方加上网路运营商甚至路由器都可以恶意dns恶意在页面上加东西
node作为运行时服务器，也是一样的
图片位于正中
- background-position center
- position absolute
多行省略（现代浏览器）
overflow: hidden;text-overflow:ellipsis;
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;cdn页面真正动态内容
页面被cdn服务器缓存后，需要刷新缓存才能真正改变，那么真正需要勤奋改变的内容需要js来获取（比如当前登录用户信息等等）
js 正则找出所有符合的匹配
var regEx=/js_quantity[a-z]+/g;regEx.exec(‘js_quantityabc js_quantityminus minus disabled‘);regEx.exec(‘js_quantityabc js_quantityminus minus disabled‘);regEx.exec(‘js_quantityabc js_quantityminus minus disabled‘)
[0];regEx.exec(‘js_quantityabc js_quantityminus minus disabled‘).index;不断连续执行exec
async/await
demo(Script snippet #1)
//测试 async async async await
//先来的 返回一个promise 完成时调用resolve
var sleep=function(){
return new Promise(function(resolve,reject){
setTimeout(function(){
console.log(‘Asettimeout has been executed, promiss has been resolved‘);
resolve([‘sleep1‘,‘sleep2‘]);
},3000);
});
};
//后到的 async（异步）修饰function await修饰执行先来的
var start=async function(){
let sleepreturnarray=await sleep();
console.log(‘%ceven though i do not have a time out, i still will be executed after 3 sec, after the promiss resolveed‘+sleepreturnarray[1],‘color:red;‘);
};
start();async 表示这是一个async函数，await只能用在这个函数里面。
await 表示在这里等待promise返回结果了，再继续执行。
await 后面跟着的应该是一个promise对象（当然，其他返回值也没关系，只是会立即执行，不过那样就没有意义了…）
大大说了，目前这这就是异步回调地狱的终极解决方案，当然要结合babel现在。注意， 目前， 终极
vue组件通讯
就算你不喜欢，分到你用你也得用。。。
组件之间的作用域独立，而组件之间经常又需要传递数据。
A 为父组件，下面有子组件 B 和 C。
A 的数据可以通过 props 传递给 B 和 C。
A 可以通过 $broadcast 调用 B 和 C 的 events，从而操作 B 和 C 的数据。
B 和 C 可以通过 $dispatch 调用 A 的 events，从而操作 A 的数据。
当 B 需要操作 C 的数据就会比较麻烦，需要先 $dispatch 到 A，再 $broadcast 到 C。
如果项目比较小的话还好，越大的项目，涉及的组件通信就越多、越频繁，此时管理起来就会非常累，而且容易出错。这就是 Vuex 的意义所在。它可以将数据置于单独的一层，并提供给外部操作内部数据的方法。粗俗一点，就这样理解吧。
=== === ===更新：Vue 2 发布了，去掉了 $dispatch 和 $broadcast，已经不会出现通信事件 ping-pong 的情况了。
我们需要有一个 Vue 实例来充当通信媒介的作用，Vue 官方文档里将它叫做 event bus。export default new Vue();
当我们需要组件之间事件通信的时候，只需要对这个 event bus 使用 $emit 和 $on 就可以了。
import Bus from ‘./bus.js‘;
export default Vue.extend({
template: `
<div>{{msg}}</div>
`,
data: () => ({
msg: ‘Hello World!‘
}),
created() {
Bus.$on(‘setMsg‘, content => {
this.msg = content;
});
}
});import Bus from ‘./bus.js‘;
export default Vue.extend({
template: `
<div @click="sendEvent">Say Hi</div>
`,
methods: {
sendEvent() {
Bus.$emit(‘setMsg‘, ‘Hi Vue!‘);
}
}
});Event bus 是一种实践，你也可以在 Vue 1.x 中使用它。
大在小容器中居中
法一
大:position absolute; left 50%;margin-left -[大宽度的一半]; top...跟left一样的省略
小：position relative;
法二
设置为背景图 且background-position center
文本框和按钮同高对齐(less)
form{
font-size: 0;position: relative;
.formitem{
height: 30px;line-height: 30px;
font-size: 14px;vertical-align: middle;
}
input[type=text]{
.formitem();
border: 1px solid #000;
padding: 0 5px 0 35px;
width: 235-40px;
}
button{
.formitem();
color: #fff;background-color: #000;
width: 135px;height: 32px;line-height: 32px;
}
&:before{
content: ‘‘;display: inline-block;position: absolute;
left: 38px;
top: 1px;
.sprite(@youjiandingyue_07);
}
}正则替换 保留原始内容
http://([A-Za-z0-9.-]+).sammydress.com
$1 是代表([A-Za-z0-9.-]+)匹配到的模糊内容
$1-$n分别代表第1个和第n个括号内匹配到的内容。
var regEx=/([A-Za-z0-9.-]+)abc/;
‘sdjlfjslfabc‘.replace(regEx,‘$1def‘)结果是"sdjlfjslfdef"
关于vue一点新的体会
专注于操作数据，数据和视图分离，通过操作数据的方式操作视图，mvvm
而不是$().html()等等这种形式
webstorm 保存不会触发webpack watch
https://segmentfault.com/q/1010000007796140?_ea=1459577
原来是这样啊啊啊啊啊啊
text align justify
text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用
vue validator
https://segmentfault.com/a/1190000006706226
中文文档
关于postcss中用于不转换rem的注释/*no*//*px*/在webpack build中不生效的解决办法
sass loader会把注释去掉 导致用于告诉postcss不用转换rem的注释也去掉 导致边线px变成小数rem 显示不出来的bug
sass?outputStyle=expanded 展开 带注释的？
module: {
loaders: [
{
test: /\.scss$/,
//感謝谷歌
loader: ‘style!css!postcss-loader!sass?outputStyle=expanded‘,
// include: APP_PATH
},
]
},webpack 可以接受形如!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true&includePaths[]=./node_modules 的配置参数后的loader