javascript/ES6/TypeScript/Juqery/Jquery-ui語法相關筆記

整日遊離於C/C++/C#/TS/JS/pyton/SQL之間，還有一堆框架，整我的都快魔怔了! （學不動黨表示人間不值得！）

備查筆記，記錄一些Web腳本相關的語法和特性，隨緣更新法

 

Q.javascript的類/靜態函數/成員變量/成員等實現方式

雖然只有是個正經公司都開始用typescript或ES6了，可是原生js的閉包和原型鏈概念仍是有必要搞清楚滴.

 

1.class相關：

　　 1.0：類的實現方式（閉包和原型鏈）:

　　　　wait

 　　1.1 成員變量/函數：

　　　　wait

　　 1.2 靜態函數/變量:

　　　　wait

　　 1.3 Javascript繼承:

　　　　wait

 

Q.javascript 模版字符串新語法糖：

跟C#的新字符串語法糖相似.

let testobj = {str : 'hello world.'};
let str = `$hi, ${testobj.str} `;
console.log(str);

 

Q.javascript(js)的三個點(...)運算符：

1.spread運算:

　　語法糖，可快速向數組添加數組:

　　

let arr = [{id :'a'},{id :'b'},{id :'c'}];  
let arr1 = [{id :'d'},{id :'e'},{id :'f'}];
/**
* arr新的數據爲：[{"id":"a"},{"id":"b"},{"id":"c"},{"id":"d"},{"id":"e"},{"id":"f"}]；
**/

2.可變函數參數,rest運算:

　　函數參數動態化：

　　跟c++的(...)和C#的params object[]同樣的東西.都是用於可變參數(C++還能夠用於可變模板類型數)：

function test(...aaa){console.log(aaa);}
test('a',12312,{id :1231});

///aaa的數據結構爲：["a", 12312, {id:1231}]

 

3.JavaScript深拷貝:

　　之前作深拷貝要麼用JSON.stringify和JSON.parse，要麼本身擴展clone函數遍歷屬性

　　如今能夠用ES6的(...)語法，實現深拷貝：

let t = {id: 1};
let t1 = {...t};
t.id = 10000;

console.log('t:', t,'t1:' t1);
/**
* t = {id:10000};t1 = {id:1};   
*/

 

Q.Vue下的TypeScript 編程報 沒法調用類型缺乏調用簽名的表達式。類型「VueRouter」沒有兼容的調用簽名。(TS2349)：

 

如vue-Router

 

declare interface Vue {
$router: (options?: any) => VueRouter
}

 

Q.Vue下的TypeScript 編程報 Syntax Error: Unexpected token：

一般是引用腳本是沒注意.

須要指定lang="ts"才行 例如：

<script lang="ts" src="./index.ts"></script>

Q.TypeScript的Jquery和JqueryUI：

雖然有

@types/Jquery

@types/jqueryui

這倆個包，可是仍是以爲直接引用腳本比較方便。

 

以Vue+TypeScript爲例。

在Vue-Cli腳手架下的

首先，在Index.html 裏添加

    <!-- jquery ui -->
    <link rel="stylesheet" href="./static/lib/JqueryUI/jquery-ui.min.css">
    <script src="./static/lib/JqueryUI/jquery-2.2.4.min.js"></script>
    <script src="./static/lib/JqueryUI/jquery-ui.min.js"></script>
    <!-- jquery ui -->

而後，須要用到的Ts或gobal.d.ts文件裏添加如下代碼（其餘全局對象同理如Moment.js）：

declare const $:any;

 如今，就能夠在TS裏使用$進行Dom操做了