格力計畫收購珠海銀隆新能源進軍新能源汽車領域

發佈日期: 2020-06-23 作者: admin

3月6日，珠海格力電器股份有限公司發佈《關於發行股份購買資產停牌公告》，證實擬收購珠海銀隆新能源有限公司。格力電器公司承諾爭取在4月4日前披露本次重組方案。分析人士猜測，格力電器意圖通過銀隆進軍新能源和新能源汽車領域。

據瞭解，銀隆新能源創建於2004年，是一家產業橫跨新能源、汽車製造、房地產、物業管理、金融能源投資等領域的大型現代化高新技術企業，掌控著全球鈦鋰材料頂級生產技術。2010年，銀隆成功收購美國納斯達克上市公司，奧鈦納米科技有限公司53.6%的股權，成為其第一大股東並成功跨進國際資本市場。分析人士猜測，格力電器意圖通過銀隆進軍新能源和新能源汽車領域，並間接登陸美國資本市場。

此前，格力電器與銀隆新能源已開展產業技術方面的合作與攻關。

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※想要讓你的商品成為最夯、最多人討論的話題?網頁設計公司讓你強力曝光

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!

※新北清潔公司,居家、辦公、裝潢細清專業服務

推電動車無線充電技術！高通與 BRUSA 簽商用授權協議

發佈日期: 2020-06-23 作者: admin

美國高通（Qualcomm）與 BRUSA Elektronik AG 宣布，雙方已達成電動車無線充電 (WEVC) 專利授權協議。BRUSA 獲得 Qualcomm HaloTM 專利發明授權後，未來將致力提供插電式混合動力車與電動車用 WEVC 系統的商業化服務，而高通將提供 BRUSA 專利許可授權，使 BRUSA 能為特定車廠開發、製造與供應 WEVC 系統。 BRUSA Elektronik AG 一直以來都是無線充電領域的先驅者，其開發的 ICS 無線充電系統能以安全且高效能的方式傳輸電力至車輛，消除電動車目前對充電線路的依賴。高通無線充電副總裁兼總經理 Steve Pazol 表示，這項授權協議能拓展 Qualcomm Halo 供應商網絡並增加多樣性，為車廠提供另一個先進發明的可靠管道。目前，BRUSA 正與多家國際知名車廠一同開發 WEVC 系統，致力商業化無線充電系統，其中，也包含 Qualcomm HaloTM 方面，以利未來市場能推出具無線充電功能的車款。

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!!

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!

※幫你省時又省力,新北清潔一流服務好口碑

※別再煩惱如何寫文案,掌握八大原則!

摩根汽車計畫投資600萬英鎊研發新型電動汽車

發佈日期: 2020-06-18 作者: admin

據英國媒體報導，近日，摩根汽車公司宣佈啟動一項價值600萬英鎊的項目，用於研發新型混合動力汽車及電動汽車，將從2019年開始生產。該項目主要研發混合及電力動力系統。

據悉，英國先進推進動力中心為該項目提供資金，英國德爾塔汽車運動公司和波滕紮科技將提供其他支持。摩根汽車已經成功研發出純電動汽車EV3，將在今年晚些時候投入市場，而先進推進動力中心的資金支持將會幫助摩根研發更多使用其他燃料的車型。

摩根汽車董事總經理史蒂夫˙莫里斯表示，從十年前的LifeCar項目開始，公司就致力於研究發展新的動力推進技術，將在2020年之前研發並生產實現最棒的混合動力及電動傳動系統解決方案。

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※想要讓你的商品成為最夯、最多人討論的話題?網頁設計公司讓你強力曝光

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!

※新北清潔公司,居家、辦公、裝潢細清專業服務

2015上半年中國風電、光伏裝機量雙雙大增

發佈日期: 2020-06-18 作者: admin

中國官方統計2015上半年全國裝機量達7.73GW，比去年同期增長113%；風力發電在此時期也增加了9.1GW，也比去年上半年大幅增加50.9%。但是，光伏與風力發電雙雙面臨棄電問題，電網建設需要加緊趕工。

中國預計在2016年下修風力發電電價，使眾多風電企業加緊在2015年安裝風力發電機組；據中國國家能源局統計，2015前半年全國風力發電量比去年前半年成長了27.4%來到97.7TWh。然而，加速安裝的同時也造成棄風率成長了6.7%達到15.2%，其中，東北和西北地區的棄風率增加、河北棄風率下降；一部分原因出於東北地區的風速較高，上半年的總風速利用時間提升到993小時。

而棄風的主要問題也與棄光問題相同，因為風力發電集中地區的電網電纜基礎建設不足以輸出所發電力，且當地用電量也不足以消納。

在併網量方面，2015年上半年新增的風電併網量9.1GW，主要集中在甘肅（1.34GW）、寧夏（1.28GW）、內蒙古（847MW）、雲南（836MW）、山西（786MW）。

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!!

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!

※幫你省時又省力,新北清潔一流服務好口碑

※別再煩惱如何寫文案,掌握八大原則!

特斯拉下調2016中國區銷量目標至5000輛

發佈日期: 2020-06-17 作者: admin

近日，特斯拉CEO伊隆•馬斯克（ElonMusk）表示，將下調2016年中國區銷量目標至5000輛。另外，特斯拉正在努力尋找當地的合作夥伴，希望能在今年上半年順利於國內建廠。

據悉，2015年前9個月，特斯拉在中國銷售了3025台電動汽車，離2014年定下的目標1萬輛相差很遠，業績不佳是馬斯克下調了中國銷售目標的主要原因。

資料顯示，香港已成為特斯拉ModelS全球保有密度最高的城市，在2015年全球共計交付的50,580輛ModelS中，有2,221輛是來自香港的訂單，占全球約4.39%。近兩年，香港政府鼓勵市民使用電動汽車，並在香港推行電動汽車首次免登記稅政策，使電動車註冊量增長了270%，而特斯拉ModelS占到全部電動車份額的80%。

相比而言，大陸市場對特斯拉的政策支持力度顯得不足。馬斯克稱，自己的公司希望能在今年上半年順利於國內建廠，並借此減輕進口稅收方面的壓力，以及爭取更多政府為新能源車專供的政策優惠。

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※想要讓你的商品成為最夯、最多人討論的話題?網頁設計公司讓你強力曝光

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!

※新北清潔公司,居家、辦公、裝潢細清專業服務

JavaScript入門經典（第7版）讀書筆記

發佈日期: 2020-06-16 作者: admin

斷斷續續看了十來天，終於看完了，還是學到些東西，這本書還是不錯的，各方面都有涉及。

補充了下之前不完善的JS 知識

筆記一般只記必要的東西。‎

1 JavaScript 基礎

1.1 JavaScript 簡介

1.1.1 Web 腳本編程基礎

服務器端和客戶端編程
JavaScript 簡介
JavaScript 起源
瀏覽器的競爭
<script> 標籤
- html5 script 標籤不用指定屬性
DOM 簡介
W3C 和標準兼容
window 和 document 對象
對象表示法
與用戶交互
document.write()
讀取 document 對象的屬性

1.2 創建簡單的腳本

1.2.1 在 Web 頁面里添加 JavaScript

把代碼放在 script 標籤內
通過 src 引用外部 js 文件

1.2.2 編寫 JavaScript 語句

代碼註釋
- 一般文件名後綴 .min.js 是去掉了空白和註釋

1.2.3 變量

1.2.4 操作符

算術操作符
操作符優先級
對字符串使用操作符+

1.2.5 捕獲鼠標事件

onClick 事件處理器
- HTML 里不區分大小寫,所以屬性名 onclick 小寫也可以
onMouseOver 和 onMouseOut 事件處理器
- 使用 this 引用 HTML 元素
```
<img src="1.png" onmouseover="this.src='2.png';">
```

1.3 使用函數

1.3.1 基本語法

1.3.2 調用函數

