toxicfy / combing-notes Goto Github PK

const original = ['node','javascript','http'];
const originalUnshift = [...original, 'vue'];  // unshift
const originalPush = ['react',...original];	  // push
const originalConcat = original.concat(['typeScript','deno'])

//👍👍推荐：可以在任意位置添加及删除元素（startNum,delNum,addItem）
let list = ['Jan', 'March', 'April', 'June'];
list.splice(1,1,'newItem');  //list: ['Jan', 'newItem', 'April', 'June']

//Array.prototype.includes(searchElement, fromIndex);
let nums = [1, 2, 3], 
    pets = ['cat', 'dog', 'bat'];

nums.includes(1,2); //false
pets.inclides('cat'); //true

//原来多采用 indexOf() === -1 进行判断

const posts = [
  {id: 13, title: 'Title 221'},
  {id: 5, title: 'Title 102'},
  {id: 131, title: 'Title 18'},
  {id: 55, title: 'Title 234'}
];
// 找到id为131的元素
const requiredIndex = posts.findIndex(obj => obj.id === 131);
console.log(requiredIndex); //2

// Array.filter(callback(element,index,prevArr),[,第二个参数是callback绑定的this])

let prevArr, filterArr;
prevArr = [1, 2, 3, 4, 5, 6]
filterArr = prevArr.filter(ele => ele % 3 === 0);  //[3,6]

let prevObjectList, filterObjectName;
prevObjectList = [
  {name: 'tom', age:19},
  {name: 'jack', age:12},
  {name: 'lucy', age:21},
]
filterObjectName = prevObjectList.find(ele => ele.age < 18).name; //jack

let arr, doubleArr;
arr = [1, 2, 3, 4, 6, 7];
doubleArr = arr.map(i => i*2); // doubleArr [2, 4, 6, 8, 12, 14]，而不会对Arr造成以影响；

//这样的代码我们的项目里面也是最多的😐😐😐
let validData, lowercaseEmails,
	mixedEmails = ['[email protected]', '[email protected]', '[email protected]'];

function getEmailsInLowercase(emails) {
  lowercaseEmails = [];
  for (let i = 0; i < emails.length; i++) {
    lowercaseEmails.push(emails[i].toLowerCase());
  }
  return lowercaseEmails;
}
validData = getEmailsInLowercase(mixedEmails);

//我们的代码中也有，替换循环(主要为使用forEach和map)😅😅😅
let validData, lowercaseEmails,
	mixedEmails = ['[email protected]', '[email protected]', '[email protected]'];

function getEmailsInLowercase(emails) {
  lowercaseEmails = [];
  //简洁性更强，同时避免了添加索引记录访问位置
  emails.map( email => {
    lowercaseEmails.push(email.toLowerCase());
  });
  return lowercaseEmails;
}
validData = getEmailsInLowercase(mixedEmails);

let mixedEmails = ['[email protected]', '[email protected]', '[email protected]'], validData;

function downcase(str) {
  return str.toLowerCase();
}
validData = mixedEmails.map(downcase);

//Array.prototype.reduce(callback [, initialValue (初始值)])
const posts = [
  {id: 1, upVotes: 2},
  {id: 2, upVotes: 89},
  {id: 3, upVotes: 1}
];

const totalUpvotes = posts.reduce((totalUpvotes, currentPost) =>     
  totalUpvotes + currentPost.upVotes, //reducer 回调函数
  0 // 初始化投票数为0
);
console.log(totalUpvotes)//输出投票总数：92

//其中callback()中第一个参数是上一次调用回调时返回的值，第二个值是数组中正在处理的元素；

//每个元素都满足条件才会返回true：
let judge = [1, 2, 3, 4, 5].every( val => val > 1);  // false

function sum(x, y) { 
   // 不推荐写法: 隐式全局变量
   result = x + y; 
   // let result = x + y;
   return result;
}

var a = b = 0;
// => 从右到左的赋值的规则 var a = (b = 0);
b = 0; 
var a = b;

function myFunc() {//function body
    var a = null, 
        b = Math.random(), 
        c = "value";
        //优点：单一的地方去寻找功能所需要的所有局部；
	   // 避免在定义之前使用的逻辑错误（提升可以访问，但是赋值为undefined）
}

for (let i = 0, max = myArray.length; i < max; i++) {   
	// 使用myArray[i] 
}

//是否可以删除
function canDelete(){
    return true;
}

//获取姓名
function getName{
    return this.name
}

//创建类
class PersonHabitAll{
    constructor(sleepTime,diet){
        this.sleepTime = sleepTime;
        this.diet = diet;
    }
}

 const COUNT = 100;
 const REQUEST_URL = '192.168.10.9';

