對js的一些感想與分享

JavaScript 是屬於網路的腳本語言！

JavaScript 被數百萬計的網頁用來改進設計、驗證表單、偵測瀏覽器、建立cookies，以及更多的應用程式。

JavaScript 是網際網路上最受歡迎的腳本語言。

JavaScript 很容易使用！你一定會喜歡它的！

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搞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 完成时调用resolvevar 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

原来是这样啊啊啊啊啊啊

---

text align justify

text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用

---

vue validator

中文文档

---

关于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

 

以上是對js的一些感想與分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！