把 JavaScript 代碼放置到頁面的<head>區域
- 函數放到文檔開頭,確保在調用前已經被定義
- 函數如果多次定義,會使用最後的定義
給函數傳遞參數
多參數
從函數返回值
- 如果沒有 return, 會返回 undefined

匿名函數

function sayHello() {
    alert("hello");
}

var sayHello = function() {
    alert("hello");
}

1.4 函數的更多知識

1.4.1 變量作用域

使用 this 關鍵字
使用 let 和 const
- 塊級作用域 let
用 const 關鍵字聲明變量

1.4.2 箭頭函數

var sayHello = function() { alert("hello"); };

var sayHello = () => alert('hello');

var myFunc = x => alert(x);

myFunc = (x, y) => alert(x + y);

myFunc = (x, y, z) => {
    let area = x*y + 5;
    let boxes = area / z;
    return boxes;
}

1.4.3 設置默認參數

1.5 DOM 對象和內置對象

1.5.1 與用戶交互

alert()
- 術語“模態”的含義
- confirm()
```
var answer = confirm("are you ok?");
```

prompt()

var answer = prompt("what is your full name?");
var answer = prompt("what is your full name?", "cai ji");

1.5.2 根據 id 選擇元素

var myDiv = document.getElementById("div1");

innerHTML 屬性

var myDivContents = document.getElementById("div1").innerHTML;
document.getElementById("div1").innerHTML = "heheda";

1.5.3 訪問瀏覽器歷史記錄

alert(history.length);
history.forward();
history.backward();
history.go(-3);
history.go(2);
history.go("baidu.com");

1.5.4 使用 location 對象

location 的屬性 .href .protocol .host .hostnmae .port .pathname .search .hash

用 location 對象導航
- 兩種導航到新頁面的方式 location.href = “www.baidu.com”; location.replace(“www.baidu.com”); 前者會保留舊頁面在歷史記錄里
刷新頁面
- location.reload(); 避免使用緩存 location.reload(true);
獲取瀏覽器信息: navigator 對象
- navigator 保留瀏覽器本身的數據
- navigator 的屬性 .appName .appCodeName .appVersion .language .cookieEnabled .cpuClass .onLine .platform .plugins.length
- navigator 返回的信息並不準確

1.5.5 日期和時間

創建具有當前日期和時間的 Date 對象

var mydate = new Date();
var year = mydate.getFullYear();
var month = mydate.getMonth();
var date = mydate.getDate();
var day = mydate.getDay();    // 星期
var hours = mydate.getHours();
var minutes = mydate.getMinutes();
var seconds = mydate.getSeconds();

創建具有指定日期和時間的 Date 對象

var d1 = new Date("October 22, 1995 10:57:22");
var d2 = new Date(95, 9, 22);
var d3 = new Date(95, 9, 22, 10, 57, 0);

設置和編輯日期與時間

var mydate = new Date();
document.write(mydate.getDay());
mydate.setDate(15);
document.write(mydate.getDat());
document.write(mydate.toDateString() + mydate.toTimeString());

利用 Math 對象簡化運算
- Math 的一些常見方法 .ceil(n) .floor(n) .max(a, b, c, …) .min(a, b, c, …) .round(n) 四舍五入 .random() 返回一個 0 到 1 的隨機數
取整
獲得最大值和最小值

生成隨機數

function myRand(range) {
    return Math.round(Math.random() * range);
}

数字常數

.E 自然常數,約為 2.718 .LN2 2 的自然對數,約為 0.693 .LN10 10 的自然對數,約為 2.302 .LOG2E 以 2 為底 e 的對數,約為 1.442 .LOG10E 以 10 為底 e 的對數,約為 0.434 .PI 圓周率,約為 3.14159 .SQRT1₂ 2 的平方根的倒數,約為 0.707 .SQRT2 2 的平方根,約為 1.414

關鍵字 with

with (Math) {
    var myRand = random();
    var biggest = max(2, 3, 5);
    var height = round(11.22);
}

2 JavaScript 編程

2.1 数字和字符串

2.1.1 數值

整數
浮點數
十六進制數,二進制數和八進制數

2.1.2 全局方法

toString()

var x = 13;
alert(x.toString());
alert(x.toString(16));
(11).toString();

toFixed()

x.toFixed(0); // "13"
x.toFixed(3); // "13.000"

toExponential()

var num = 666;
num.toExponential(4); // "6.6600e+2"
num.toExponential(6); // "6.660000e+2"

2.1.3 Number 對象

Number.isNaN()
- 當試圖把一些非數值當做數值處理,卻無法得到數值時,返回值就是 NaN
- 示例
```
Number.isNaN(3); //false
Number.isNaN(0 / 0); // true
```
Number.isInteger()
Number.parseFloat() 和 Number.parseInt()
- 解析的字符串首字符如果是一個数字,函數會持續解析到数字結束
```
Number.parseFloat("21.4"); // 21.4
Number.parseInt("12px",10); // 12
```
無窮大
- 表示無窮的關鍵字 Infinity -Infinity
- isFinite() 會把參數轉換為數值,如果結果是 NaN,正無窮大或負無窮大,函數返回 false

2.1.4 Number() 函數

該函數會盡可能返回一個對等的數值,如果失敗,返回 NaN

2.1.5 布爾值

如果布爾值被用作計算,true 為 1, false 為 0
JS 里被當做 false 的值
1. 布爾值 false
2. 未定義 undefined
3. null
4. 0
5. NaN
6. “”

非操作符

2.1.6 null(空) 和 undefined(未定義)

undefined 不是關鍵字,是未定義的全局變量

2.2 操作字符串

2.2.1 字符串

length 屬性
轉義序列
字符串方法
- concat
- indexOf
- lastIndexOf
- repeat var inStr = “a b”; var outStr = inStr.repeat(3)
- replace
- split
- substr string1.substr(4, 11); string1.substr(4);
- toLowerCase
- toUpperCase

2.2.2 模板字符串

var name = "aa";
var course = "bb";
var myString = `hell ${name}, welcome ${course}`;

2.3 數組

2.3.1 數組

JS 的數組能夠存放任何數據類型

創建新數組
- 數組也是一個對象 var myArray = new Array(); var myArray = [];

初始化數組

var myArray = ['111', '22'];
myArray[20] = "333e";
myArray.length

數組的方法
- concat
- join 把數組的全部元素連接在一起形成一個字符串 var longDay = myArray.join(“-”);
- toString 相當於 myArray.join(“,”);
- indexOf 沒有找到返回-1
- lastIndexOf
- slice 可以為負數
- sort 把數組元素按字母順序排列
- splice myArray.splice(2, 1, “heheda”); 指向索引為 2 的元素,刪除 1 個元素,插入一個新元素,返回被刪除的元素

2.3.2 如何遍曆數組

使用 forEach()
- 接受一個函數作為參數,並將函數依次應用與數組中的每個元素
```
var myArray = [1, 2, 3, 4];
function cube(x) {
    console.log(x*x*x);
}
myArray.forEach(cube);
```
- forEach 不返回任何值

使用 map()

和 forEach 的區別在於 map 會返回和最初數組相同大小的新數組

var myArray = [1, 2, 3, 4];
fucntion cube(x) {
    return (x*x*x);
}
var newArray = myArray.map(cube);

使用 for-of 訪問數組

var myArray = [2,3,4,5];
functionn cube(x) {
    console.log(x*x*x);
}
for (var y of myArray) {
    cube(y);
}

2.3.3 三點表示法

組合多個數組
```
var array2 = [1, 2, ...array1, 3];
```

用參數的數組來調用函數

var myArray = [1, 2, 3];
alert(Math.min(...myArray));

收集數據
```
var [a, b, ...c] = [1, 2, 3, 4, 5];
```

2.4 用 JavaScript 處理事件

mousedown 和 mouseup 在 click 前觸發
ctrlKey shiftKey altKey metaKey

2.4.1 事件的類型

