wantnocode / blog

Technology sharing, about FE(front end)

Hi there 👋

• 🔭 A software developer
• 🤔 Like coding and things worth liking.
• 🌱 I’m currently learning take a video...

blog's Issues

JS运行机制介绍

写在前面

首先涉及JavaScript运行机制内容博客,书籍很多;内容核心也并没有太大分歧;但是呢最近每次接待的面试者还是很混乱...我这边水的目的也是希望加入个人的一些观点更方便大家的认识了解。

正文

文章内容呢还是说一些老话题,但是温故而知新。希望能够助力大家面试更加顺利!大概从以下几个方面聊一下:

1. JavaScript为什么是单线程?
2. JavaScript的运行机制?

为了减少大家阅读时间(保护视力),下文JavaScript除标题外都用简写JS代替。

JavaScript为什么是单线程?

首先大家都知道JS语言特点是单线程(不知道是JS是单线程的同学点一下右上角的X吧--,),意味着所有的事情(任务)必须依次进行。同一个时间不能够做多个事情。那么相信大家会有疑问。为什么不设计成多线程呢?如果可以同时执行很多事情效率肯定会大幅提升啊。

不不不,首先语言的设计需要考虑的因素很多,不能光从性能or吸取百家所长目的进行设计。首先它的设计初衷(更多的用途)是为了解决用户交互,进行DOM操作。如果假设设计为多线程那么需要考虑的地方可能更复杂,比如进行DOM操作同一时刻(时间)多个线程对于了一个DOM增加,删除。那么如何进行处理?如何执行(以哪个线程为准)?

所以为了避免以上问题,而且降低一些复杂性。换个角度来说单线程无疑是最好的解决方案。这也是作为这个语言的一个特性优势,降低了一些编码困难度。

即便现在提出来的Web Worker线程,它也是明确不允许操作的DOM的。这也是为了规避以上问题,但是又想充分利用硬件资源的一种解决方案。

JavaScript的运行机制

单线程语言,意味着所有执行任务都需要排队,那么对于硬件设备的利用可谓很不充分,不合理。所以JS语言设计者从运行机制方面做出了更合理的设计。

谈起JS的运行机制,会提到很多概念:任务队列,主线程,同步任务,异步任务,event-loop等等。。然后很多人就望而却步。。内部到底是怎么运行的呢?其实很简单一句话可以描述:

JS内部分为同步任务和异步任务。同步任务会进入主线程,异步任务会进入任务队列。任务队列负责将可执行的异步任务通知主线程,主线程去进行任务读取。但是所有执行均为主线程进行执行。主线程一空就会去读取任务队列,这个过程是循环的称之为event-loop(事件循环)。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。

如果排队是因为计算量大，CPU忙不过来，倒也算了，但是很多时候CPU是闲着的，因为IO设备（输入输出设备）很慢（比如Ajax操作从网络读取数据），不得不等着结果出来，再往下执行。

下面展开介绍一下：

• 同步任务指的是在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。
• 异步任务指的是直接进入任务队列,然后等待满足条件然后最终进入主线程执行的任务。
• 主线程 JavaScript执行事件任务的线程,形成一个执行栈(execution context stack)；
• 任务队列是进行存放异步任务运行结果事件的任务队列(task queue)
• event-loop 主线程任务执行==主线程从"任务队列"中读取事件==执行...，这是个循环的过程。这种运行机制称为Event Loop（事件循环）

后续补充些思维导图更方面大家认识。

聊聊前端工程化

前言

最近呢筛选了很多候选人的简历,看到很多关于前端工程化的描述:
> "个人一直致力于前端工程化..."
> "在公司前端工程化规范,自动化..方面的建设做出了巨大改革..."
...

首先我抱有的希望很大(人才嘛谁能不爱..)然后呢经过交流探讨给我带来更多的反馈是失望。
当然这个领域是非主流前端领域。但是个人觉得还是很有趣味而且有必要进行学习的;
所以今天笔者简单的聊一下前端工程化,希望能给大家带来帮助。