//var function
//let const
//这样的代码实际上会让人感觉很困惑，这些都是什么
someThingHandler.fnTrigger（"handlerName", 3, true）;

//所以可以使用常量的方式进行书写
const ACTIVE_STATUS = {
    ACTIVE_DEFAULT: 0,
    DOT_ACTIVE: 1,
    LINE_ACTIVE: 2,
    FACE_ACTIVE: 3,
    //...
}
someThingHandler.fnTrigger（"handlerName", ACTIVE_STATUS.FACE_ACTIVE, true）;

if (x === ACTIVE_STATUS.ACTIVE_DEFAULT) {
    return false;
} else {
    return true;
}
//推荐使用
return x === ACTIVE_STATUS.ACTIVE_DEFAULT ? false : true

null == undefined          //true
'' == '0'                  //false
0  == ''                   //true
0  == '0'                  //true
new String("abc") == "abc" //true
new Boolean(true) == true  //true
true == 1                  //true

//字符串转换为整型
let value = "11";
let newPrice = +value; 
value === 11	//true

//判断其他类型为boolean，使用 !!
if(!!someTypeValue) {
	//dosomething
}

var a = [666,999];
a[1] = 2333;
console.log(a[1]); // 2333

var a = [666,999];
var b = [666,999];
a === b //false

var a = {}; // a保存了一个空对象的实例
var b = a;  // a和b都指向了这个空对象

a.name = 'tom';
console.log(a.name); // 'tom'
console.log(b.name); // 'tom'
console.log(a == b);// true

jQuery.extend = jQuery.fn.extend = function() {
  var options,
    name,
    src,
    copy,
    copyIsArray,
    clone,
    target = arguments[0] || {},
    i = 1,
    length = arguments.length,
    deep = false;

  // 如果第一个参数是布尔值，则为判断是否深拷贝的标志
  if (typeof target === "boolean") {
    deep = target;
    // 跳过 deep 标志，留意上面 i 的初始值为 1 ,重新给目标进行赋值
    target = arguments[i] || {};
    // i 自增 1，== 2
    i++;
  }

  // 判断 target 是否为 object / array / function 以外的类型
  if (typeof target !== "object" && !isFunction(target)) {
    target = {}; // 如果是其它类型，则强制重新赋值为新的空对象
  }

  // 如果只传入1个参数；或者是传入2个参数，第一个参数为 deep ，第二个为 target
  // 所以 length 的值可能为 1 或 2，但无论是 1 或 2，下段 for 循环只会运行一次
  if (i === length) {
    // 将 jQuery 本身赋值给 target
    target = this;
    // i 自减 1，可能的值为 0 或 1
    i--;
  }

  for (; i < length; i++) {
    // 以下拷贝操作，只针对非 null 或 undefined 的 arguments[i] 进行
    if ((options = arguments[i]) != null) {
      // Extend the base object
      for (name in options) {
        src = target[name];
        copy = options[name];
        // 避免死循环的情况
        if (target === copy) {
          continue;
        }
        // Recurse if we're merging plain objects or arrays
        // 如果是深拷贝，且copy值有效，且copy值为纯object或纯array
        if (
          deep &&
          copy &&
          (jQuery.isPlainObject(copy) || (copyIsArray = Array.isArray(copy)))
        ) {
          if (copyIsArray) {
            // 数组情况
            copyIsArray = false;
            clone = src && Array.isArray(src) ? src : [];
          } else {
            // 对象情况
            clone = src && jQuery.isPlainObject(src) ? src : {};
          }
          // 克隆copy对象到原对象并赋值回原属性，而不是重新赋值
          // 递归调用
          target[name] = jQuery.extend(deep, clone, copy);
        } else if (copy !== undefined) {
          target[name] = copy;
        }
      }
    }
  }
  //返回修改后的目标
  return target;
};

//object
let copy = Object.assign({}, obj);

//Array.prototype.concat()/Array.prototype.slice()
let newArr = oldArr.concat()
let newArr2 = oldArr2.slice()

//使用函数
function shallowClone (source){
	if(!source || typeof source != 'object'){
	  return;
	}
	var targetObj = source.constructor === Array ? [] : {};
	for(var keys in source) {
	  if(source.hasOwnProperty(keys)){//此处避免遍历到原型上的方法
	      targetObj[keys] = source[keys];
	  }
	}
	return targetObj;
}

//JOSN对象中的stringify可以把一个js对象序列化为一个JSON字符串，parse可以把JSON字符串反序列化为一个js对象，通过这两个方法，也可以实现对象的深复制

