整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
時(shí)候，我們希望在 JavaScript 中將 2 個(gè)已經(jīng)存在的數(shù)組串拼接成 1 個(gè)數(shù)組。
簡(jiǎn)單來(lái)說(shuō)就是將數(shù)組進(jìn)行合并。
這個(gè)時(shí)候，我們可以使用 JavaScript 的 concat 函數(shù)。
考察下面的代碼：
const array1=['a', 'b', 'c'];
const array2=['d', 'e', 'f'];
const array3=array1.concat(array2);
console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]
上面的代碼將 2 個(gè)數(shù)組 array1 和 array2 合并成了一個(gè)新的數(shù)組為 array3， 在這個(gè)新的數(shù)組中的元素就是
array2 在 array1 后面添加得到的。
如果你需要合并的數(shù)組不只有 2 個(gè)，你還有多個(gè)的話，你可以同樣使用上面的方法，但是在參數(shù)中傳遞進(jìn)多個(gè)數(shù)組就行。
concat()
concat(value0)
concat(value0, value1)
concat(value0, value1, ... , valueN)
如上面的代碼，你并不需要將 concat 多次運(yùn)行來(lái)進(jìn)行合并，concat 這個(gè)方法允許傳遞多個(gè)需要合并數(shù)組為參數(shù)。
鄭同學(xué)在開(kāi)發(fā)我們系統(tǒng)的時(shí)候發(fā)現(xiàn)首頁(yè)靜態(tài)資源多次請(qǐng)求服務(wù)器加載緩慢。帶著這個(gè)問(wèn)題他去訪問(wèn)了淘寶，發(fā)現(xiàn)了淘寶一條請(qǐng)求里有多個(gè)Js。最后百度一下發(fā)現(xiàn)了Concat。Concat是淘寶開(kāi)發(fā)的一個(gè)Nginx模塊，可以將多個(gè)Js/Css合并成一個(gè)請(qǐng)求（當(dāng)然在合理的情況下），這樣可以減少對(duì)服務(wù)器的請(qǐng)求個(gè)數(shù)，達(dá)到靜態(tài)資源相對(duì)較快的加載。下面我們看一下具體的操作。
下載Nginx 和Concat
wget http://nginx.org/download/nginx-1.6.2.tar.gz
git clone git://github.com/alibaba/nginx-http-concat.git
下載Concat可能需要翻墻
解壓安裝
將下載好的Concat 放到某目錄，本次試驗(yàn)放入/usr/local/src/
tar zxvf nginx-1.6.2.tar.gz
cd nginx-1.6.2
./configure
--prefix=/usr/local/webserver/nginx
--with-http_stub_status_module
--with-http_ssl_module
--add-module=/usr/local/src/nginx-http-concat
以上加粗部分為Concat 目錄，根據(jù)實(shí)際情況修改
make && make install
測(cè)試
在 /usr/local/webserver/nginx/html 新建css 目錄
mkdir -p /usr/local/webserver/nginx/html/css
新建 a.css 和 b.css 內(nèi)容分別為
a{
color: red;
}
b{
color: blue;
}
c)修改nginx配置文件nginx.conf,新增如下內(nèi)容
location /css/ {
concat on;
concat_max_files 20;
}
d)啟動(dòng)nginx
/usr/local/webserver/nginx/sbin/nginx
e)觀察瀏覽器輸出
瀏覽器輸入 http://IP /css/??a.css,b.css
觀察瀏覽器輸出，出現(xiàn)下圖說(shuō)明配置成功
由上圖看出，兩個(gè)css已經(jīng)合并成功一個(gè)css
此步驟需要根據(jù)實(shí)際情況修改，本次試驗(yàn)針對(duì) javashop 多店系統(tǒng)
配置 Js/Css 合并
nginx.conf配置
location /themes/b2b2cv2/css/ { root /home/www/b2b2c_1/; concat on; concat_max_files 20; } location /themes/b2b2cv2/js/ { root /home/www/b2b2c_1/; concat on; concat_max_files 20; } |
加粗部分根據(jù)實(shí)際情況修改
根據(jù)對(duì)應(yīng)規(guī)則修改項(xiàng)目(修改完成后需要重新啟動(dòng)nginx)
例如：
可根據(jù)實(shí)際情況修改。
種方式是es6的語(yǔ)法.使用鍵盤(pán)1左邊的那個(gè)字符 `` 拼接,
再加上js自帶的模板引擎拼接字符串非常快速.這東西也沒(méi)什么高深的,看幾個(gè)例子就懂了.
console.log(`<xml>
<ToUserName><![CDATA[toUser]]></ToUserName>
<FromUserName><![CDATA[fromUser]]></FromUserName>
<CreateTime>12345678</CreateTime>
<MsgType><![CDATA[text]]></MsgType>
<Content><![CDATA[你好]]></Content>
</xml>`);
var str1='hello';
console.log(`${str1} world`);
var a=10;
var b=20;
console.log(`a+1=${a+1};b*2=${b*2}`);
運(yùn)行結(jié)果:
----瀏覽器中
在nodejs中目前的版本對(duì) ``是完全支持的,瀏覽器支持就各不相同了,手機(jī)端安卓支持,但蘋(píng)果手機(jī)貌似不支持,至少蘋(píng)果微信瀏覽器對(duì)這個(gè)是不支持的.
大概就以下幾點(diǎn)功能:
換行不用加號(hào)拼接
可以用${}傳入變量
可以進(jìn)行數(shù)字的計(jì)算
不過(guò)呢有利有弊,據(jù)說(shuō)性能上沒(méi)有正常的拼接高.
意外金喜的博客:http://blog.csdn.net/zzwwjjdj1
鄭重申明,發(fā)表的文章都是我自己博客原創(chuàng)的,這是技術(shù)分享,再被封就不在這里玩了. ╭(╯^╰)╮
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
