2020年07月_LuckXinXin

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月

原创 async、await 优缺点

async 和 await 相比直接使用 Promise 来说，优势在于处理 then 的调用链，能够更清晰准确的写出代码。缺点在于滥用 await 可能会导致性能问题，因为 await 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性下面来看一个使用 await 的代码。var a = 0var b = async () => { a = a + await 10 console.log('2', a) // -> '2' 10 .

2020-07-31 09:41:35 2156

原创 JavaScript中的This相关问题

function foo() { console.log(this.a)}var a = 1foo()var obj = { a: 2, foo: foo}obj.foo()// 以上两者情况 `this` 只依赖于调用函数前的对象，优先级是第二个情况大于第一个情况// 以下情况是优先级最高的，`this` 只会绑定在 `c` 上，不会被任何方式修改 `this` 指向var c = new foo()c.a = 3console.log(c.a)// 还有种就是利用

2020-07-31 09:38:47 96

原创箭头函数的特点

function a() { return () => { return () => { console.log(this) } }}console.log(a()()())箭头函数其实是没有 this 的，这个函数中的 this 只取决于他外面的第一个不是箭头函数的函数的 this。在这个例子中，因为调用 a 符合前面代码中的第一个情况，所以 this 是window。并且this一旦绑定了上下文，就不会被任何

2020-07-31 09:37:55 139

原创怎么判断对象类型

可以通过 Object.prototype.toString.call(xx)。这样我们就可以获得类似 [object Type] 的字符串。instanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype...

2020-07-30 09:40:44 1129

原创简单说下原型链？

每个函数都有 prototype 属性，除了 Function.prototype.bind()，该属性指向原型。每个对象都有 __proto__ 属性，指向了创建该对象的构造函数的原型。其实这个属性指向了 [[prototype]]，但是 [[prototype]]是内部属性，我们并不能访问到，所以使用 _proto_来访问。对象可以通过 __proto__ 来寻找不属于该对象的属性，__proto__ 将对象连接起来组成了原型链。...

2020-07-30 09:39:54 493

原创如何实现一个 apply 函数

Function.prototype.myApply = function (context) { var context = context || window context.fn = this var result // 需要判断是否存储第二个参数 // 如果存在，就将第二个参数展开 if (arguments[1]) { result = context.fn(...arguments[1]) } else { result = context.fn()

2020-07-30 09:38:19 348

原创如何实现一个 call 函数

Function.prototype.myCall = function (context) { var context = context || window // 给 context 添加一个属性 // getValue.call(a, 'sx', '24') => a.fn = getValue context.fn = this // 将 context 后面的参数取出来 var args = [...arguments].slice(1) // getValue.

2020-07-29 09:41:02 377

原创如何实现一个 bind 函数

对于实现以下几个函数，可以从几个方面思考不传入第一个参数，那么默认为 window改变了 this 指向，让新的对象可以执行该函数。那么思路是否可以变成给新的对象添加一个函数，然后在执行完以后删除Function.prototype.myBind = function (context) { if (typeof this !== 'function') { throw new TypeError('Error') } var _this = this var args =

2020-07-29 09:40:10 405

原创 bind、call、apply 区别

call 和 apply 都是为了解决改变 this 的指向。作用都是相同的，只是传参的方式不同。除了第一个参数外，call 可以接收一个参数列表，apply 只接受一个参数数组let a = { value: 1}function getValue(name, age) { console.log(name) console.log(age) console.log(this.value)}getValue.call(a, 'sx', '24')getVa.

2020-07-29 09:39:10 95

原创谈谈变量提升

当执行 JS 代码时，会生成执行环境，只要代码不是写在函数中的，就是在全局执行环境中，函数中的代码会产生函数执行环境，只此两种执行环境。b() // call bconsole.log(a) // undefinedvar a = 'Hello world'function b() { console.log('call b')}想必以上的输出大家肯定都已经明白了，这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误，便于大家理解。

2020-07-28 09:31:20 124

原创页面重构怎么操作

网站重构：不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。页面重构可以考虑的方面：升级第三方依赖使用HTML5、CSS3、ES6 新特性加入响应式布局统一代码风格规范减少代码间的耦合压缩/合并静态资源程序的性能优化采用CDN来加速资源加载对于JS DOM的优化HTTP服务器的文件缓存...

2020-07-28 09:29:22 464

原创你怎么看待 Web App/hybrid App/Native App？（移动端前端和 Web 前端区别？）

Web App(HTML5)：采用HTML5生存在浏览器中的应用，不需要下载安装优点：开发成本低，迭代更新容易，不需用户升级，跨多个平台和终端缺点：消息推送不够及时，支持图形和动画效果较差，功能使用限制（相机、GPS等）Hybrid App(混合开发)：UI WebView，需要下载安装优点：接近 Native App 的体验，部分支持离线功能缺点：性能速度较慢，未知的部署时间，受限于技术尚不成熟Native App(原生开发)：依托于操作系统，有很强的交互，需要用户下载安装使用优..

2020-07-28 09:28:16 932

原创在设计 Web APP 时，应当遵循以下几点

简化不重要的动画/动效/图形文字样式少用手势，避免与浏览器手势冲突减少页面内容，页面跳转次数，尽量在当前页面显示增强 Loading 趣味性，增强页面主次关系

2020-07-27 10:06:27 105

原创 Web 前端开发的注意事项

特别设置 meta 标签 viewport百分比布局宽度，结合 box-sizing: border-box;使用 rem 作为计算单位。rem 只参照跟节点 html 的字体大小计算使用 css3 新特性。弹性盒模型、多列布局、媒体查询等多机型、多尺寸、多系统覆盖测试...

2020-07-27 10:05:35 145

原创组件封装

目的：为了重用，提高开发效率和代码质量注意：低耦合，单一职责，可复用性，可维护性常用操作分析布局初步开发化繁为简组件抽象

2020-07-27 10:04:26 126

原创平时如何管理你的项目

先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；页面进行标注（例如页面模块开始和结束）；CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；JS 分文件夹存放命名以该JS功能为准的英文翻译。图片采用整合的 images.png png8 格式文件使用 - 尽量整合在一起使用方便将来的管理规定全局样式、公共脚本.

2020-07-27 10:03:23 133

原创你觉得前端工程的价值体现在哪

为简化用户使用提供技术支持（交互部分）为多个浏览器兼容性提供支持为提高用户浏览速度（浏览器性能）提供支持为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持为展示数据提供支持（数据接口）...

2020-07-27 10:01:51 183

原创对前端工程师这个职位是怎么样理解的？它的前景会怎么样

前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近实现界面交互提升用户体验基于NodeJS，可跨平台开发前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好，与团队成员，UI设计，产品经理的沟通；做好的页面结构，页面重构和用户体验；...

2020-07-27 10:00:43 670

原创什么样的前端代码是好的

高复用低耦合，这样文件小，好维护，而且好扩展。具有可用性、健壮性、可靠性、宽容性等特点遵循设计模式的六大原则

2020-07-27 09:59:55 488

原创谈谈你对重构的理解

网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI对于传统的网站来说重构通常是表格(table)布局改为DIV+CSS使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)对于移动平台的优化针对于SEO进行优化...

2020-07-27 09:59:22 570

原创前后端路由差别

后端每次路由请求都是重新访问服务器前端路由实际上只是JS根据URL来操作DOM元素，根据每个页面需要的去服务端请求数据，返回数据后和模板进行组合

2020-07-27 09:58:14 139

原创 js自定义事件

三要素： document.createEvent() event.initEvent() element.dispatchEvent()// (en:自定义事件名称，fn:事件处理函数，addEvent:为DOM元素添加自定义事件，triggerEvent:触发自定义事件)window.onload = function(){ var demo = document.getElementById("demo"); demo.addEvent("test",function(){cons

2020-07-24 09:27:41 135

原创 babel原理

ES6、7代码输入 -> babylon进行解析 -> 得到AST（抽象语法树）-> plugin用babel-traverse对AST树进行遍历转译 ->得到新的AST树->用babel-generator通过AST树生成ES5代码

2020-07-24 09:26:38 99

原创内存泄漏

定义：程序中己动态分配的堆内存由于某种原因程序未释放或无法释放引发的各种问题。js中可能出现的内存泄漏情况结果：变慢，崩溃，延迟大等，原因：全局变量dom清空时，还存在引用ie中使用闭包定时器未清除子元素存在引起的内存泄露避免策略减少不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收；注意程序逻辑，避免“死循环”之类的；避免创建过多的对象原则：不用了的东西要及时归还。减少层级过多的引用...

2020-07-24 09:25:46 167

原创 CDN

内容分发网络，基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。

2020-07-23 09:54:33 187 1

原创负载均衡

多台服务器共同协作，不让其中某一台或几台超额工作，发挥服务器的最大作用http重定向负载均衡：调度者根据策略选择服务器以302响应请求，缺点只有第一次有效果，后续操作维持在该服务器 dns负载均衡：解析域名时，访问多个ip服务器中的一个（可监控性较弱）反向代理负载均衡：访问统一的服务器，由服务器进行调度访问实际的某个服务器，对统一的服务器要求大，性能受到服务器群的数量...

2020-07-23 09:53:58 96

原创实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制

Object.prototype.clone = function(){ var o = this.constructor === Array ? [] : {}; for(var e in this){ o[e] = typeof this[e] === "object" ? this[e].clone() : this[e]; } return o; }

2020-07-23 09:52:58 385

原创数组扁平化处理

实现一个flatten方法，使得输入一个数组，该数组里面的元素也可以是数组，该方法会输出一个扁平化的数组function flatten(arr){ return arr.reduce(function(prev,item){ return prev.concat(Array.isArray(item)?flatten(item):item); },[]);}...

2020-07-22 09:22:44 140

原创实现一个函数，判断输入是不是回文字符串

function run(input) { if (typeof input !== 'string') return false; return input.split('').reverse().join('') === input;}

2020-07-22 09:21:56 333

原创实现每隔一秒钟输出1,2,3...数字

for(var i=0;i<10;i++){ (function(j){ setTimeout(function(){ console.log(j+1) },j*1000) })(i)}

2020-07-22 09:21:21 1674

原创写一个function，清除字符串前后的空格

使用自带接口trim()，考虑兼容性：if (!String.prototype.trim) { String.prototype.trim = function() { return this.replace(/^\s+/, "").replace(/\s+$/,""); }} // test the function var str = " \t\n test string ".trim(); alert(str == "test string"); //.

2020-07-21 09:44:55 254

原创写一段JS程序提取URL中的各个GET参数

有这样一个URL：https://blog.csdn.net/LuckXinXin?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{a:'1', b:'2', c:'', d:'xxx', e:undefined}function serilizeUrl(url) { var result = {}; url = url.split(

2020-07-21 09:44:06 575

原创用js实现随机选取10–100之间的10个数字，存入一个数组，并排序

var iArray = []; funtion getRandom(istart, iend){ var iChoice = istart - iend +1; return Math.floor(Math.random() * iChoice + istart; } for(var i=0; i<10; i++){ iArray.push(getRandom(10,100)); } iArray.sort();

2020-07-21 09:42:32 438

原创输出今天的日期

以YYYY-MM-DD的方式，比如今天是2020年7月20日，则输出2020-07-20var d = new Date(); // 获取年，getFullYear()返回4位的数字 var year = d.getFullYear(); // 获取月，月份比较特殊，0是1月，11是12月 var month = d.getMonth() + 1; // 变成两位 month = month < 10 ? '0' + month : month; // 获取日 v.

2020-07-20 09:40:01 642

原创定义一个log方法，让它可以代理console.log的方法

可行的方法一： function log(msg)　{ console.log(msg); } log("hello world!") // hello world!如果要传入多个参数呢？显然上面的方法不能满足要求，所以更好的方法是： function log(){ console.log.apply(console, arguments); };...

2020-07-20 09:38:32 519

原创下面这个ul，如何点击每一列的时候alert其index

<ul id=”test”> <li>这是第一条</li> <li>这是第二条</li> <li>这是第三条</li> </ul> // 方法一： var lis=document.getElementById('2223').getElementsByTagName('li'); for(var i=0;i<3;i++) { lis[i].in.

2020-07-20 09:37:51 1069 1

原创实现一个函数clone

可以对JavaScript中的5种主要的数据类型,包括Number、String、Object、Array、Boolean）进行值复// 方法一： Object.prototype.clone = function(){ var o = this.constructor === Array ? [] : {}; for(var e in this){ o[e] = typeof this[e] === "object" ?.

2020-07-19 18:43:23 199

原创 bind的用法，以及如何实现bind的函数和需要注意的点

bind的作用与call和apply相同，区别是call和apply是立即调用函数，而bind是返回了一个函数，需要调用的时候再执行。一个简单的bind函数实现如下Function.prototype.bind = function(ctx) { var fn = this; return function() { fn.apply(ctx, arguments); };};...

2020-07-19 18:42:17 904

原创编写一个方法求一个字符串的字节长度

假设：一个英文字符占用一个字节，一个中文字符占用两个字节function GetBytes(str){ var len = str.length; var bytes = len; for(var i=0; i<len; i++){ if (str.charCodeAt(i) > 255) bytes++; } return bytes;}alert(GetBytes(“你好,sx”));...

2020-07-19 18:41:41 1434

原创快速排序

采用二分法，取出中间数，数组每次和中间数比较，小的放到左边，大的放到右边var arr = [5,1, 88, 66, 23, 11,8];function quickSort(arr) {if(arr.length == 0) {return []; // 返回空数组}var cIndex = Math.floor(arr.length / 2);var c = arr.splice(cIndex, 1);var l = [];var r = [];for (var i =.

2020-07-19 18:40:36 100