var dest = JSON.parse(JSON.stringify(target));

//jquery
let obj2 = $.extend(true, {}, obj1);

//lodash
var lodash = require('lodash');
var oldObj = {
    a: [1],
    b: { f: { g: 1 } },
};
var newObj = lodash.cloneDeep(oldObj);

//应当避免名字去反映自己写的css规则; 不要使用样式特点命名,而是突出用途
.fw-1000 {
  font-weight: 1000;
}
.red {
   color:red;
}

//  =====>

.font-heavy {
   font-weight: 1000;
}
.danger {
  color:red;
}

//padding-bottom: 0px;
//=>
padding-bottom: 0;

<img src="" title="border" alt="flower"/>

//css
img[title="border"] {
	display:none;  //title="border"的img元素会使用该样式
}

<ul class="list">
    <li>tom</li>    //选中，蓝色
    <li>jack</li>
    <li>tony</li>
</ul>
//css
.list li:first-child {color:blue;}

npm install --save react-redux  //react中进行使用

//actionType.js
export const ADD_VALUE = 'add_value';

//createAction.js
import { ADD_VALUE } from './actionType.js'
export const crateAction = data => {
   type: ADD_VALUE, //用于标识不同的action,通常定义成字符串常量
   data // 来源--用及其他组件状态传递
}

(prevState, action) => newState;	//接收原来的state以及action,返回新的state

import { ADD_VALUE } from './actionType.js';

//处理传递的Action,是一个纯函数
export default (state = "", action) => {
  const newState = JSON.parse(JSON.stringify(state));
  switch (action.type) {
    case ADD_VALUE:
      newState.date = action.data;
      return newState;
    default:
      return state;
  }
};

import { createStore } from "redux";
import reducer from "./reducer";
const store = createStore(reducer);// 创建 store
export default store;

// component
import React, { Component } from "react";
import { crateAction } from "./crateAction/js";
import store from "./store";
class Test extends Component {
  render() {
    this.handleStoreChange = this.handleStoreChange.bind(this);
    this.emitMethods = this.emitMethods.bind(this);
    this.state = store.getState(); //初始化state
    store.subscribe(this.handleStoreChange); //监听store数据变化
  }
  handleStoreChange() {
    this.setState(store.getState()); //更新组件的store,view进行重新渲染;
  }
  emitMethods() {
    const action = crateAction(data);
    store.dispatch(action); //传递action到Reducers
  }
}

// router
import Index from './component/index'
const router = [{
    path:'/',
    redirect:'/index',
    component: Index
    meta:{
        keep_alive: true // 该组件需要被缓存
    }
}]

import router from "./router";

/**
 * 通过全局守卫简单验证：
 * @param {object} to  - 将要进入的路由对象 (组件中的this.$route)
 * @param {object} from - 将要离开的路由对象
 * @param {function} next - 跳转新路由,参数可以是path，路由对象，false等，跳转结果与参数相关
 */
router.beforeEach((to, from, next) => {
  const role = localStorage.getItem("user_name");
  if (!role && to.path !== "./login") {
    next("./login");
  } else if (to.meta.permission) {
    //meta: { title: '管理员权限页面', permission: true }
    role === "admin" ? next() : next("/403");
  } else {
    next();
  }
});

//参数的意义和全局守卫相同
beforeRouteEnter((to, from, next) => {
  next(callback); //此处的callback会在进入的组件mounted周期之后进行调用，所以可以进行数据的请求用于更新dom
});

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import reducer from "./reducer";
// 使用 redux-devtools以及中间件redux-thunk
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
  : compose;
const enhancer = composeEnhancers(applyMiddleware(thunk));
const store = createStore(reducer, enhancer);// 创建 store
export default store;

const initListAction = data => {
  type: "",
  data
};

export const getTodoList = () => { // 返回一个函数
  return (dispath) => {
    axios.get("./api/v1").then(res => {
      const action = initListAction(res.data);// 创建action
      dispath(action);// 触发action
    });
  };
};

 // 异步请求
  componentDidMount() {
    const action = getTodoList();
    store.dispatch(action);
  }

//安装redux-saga
npm install --save redux-saga   

//生成store.js
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
import reducer from './reducers'
import mySaga from './sagas'

const sagaMiddleware = createSagaMiddleware() //生成中间件
const store = createStore(
  reducer, applyMiddleware(sagaMiddleware)
)

sagaMiddleware.run(mySaga) //运行saga

//createAction.js
export const initAction = () =>({
   type: "GET_LIST"
});

//component
componentDidMount(){
    const action = initAction();
    store.dispatch(action)
}