回顾一下前端发展史

笔者为了照顾到不同时间段融入前端大家庭的读者,这边对于前端研发"方式"发展进行一个简单的回顾;回顾经历过几个阶段,从而了解"工程化"提出的必要性。

1. 前后端不分离的时代:那时候所谓的前端担任的工作更多是写页面。 然后还有就是通过一些技术(ASP,JSP...)将数据进行页面填充;涉及到这部分技术更偏向于后端，所以前端可能也不并会涉及到这部分工作。(当然也会有扯皮的时候,谁都不愿意干。。那就是看谁没话语权咯)
2. 前后端半分离时代: 在一部分工作俩边扯来扯去的背景下,就研究着如何进行前后端分离,方便更好的实现团队之间的协作分工。出来很多技术方案 比如在node发展的背景下出现 SSR(server side render) + Node的技术方案;就是服务端将处理好的html模板直接给到前端,前端负责展示。
3. 前后端逐步完全分离: 在各种技术的推进下慢慢出现了逐步前后端完全分离的各类架构方案例如RESTful架构;也就是双方通过协议(http/https/socket)进行调用进行通信数据传输。这样的话彼此的工作可能就不会有太多的扯皮。但是伴随还有一些问题,比如API的设计谁来定的问题,前端定义接口的话可能会更理想化(服务端那边呢有内部的一个大的技术架构服务比如跨集群这些,在这个背景下可能实现确实会比较困难 [也要帮后端兄弟说句话 哈哈.]);所以个人认为更多的是双方合理的讨论设计来进行推动。
4. ....

什么是前端工程化?

在研发技术方案的日益更新背景下。前端已经从"page开发工程师"逐步变成了"app研发工程师";前端的工作随着业务的复杂,用户的体验提升已经不是一个简单的工作了,面临着合作问题,性能问题等等...所以在模式转变下伴随着迎来很多问题:

1. 如何提供团队开发效率?
2. 如何提高项目研发质量?
3. 如何加强项目可维护性?
4. 如何引进更多的人才?
5. ...

为了解决出现的一系列问题就需要选取好的技术架构方案,推进前端工程化的落地。工程化大概包含几个方面呢?

1. 整体规范化
   • 编码规范:项目结构规范;html,js,css编码规范;命名规范;接口规范等等。
   • 协同规范:文档规范;资源管理规范;视觉|交互规范等等
2. 开发模式组件化
   • 模块组件化:公共css提取;公共js提取;公共资源提取等等
   • 技术组件化:base函数库组件化;公共page组件化等等
   • 业务型组件化:同类业务重叠功能组件化等等
3. 工具化&自动化
   • 研发工具化:资源加载整合
   • 自动化构建研发生成环境
   • 自动化部署,单元测试
   • 持续化集成...
4. 技术优化,性能优化,方案优化...
   • 技术优化 大前端的背景下 一定要技术革新进步 别还是冷兵器时代 Jquery一把梭; MVC MVVM的设计模式的优势相信大家都是不言而喻,那么为什么不选择进步呢。
   • 性能优化 2C的业务下这个是必然会经历的一个阶段,用户的体验越来越重要。考虑的不光是程序的实现还有用户的体验简单来说一个首屏加载的时间可能就会导致用户的流失。
   • 方案优化 这方面比如团队来说并不一定有机会推行工程化每一个细节的落地,强行推这个整体方向可能会适得其反;没有最好的只有最合适的。

工程能够解决什么?

#下面通过一个简单的日常现象看一下能够帮我们解决什么问题.

首先在非工具化(webpack构建生成)的背景下很多研发人员都会遇到一个问题。每次项目部署的时候需要使用者(测试,产品,用户)去手动清理浏览器的缓存;这就是一个很头疼的问题;每次解释也挺累的。"静态资源要清下缓存..."那么如何从工程方面解决这个问题呢?