一些常見事件
1. 鼠標事件
  - onclick
  - oncontextmenu 鼠標右鍵彈出菜單
  - ondblclick
  - onmousedown
  - onmouseenter 鼠標移動到一個元素上時
  - onmouseleave
  - onmousemove 鼠標在一個元素上移動時
  - onmouseover 鼠標移動到一個元素或其子元素時
2. 鍵盤事件
  - onkeydown 按下按鍵
  - onkeypress 按下並放開按鍵
  - onkeyup 釋放按鍵
3. DOM 對象事件
  - onerror 加載一個外部文件出現錯誤時
  - onload
  - onresize
  - onscroll 滾動了元素的滾動條
4. 表單事件
  - onblur 元素失去焦點時
  - onchange
  - onfocus
  - onreset 重置表單
  - onselect
  - onsubmit

2.4.2 事件處理器

內聯事件處理器

<a href="http://www.baidu.com" onclick="alert('hello')">baidu</a>

作為 DOM 對象的屬性的事件處理器

// <a href="xxx" id="a1">aa</a>
var myLink = document.getElementById('a1');
myLink.onclick = function() {
    alert("hello");
}

使用 addEventListener()

var myLink = document.getElementById('a1');
function sayHello() {
    alert("hello");
}
myLink.addEventListener('click', sayHello);
myLink.removeEventListener('click', sayHello);

添加多個監聽器
- 使用 addEventListener 可以對一個事件添加多個函數

2.4.3 event 對象

myInputField = document.getElementById('a');
function myFunction(e) {
    var kc = e.keyCode;
    if (kc == 27) {
        alert("xx");
    }
}
myInputField.addEventListener('keydown', myFunction);

event 對象會自動傳遞給事件處理器
e.keyCode 表示按下了哪個鍵,27 表示 Escape

阻止默認行為

var myLink = document.getElementById('a');
function refuseAccess(e) {
    alert("wrong");
    e.preventDefault();
}
myLink.addEventListener('click', refuseAccess);

事件冒泡和捕獲
- 嵌套元素時,各層元素都有事件監聽器時,執行順序為冒泡
- addEventListener 的第三個參數默認為 false,對於嵌套元素,從內向外執行,像冒泡一樣.

關閉冒泡和捕獲

function myFunction(e) {
    var kc = e.keyCode;
    e.stopPropagation();
    if (kc == 27) {
        alert("1");
    }
}

2.5 程序控制

2.5.1 條件語句

和 C 差不多

if() 語句
比較操作符
- = 值和類型都相等
測試相等性
if 進階
測試多個條件
switch 語句
邏輯操作符

2.5.2 循環和控制結構

while
do…while
for
用 break 跳出循環

用 for…in 在對象集里循環

var days = [1, 2, 3, 4];
for (i in days) {
    alert(i);
}

2.5.3 設置和使用定時器

這兩個方法都是 window 對象的方法

setTimeout()

function hide(elementId) {
    document.getElementById(elementId).style.display='none';
}
window.onload = function() {
    setTimtout("hide('id1')", 3000);
}
var timer1 = setTimeout("hide('id1')", 3000);
clearTimeout(timer1);

setInterval()

var timer1 = setInterval("updateClock()", 1000);
clearInterval(timer1);

3 理解 JavaScript 對象

3.1 面向對象編程

3.1.1 什麼是面向對象編程

3.1.2 創建對象

創建直接實例

myNewObject = new Object();
myNewObject.showInfo = myFunc;
myNewObject.info = 'this is a info';

使用關鍵字 this
- this 在 HTML 內聯 JS 里指此 HTML 元素,也可指向它所屬的對象

匿名函數

myNewObject.showInfo = function() {
    alert(this.info);
}

使用構造函數

如果要創建一個類的多個實例,可以創建構造函數

function Car(Color, Year, Make, Miles) {
    this.color = Color;
    this.year = Year;
    this.make = Make;
    this.odometerReading = Miles;
    this.setOdometer = function(newMiles) {
        this.odometerReading = newMiles;
    }
}
var car1 = new Car("blue", "1998", "Ford", 77777);

3.1.3 用 prototype 擴展和繼承對象

擴展對象

function Person(personName) {
    this.name = personName;
    this.info = 'a';
    this.showInfo = function() {
        alert(this.info);
    }
}
var person1 = new Person('adam');
var person2 = new Person('hehe');
Person.prototype.sayHello = function() {
    alert(this.name + 'say hello');
}

繼承對象

function Pet() {
    this.animal = "";
}
function Dog() {
    this.breed = "";
}
Dog.prototype = new Pet();

3.1.4 封裝

function a(b, c, d) {
    function kk(m, n) {
        return m + n;
    }
}

3.2 對象進階

3.2.1 類

新引入的 class 關鍵字和 constructor

function Pet() {
    this.animal = "";
    this.setAnimal = function(newAnimal) {
        this.animal = newAnimal;
    }
}

class Pet {
    constructor(animal) {
        this.animal = animal;
    }
    setAnimal(newAnimal) {
        this.animal = newAnimal;
    }
}

使用 getter 和 setter

下劃線前綴防止被重複調用

class Pet {
    constructor(animal, name) {
        this.animal = animal;
        this.name = name;
    }
    get name() {
        return this._name;
    }
    set name(n) {
        n = n.charAt(0).toUpperCase() + n.slice(1).toLowerCase();
        this._name = n;
    }
}

Symbol
- 創建的 Symbol 一定是唯一的傳的參數只是說明
```
var myname = Symbol('nickname');
myCat[myname] = 'heheda';
```

3.2.2 對象繼承

使用 extends 和 super

class Dog extends Pet {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }
}

3.2.3 使用功能檢測

if (document.getElementById) {
    // do something
} else {
    // other
}

typeof

if (typeof document.getElementById == 'function') {
    // do something
} else {
    // other
}

typeof 的返回值 “number” “string” “boolean” “object” null undefined

3.3 DOM 腳本編程

3.3.1 DOM 節點

節點類型
- nodeType 每種節點類型都有一個關聯的數值,保存在屬性 nodeType
  1. 元素
  2. 屬性
  3. 文本
  4. CDATA 區域
  5. 實體引用
  6. 實體
  7. 執行指令
  8. HTML 註釋
  9. 文檔
  10. 文檔類型(DTD)
  11. 文檔片段
  12. 標籤
- childNodes 屬性
```
function countListItems() {
    var olElement = document.getElementById("toDoList");
    var count = 0;
    for (var i = 0; i < olElement.childNodes.length; i++) {
        if (olElement.chiodNodes[i].nodeType == 1)
            count++;
    }
}
window.onload = countListItems;
```
- firstChild lastChild myElement.childNodes[0] myElement.childNodes[myElement.childNodes.length – 1];
- parentNode 屬性
- nextSibling previousSibling
使用 nodeValue
使用 nodeName

3.3.2 用 getElementsByTagName() 選擇元素

基本用法 var myDics = document.getElementsByTagName(“div”);
document.getElementsByClassName()

3.3.3 讀取元素的屬性

var myNode = document.getElementById("id1");
alert(myode.getAttribute("title"));

3.3.4 Mozilla 的 DOM 查看器

創建新節點
- 創建步驟
  1. 創建新節點
    - createElement() var newDiv = document.createElement(“div”);
    - createTextNode() var newTextNode = document.createTextNode(“heheda”);
    - cloneNode() var myDiv = document.getElementById(“id1”); var newDiv = myDiv.cloneNode(true) true 代表會複製子節點一般需要修改 id 值
  2. 添加到 DOM 樹
操作子節點
- appendChild() var newText = document.createTextNode(“heheda”); var myDiv = document.getElementById(“id1”); myDiv.appendChild(newText);
- insertBefore() var newPara = document.createElement(“p”); var myDiv = document.getElementById(“id1”); var para2 = document.getElementById(“para2”); myDiv.insertBefore(newPara, para2);
- para.replaceChild(new, old)
- removeChild()
```
var myDiv = document.getElementById("id1");
var myPara = document.getElementById("para2");
var removedItem = myDiv.removeChild(myPara);
alert(removedItem.getAttribute("id"));
```

