JavaScript
豌豆射手GCC
这个作者很懒,什么都没留下…
展开
-
Axios:React & Javascript
Axios——用于进行http requesthttps://github.com/axios/axios#typescript安装Axiosnpm install axios --saveAxios+Promiseimport axios from 'axios';componentDidMount(){ //get为异步——即无法使用变量保存(因为执行该语句后变量中还未保存数据) axios.get('https://jsonplaceholder.typ原创 2020-07-06 23:52:51 · 655 阅读 · 0 评论 -
JS: primitive type &reference type 浅拷贝&深拷贝
primitive type(1)string(2)number(3)boolean其拷贝都为深拷贝;reference type(1)object(2)array其拷贝都为浅拷贝;浅拷贝//reference type//object arraysconst person ={ //person是一个指向object的指针 name:'Max'};此时person为指向object的储存位置的地址;const secondPerson =person; /原创 2020-06-29 16:25:22 · 244 阅读 · 0 评论 -
JS Spread & Rest Operators
Spread & Rest Operators: …Spread用于array用于将一个array添加至另一个array;const numbers= [1,2,3,4,5];const newNumbers = [...numbers,4];console.log(newNumbers); //返回[1,2,3,4,5,4]若不用…:const numbers= [1,2,3,4,5];const newNumbers = [numbers,4];console.l原创 2020-06-29 16:12:09 · 159 阅读 · 0 评论 -
React: Reusable Component
babel + React + ReactDOMfunction Person(props){ return ( <div class="person"> <h1>{props.name}</h1> <p>Your Age: {props.age}</p> </div> );}ReactDOM.render(<Person name="MAX" age="28"/>,document.原创 2020-06-29 14:55:03 · 162 阅读 · 0 评论 -
JS Project: MicroPost
UIindex.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link r原创 2020-06-29 00:09:23 · 152 阅读 · 0 评论 -
JS module
module设置1:objectexport const person={ name:'John', age:30}设置2:函数export function sayHello(){ return `Hello ${person.name}`;}设置3:export default避免{};const greeting = 'Hello World';export default greeting; //export default 不用用P{}引入module原创 2020-06-28 15:37:46 · 932 阅读 · 0 评论 -
JS module Project: Tracalorie
UI<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="h原创 2020-06-28 12:12:14 · 212 阅读 · 0 评论 -
JS State Pattern
每个page作为一个state定义pagestate类const Pagestate =function(){ let currentState = new homeState(this); this.init = function(){ this.change(new homeState); } this.change= function(state){ currentState = state; }};home state//Home stateco原创 2020-06-27 18:39:53 · 138 阅读 · 0 评论 -
JS Mediator Pattern ——用作聊天室
Mediator Pattern定义User类的构造函数const User = function(name){ this.name = name; this.chatroom = null;}为User类添加prototype函数(1)send函数中,用到chatroom类对象的send函数;(2)revieve函数中,显示recieve的内容在console.log上;User.prototype ={ send:function(message,to){ this.原创 2020-06-27 16:22:09 · 105 阅读 · 0 评论 -
JS Observser Pattern
Observer 保存event注意点array.filter()返回一个array,内含满足item!=fn的所有元素function EventObserver(){ this.observers = [];}EventObserver.prototype = { subscribe:function(fn) //与prototype.subscribe = funtcion()相同 {this.observers.push(fn); console.log(`Y原创 2020-06-27 16:02:04 · 143 阅读 · 0 评论 -
JS Factory
FactoryFactory类似Construct函数;是用于构建一个类对象的函数;返回一个object;Cfunction MemberFactory(){ this.createMember = function(name,type){ let member; if(type === 'simple'){ member = new SimpleMembership(name); }else if(type ==='standard'){ me原创 2020-06-27 15:09:23 · 226 阅读 · 0 评论 -
JS Singleton
Singleton只能创建一个实例对象const Singleton = (function(){ let instance; function createInstance(){ const object = new Object({name:'brad'}); return object; } return { getInstance:function(){ if(!instance){ instance = createIns原创 2020-06-27 14:53:36 · 166 阅读 · 0 评论 -
JS Module & Revealing Module Pattern
Module & Revealing Module PatternModule格式//Basic structure(function(){ //Declare private vars and functions return{ //Declare public var and functions }})();Modulereturn 的函数内容为可被外部调用的method; //Standard module patternconst UICtrl原创 2020-06-27 14:42:28 · 168 阅读 · 0 评论 -
JS set
Create set// SETS - Store unique values of any typeconst set1 = new Set();Add values to set方法1——set.add()//Add values to setset1.add(100);set1.add('A string');set1.add({name:'John'});set1.add(true);set1.add(100);方法2——构造时加入[]const set2 = new S原创 2020-06-27 00:37:38 · 134 阅读 · 0 评论 -
JS Map
Create map//MAPS = key-val pairs - can use ANY type as a key or valueconst map1 = new Map();将key,value传入map//Set Keysconst key1=`some string`, key2={}, key3=function(){};//Set map values by keymap1.set(key1,'Value of key1');map1.set(ke原创 2020-06-27 00:20:52 · 177 阅读 · 0 评论 -
JS Destructuring
Destructuring Assignment解构分配;array分配array//Destructuring Assignmentlet a,b;[a,b] = [100,200];//Rest pattern[a,b,c,...rest] = [100,200,300,400,500]; //后面的都放入rest({})分配{}({a,b}= { a:100, b:200, c:300, d:400, e:500}); //()将内容作为表达式({a,b,...rest}原创 2020-06-27 00:00:32 · 150 阅读 · 0 评论 -
JS symbol
Create a Symbol// Create a symbolconst sym1 = Symbol(); //Primitiveconst sym2 = Symbol('sym2');console.log(typeof sym1);console.log(sym2);console.log(Symbol() === Symbol()); //false 都是独一无二的console.log(Symbol(123) === Symbol(123)); //false 都是独一无二的原创 2020-06-26 23:44:15 · 146 阅读 · 0 评论 -
JS Project:iterator
iter遍历的dataconst data = [ { name:'Jone Doe', age:32, gender:'male', lookingfor:'female', location:'Boston MA', image:'https://randomuser.me/api/portraits/men/82.jpg' }, { name:'Jone Doe2', age:32, gender:'male',原创 2020-06-26 23:19:29 · 259 阅读 · 0 评论 -
JS Iterator + Generator
Iterator//Iterator Examplefunction nameIterator(names) { let nextIndex = 0; return { next:function(){ return nextIndex<names.length ? {value:names[nextIndex++],done:false} : {done:true}; } } }//Create an array of原创 2020-06-26 22:52:23 · 125 阅读 · 0 评论 -
JS Re 表示 name+zip+email+phone
re表示name const re= /^[a-zA-Z]{2,10}$/;re表示zip const re= /^[0-9]{5}(-[0-9]{4})?$/;re表示emailconst re= /^([a-zA-Z0-9_\?\.]+)@([a-zA-Z0-9_\?\.]+)\.([a-zA-Z]{2,5})$/;re表示phoneconst re= /^\(?\d{3}\)?[-. ]?\d{3}[-. ]?\d{4}$/;app.js//Form Blur Event原创 2020-06-26 16:02:36 · 477 阅读 · 0 评论 -
JS Regular Expression: Shorthand Character Classes+Assertions
Shorthand Character Classes\小写为匹配,\大写为除了;(1)\w 字母or数字or下划线(2)+ 匹配一个或多个前面的(3)\d 匹配digit;(4)\s 匹配空格(5)\b 结尾,表示该位置只能为非(字母 or 数字 or 下划线)re = /\w/; //Word character - alphanumeric or _ //任意letter or number or _re = /\w+/; //+ = one or more //1个或多个前面原创 2020-06-26 15:27:46 · 150 阅读 · 0 评论 -
JS Regular Expression: Metacharacter Symbols+ Brackets + Braces + Parentheses
Metacharacter Symbols(1) ^h表示必须由h开头;(2)d$表示必须由d结尾;(3).表示任意一个字符(4)*表示任意0个或多个字符;(5)?a?e表示可以匹配a也可以匹配b;(6)\?表示匹配?;re = /^h/i; // str Must start with 'h're = / world$/i; //Must ends with 'd're = /^hello$/i; //Must start with 'hello' and end with 'h原创 2020-06-26 14:47:43 · 144 阅读 · 0 评论 -
JS regular expression ——Evaluation Functions
正则表达式的function设定正则表达式let re;re = /hello/;i ——不区分大小写re = /hello/i; //正则表达式 //加入i则可匹配大小写 i= case insensitiveg ——匹配全局的rere = /hello/g; // Global searchre.source——得到内容console.log(re);console.log(re.source);re的方法exec()re.exec()//exec() - Re原创 2020-06-26 14:24:17 · 143 阅读 · 0 评论 -
JS Error Handling with Try...Catch
Try——catch的基本用法const user={email:`jdoe@gmail.com`}try{//执行代码}catch(e){//若try抛出错误,进入catch}finally{ //不管try是否抛出错误,都进入此位置}//catch 可以不打断js的读取console.log('Program continues');ReferenceError调用一个未定义的函数try{ //Produce a ReferenceError myFunct原创 2020-06-25 23:05:27 · 144 阅读 · 0 评论 -
JS Project:WeatherJS
UI<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="bootstrap.min.css"> <title>Weather JS<原创 2020-06-25 17:53:38 · 222 阅读 · 0 评论 -
JS Project: GitHub finder
UI<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="bootstrap.min.css"> <title>GITHUB FINDER原创 2020-06-25 15:41:19 · 299 阅读 · 0 评论 -
JS EasyHTTP library version3 :aynsc & await
用async & await代替promiselibrary.js//Easy http3 Library//加入 fetch + arrow+class+asyncclass EasyHTTP{ //Make HTTP get request async get(url){ const response = await fetch(url); const resData = await response.json(); return resData;原创 2020-06-25 13:33:04 · 155 阅读 · 0 评论 -
JS ES7 async & await
async & awaitasync function myFunc(){ //返回一个promise // return `Hello`; const promise = new Promise((resolve,reject)=>{ setTimeout(()=> resolve(`Hello`),1000); }); const error = true; if(!error){ const res= await promise; //原创 2020-06-25 13:22:51 · 141 阅读 · 0 评论 -
JS Easy http Library 2: ES6 fetch + arrow+class
重写easy http library加入 fetch + arrow+classfetch中传入url;post方法需要传入data,并标记为post方法;header中加入data的保存格式——json;library.js//Easy http2 Library//加入 fetch + arrow+classclass EasyHTTP{ //Make HTTP get request get(url){ return new Promise((resolve,rej原创 2020-06-25 13:08:29 · 204 阅读 · 0 评论 -
JS Arrow Function
Arrow Function使用 =>简化代码=>省略function const sayHello = function(){ console.log(`Hello`); } const sayHello = () => { console.log(`Hello`); }单行代码无需使用{}//one line function does not need bracesconst sayHello =()=> console.log(`Hello`原创 2020-06-25 12:38:27 · 208 阅读 · 0 评论 -
JS Fetch API
Fetch APIget from txtfetch内置promise,使用then实现asynchronous;catch抓取fetch中出现的error;document.getElementById('button1').addEventListener('click',getText);function getText(){ fetch('test.txt') .then(function(res){ //console.log(res); return res.原创 2020-06-24 17:04:09 · 194 阅读 · 0 评论 -
JS Promise 类似callback 实现 asynchronous
Promiseconst posts=[ {title:'Post One', body:"this is post one"}, {title:'Post Two', body:"this is post two"}]function createPost(post){ //2秒后create post return new Promise(function(resolve,reject){ setTimeout(function(){ posts.push(p原创 2020-06-24 16:47:33 · 144 阅读 · 0 评论 -
JS Custom HTTP Library
编写类似jquery的library编写Get 方法+Callbacklibray.js将open,load,send放入一个methods中。function easyHTTP(){ this.http = new XMLHttpRequest();}//Make an HTTP GET RequesteasyHTTP.prototype.get = function(url,callback){ this.http.open('GET',url,true); let se原创 2020-06-24 16:14:30 · 117 阅读 · 0 评论 -
JS callback 实现 asynchronous
模拟post请求,synchronous时即使先create再get也可能get不到;const posts=[ {title:'Post One', body:"this is post one"}, {title:'Post Two', body:"this is post two"}]function createPost(post){ //2秒后create post setTimeout(function(){ posts.push(post); },2000)原创 2020-06-24 14:49:28 · 114 阅读 · 0 评论 -
JS fetch data from external API
利用xhr fetch 外部api(公共api)注意xhr.onload = fcuntion(){}中,this.responseText object中的内容,此例子中array内容在this.response.value中;document.querySelector('.get-jokes').addEventListener('click',getJokes);function getJokes(e){ const number = document.querySelector(`i原创 2020-06-24 14:11:34 · 155 阅读 · 0 评论 -
JS Ajax&JSON
load json文件Load single customerdocument.getElementById('button1').addEventListener('click',loadCustomer);function loadCustomer(e){ const xhr = new XMLHttpRequest(); xhr.open('GET','customer.json',true); xhr.onload=function(){ console.log(thi原创 2020-06-24 12:57:39 · 250 阅读 · 0 评论 -
JS XML/XHR
XML/JSON无需刷新页面,一切数据在browser后部执行;WORKing with txt设定button的事件document.getElementById('button').addEventListener('click',loadData); //()在里面则读取时就会调用//readyState Values//0:request not initialized//1:server connection established//2:request received//3原创 2020-06-24 12:35:16 · 111 阅读 · 0 评论 -
JS OOP bookstore ES5&ES6
UI设置skeleton https://cdnjs.com/libraries/skeleton<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="htt原创 2020-06-23 16:30:57 · 134 阅读 · 0 评论 -
JS Obejcted Oriented ES5&ES6 + Babel
向object类中添加属性所有的该类对象都会继承Prototype的属性;//Object.prototype//Person.prototype //Person constructorfunction Person(firstName, lastName, dob){ this.firstName=firstName; this.lastName=lastName; this.birthday=new Date(dob); // this.calculateAge = fun原创 2020-06-22 23:37:16 · 134 阅读 · 0 评论 -
JS Object Introducation
Object对象中:变量方法+函数方法// const brad = {// name:'Brad',// age:30// }// console.log(brad);// console.log(brad.age);//JS的OOP语法//Person constructorfunction Person(name,dob){ this.name=name; //this.age=age; //function内的this为对象 this.birthday原创 2020-06-22 00:34:09 · 120 阅读 · 0 评论