MarkDown new Tab 记录的一些笔记 ---1222整理

es5的bind ES5中新增了bind()函数来改变this的指向。

Function.prototype.bind(obj)

作用:将函数内的this绑定为obj, 并将函数返回。


一个deom 理解 Object.defineProperties (ES5的扩展)

var obj2 = {
        firstName : 'smyh',
        lastName : 'vae'
    };
    Object.defineProperties(obj2, {
        fullName : {
            get : function () {
                return this.firstName + '-' + this.lastName
            },
            set : function (data) {  //监听扩展属性,当扩展属性发生变化的时候自动调用,
                                      //自动调用后将变化的值作为实参注入到set函数
                var names = data.split('-');
                this.firstName = names[0];
                this.lastName = names[1];
            }
        }
    });
    console.log(obj2.fullName);
    obj2.firstName = 'tim';
    obj2.lastName = 'duncan';
    console.log(obj2.fullName);
    obj2.fullName = 'kobe-bryant';
    console.log(obj2.fullName);
#########################################################
obj对象本身就自带了两个方法

var obj = {
        firstName : 'kobe',
        lastName : 'bryant',
        get fullName(){
            return this.firstName + ' ' + this.lastName
        },
        set fullName(data){
            var names = data.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
        }
    };
    console.log(obj.fullName);
    obj.fullName = 'curry stephen';
    console.log(obj.lastName);


感想

每个人的一生就是一次程序运行。
– 某网友的 ID


警示

大量年轻人正在转向软件业就业。但是,程序员的淘汰也很厉害,上车的人多,下车的人也多。应该对这一点有清醒的认识
每个人的一生就是一次程序运行。
– 某网友的 ID

js 数组操作导图

数组操作导图

PAC

代理自动配置(Proxy auto-config,简称PAC)是一种网页浏览器技术,用于定义浏览器该如何自动选择适当的代理服务器来访问一个网址。

defer和async的区别

一图胜万言
蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。

mapDispatchToProps 和 mapStateToProps

mapStateToProps是一个函数(两个参数 state, ownProps),用于建立组件跟store的state的映射关系注:不传的时候,组件不会监听store的变化,也就是说Store的更新不会引起UI的更新
mapDispatchToProps 可以是一个object,也可以传入函数(两个参数 dispatch, ownProps),用于建立组件跟store.dispatch的映射关系.注:不传的时候,React-Redux会自动将dispatch注入组件的props。

setTimeOut API的解释

setTimeout(fn,0)的含义是,指定某个任务在主线程最早可得的空闲时间执行,意思就是不用再等多少秒了,只要主线程执行栈内的同步任务全部执行完成,栈为空就马上执行。

对于setInterval(fn,ms)来说,我们已经知道不是每过ms秒会执行一次fn,而是每过ms秒,会有fn进入Event Queue。_一旦setInterval的回调函数fn执行时间超过了延迟时间ms,那么就完全看不出来有时间间隔了。

好 de example

setTimeout(() => {
	console.log(2)
}, 2)

setTimeout(() => {
	console.log(1)
}, 1)

setTimeout(() => {
	console.log(0)
}, 0)

输出: 1, 0, 2

规范无法囊括所有场景,虽然chrome和node都基于v8引擎,但引擎只负责管理内存堆栈,API还是由各runtime自行设计并实现的。eventloop
###测试题

setTimeout(function(){
    console.log('定时器开始啦')
});
new Promise(function(resolve){
    console.log('马上执行for循环啦');
    for(var i = 0; i < 10000; i++){
        i == 99 && resolve();
    }
}).then(function(){
    console.log('执行then函数啦')
});
console.log('代码执行结束');

好句

规范是人定的,代码是人写的。 ——无名氏

浏览器的js运行机制

eventloop
执行最旧的task(一次)
检查是否存在microtask,然后不停执行,直到清空队列(多次)
执行render

task he microtask 这两个概念属于对异步任务的分类,不同的API注册的异步任务会依次进入自身对应的队列中,然后等待Event Loop将它们依次压入执行栈中执行。

task主要包含:setTimeout、setInterval、setImmediate、I/O、UI交互事件

microtask主要包含:Promise、process.nextTick、MutaionObserver

postman 和浏览器请求的不同

The different with Postman is postman do not ask server API it just simply send the headers, while Browser because different Domain it will asking by doing OPTIONS request with following headers before Post request made.

js的 Math

ceil 上舍入 返回大于或者等于的整数
floot 下舍入 返回小于或者等于的整数

this.props.histroy("/list");
注意 在路由组件才有 histroy这个属性, 若要在子组件使用,有两种方法
1,将这个属性通过props属性传递下去
2,用withRouter,官方推荐做法,高阶组件

css省略号

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

###纯函数和副作用

副作用
纯函数
如何理解组合函数

fetch与ajax的区别

fetch是ajax最新替代技术。ajax基于事件而fetch基于Promise,更加友好,更近符合现代发展趋势。

devDependencies与dependencies的区别

dependencies 表示我们要在生产环境下使用该依赖,devDependencies 则表示我们仅在开发环境使用该依赖。在打包时,一定要分清哪些包属于生产依赖,哪些属于开发依赖,尤其是在项目较大,依赖包较多的情况下。若在生产环境下错应或者少引依赖包,即便是成功打包,但在使用应用程序期间也会报错,导致打包好的程序无法正常运行

npm与cnpm的区别

说到npm与cnpm的区别,可能大家都知道,但大家容易忽视的一点,是cnpm装的各种node_module,这种方式下所有的包都是扁平化的安装。一下子node_modules展开后有非常多的文件。导致了在打包的过程中非常慢。但是如果改用npm来安装node_modules的话,所有的包都是树状结构的,层级变深。

###export default 和 export 区别:
1.export与export default均可用于导出常量、函数、文件、模块等
2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用
3.在一个文件或模块中,export、import可以有多个,export default仅有一个
4.通过export方式导出,在导入时要加{ },export default则不需要

js &&的用法

true && expression 总是返回 expression,而 false && expression 总是返回 false

chroma.js

一个处理颜色的库
可以将#333 - #999 的颜色过渡全部展示出来,http://gka.github.io/chroma.js/

dom 结构索引值

$(dom).index()

谷歌浏览器调试移动端的webview

chrome://inspect/#devices
参考博文
https://blog.csdn.net/Z_4545287/article/details/70256587

React

组件不能读出props.key

// 这边绑定是必要的,这样 this 才能在回调函数中使用
this.handleClick = this.handleClick.bind(this);
原因在下面:
你必须谨慎对待 JSX 回调函数中的 this,类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。

在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为, 你必须明确的使用 preventDefault。

判断组件挂载状态:isMounted
isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。

setState()并不会立即改变this.state,而是创建一个即将处理的state。setState()并不一定是同步的,为了提升性能React会批量执行state和DOM渲染。

setState()总是会触发一次组件重绘,除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。

异步

async await

asyncawait,比起星号和yield

QT 开发

正常情况下,await命令后面是一个 Promise 对象。如果不是,会被转成一个立即resolve的 Promise 对象。

async function f() {
  return await 123;
}

f().then(v => console.log(v))
// 123

只要一个await语句后面的 Promise 变为reject,那么整个async函数都会中断执行。

这样看来只要await 的promise对象状态 变为reject ,若后面没有处理报错,都会中断执行,若不想中断,只要添加一个错误处理的就可以了,比如 catch

发布了38 篇原创文章 · 获赞 14 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/sinat_23156865/article/details/85220926
今日推荐