編輯元素屬性

var myPara = document.getElementById("para1");
myPara.setAttribute("title", "opening paragraph");

動態加載 JavaScript 文件

var scr = document.createElement("script");
scr.setAttribute("src", "newScript.js");
document.head.appendChild(scr);

3.4 JSON 簡介

3.4.1 JSON 是什麼

使用 JSON 表示法時,對象可以方便的轉換為字符串來進行存儲和轉換
JSON 的真正優雅之處在於對象在 JSON 里以普通 JS 代碼錶示,因此可以利用 JS “自動” 解析功能

JSON 語法

var jsonObject = {
    "param1": "value1",
    "param2": "value2"
}

3.4.2 訪問 JSON 數據

eval 函數參數:
1. 表達式
2. 表達式字符串
3. 字符串,其中是括號包含的 json

var x = eval(1*2);
eval("a=1;b=2;document.write(a+b);");
var user = '{"user":"admin", "location": "spain"}';
var myObject = eval('(' + user + ')');

使用直接瀏覽器 JSON 支持
- 最新瀏覽器都對 JSON 提供直接支持,所以可以不用 eval 函數
- 瀏覽器會創建一個名為 JSON 的 JS 對象來管理 JSON 的編碼和解碼,這個對象有兩個方法,stringify() 和 parse()

使用 JSON.parse()

var Mary = '{"h": 1.9, "age": 12}';
var myObject = JSON.parse(Mary);
var out = "";
for (i in myObject) {
    out += i + " = " + myObject[i] + "\n";
}
alert(out);

3.4.3 JSON 的數據序列化

使用 JSON.stringify()

var Dan = new Object();
Dan.height = 1.85;
Dan.age = 41;
Dan.eyeColor = "blue";
alert(JSON.stringify(Dan));

3.4.4 JSON 數據類型

參數部分的規則
1. 不能是 JS 保留的關鍵字
2. 不能数字開頭
3. 特殊字符只能有下劃線和美元符號
值可以是以下數據類型
1. 數值
2. 字符串
3. 布爾值
4. 數組
5. 對象
6. null

3.4.5 模擬關聯數組

在 JS 中,object[“property”] 和 object.property 是對等的

var conference = {"a": "1", "b": "2"};
alert(conference["a"]);
alert(conference.a);

3.4.6 使用 JSON 創建對象

用方括號表示數組 var categories = [“news”, “sports”];

屬性

var user = {“a”: 1, “b”: 2}; var name = user.a;

方法

var user = {
    "a": 1,
    "setName": function(newName) {
        this.username = newName;
    }
}
user.setName("heheda");

當 JSON 作為通用數據交換格式時,值不能放函數

數組

var bookListObject = {
    "a": [1, 2, 3]
}
var book = bookListObject.a[1];

對象

3.4.7 JSON 安全性

eval() 能執行任何 JS 命令,對於來源不明的 JSON 數據可能存在安全問題,安全的辦法是使用內置 JSON 解析器,它只識別 JSON 文本而不會執行腳本命令

4 用 JavaScript 操作 Web 界面

4.1 HTML 與 JavaScript 編程

4.1.1 HTML5 的新標籤

section
header
footer
nav
article
aside
figure
figcaption
summary

4.1.2 一些重要的新元素

用<video> 回放視頻
用 canPlayType() 測試可用的格式
- media.canPlayType(“video/webm”);

控制回放

var myVideo = document.getElementById("vid1").play();
var myVideo = document.getElementById("vid1").pause();

用<audio> 標籤播放聲音

var soundElement = document.createElement('audio');
soundElement.setAttibute('src', 'sound.ogg');
soundElement.play();
soundElement.currentTime = 12;

用<canvas> 在頁面上繪圖

4.1.3 拖放

4.1.4 本地存儲

兩個對象 localStorage sessionStorage

if (typeof(Storage) != "undefined") {
    localStorage.setItem("key", "value");
    localStorage["key"] = "value";
    alert(localStorage.getItem("key"));
    alert(localStorage["key"]);
}

4.1.5 操作本地文件

查看瀏覽器的支持情況
- if (window.File && window.FileReader && window.FileList)

4.2 JavaScript 和 CSS

4.2.1 CSS 簡介

從內容分離樣式
CSS 樣式聲明
在哪裡保存樣式聲明

4.2.2 DOM 的 style 屬性

4.2.3 用 className 訪問類

4.2.4 DOM 的 styleSheets 對象

啟用,禁用和切換樣式表

4.3 CSS3 簡介

5 與 JavaScript 工具相關的高級技術

5.1 讀取和寫入 cookie

5.1.1 什麼是 cookie

cookie 的局限性

5.1.2 使用 document.cookie 屬性

數據的編碼和解碼

var str = 'hehe (aa) .';
document.write(str + '<br />' + escape(str));

5.1.3 cookie 組成

cookieName 和 cookieValue
domain 用於指明 cookie 屬於哪個域,如果為 a.com ,則 b.a.com 可以訪問這個 cookie
path 指定可以使用 cookie 的路徑
secure 表明瀏覽器把 cookie 發給服務器時,是否要使用 SSL 標準
expires 以 UTC 標準的過期時間

5.1.4 編寫 cookie

var cookieDate = new Date ( 2018, 05, 15 );
var user = "heheda";
document.cookie = "username=" + escape(user)  + ";expires=" + cookieDate.toUTCString();

5.1.5 編寫一個函數來寫 cookie

5.1.6 讀取 cookie

5.1.7 刪除 cookie

把一個 cookie 的失效日期設置為今天之前即可

5.1.8 在一個 cookie 里設置多個值

5.2 用正則表達式匹配模式

5.2.1 創建正則表達式

JS 里兩種生成正則表達式的方法

使用正則表達式字符串字面量
- var myRegExp = FooBar;
```
var myRepExp = /FooBar/;
if (document.getElementById("txt").value.search(myRegExp) == -1) {
    alert("not found");
} else {
    alert("The string occurs");
}
```
- 正則表達式修飾符
i 不區分大小寫 g 全局匹配,而不是找到第一個匹配就停止 m 多行匹配 var aa = /stupid/gi;
- 方括號[]指定範圍
- 處理特殊字符的快捷方式,元字符 \w 等
- 正則表達式限定符 + 重複次數等

使用 JS 的 RegExp 對象

var myPattern = new RegExp("Foobar");
var result = /boy/.exec("heheda");
console.log(result[0]);
myPattern.test("this is a test");
var result = myPattern.exec(myString);

對正則表達式使用字符串方法

match search replace split

var myString = "heheda dada";
var outString = myString.match(/\d+/g);

var myString = "1 ;2 3;4 5";
var outString = myString.split(/\s*;\s*/);

myString.replace(/stupid/ig, "cupid");

用一個函數作為 replace() 的參數

function CtoF(match) {
    return ((match * 9) / 5) + 32;
}
var myString = "for 1 and 5";
myString = myString.replace(/\d+/g, CtoF);

5.3 理解並使用閉包

5.3.1 回顧作用域的相關知識

5.3.2 從一個函數返回另一個函數

5.3.3 實現閉包

閉包是訪問父作用域的一個函數,即便是在該作用域已經結束之後.

傳遞參數

function sayHi(visitor) {
    let msg = visitor + ' says: hello world!';
    return function logMessage() {
        console.log(msg);
    }
}

編輯一個閉包變量

function sayHi(visitor) {
    let msg = visitor + ' says: ';
    return function logMessage(extra) {
        msg = msg + extra;
        console.log(msg);
    }
}
var helloPhil = sayHi("Phil");
var helloSue = sayHi("Sue");

閉包和變量

閉包也允許將一些數據和操作這些數據的函數關聯起來

function sayHi(visitor) {
    let msg = visitor + ' says: hello world';
    return function logMessage() {
        console.log(msg);
    }
}
var helloPhil = sayHi("Phil");
helloPhil()

