js現在可以運行在
1.瀏覽器端
2.計算機操作系統上
通過大名鼎鼎的node， node是由c/cpp編寫的js運行環境，大概是js通過編譯變成c變成匯編變成機器語言。。。大概
包安裝工具
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
https://$1.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