javascriptnotes's People
javascriptnotes's Issues
JS 的原型链
Mock
highlight.js
TypeScript入门
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
更多参考
中文
[英文](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
官方入门指南
★HandBook中文
Vue的优势与劣势
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
Angular 4 新语法特性
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推流方案
前端架构相关知识
前端课题
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
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=
异步操作队列
then()
YAML十分钟入门
Create-react-app构建React App
Create React App 不用配置就可以创建 React App。
全局安装:
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);
}
异步编程
异步编程
在线编译器
从头构建一个Vue项目
安装webpack
npm install webpack -g
查看版本
webpack -v
安装Vue.js
npm install -g vue-cli
查看版本
vue --version
创建Vue项目
vue init webpack es6
根据提示, 在命令行下输入和选择配置
安装 package.json 中模块
cd es6
npm install
运行项目
npm run dev
运行后,浏览器打开 http://localhost:8080
Promise
回调函数和事件
promise十一个标记对象,它代表了函数尚未返回的未来的值或异常。
没有真正的并发
模拟并发的策略
- setTimeout()
- setInterval()
- XMLHttpRequest()
- worker(后台部署)
建立自己的知识体系
建立自己的知识体系,就像从一个四海为家的人到给自己建一栋安居的房子,你应该先问问自己为什么要这样做?构建自己的核心价值么?这句话在职业规划中老生常谈了,你有么?
终极同步方案
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.