對象提供了靈活性,但是到處都可以修改,容易出現錯誤.

5.4 用模塊組織代碼

5.4.1 為何使用模塊

模塊使得代碼更容易維護
模塊幫助復用代碼
模塊有助於整齊的全局作用域

5.4.2 模塊基礎知識

一個文件一個模塊,模塊中的內容對外部不可見.
模塊是通過 CORS 跨源資源共享來獲取的

如何包含一個 JS 模塊

JS 要求對模塊使用相對路徑

<head>
  <script type="module" src="./myModule.js"></script>
</head>

nomodule 關鍵字

<script nomodule src=“fallback-option.js”></script>

5.4.3 導出

function fun1(x) {
    alert(x);
}
export func1;

一個簡單的示例模塊

function convertCtoF(c) {
    return (c*1.8) + 32;
}
function convertFtoC(c) {
    return (f-32) / 1.8;
}
export {convertCtoF, convertFtoC}

export var a = "something";
export function func1() {console.log("hello");};

如何在導出時重命名

export var distance = arr[1];
export {arr as routeProperties };

具名的和默認的導出

function mmToInches(d) {
    return d/25.4;
}
export default mmToInches;

5.4.4 導入

import {convertCtoF, convertFtoC} from './tempConvert.js';

默認導入

function mmToInches(d) {
    return d/25.4;
}
export default mmToInches;

import toInches from './convert.js';
console.log(toInches(100));

如何在導入的過程中重命名

import {convertCtoF as cF } from ’./tempConvert.js’;
如何把一個模塊導入為一個對象

import * as temps from ’./tempConvert.js’;

6 專業技能

6.1 良好的編程習慣

6.1.1 避免過度使用 JS

6.1.2 編寫易讀和易維護的代碼

明智地使用註釋
- 代碼較長地函數或對象地簡要說明
- 對易混淆或易誤解代碼地註釋
- 原作者自己地技巧或經驗
- 關於代碼修改地註釋
使用適當地文件名稱,屬性名稱和方法名稱
盡量復用代碼
不要假設

6.1.3 平穩退化

6.1.4 漸進增強

分離樣式,內容和代碼

6.1.5 代碼分離的 JS

脫離 HTML
僅把 JS 作為性能增強手段

6.1.6 功能檢測

6.1.7 妥善處理錯誤

使用 try 和 catch

6.2 調試代碼

6.2.1 調試簡介

錯誤類型
- 語法錯誤
- 運行時錯誤
- 邏輯錯誤
選擇程序員地編輯器
用 alert() 進行簡單調試

6.2.2 更高級地調試

控制台
- console console.log() console.warn() console.info() console.error()
分組消息
- console.group() console.groupEnd() 之間的 log 信息會分組显示
用斷點停止代碼執行
條件性斷點
從代碼中啟動調試器
- debugger;
驗證 JS

6.3 繼續深入學習

6.3.1 為什麼要使用庫

6.3.2 庫能做什麼

一般庫的功能
1. 封裝 DOM 方法
2. 動畫
3. 拖放
4. Ajax

6.3.3 一些常見的庫和框架

Prototype 框架
- 優勢在於 DOM 擴展和 Ajax 處理
Dojo
- 能夠簡化創建程序和用戶界面的工作
React
- 主要用於構建用戶界面
Node.js
- 允許在服務器上編寫和執行 JS
jQuery
- 簡化了 HTML 文檔轉換,事件處理,動畫等多種工作

6.3.4 jQuery 入門

