![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
松宝写代码
他大舅他二舅都是他舅
展开
-
javascript引擎执行的过程的理解--语法分析和预编译阶段
一、概述js是一种非常灵活的语言,理解js引擎的执行过程对于我们学习js是非常有必要的。看了很多这方便文章,大多数是讲的是事件循环(event loop)或者变量提升的等,并没有全面分析其中的过程。所以觉得把这个js执行的详细过程整理一下,帮助更好的理解js。1.1基础概念js是单线程语言。在浏览器中一个页面永远只有一个线程在执行js脚本代码js是单线程怨言,但是代码解析是...原创 2019-01-08 17:25:44 · 338 阅读 · 0 评论 -
数据可视化系列--svg入门基础(二)
接上一篇:数据可视化-svg入门基础(一),基础一主要是介绍了svg概念,元素样式设置等。svg是(scalable vector graphic)伸缩矢量图像。一、目录(1)图形元素(2)文字元素(3)特殊元素(4)滤镜元素(5)渐变元素二、图形元素1、矩形矩形使用<rect></rect>标签来进行绘制。示例图:...原创 2019-05-15 17:06:42 · 354 阅读 · 0 评论 -
浅析SSR(服务端渲染)和SPA(客户端渲染)
一、前言C端项目重构成首屏服务端渲染(SSR:serve side render),对于重构成SSR,redux不是必须的。本文以vue为栗子的项目。二、什么是服务端渲染将组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序。我以weekly周报的登陆页面为例登陆页没有使用服务端渲染,请求到login页面,返回的b...原创 2019-05-24 17:53:32 · 9422 阅读 · 1 评论 -
框架选择--如何看待前端框架选型 ?
对于前端团队,可以实现企业受益最大化要点。一、技术选型的策略1、保证产品质量(1)功能稳健:网页不白屏,不错位,不卡死;操作正常;数据精准。(2)体验优秀:加载体验,交互体验,视觉体验,无障碍访问。2、降低人力成本(1)降低前期开发成本;(2)降低后期维护成本。二、前端开发模式选择开发模式:1、纯前端开发;2、前后端分离开发;3、后端主导的开发。1、纯...原创 2019-05-16 20:59:33 · 1273 阅读 · 0 评论 -
V8引擎--浅析Chrome V8引擎中的垃圾回收机制和内存泄露优化策略
V8 实现了准确式 GC,GC 算法采用了分代式垃圾回收机制。因此,V8 将内存(堆)分为新生代和老生代两部分。一、前言V8的垃圾回收机制:JavaScript使用垃圾回收机制来自动管理内存。垃圾回收是一把双刃剑,其好处是可以大幅简化程序的内存管理代码,降低程序员的负担,减少因 长时间运转而带来的内存泄露问题。但使用了垃圾回收即意味着程序员将无法掌控内存。ECMAScript没有...原创 2019-05-16 21:02:45 · 654 阅读 · 0 评论 -
JavaScript系列--类型判断的4种基本方法,研究jquery的type方法,空对象的检测方法,类数组对象
一、前言类型判断有时候真的头疼,但是一旦熟练使用就会觉得不过如此。初级的,会判断数字和字符串。中级的,会判断数组和对象。进阶的,会判断日期,正则,错误类型。高级的,会判断plainObject,空对象,window对象等等。基本类型:String、Number、Boolean、Symbol、Undefined、Null引用类型:Object基本类型也称为简单类型,由于其占据空间固定...原创 2019-05-23 11:04:12 · 117 阅读 · 0 评论 -
JavaScript 系列--JavaScript一些奇淫技巧的实现方法(三)数字取整,数组求和
一、前言简短的sleep函数,获取时间戳:https://www.mwcxs.top/page/746.html数字格式化 1234567890 --> 1,234,567,890;argruments 对象(类数组)转换成数组:https://www.mwcxs.top/page/749.html今天我们来介绍一下数字取整,数组求和。二、数字取整1、普通版...原创 2019-06-04 21:10:14 · 466 阅读 · 0 评论 -
JavaScript 系列--JavaScript一些奇淫技巧的实现方法(一)简短的sleep函数,获取时间戳
一、前言有些东西很好用,但是你未必知道;有些东西你可能用过,但是你未必知道原理。实现一个目的有多种途径,俗话说,条条大路通罗马。发散一下大家的思维以及拓展一下知识面。二、实现一个简短的sleep函数sleep函数主要用来做延迟执行的,很多编程语言都有sleep函数,但是javascript没有这个函数,我们实现一下:1、简单版本function sleep(sleep...原创 2019-05-31 14:37:44 · 335 阅读 · 0 评论 -
JavaScript 系列--JavaScript一些奇淫技巧的实现方法(二)数字格式化 1234567890到 1,234,567,890;argruments 对象(类数组)转换成数组
一、前言之前写了一篇文章:JavaScript 系列--JavaScript一些奇淫技巧的实现方法(一)简短的sleep函数,获取时间戳https://www.mwcxs.top/page/746.html介绍了sleep函数和获取时间戳的方法。接下来我们来介绍数字格式化1234567890-->1,234,567,890二、数字格式化1234567890--&...原创 2019-05-31 14:41:04 · 375 阅读 · 0 评论 -
JavaScript数组reduce()方法详解及奇淫技巧
一、前言reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。reduce() 可以作为一个高阶函数,用于函数的 compose。reduce()方法可以搞定的东西,for循环,或者forEach方法有时候也可以搞定,那为啥要用reduce()?这个问题,之前我也想过,要说原因还真找不到,唯一能找到的是:通往成功的道路有很多,但是总有一条路...原创 2019-06-06 16:06:00 · 2826 阅读 · 0 评论 -
webAssembly系列--webAssembly初探究竟
一、前言自从JavaScript诞生开始,到现在开始变成流行的编程语言,背后的是web发展所推动的。web应用的变得更多更复杂,但是渐渐暴露出JavaScript的问题:(1)语法太灵活导致开发大型web项目困难;(2)性能不足满足一些场景的需要。二、为什么需要WebAssembly针对以上的问题,JavaScript出现了一些代替语言,比如:(1)微软的TypeSc...原创 2019-06-14 13:36:58 · 4325 阅读 · 0 评论 -
懒加载实践--js图片懒加载及优化
一、前言为啥要对图片使用懒加载?我们首先来聊聊这个问题,对于页面来说架子啊速度影响着最大的就是图片,一张普通的图片可以达到4-5M的大小,而代码压缩也就只有几十KB。当页面图片过多的时候,页面加载速度很缓慢,一个页面加载几秒没有完成,用户体验不好,会丧失很多用户的。所以对于图片过多的页面,可以为了加速页面加载速度,很多时候我们需要将页面内未出现的可视区域内的图片先不加载,等到滚动到可视区的...原创 2019-06-14 13:38:51 · 433 阅读 · 0 评论 -
vue系列--Virtual DOM 真的比操作原生 DOM 快吗?
一、前言网上都说操作真实dom怎么怎么慢,这儿有个例子:http://chrisharrington.github.io/demos/performance/,例子循环2000个随机数组,点击按钮重新生成随机数组渲染页面,也是自己用的js 操作dom 比用react 和angular 都要快。这是引用知乎上的一个问题。觉得写的很好。文章内容主要是来源于尤大大的回答。二、原生dom操作...原创 2019-06-10 14:11:37 · 1802 阅读 · 0 评论 -
【JavaScript系列】深入javascript的主流的模块规范
一、前言目前主流的模块规范:1、UMD通用模块2、CommonJs3、es6 module二、UMD模块(通用模块)(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = fact...原创 2019-07-02 23:06:13 · 339 阅读 · 0 评论 -
【JavaScript系列】类型判断(typeof,instanceof,constructor,Object.prototype.toString)
一、前言类型判断有时候真的头疼,但是一旦熟练使用就会觉得不过如此。初级的,会判断数字和字符串。中级的,会判断数组和对象。进阶的,会判断日期,正则,错误类型。高级的,会判断plainObject,空对象,window对象等等。基本类型:String、Number、Boolean、Symbol、Undefined、Null引用类型:Object基本类型也称为简单类型,由于其占据空间固...原创 2019-07-25 09:33:26 · 529 阅读 · 0 评论 -
【JavaScript系列】时间复杂度和空间复杂度
一、前言时间复杂度和空间复杂度,我们在大学里的算法与数据结构课程中已经学习过,这回根据项目工作中整理一下,这个估计只是一个粗略的估计分析,并不是一个准确的估计分析。1、学习时间复杂度和空间复杂度是很有必要的,这个属于算法与数据结构的范畴,学这个是为了解决代码中的“快”和“省”的问题。这样才能使你的代码运行效率更高,占用空间更小。代码执行效率需要通过复杂度分析。2、数据规模的大小会影响到...原创 2019-07-30 10:34:54 · 2753 阅读 · 1 评论 -
数据可视化系列--svg入门基础(一)
一、前言1、SVG(Scalable Vector Graphics)可伸缩矢量图形特点:(1)使用xml格式来定义图形;(2)用来定义web上的使用的矢量图;(3)改变图像尺寸,图片质量不受损;(4)所有元素属性可以使用动画;(5)继承了W3C标准,在html中使用方式,html直接嵌入svg内容,或者直接引入svg文件。/* svg标签,这里的rect为矩形,...原创 2019-05-15 17:05:53 · 2012 阅读 · 0 评论 -
简单说说JavaScript的Generator 实现(ES6)
Generator 是 ES6 中新增的语法,和 Promise 一样,都可以用来异步编程// 使用 * 表示这是一个 Generator 函数// 内部可以通过 yield 暂停代码// 通过调用 next 恢复执行function* test() { let a = 1 + 2; yield 2; yield 3;}let b = test();console.l...原创 2019-05-15 17:03:02 · 406 阅读 · 0 评论 -
JavaScript系列--浅析原型链与继承
一、前言继承是面向对象(OOP)语言中的一个最为人津津乐道的概念。许多面对对象(OOP)语言都支持两种继承方式::接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。由于js中方法没有签名,在ECMAScript中无法实现接口继承。ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的。二、概念2.1简单回顾下构造函数,原型和...原创 2019-05-14 14:56:57 · 226 阅读 · 0 评论 -
javascript引擎执行的过程的理解--执行阶段
一、概述同步更新sau交流学习社区(nodeJSBlog):javascript引擎执行的过程的理解--执行阶段js引擎执行过程主要分为三个阶段,分别是语法分析,预编译和执行阶段,上篇文章我们介绍了语法分析和预编译阶段,那么我们先做个简单概括,如下:1、语法分析: 分别对加载完成的代码块进行语法检验,语法正确则进入预编译阶段;不正确则停止该代码块的执行,查找下一个代码块并进行加载,加载...原创 2019-02-13 09:58:25 · 241 阅读 · 0 评论 -
javascript深入浅出图解作用域链和闭包
一、概要对于闭包的定义(红宝书P178):闭包就是指有权访问另外一个函数的作用域中的变量的函数。关键点:1、闭包是一个函数2、能够访问另外一个函数作用域中的变量文章首发sau交流学习社区:https://www.mwcxs.top/page/571.html二、闭包特性对于闭包有下面三个特性:1、闭包可以访问当前函数以外的变量function getOuter...原创 2019-02-23 23:09:54 · 127 阅读 · 0 评论 -
javascript深入理解-从作用域链理解闭包
一、概要红宝书(P178)对于闭包的定义:闭包就是有权访问另外一个函数作用域中变量的函数。MDN,对于闭包的定义:闭包就是指能够访问自由变量的函数。那么什么是自由变量?自由变量就是在函数中使用,但既不是函数参数arguments,也不是函数的局部变量的变量,就是说另外一个函数作用域中的变量。闭包组成?闭包 = 函数 + 函数能够访问的变量同步首发地址:https://www...原创 2019-02-28 17:03:08 · 179 阅读 · 0 评论 -
this指向以及apply,call,bind三者的区别
一、前言this指向,apply,call,bind的区别是一个经典的面试问题,同时在项目中会经常使用到的原生的js方法。同时也是ES5中的众多坑的一个。ES6中可能会极大的避免了this产生的错误,有时候需要维护老的项目还是有必要了解一下this的指向和apply,call,bind三者的区别。 二、this的指向在ES5中,其实this的指向,始终坚持一个原理:this永远指向...原创 2019-02-25 21:58:13 · 476 阅读 · 0 评论 -
captcha.js一个生成验证码的插件,使用js和canvas生成
一、前言captcha.js是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置。验证码插件内容,包含1、验证码插件-使用,2、验证码插件栗子,3、API介绍,4、支持浏览器。二、功能版本v 1.0.01、支持随机字符内容配置,字符大小配置,字符类型配置,字符绘制方式配置,字符长度配置等2、支持点...原创 2019-03-07 23:13:22 · 3852 阅读 · 0 评论 -
javascript深入理解--作用域,作用域链,闭包的面试题解
一、概要作用域和作用域链是js中非常重要的特性,关系到理解整个js体系,闭包是对作用域的延伸,其他语言也有闭包的特性。那什么是作用域?作用域指的是一个变量和函数的作用范围。1、js中函数内声明的所有变量在函数体内始终是可见的;2、在ES6中有全局作用域和局部作用域,但是没有没有块级作用域(catch只在其内部生效);3、局部变量的优先级高于全局变量。文章首发:https:/...原创 2019-03-11 21:48:00 · 462 阅读 · 0 评论 -
javascript之this指向和apply,call,bind三者的区别
一、前言this指向,apply,call,bind的区别是一个经典的面试问题,同时在项目中会经常使用到的原生的js方法。同时也是ES5中的众多坑的一个。ES6中可能会极大的避免了this产生的错误,有时候需要维护老的项目还是有必要了解一下this的指向和apply,call,bind三者的区别。二、this的指向在ES5中,其实this的指向,始终坚持一个原理:this永远指向...原创 2019-03-25 10:20:07 · 109 阅读 · 0 评论 -
javascript数组的常用算法解析
一、不改变原数组,返回新数组(字符串)1、concat() 连接两个或者多个数组,两边的原始数组都不会变化,返回的是被连接数组的一个副本。2、join() 把数组中所有的元素放入到一个字符串中,返回字符串var a = [1,2,3];a.join([4,5,6]); // "14,5,624,5,63"a.join('sau'); // "1sau2s...原创 2019-03-18 20:14:43 · 112 阅读 · 0 评论 -
ES6--浅析Promise内部结构
首发于:sau交流学习社区一、前言什么是promise?promsie的核心是什么?promise如何解决回调地狱的?等问题1、什么是promise?promise是表示异步操作的最终结果;可以用来解决回调地狱和并发IO操作的问题Apromiserepresents the eventual result of an asynchronous operation.2...原创 2019-03-26 09:05:02 · 272 阅读 · 0 评论 -
happyChat开发系列:使用websocket.io实现双向通信的乐聊大前端开发
一、前言乐聊是一个自己用websocket写一个完整的应用,虽然功能比较欠缺,但是实现了基本的文字聊天,以及群聊,私聊,机器人聊天等功能。因为这个自己做了PC端,无线端(手机端),以及使用cordova打包成一个android的apk。实现了一个大前端的项目,虽然现在android端还是有点有问题,在修改bug。二、websocket的原理介绍1、为什么需要websocket?...原创 2019-04-10 10:39:36 · 487 阅读 · 0 评论 -
javascript正则表达式学习(一)--字符匹配
一、前言正则表达式是匹配模式,要么匹配字符,要么匹配位置。正则里面的元字符太多了,没有系统性,可以分为:(1)字符匹配攻略(2)位置匹配攻略二、字符匹配包括:两种模糊匹配,字符数组,量词,分支结构。1.1两种模糊匹配正则精确匹配乜有意义的,比如正则/saucxs/,只能匹配字符串中的"saucxs"这个子串。var regex = /saucxs/;c...原创 2019-03-28 22:43:23 · 4703 阅读 · 0 评论 -
深入javascript的主流的模块规范
一、前言目前主流的模块规范:1、UMD通用模块2、CommonJs3、es6 module二、UMD模块(通用模块)(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = fact...原创 2019-04-18 17:57:29 · 887 阅读 · 0 评论 -
浅析JavaScript解析赋值、浅拷贝和深拷贝的区别
一、赋值(Copy)赋值是将某一数值或对象赋给某个变量的过程,分为:1、基本数据类型:赋值,赋值之后两个变量互不影响2、引用数据类型:赋**址**,两个变量具有相同的引用,指向同一个对象,相互之间有影响对基本类型进行赋值操作,两个变量互不影响。// saucxslet a = "saucxs";let b = a;console.log(b); // saucxs...原创 2019-04-19 09:07:03 · 222 阅读 · 0 评论 -
javascript系列--认识并理解构造函数,原型和原型链
一、前言介绍构造函数,原型,原型链。比如说经常会被问道:symbol是不是构造函数;constructor属性是否只读;prototype、[[Prototype]]和__proto__的区别;什么是原型链?等等问题。文章首发地址(sau交流学习社区)二、构造函数1、什么构造函数构造函数就是通过new关键词生成实例的函数。js的构造函数和其他语言不一样,一般规范都是首字母...原创 2019-04-29 09:16:37 · 203 阅读 · 0 评论 -
JavaScript系列--深浅拷贝简单实现
一、前言之前写了一篇:浅析JavaScript解析赋值、浅拷贝和深拷贝的区别:https://www.mwcxs.top/page/592.html。里面介绍了解析赋值,浅拷贝,深拷贝的原理和实现。浅拷贝方法:Object.assign(),展开语法Spread,Array.prototype.alice(),array.prototype.concat()。深拷贝方法:JSON.parse(...原创 2019-08-24 23:06:19 · 206 阅读 · 0 评论