//saga.js
import { put, takeEvery } from 'redux-saga/effects'
import initAction from './createAction';
import axios from 'axios'

// 将在 GET_LIST action 被 dispatch 时调用
function* getList(action) {
    try{
      const res = yield axios.get('./api/v1');
   	  const action = initAction(res.data);
   		yield put(action);
    }
    catch(e){}
}

function* mySaga() {
  yield takeEvery("GET_LIST", getList);
}
export default mySaga;

//正常情况下，根组件应该嵌套在<Provider>中才能使用connect()方法。
ReactDOM.render(
  <Provider store ={store}>
    <MyRootComponent />
  </Provider>,
  document.getElementById('root')
)

import { connect } from 'react-redux' 
//通过react-redux中的connect方法完成映射以及事件触发
export default connect(mapStateToProps, mapDispatchToProps)(showComponent);

import react, { createStore } from 'react';
import { Provider } from 'react-redux';
import App from './component/app';
import reducer from './reducer'
const store = createStore(reducer);

render(
  <Provider store: { store }>
  	<App />
  </Provider>,
  document.getElementById('root');
)

//action
export const actionName = id => ({
  type: 'ACTION_NAME',
  id
})


// reducer
const todos = (state = [], action) => {
  switch (action.type) {
    case 'CASE_NAME':
      //do something
      return newState
    default:
      return state
  }
}

import react from 'react';
import { actionNameOne } from './action';
import { connect } from 'react-redux';

const showComponent = (props) => {
  const { inputValue, list, handleBtnClick, handleInputChange } = props;
  return (
    <div>
      <div>
        <input value={inputValue} onChange={handleInputChange}/>   
      </div>
      <button onClick={handleBtnClick}></button>
    </div>
  )
}
//state就是传递出来的Store.getState()中的数据
const mapStateToProps = (state) => {
  return {
    //关联组件中this.props.value
    inputValue: state.inputValue,
    list: state.list
  }
}

//dispacth完成Store.dispatch()方法
const mapDispatchToProps = (dispatch) => {
  return {
    //关联组件中的绑定的方法
    handleInputChange: (e) => {
      const action = actionNameOne(e);//创建action
      dispatch(action);//触发action
    }
  }
}
//返回一个容器组件,组件可以不用手动订阅和触发监听完成数据的更新;
export default connect(mapStateToProps , mapDispatchToProps)(showComponent);

const router = new VueRouter({
  routes,
  base: "/app/", // 默认为'/' ; base的路径加在所有的路径前面 ex：/user:id => /app/user:id

  // 关于路由模式
  mode: "hash", // 浏览器端:hash(defalut)/history ; Node.js: abstract
  fallback: true, // 当mode:history且浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式

  // 可以用于进行对<router-link>组件进行设置自定义样式;
  // 可以设置激活的class类名，以及包含在父级下的精确激活类名: 下面展示的是默认值
  linkActiveClass: "router-link-active", 
  linkExactActiveClass: "router-link-exact-active",

  // 当路由进行跳转时候如果保存过滚动信息的话，可以在完成路由跳转时候完成页面的滚动
  scrollBehavior: (to, from, savedPosition) => {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  }

  // parseQuery / stringifyQuery  -- 提供自定义查询字符串的解析/反解析函数
});

router = [
  {
    path: "/user/:id",
    component: User,
    props: true,
    name: "user", // name 可以使得在使用router-link 、 router.push 传入对象 {name: user} 直接访问
    meta: {
      // 元信息，在访问路由对象的时候可以进行访问，可以配合路由导航守卫
      title: "User component",
      description: "this is user component"
    }
  }
];

//  path: "/user/:id", props: true,  ---- 布尔值

const User = {
  props: ["id"],
  template: "<div>User {{ id }}</div>"
};

// { path:'/login', component:Login, props: { userName: 'Tom'} }  --- 对象
const Login = {
  props: ["userName"],
  created() {
    console.log(this.userName);
  }
};

// 当返回函数的时候可以接收一个参数，就是包含路由信息的route对象，同样的我们在组件中进行访问属性。
const propFun = route => ({
  userName: "Tom",
  age: route.parame.age
});

router = {
  path: "/login",
  component: Login,
  props: propFun
};

// /login/?age=20  =>  {userName: "Tom", age:20}

// this.$router && this.$route( // 一个路由实例可以包含多个路由对象，为父子包含关系)
export default {
  computed: {
    userName() {
      return this.$route.params.userName; //当前路由实例跳转的路由对象
    }
  },
  methods: {
    goBack() {
      //整个的路由实例,利用push方法传入一个路由对象
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/"); 
    }
  }
};