在頁面里引用 jQuery
- 本地下載 <script src=“jquery-3.3.1.js”></script>
- 遠程 <script src=“”></script>
jQuery 的$(document).ready 處理器
- 類似於 window.onload
```
$(document).ready(function() {
    // code
});
```
選擇頁面元素
- $(“”) 即可選擇 HTML 元素 $(“span”) $(“#elem”) //id $(“.classname”) $(“div#elem”) $(“ul li a.menu”) / 類為 menu,且嵌套在列表項里的錨點 $(“p > span”) / p 的直接子元素 span $(“input[type=password]”) $(“p:first”) $(“p:even”) // 全部偶數段落 $(“:header”) //標題元素 $(“:button”) $(“:radio”) $(“:checkbox”) $(“:checked”)

操作 HTML 內容

html() 類似於 innerHTML

var htmlContent = $("#elem").html();
$("#elem").html("<p>here </p>");

text() 只是獲取文本內容

  var textContent = $("#elem").text()
  $("#elem").append("<p>hehe </p>");

attr()

var title = $("#elem").attr("title");
$("elem").attr("title", "new title");

显示和隱藏元素

JS 中 document.getElementById(“elem”).style.visibility = “visible”;

show()

$("div").show();
$("#elem").show("fast", function() {
    // 操作
});

hide()

$("#elem").hide("slow", function() {
    // 隱藏之後的操作
});

toggle()

$("#elem").toggle(1000, function() {
    // xx
});

命令鏈

jQuery 大多數方法都返回一個 jQuery 對象

$("#elem").fadeOut().fadeIn();
$("#elem").text("Hello ").fadeOut().fadeIn();

處理事件

常用方法

$("a").click(function() {
    //
});
function hello() {
    alert("hello");
}
$("a").click(hello);
$("a").on("click", hello);

常見事件 blur focus hover keypress change mousemove resize scroll submit select

6.3.5 The jQuery UI

jQuery UI 提供了高級的效果和可以主題化的掛件

jQuery UI 是什麼
```
$("#datepicker").datepicker();
```

6.3.6 Ajax 簡介

Ajax 入門
XMLHttpRequest 對象
- XMLHttpRequest 能夠建立與服務器的連接,發送 http 請求而不需要加載相應的頁面
- 默認 xhr 只能對同域發起請求,除非服務端做了設置
創建 request 對象
- var request = new XMLHttpRequest();
方法和屬性
- 屬性 onreadystatechage readyState responseText responseXML status statusText
- 方法 abort() getAllResponseHeaders() getResponseHeader(x) open(’method’,’URL’,’a’) // a 默認為 true,表示異步 send(content) setRequestHeader(’x’,’y’)
與服務器通信
在服務器端發生了什麼
處理服務器響應
還有更容易的方法,不是嗎?

6.3.7 用 jQuery 實現 Ajax

load()

$(function() {
    $("#elem").load("newContent.html");
});

$(function() {
    $("#elem").load("newContent.html #info");
});

get() post()

$.get("serverScript.php",
      {param1: "value1", param2: "value2"},
      function(data) {
          alert("server response: " + data);
      });

ajax()
對錶單數據進行序列化 var formdata = $(’#form1’).serialize();

6.3.8 Node.js 簡介

Node.js 使用 V8 JavaScript 引擎

使用一種非阻塞的代碼模式

Author: cat

Created: 2019-11-13 Wed 22:40

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※想要讓你的商品成為最夯、最多人討論的話題?網頁設計公司讓你強力曝光

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!

※新北清潔公司,居家、辦公、裝潢細清專業服務

salesforce lightning零基礎學習(十四) Toast 淺入淺出

發佈日期: 2020-06-16 作者: admin

本篇參考：

Toast在項目中是基本不可能用不到的組件，用於在頁面頭部展示一條消息。之前也經常的用，但是沒有深入的研究過，最近正好開始做lightning項目，便深入研究了一下，發現比以前了解的稍微多點，特此總結，便於以後的查看以及給沒有接觸過的小夥伴掃個盲。

一. Toast

Toast 用於在頁面的頭部展示一條消息，比如我們在更新數據完成後會提示修改成功，出現異常會提示更新失敗等。Lightning將Toast封裝成了事件，我們只需要根據指定的步驟獲取Toast事件並且進行fire觸發即可。下方的demo中展示了toast的使用，使用 $A.get(“e.force:showToast”)便可以獲取事件，添加相關的屬性觸發即可實現Toast功能。

showToast : function(component, event, helper) {
    var toastEvent = $A.get("e.force:showToast");
    toastEvent.setParams({
        "title": "Success!",
        "message": "The record has been updated successfully."
    });
    toastEvent.fire();
}

那麼 Toast 有哪些參數呢？

title：此參數用於展示message的標題區域，通常標題會以稍微大的字體展示在上方；
duration：此參數用於設置當前的Toast展示多久后自動消失，單位為毫秒，此屬性可以不填寫，默認為5秒中，如果設置的時間不足5秒也會按照5秒處理；
message：此參數用於展示显示Toast的內容；
mode：Toast展示的模式，Toast支持三種模式：dismissible(展示的消息包含一個關閉按鈕，如果點擊按鈕則可以馬上Toast消失，如果不點擊則默認過5秒消失，這個是默認選項) / pester（不展示關閉按鈕，過幾秒以後自動消失） / sticky（只展示關閉按鈕，不點擊關閉按鈕則永遠不消失）
type：Toast的類型，不同的類型會展示不同的圖標以及不同的顏色樣式。可選擇的值有： error / warning / success / info / other。前四個我們可能經常用，最後一個不經常用，其實other是此屬性的默認值，展示的顏色樣式和info相同，區別是此種不展示圖標。當然不展示圖標不是絕對的，如果搭配了key屬性可以展示其他的圖標，所以如果我們想要展示info的樣式但是不想使用info的圖標，我們可以考慮使用other然後設置key即可。
key：當我們的type選擇了other的情況下，此處可以指定toast裏面展示的other圖標，名字可以在lightning design system的icon中選擇。
messageTemplate：上面的message用於Toast的消息展示，但是只能展示String字符串的信息，如果我們需要其他增強的功能展示（比如想要在toast的message中展示一個可以點擊的URL），我們需要使用messageTemplate通過placeholder放入形參，使用messageTemplateData進行填充。 messageTemplate的placeholder很像我們在custom label中聲明，也是從0開始，使用{}.比如Record {0} created! See it {1}這裏就設置了兩個placeholder，messageTemplateData需要傳兩個參數進來。
messageTemplateData：當時用了messageTemplate以後，需要使用此屬性去將placeholder的值進行替換，裏面封裝的是一組text文本以及其對應的action。

除了Toast以外，小夥伴們可以自行查看： lightning:overlayLibrary（通過Modal 以及 popover展示消息） / lightning:notificationsLibrary（通過notice和toast方式展示消息）

上面既然已經描述完Toast的所有屬性以及Toast所能實現的功能，那麼我們接下來對常用的展示可以進行一些簡單的優化和處理。

場景一. 內容多行展示

Toast默認只能展示單行的內容，我們做了一個demo，將toast設置了sticky，這樣我們可以查看到Toast的html的解析的實現，實現如下圖所示。通過圖片中的css內容我們可以看到toast的內容使用toastMessage forceActionsText兩個進行渲染，因為css渲染也有前後順序，我們只需要對這兩個css樣式進行重寫，設置white-space: pre-line !important; 即可，意為如果有空格情況下，合併所有空行並且保留換行，然後message中對需要換行的地方使用\n進行字符串分隔即可從而實現換行的。

我們嘗試的在當前的component bundle的css重新渲染此樣式發現不可用，所以只能引入外部的static resource覆蓋此樣式。

.toastMessage.forceActionsText{
    white-space : pre-line !important;
}

方式為創建css,內容為上面描述的內容，然後命名上傳到 static resource，代碼引入即可。demo中我們命名的static resource名稱為multipleLineToastCss。

代碼中我們只需要<ltng:require styles=”{!$Resource.multipleLineToastCss}”/>即可。

我們做了簡單的demo去驗證：

<aura:component implements="flexipage:availableForAllPageTypes">
    <ltng:require styles="{!$Resource.multipleLineToastCss}"/>
    <lightning:button variant="brand" label="show toast" onclick="{!c.showToast}"/>
</aura:component>

對應的controller.js

showToast : function(component, event, helper) {
   var toastEvent = $A.get("e.force:showToast");
   toastEvent.setParams({
        mode: 'sticky',
        title: 'Info',
        type: 'info',
        message: 'test message\ntest multiple lines'
    });
    toastEvent.fire();
}

場景二. Toast展示可點擊的URL

某些場景下，我們需要展示Toast的時候搭配URL，用戶點擊URL后跳轉到某個頁面。此種情況下我們只需要使用 messageTemplate 以及 messageTemplateData進行搭配即可實現。

showMyToast : function(component, event, helper) {
    var toastEvent = $A.get("e.force:showToast");
    toastEvent.setParams({
        mode: 'sticky',
        message: 'This is a required message',
        messageTemplate: 'Record {0} created! See it {1}!',
        messageTemplateData: ['Salesforce', {
            url: 'http://www.salesforce.com/',
            label: 'here',
            }
        ]
    });
    toastEvent.fire();
}

場景三. 換 Toast的message的圖標

我們知道當toast的type賦值時，針對success/warning/error/info都會有默認的樣式以及圖標，當我們需要展示其他的圖標時，我們只需要設置type為other或者不設置type（默認為other），然後設置key即可。key的話，我們可以找到lightning design system中的icon的名稱賦值即可。

showToast : function(component, event, helper) {
    var toastEvent = $A.get("e.force:showToast");
    toastEvent.setParams({
        mode: 'sticky',
        title: 'Info',
        type: 'other',
        key:'like',
        message: 'test message\ntest multiple lines'
    });
    toastEvent.fire();
}

二. aura:method

很多內容我們可以進行公用的組件化操作，比如針對toast的展示（我們只需要設置方法傳遞參數，調用即可，不需要每個component的controller/helper js方法都重複的聲明Toast的聲明以及觸發），針對picklist值獲取，針對錶字段label的獲取。製作公用組建需要先了解一個aura封裝的組件名稱，aura:method。

我們在前端正常去進行方法調用通常是綁定一個handler或者執行某個事件從而去調用方法，使用aura:method定義一個方法可以作為組件的API的一部分，這樣我們在client-controller部分可以直接調用此方法。使用aura:method可以設置傳入的參數，也可以設置返回的同步或者異步的結果，所以通常我們可以使用aura:method去做共用組建的內容，作為公用組件，使用aura:method去聲明，其他的component只需要引入此公用組件便有權限直接調用aura:method聲明的方法了。

aura:method總共有以下的屬性：

name：用來聲明方法的名稱，後期調用直接使用此方法調用，傳遞相關的參數即可；
action：此方法要去調用的client-controller的方法；
access：public(在相同namespace的component可以調用此方法) / global(在所有的namespace的component可以調用此方法)；
description：方法描述。

除了以上屬性以外，方法還要有參數，使用aura:attribute去聲明方法體里的參數項。aura:method可以實現同步以及異步的返回，感興趣的可以查看細節，下面內容為通過aura:method實現Toast公用組件。

ToastServiceComponent.cmp

<aura:component access="global">
    <ltng:require styles="{!$Resource.multipleLineToastCss}"/>

    <aura:method access="global" name="showToast" action="{!c.showToastAction}">
        <aura:attribute name="message" type="String" description="the body message will show. use \n to break lines" required="true"/>
        <aura:attribute name="displayTitle" type="String" description="the title hearder will show" required="true"/>
        <aura:attribute name="displayType" type="String" description="success/warning/error/info/other"/>
        <aura:attribute name="mode" type="String" description="dismissible/pester/sticky"/>
        <aura:attribute name="key" type="String" description="you can set name from lightning design system icon section"/>
    </aura:method>

</aura:component>

ToastServiceComponentController.js

({
    showToastAction : function(component, event, helper) {
        var params = event.getParam('arguments');
        var toastEvent = $A.get("e.force:showToast");
        var type = params.displayType;
        if(params.key) {
            type = 'other';
        }
        if(!params.mode) {
            params.mode = 'dismissible';
        }
        toastEvent.setParams({
            "title": params.displayTitle,
            "message": params.message,
            "type": type,
            "mode":params.mode,
            "key": params.key
        });

        toastEvent.fire();
    }
})

接下來是調用：

SimpleToastDemo.cmp：需要引入ToastServiceComponent，設置一個local id

<aura:component implements="flexipage:availableForAllPageTypes">
    <c:ToastServiceComponent aura:id="toastService"/>
    <lightning:button variant="brand" label="show toast" onclick="{!c.showToastHandler}"/>
</aura:component>

SimpleToastDemoController.js： find到aura:id，然後調用方法即可。

({
    showToastHandler : function(component, event, helper) {
        var toastService = component.find('toastService');
        toastService.showToast('this is a toast demo\n this can allow multiple lines\nhere we show like icon','simple toast demo','other','dismissible','like')
    }
})

展示如下：

總結：篇中簡單介紹Toast以及aura:method，詳細了解的自行查看文檔，感興趣的最好了解一下 lightning:overlayLibrary以及lightning:notificationsLibrary。篇中有錯誤的地方歡迎指出，有不懂的歡迎留言。

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!!

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!

※幫你省時又省力,新北清潔一流服務好口碑

※別再煩惱如何寫文案,掌握八大原則!

豐田「未來」多國上路，台灣氫燃料車未來何在？

發佈日期: 2020-06-11 作者: admin

日本豐田汽車在去年推出FCEV氫燃料電池車「Mirai（未來）」，目前已在日本、德國、比利時、丹麥、美國等多個國家上市。目前台灣因欠缺相關法規與氫能政策，仍無法讓FCEV上路，或讓氫燃料電池技術廣泛使用。

豐田的Mirai是全球首輛FCEV，電力來自氫燃料電池；運轉時只會產生水，沒有任何廢氣與污染物，且「加氫」也只需要3分鐘就能行駛650公里。日本相當重視氫燃料電池技術，致力於打造「氫社會」，目標在2020年時讓FCEV的市佔率達到1%。目前除了豐田之外，本田汽車也將在今年推出另一款FCEV。

總統當選人蔡英文日前試乘Mirai，負責接待的和泰汽車協理黃明顯表示，目前台灣只有汽油車、柴油車與電動車的檢驗標準，FCEV無法可用，因此自然不能上路。若要在台灣引進FCEV，則政府須就汽車法規與氫燃料政策進行探討，才有可能看到台灣FCEV的「未來」。

豐田Mirai的訂價大約是700萬日幣，日本民眾在國內購買時享有補助，僅需約500萬日幣就能購置。加上日本計畫將2020東京奧運的選手村打造純氫氣功能的「氫氣城」，相關規章與建設正如火如荼展開當中。相較之下，台灣尚無適用法規，自然也就還沒有引入氫燃料的機會。

FCEV較有疑慮的問題是加氫站的設置。除了FCEV與加氫站的數量需到達一定規模才能具有較好的經濟效益外，由於氫容易燃燒，因此加氫站以及相關管線、設備都需就安全性進行多考量，並解決周遭居民的疑慮。Mirai 採用高纖維儲存氫氣，若氫氣外洩時將會自動啟動隔離閥，也有快速揮散氫氣的功能，藉此確保Mirai的行車安全。

（圖：Honda於FC EXPO 2016 展出的氫燃料電池車）

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※想要讓你的商品成為最夯、最多人討論的話題?網頁設計公司讓你強力曝光

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!

比亞迪 6 月電動車銷量破 5,000 輛奪全球銷售冠軍

發佈日期: 2020-06-11 作者: admin

比亞迪 6 月新能源汽車銷量突破 5,000 輛，更連續第 2 個月超越特斯拉 (Tesla)、日產 (Nissan) 等競爭對手，成為當月全球新能源汽車銷售冠軍。比亞迪汽車於 3 日在其官方微博公布，今年 6 月，比亞迪以 5,037 輛的銷量，力壓特斯拉的 4,994 輛，蟬聯全球新能源汽車單月銷售冠軍。目前，比亞迪全球市佔率為 10%，仍然落後於特斯拉的 11% 及日產的 13%。在上半年總銷量方面，比亞迪以 2.04 萬輛列第 3 位，日產及特斯拉分別以 2.71 萬及 2.16 萬輛，排首兩位。比亞迪新能源汽車銷量今年以來增長迅速，今年 5 月，中國傳統汽車銷量下跌，比亞迪新能源汽車銷量則首度突破 4,000 輛，超越日產及特斯拉成為該月銷量排名第 1 位。

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!!

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!

域名解析 | A記錄，CNAME，MX，NS 你懂了嗎

發佈日期: 2020-06-10 作者: admin

域名解析 | A記錄，CNAME，MX，NS 你懂了嗎

域名解析

什麼是域名解析？域名解析就是國際域名或者國內域名以及中文域名等域名申請后做的到IP地址的轉換過程。IP地址是網路上標識您站點的数字地址，為了簡單好記，採用域名來代替ip地址標識站點地址。域名的解析工作由DNS服務器完成。

如下圖，百度 www.baidu.com 就是域名，解析出來的IP 14.216.177.30 這個過程就是域名解析。

A 記錄

A (Address) 記錄是用來指定主機名（或域名）對應的IP地址記錄。用戶可以將該域名下的網站服務器指向到自己的web server上。同時也可以設置您域名的二級域名。又稱IP指向，用戶可以在此設置子域名並指向到自己的目標主機地址上，從而實現通過域名找到服務器。
　　說明：
　　·指向的目標主機地址類型只能使用IP地址；
　　1) 添加A記錄
　　在“主機名”中填入子域的名字，“類型”為A，“IP地址/主機名”中填入web服務器的IP地址，點擊“新增”按鈕即可。
　　注：如果“主機名”一欄為空則表示對域名mydomain.com本身做指向。
　　2) 修改A記錄
　　只要在“IP地址/主機名”一欄中將原來的IP地址直接修改為新IP地址，然後點擊“修改”按鈕即可。
　　3) 刪除A記錄
　　點擊要刪除的A記錄後面對應的“刪除”按鈕即可。
　　4) 泛域名解析
　　即將該域名所有未指定的子域名都指向一個空間。
　　在“主機名”中填入*，“類型”為A，“IP地址/主機名”中填入web服務器的IP地址，點擊“新增”按鈕即可。
　　5) 負載均衡的實現：
　　負載均衡(Server Load Balancing，SLB)是指在一系列資源上面動態地分佈網絡負載。負載均衡可以減少網絡擁塞，提高整體網絡性能，提高自愈性，並確保企業關鍵性應用的可用性。
　　當相同子域名有多個目標地址時，表示輪循，可以達到負載均衡的目的，但需要虛擬主機服務商支持。

