[筆記]這階段的有道雲筆記前端部分整理

本文轉載於:猿2048網站➸[筆記]這階段的有道雲筆記前端部分整理

js如今能夠運行在

1.瀏覽器端

2.計算機操做系統上

經過大名鼎鼎的node， node是由c/cpp編寫的js運行環境，大概是js經過編譯變成c變成彙編變成機器語言。。。大概

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

1. 運維跳轉
2. 程序跳轉
3. 前端跳轉

同時，這三方加上網路運營商甚至路由器均可以惡意dns惡意在頁面上加東西
node做爲運行時服務器，也是同樣的

---

圖片位於正中

1. background-position center
2. 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