7256 / javascriptnotes Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 0.0 166 KB

HTML 23.27% JavaScript 59.94% TypeScript 16.79%

javascriptnotes's People

Contributors

Stargazers

Watchers

javascriptnotes's Issues

highlight.js

改变代码高亮样式主题

https://highlightjs.org/static/demo/ 有几十个代码主题

马克飞象自定义代码段风格

TypeScript入门

它是一种可以编译成 JavaScript 的编程语言，是为构建大型复杂应用程序的开发者们而设计的。它继承了许多语言的编程**，比如 C# 和 Java，并且相对于宽松自由式的 JavaScript，它添加了更多的规则和约束。

工作中使用 TypeScript的好处

工作中使用 TypeScript 确实有许多好处：

基于静态类型，用 TypeScript 编辑代码有更高的预测性，更易纠错。
由于模块，命名空间和强大的面向对象编程支持，使构建大型复杂应用程序的代码库更加容易。
TypeScript在编译为JavaScript的过程中，在它到达运行时间前可以捕获所有类型的错误，并中断它们的执行。
即将到来的 ** Angular 2 框架** 就是用 ** TypeScript ** 编写的，同时推荐开发人员在项目中也使用这种语言。

安装

基于Node,Npm

`npm install -g typescript"

版本查询

tsc -v

编辑器支持

Sublime直接安装TypeScipt,编译为Command+B，编译后生成 *.js 文件。支持函数参数提示，跳转，括号匹配等。

插件的详细使用

命令行编译方式

tsc main.ts编译后会生成一个main.js文件。

自动编译方式(自动化进程)

tsc main.ts --watch

配置文件tsconfig.json

项目的自动化配置

模式

参见这个模式 tsconfig模式

tsconfig.json可以是个空文件，那么编译器则使用默认编译选项，编译当前目录及其子目录下的所有文件。

命令行上提供的编译选项会覆盖tsconfig.json文件中的对应选项。

compileOnSave

在最顶层设置compileOnSave标记，可以让IDE在保存文件的时候根据tsconfig.json重新生成文件。例如

{	
   "compileOnSave":true,
   "compilerOptions": {
       "target" : "es6"
   }
}

在线编辑器

ts在线直观编辑器（ts to js），http://www.typescriptlang.org/playground

Vue的优势与劣势

https://www.agriya.com/blog/2017/05/15/pros-and-cons-of-vue-js-framework/

Vue2学习

参考 #16 安装 vue-cli

git clone https://github.com/bhnddowinf/vuejs2-learn.git
cd my-project
cnpm install
cnpm install vuex -S
npm run dev

git clone https://github.com/Splode/todo-app.git
cnpm install
npm run build
npm run dev

NG Conf 2017

Creat *** APP

react

npm install -g creat-react-app

next.js

npm install -g create-next-app

create-next-app my-app
cd my-app/
npm run dev

ReactXP

npm i -g create-xp-app

create-xp-app new MyProject
npm install or yarn

To run on web
npm run web-watch
Building for React Native (iOS, Android, Windows)
npm run rn-watch

npm start

https://github.com/react-native-training/create-xp-app

💛 ReactNative培训

https://github.com/react-native-training

ts

https://github.com/Microsoft 搜索 TypeScript- -Starter

ts-node

https://github.com/Microsoft/TypeScript-Node-Starter

💛 黑客松 https://github.com/sahat/hackathon-starter

ts-react

npm install -g create-react-app

create-react-app my-app --scripts-version=react-scripts-ts

https://github.com/Microsoft/TypeScript-React-Starter

ts-vue

https://github.com/Microsoft/TypeScript-Vue-Starter

TypeScript-React-Native-Starter

https://github.com/Microsoft/TypeScript-React-Native-Starter

TypeScript-WeChat-Starter

https://github.com/Microsoft/TypeScript-WeChat-Starter

TypeScript-Knockout-Starter

https://github.com/Microsoft/TypeScript-Knockout-Starter

Angular 4 新语法特性

Annotations(注解或装饰器)

@开头的是一个注解 , 这是一个从 TypeScript引入的语法

Multi-line Strings(多行字符串)

使用`反引号可以很容易地内联模板

Brackets for Parameters

Use [] brackets on an attribute to pass parameters to the directive

Class Syntax

TypeScript allows you to define classes using the class syntax

Events

One-way data binding means we fire events instead of modifying data directly

Actions

Our class defines actions that we can use in our view

Components(组件)

组件可以让你的浏览器使用新标签

Views(视图)

视图可以用模板选项来定义

Star Syntax(星语法)

使用 * 在这个元素上对属性使用指令

Parenthesis for View Actions(插入视图动作)

使用 () parenthesis 进行特殊的动作绑定。

Strong Typing(强类型)

来自 TypeScript 可以让我们定义包含我们的自定义类型的集合

Component Definition Class (通过类来定义组件)

使用一个类来定义新的组件

Node.js升级

先清除 npm cache

npm cache clean -f

安装n模块

npm install -g n

选择版本

然后就可以开始升级了：自动安装到最新的稳定版本命令是 n stable，自由选择版本安装是n 6.4.0（版本号）

查看当前版本

升级前后可先使用node -v 查看版本。

列出已安装版本

查看所有node版本是 n ls , 当前版本会有圈 , 未安装的版本字体置灰。

需要补习的技术之外的技能