CNAME記錄

別名記錄。這種記錄允許您將多個名字映射到另外一個域名。通常用於同時提供WWW和MAIL服務的計算機。例如，有一台計算機名為“host.mydomain.com”（A記錄）。它同時提供WWW和MAIL服務，為了便於用戶訪問服務。可以為該計算機設置兩個別名（CNAME）：WWW和MAIL。這兩個別名的全稱就 http://www.mydomain.com/和“mail.mydomain.com”。實際上他們都指向 “host.mydomain.com”。通常稱別名指向。您可以為一個主機設置別名。比如設置test.mydomain.com，用來指向一個主機www.rddns.com那麼以後就可以用test.mydomain.com來代替訪問www.rddns.com了。
　　說明：
　　·CNAME的目標主機地址只能使用主機名，不能使用IP地址；
　　·主機名前不能有任何其他前綴，如：http://等是不被允許的；
　　·A記錄優先於CNAME記錄。即如果一個主機地址同時存在A記錄和CNAME記錄，則CNAME記錄不生效。
　　1) 添加CNAME記錄
　　在“主機名”中填入子域的名字，“類型”為CNAME，“IP地址/主機名”中填入目標地址，點擊“新增”按鈕即可。
　　2) 修改CNAME記錄
　　只要在“IP地址/主機名”一欄中將原來的目標地址直接修改為新地址，然後點擊“修改”按鈕即可。
　　3) 刪除CNAME記錄
　　點擊要刪除的CNAME記錄後面對應的“刪除”按鈕即可。