...
<link herf ="XXXX.css">
...
<script src="XXX.js">
....

如上代码看起来是没有什么问题 为什么程序需要每次去清理浏览器缓存呢。原因是现代浏览器为了性能,开支方面的考虑。解决资源加载问题做出了缓存机制 相同静态资源会做出本地的缓存。那么如何解决这个问题呢?很简单请看下面伪代码：

...
<link herf ="XXXX?+'new Date()'.css">
...
<script src="XXX?+'new Date()'+.js">
// 不能这样写哈 示意
....

很多细心的同学在构建工程生产打包的时候已经看到了比如webpack打包它的文件生成一般是"chunk" + hash + .js/css 就是和上面一个解决思路。但是又有问题了 如何决定每个文件到底需不需要进行缓存的问题来做性能优化呢? 比如一些图片啊这些就不需要每次重新载入多浪费带宽资源啊?这个问题留给大家思考一下。或者看一下webpack这些构建工具是如何解决的。

结束啦

前端工程化的必要性以及对于个人的成长是起到了很大的作用;相信大家都有了些许了解。

最后个人认为大家有必要去学习一下。也能在简历上面显得不那么单调。很多人就只会写"精通各种语言,熟悉各种技术..."。哎呀这样只会让你的面试官更加的刁难你。每个语言设计者可能都不敢说自己对于每天在变新的语言每个细节都熟悉。比如就JavaScript来说在日益发展背景下光标准就几百页;谁能记得过来。要学会培养自己语言外的工程能力,架构能力。。加油~ 有任何需要交流的随时留言。

编程范式介绍

编程范式

编程范式Programming paradigm是指计算机中编程的典范模式或方法。

编程范式主要包含：命令式编程(Imperative)、声明式编程(Declarative)和函数式编程(Functional)、

命令式编程：

命令式编程的主要**是关注计算机执行的步骤，即一步一步告诉计算机先做什么再做什么。

比如：如果你想在一个数字集合 collection(变量名) 中筛选大于 5 的数字，你需要这样告诉计算机：

第一步，创建一个存储结果的集合变量 results；
第二步，遍历这个数字集合 collection；
第三步：一个一个地判断每个数字是不是大于 5，如果是就将这个数字添加到结果集合变量 results 中。

声明式编程：

声明式编程是以数据结构的形式来表达程序执行的逻辑。它的主要**是告诉计算机应该做什么，但不指定具体要怎么做。

SQL 语句就是最明显的一种声明式编程的例子，例如：

SELECT * FROM table WHERE num < 5

除了 SQL，网页编程中用到的 HTML 和 CSS 也都属于声明式编程。

通过观察声明式编程的代码我们可以发现它有一个特点是它不需要创建变量用来存储数据。

另一个特点是它不包含循环控制的代码如 for， while。

函数式编程：

函数式编程和声明式编程是有所关联的，因为他们**是一致的：即只关注做什么而不是怎么做。但函数式编程不仅仅局限于声明式编程。

函数式编程最重要的特点是“函数第一位”，即函数可以出现在任何地方，比如你可以把函数作为参数传递给另一个函数，不仅如此你还可以将函数作为返回值。大部分常见的编程语言一半都已经提供了对这种编程方式的支持，比如 JavaScript，再有 C# 中的 LINQ 和 Java 中的 Lambda 和闭包的概念。

相比于以前的命令式编程;声明式编程,我更偏向于使用函数式编程。它可以让代码的逻辑更清晰更优雅。

今天主要介绍下函数式编程,javascript如何进行函数式编程;

function _fn(str){
	return "hello" + str;
}//这是一个纯函数


var pre = "hello"
function _fn(str){
	return pre + str
}//非纯函数  用到了外部的变量

上面这么做的好处是什么?思考一下;下篇后续展开介绍