在一般人的印象里，程序员都是一群略显呆滞，沟通能力不强的技术狂人。逻辑思维非同常人，但就是倒不出来。有些人通过找女朋友作为旁证，连经济适用男中的定义原型都是IT人士，月薪4000以上，不善言谈，最后娶一剩女为妻。看来我等程序员，真的只能被人如此定义了。虽说架构师技术层面上的东西与前例不可同日而语，但是也看到沟通能力上，程序员还有很大的发展空间。

rtmp推流方案

https://github.com/daniulive/SmarterStreaming

https://github.com/ossrs

前端架构相关知识

前端课题

TypeScript学习笔记

// ts_learn_note.ts

//2017年2月21日 学习笔记

var a = 12;
var a:number=12;


var b;
var b:any;

// 7.冲突检测(编译器会自动排除掉无用的选项)



// 8.联合类型

var c:number|string;

c=12;
c='abc';

// 9.数组也有类型

// var arr:number[]=[12,13,14];
var arr=[12,13,14];
// var arr=[12,'hao',13];
arr.push(55);


/*
类型
	基本类型：
	联合类型：选择
		var a:string|booolean;
	类型推测（隐式型类型申明）
			var a=12;
			var a:number=12;
	**tsc只编译，不执行，执行用node *.js**

	★类型检查的好处。
	强类型语言。

	ts函数参名和js有区别（参数个数，类型对应）
*/

/*
 函数类型
 	1.参数
 		有类型
 		签名检查---个数，类型对应
	2.返回值
		外部变量声明


*/


/* 引入外部变量,windows和document都是申明过的
declare var $;

$(function(){
	$('#div1').css('width','200px');
});

*/



/*
declare var Rapheal;
//windows和document都是ts申明过的,Rapheal是绘图库
window.onload=function(){
	document.getElementById('div1').onclick=function(){
		alert('abc');
		var page=Rapheal(0,0,400,300);
	};
};

*/

/*
	★函数可以有签名,ts基于es6
	签名就是参数，个数，返回什么样的

	function ajax(url:string,success:(res:string,code:number)=>void,
	error:(code:number)=>void){
	;
}

ajax(
	'1.txt',
	function(str:string,code:number){

	},
	function(code:number){

	}
	);

*/


/*
	类型:
		1.基本类型
		2.联合类型--选择
		3.函数签名
		4.复合类型（Object Type官方叫法）


	// 可选参数
	var obj:{x:number,y:number,z?:number};
	obj={x:12,y:5};
	obj={x:12,y:5,z:99}

*/

/*
接口（和JAVA的接口有区别）

接口：约定、限制(必须遵守的规范)

和枚举的区别，接口约定的是成员不是值。

	interface Point{
		x:number,
		y:number
	}

	var p:Point;

	p={x:5,y:6};

*/


/*
	class,extend,多继承
*/

/*

	访问修饰符
	1.public
	2.private
	3.protected 受保护-友元	只有子类能用

*/


/*
	泛型（在大型项目才体现出优势），和“any”有区别 ★ 宽泛

	class Calc<T>{
		a:T;
		b:T;
	}

	var obj = new Calc<number|string>();

	obj.a = 2;
	obj.b = 'abc';
*/

/*
	Array--泛型
	数组的实现
	interface Array<T>{
		reverse():T[];
		sort(compare?:(a:T,b:T)=>number);
		...
	}

	//Array的等效写法
	// var arr =[1,2];
	// var arr:number[]=[12,5];
	var arr:Array<number>=new Array();

*/


/*
	1.环境
	2.类型
	3.可选参数
	4.class写法
	5.interface--约定、规范
	6.泛型
*/

Johnny Five

Five

Async

https://promisesaplus.com/

VSCode typing 和 tsd

*.d.ts 类型定义文件

之前的版本,VSCode支持tsd ,下载 *.d.ts文件到 Typings文件夹 ,可以 command + 鼠标就可以跳转到定义文件了。

现在 tsd 逐渐被废弃, 微软想用 typing 取代 tsd 。typing 和 tsd 下载的 *.d.ts 文件不同, 打开来看看就会发现。typing 的 *.d.ts文件有 import * from "***" ,相当于引入 node_moudle 下的模块。所以, 你会看到 command + 鼠标跳转到cache目录下的 *.d.ts 文件, 不是项目目录下的 *.d.ts文件。

jsconfig.json typeconfig.json

jsconfig.json里放着 *.js 文件的配置 , typeconfig.json里放着 *.ts 文件的配置 , tsd.json是tsd配置时产生的。官方废弃tsd, 看到老的项目会有 tsd.json。

点击如下链接可以搜索到微软官方的demo

https://github.com/Microsoft?utf8=%E2%9C%93&q=vscode-&type=&language=

npm install -g create-react-app

创建App:

create-react-app my-app
cd my-app

启动 npm：

npm start

2016 年崛起的 JS 项目

https://risingstars2016.js.org/zh/

Check out the most popular open-source projects and the latest trends about the web platform and node.js
http://bestof.js.org/

angular material2

@import '../core/theming/palette';
@import '../core/theming/theming';


@mixin mat-progress-spinner-theme($mat-color) {
  $primary: mat-palette($mat-green, A200, A100, A400);
  $accent: mat-palette($mat-blue, A200, A100, A400);
  $warn: mat-palette($mat-yellow, A200, A100, A400);
}

安装webpack

npm install webpack -g

查看版本

webpack -v

安装Vue.js

npm install -g vue-cli