MX 記錄

郵件交換記錄。用於將以該域名為結尾的电子郵件指向對應的郵件服務器以進行處理。如：用戶所用的郵件是以域名mydomain.com為結尾的，則需要在管理界面中添加該域名的MX記錄來處理所有以@mydomain.com結尾的郵件。
　　說明：
　　·MX記錄可以使用主機名或IP地址；
　　·MX記錄可以通過設置優先級實現主輔服務器設置，“優先級”中的数字越小表示級別越高。也可以使用相同優先級達到負載均衡的目的；
　　·如果在“主機名”中填入子域名則此MX記錄只對該子域名生效。
　　1)添加MX記錄
　　“主機名”一欄為空，“類型”為MX，“IP地址/主機名”中填入目標地址或IP，“優先級”里填入数字（必須為整數），點擊“新增”按鈕即可。
　　2) 修改MX記錄
　　只要在“IP地址/主機名”一欄中將原來的目標地址或IP直接修改為新地址或IP，然後點擊“修改”按鈕即可。
　　3) 刪除MX記錄
　　點擊要刪除的MX記錄後面對應的“刪除”按鈕即可。
　　4) 負載均衡
　　服務器負載均衡(Server Load Balancing，SLB)是指在一系列資源上面智能地分佈網絡負載。負載均衡可以減少網絡擁塞，提高整體網絡性能，提高自愈性，並確保企業關鍵性應用的可用性。
　　當域名的MX記錄有多個目標地址且優先級相同時，表示輪循，可以達到負載均衡的目的，但需要郵箱服務商支持。

NS 記錄

解析服務器記錄。用來表明由哪台服務器對該域名進行解析。這裏的NS記錄只對子域名生效。例如用戶希望由12.34.56.78這台服務器解析news.mydomain.com，則需要設置news.mydomain.com的NS記錄。
　　說明：
　　·“優先級”中的数字越小表示級別越高；
　　·“IP地址/主機名”中既可以填寫IP地址，也可以填寫像ns.mydomain.com這樣的主機地址，但必須保證該主機地址有效。如，將 news.mydomain.com的NS記錄指向到ns.mydomain.com，在設置NS記錄的同時還需要設置ns.mydomain.com的指向，否則NS記錄將無法正常解析；
　　·NS記錄優先於A記錄。即，如果一個主機地址同時存在NS記錄和A記錄，則A記錄不生效。這裏的NS記錄只對子域名生效。
　　1) 添加NS記錄
　　在“主機名”中填入子域的名字，“類型”為NS，“IP地址/主機名”中填入解析服務器的IP地址或名稱（如ns.mydomain.com），點擊“新增”按鈕即可。
　　2) 修改NS記錄
　　只要在“IP地址/主機名”一欄中將原來的服務器目標地址或IP直接修改為新地址或IP，然後點擊“修改”按鈕即可。
　　3) 刪除NS記錄
　　點擊要刪除的NS記錄後面對應的“刪除”按鈕即可。

使用A記錄和CNAME進行域名解析的區別

A記錄就是把一個域名解析到一個IP地址（Address，特製数字IP地址），而CNAME記錄就是把域名解析到另外一個域名。其功能是差不多，CNAME將幾個主機名指向一個別名，其實跟指向IP地址是一樣的，因為這個別名也要做一個A記錄的。但是使用CNAME記錄可以很方便地變更IP地址。如果一台服務器有100個網站，他們都做了別名，該台服務器變更IP時，只需要變更別名的A記錄就可以了。

使用A記錄和CNAME哪個好？

域名解析CNAME記錄A記錄哪一種比較好？如果論對網站的影響，就沒有多大區別。但是：CNAME有一個好處就是穩定，就好像一個IP與一個域名的區別。服務商從方便維護的角度，一般也建議用戶使用CNAME記錄綁定域名的。如果主機使用了雙線IP，顯然使用CNAME也要方便一些。

A記錄也有一些好處，例如可以在輸入域名時不用輸入WWW.來訪問網站哦！從SEO優化角度來看，一些搜索引擎如alex或一些搜索查詢工具網站等等則默認是自動去掉WWW.來辨別網站，CNAME記錄是必須有如：WWW(別名)前綴的域名，有時候會遇到這樣的麻煩，前綴去掉了默認網站無法訪問。

有人認為，在SEO優化網站的時候，由於搜索引擎找不到去掉WWW.的域名時，對網站權重也會有些影響。因為有些網民客戶也是不喜歡多寫三個W來訪問網站的，網站無法訪問有少量網民客戶會放棄繼續嘗試加WWW.訪問域名了，因此網站訪問瀏覽量也會減少一些。

也有人認為同一個域名加WWW.和不加WWW.訪問網站也會使網站權重分散，這也是個問題。但是可以使用301跳轉把不加WWW.跳轉到加WWW.的域名，問題就解決了

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※想要讓你的商品成為最夯、最多人討論的話題?網頁設計公司讓你強力曝光

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!

Table of Contents

1 JavaScript 基礎

1.1 JavaScript 簡介

1.1.1 Web 腳本編程基礎

1.2 創建簡單的腳本

1.2.1 在 Web 頁面里添加 JavaScript

1.2.2 編寫 JavaScript 語句

1.2.3 變量

1.2.4 操作符

1.2.5 捕獲鼠標事件

1.3 使用函數

1.3.1 基本語法

1.3.2 調用函數

1.4 函數的更多知識

1.4.1 變量作用域

1.4.2 箭頭函數

1.4.3 設置默認參數

1.5 DOM 對象和內置對象

1.5.1 與用戶交互

1.5.2 根據 id 選擇元素

1.5.3 訪問瀏覽器歷史記錄

1.5.4 使用 location 對象

1.5.5 日期和時間

2 JavaScript 編程

2.1 数字和字符串

2.1.1 數值

2.1.2 全局方法

2.1.3 Number 對象

2.1.4 Number() 函數

2.1.5 布爾值

2.1.6 null(空) 和 undefined(未定義)

2.2 操作字符串

2.2.1 字符串

2.2.2 模板字符串

2.3 數組

2.3.1 數組

2.3.2 如何遍曆數組

2.3.3 三點表示法

2.4 用 JavaScript 處理事件

2.4.1 事件的類型

2.4.2 事件處理器

2.4.3 event 對象

2.5 程序控制

2.5.1 條件語句

2.5.2 循環和控制結構

2.5.3 設置和使用定時器

3 理解 JavaScript 對象

3.1 面向對象編程

3.1.1 什麼是面向對象編程

3.1.2 創建對象

3.1.3 用 prototype 擴展和繼承對象

3.1.4 封裝

3.2 對象進階

3.2.1 類

3.2.2 對象繼承

3.2.3 使用功能檢測

3.3 DOM 腳本編程

3.3.1 DOM 節點

3.3.2 用 getElementsByTagName() 選擇元素

3.3.3 讀取元素的屬性

3.3.4 Mozilla 的 DOM 查看器

3.4 JSON 簡介

3.4.1 JSON 是什麼

3.4.2 訪問 JSON 數據

3.4.3 JSON 的數據序列化

3.4.4 JSON 數據類型

3.4.5 模擬關聯數組

3.4.6 使用 JSON 創建對象

3.4.7 JSON 安全性

4 用 JavaScript 操作 Web 界面

4.1 HTML 與 JavaScript 編程

4.1.1 HTML5 的新標籤

4.1.2 一些重要的新元素

4.1.3 拖放

4.1.4 本地存儲

4.1.5 操作本地文件

4.2 JavaScript 和 CSS

4.2.1 CSS 簡介

4.2.2 DOM 的 style 屬性

4.2.3 用 className 訪問類

域名解析 | A記錄，CNAME，MX，NS 你懂了嗎