你不知道的JavaScript上 之 作用域与闭包；基于 vue 的移动端页面可视化搭建工具思路；最全的前端模块化方案；一百行js代码实现一个校验工具；手撸 JavaScript 模板引擎；NodeJS FS模块 API；【JS系列】一起理解对象的7种创建方式（全）；配置一个vue3.0项目
-
你不知道的JavaScript上 之 作用域与闭包 本文会用导图梳理本书的脉络，由于是导读， 正文部分只会列举重点内容 ，非重点内容会简单介绍，欢迎讨论与阅读原文。此外本文 适合未读过此书的同学参考是否需要阅读 ，另外 读过此书的同学，可以尝试回答文初的问题及顺着导图回忆本书内容 ，如果非常流畅那么相信您对书中的知识的理解是过关的。 上一篇我们讲了本…
-
基于 vue 的移动端页面可视化搭建工具思路 首先我承认我标题党了。。。与其说是可视化搭建工具，不如说是可视化生成页面配置工具，即用拖拽的方式生成页面配置，再通过框架的动态组件的方式，基于配置，生成页面。 现在的公司，一个个都开始整自己的组件库，组件库搭建好以后，通过业务积累、聚合基础组件及抽象部分业务代码，又会产出复用性比较高的区块库，而…
-
最全的前端模块化方案 模块化主要是用来抽离公共代码，隔离作用域，避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。 会讲述以下内容 CommonJS AMD 及 核心原理实现 CMD 及 核心原理实现 UMD 及 源码解析 ES6 Module webpack打包策略 CommonJS 同步加载 CommonJS API是以在浏览器环境之外…
-
一百行js代码实现一个校验工具 源码： git仓库 欢迎star & fork ～～ 做过校验需求的小伙伴们都知道，校验其实是个麻烦事。 规则多，需要校验的字段多，都给我们前端带来巨大的工作量。 一个不小心，代码里就出现了不少 if else 等不可维护的代码。 因此，我觉得一个团队或者是一个项目，需要一个校验工具，简化我们的工作。 …
-
手撸 JavaScript 模板引擎 当下前端充斥着各种各样的开发框架：React，Vue 等等。然而大多数这些框架的设计模式是采用了以数据为核心的 MVVM 模式。MVC 的开发模式已经离我们渐行渐远。 对于 MVVM 模式来说，最核心的部件就是一个围绕数据的模板引擎。 模板引擎分为前端和后端 前端常用的模板引擎如：mustache.js，渲染是在客户端完成…
-
NodeJS FS模块 API 1、读取文件readFile函数 //readFile(filename, ,callback); /** * filename, 必选参数，文件名 * ,可选参数，可指定flag（文件操作选项，如r+ 读写；w+ 读写，文件不存在则创建）及encoding属性 * callback 读取文件后的回调函数，参数默认第一个err,第二个data 数据 */ fs.readFile(__dirnam…
-
【JS系列】一起理解对象的7种创建方式（全） 起初接触JS时常见的简单地创建单个对象的方式有下面三种： 字面量，即var obj = {} new Object() Object.create() 以上三种方式在需要创建很多对象时会产生大量重复代码。显然需要更高效的方式，下面将介绍7种创建对象的方式 1. 工厂模式 1.1介绍 工厂模式正是源自设计模式中的工厂模式，其基…
-
配置一个vue3.0项目 说起来有点丢人，我已经使用vue好久了，但是怎么从0开始配置一个vue项目，每次还是要百度。这次决定写个博客，加强下记忆，如果再记不住就直播自己的女朋友洗澡。 以下以新建一个图书管理项目为例。我使用vue3新建项目，对于创建一个项目来说，vue3真的比vue2简单很多。 1.初始化项目 1.1全局安装vue-cli 创建vu…
-
给小白准备的 Web 架构基础知识 警告：本文内容是入门级的，大佬请按秩序有序撤离。 原文地址：Web Architecture 101 上图很好的展示了我们在Storyblocks的架构。如果你是一个新手工程师，可能会觉得这个架构非常复杂。在我们深入研究每个组件的细节之前，首先应该对它们有个大概的了解。 当一个用户在Goo…
-
babel7使用分析 babel7 重新理解 测试环境 node 10.14.1 Babel 7.4.3 Babel 是什么？ Babel 是一个工具链，主要用于将 ECMAScript2015+版本的代码转换为向后兼容的 Javascript 代码，以便能够运行在当前和旧版本的浏览器或其他环境中。 Babel 主要功能点： 语法转换 垫片兼容处理，通过 Polyfill 方式在目标环…
-
2019前端基础面试秘籍 77777777777777777777777777777777777777777777777777777777777777777777777777 一、html和css部分 1、如何理解CSS的盒子模型？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 复制代码 2、BFC？ * 什…
-
Webpack打包优化：使用外链与拆包模式 这是一个基于 vue-cli 的管理后台项目，由于依赖较多，打包结果如下 二、查找原因 为什么 vendor 体积这么大？ 引用的库太多时，vendor的体积会很大，借助 Webpack 的分析工具，看了下各个依赖的体积分布 找到原因，是 Highcharts 和 Element-UI占了较大体积，导致性能减弱。 这两个库都…
-
从0带您打造企业级 Vue 服务器渲染 Nuxt.js (一) 入门 首先不管是Vue React Angular 等单页面应用渲染是从服务器获取所需Js，在客户端将其解析生成 HTML， 这样会带来几个问题。 首屏先去服务器请求完成 Js 然后再由 Js 生成 HTML 元素，这会导致网站首屏加载缓慢，不利于用户体验。 页面的 HTML 元素都是由后期的 Js 动态生成，搜索引擎无法爬取（谷歌目前已经可以…
-
JS 异步错误捕获二三事我们都知道 try catch 无法捕获 setTimeout 异步任务中的错误，那其中的原因是什么。以及异步代码在 js 中是特别常见的，我们该怎么做才比较？
-
jQuery源码解析之clone() 前言：这篇讲完后，jQuery的 文档处理 就告一段落了，有空我把这部分整合下，发一篇文章目录。 一、示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery源码解析之clone()</title> </head> <body> &…
-
JS笔记(12): 对象的继承 继承：子类继承父类的属性和方法： 继承的目的：就是为了代码能够更好复用，组合起来生成一个新的类别 1.原型继承 2.call继承 3.寄生组合继承 4.ES6中的class类实现继承 5.扩展式继承 B.prototype = {…A.prototype} 6.deepclone深克隆 B.prototype = deepclone(A.prototype) …
-
手把手教你写一个 Webpack Loader首先我们来看一下为什么需要loader，以及他能干什么?webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。
-
JS计算两个时间间隔若需要和当前时间比较，这里提供当前时间的获取格式化方法。我这里是根据传入类型输出日期或者日期+时间，可以明显看出type为day时，输出日期。
-
webpack系列之五module生成1 对于 webpack 来说每个文件都是一个 module，这篇文章带你来看 webpack 如何从配置中 entry 的定义开始，顺藤摸瓜找到全部的文件，并转化为 module。 总览 webpack 入口 entry，entry 参数是单入口字符串、单入口数组、多入口对象还是动态函数，无论是什么都会调用 compilation.addEntry 方法，这个方法会执行 _add…
-
从前端角度彻底搞懂 DIP、IoC、DI、JS 在这个标题中，除了 JS 是乱入之外，其它的几个词汇都是存在一个共同点的，那就是依赖。 那么，依赖是什么呢？ 比如，现在我正在写这篇博客文，但是我得在电脑上编辑，电脑便是我完成这件事的依赖。而在代码中，最直观的体现是模块之间的依赖。如某个模块依赖另外一个模块，那么另外的那个模块就是该模块的…
-
如何学习配置webpack(一） 自己配置过webpack的人应该都知道，webpack真的好复杂，一开始做项目都是拿别人现成的做做小修改，但是别人的终究没有自己配的舒服。所以我打算写这篇文章，从我的配置中带大家了解webpack配置，简化读webpack官方页面的复杂度。 首先我们需要明确我们要求webpack做什么？ 1.所写即所得，我们在编译器中写了代码能马…
-
一步步使用 webpack 第五篇：使用 webpack 编译 TypeScript 代码 上一篇文章中， 使用 webpack 完成了 vue 代码的编译 。接下来在 vue 单文件组件的基础上，将 js 升级为 ts ，使用 webpack 编译 TypeScript 代码。 版本说明 本文使用的 webpack 的版本为： 4.30.0 开始搭建 本文的目的是：完成 .ts 文件以及 vue 单文件页面中 TypeScript 代码的编译。 安装 loader …
-
移动平均 (EWMA) 在 HLS.JS 的实践 才开始大家一直在想，什么是移动均线？ 哪里会用到？？ 对于常规的页面，实际上很难说需要到具体到有需要用到 网络宽带的预估，但是对于流媒体或者上传服务时候，这个就很重要了，我们需要根据不同网速情况，做策略上的更改，从而改善体验。 做视频播放的很多童鞋，经常在 Youtube 上看到这么一个仪表盘，…
-
八问WebSocket协议：为你快速解答WebSocket热门疑问 一、引言 WebSocket是一种比较新的协议，它是伴随着html5规范而生的，虽然还比较年轻，但大多主流浏览器都已经支持。它使用方面、应用广泛，已经渗透到前后端开发的各种场景中。 对http一问一答中二式流程（就是从所周之的“长轮询”技要啦）的不满，催生了支持双向通信的WebSocket诞生。WebSocket是个不太干净协议。 …
-
JS版数据结构第二篇(队列) 本片博客参考到银国徽老师的《Js版数据结构与算法》 队列 队列的定义 相信通过上篇博客大家对栈有了一个大概的认识,今天我们开始对队列的学习。 我们还是先看一下百度百科上对 队列 的定义: 说白了就是队列是一种受限的线性表,”受限”体现在只能从表的前端(队头)进行删除,只能从表的后端(队尾)进行插…
-
Vue源码: 关于vm.$watch()内部原理 关于vm.$watch()详细用法可以见官网。 大致用法如下: <script> const app = new Vue({ el: "#app", data: { a: { b: { c: ‘c’ } } }, mounted () { this.$watch(fu…
-
✨如何用JS实现“划词高亮”的在线笔记功能？✨️上图的示例网站可以点击这里访问。用户选择一段文本（即划词），即会自动将这段选取的文本添加高亮背景，用户可以很方便地为网页添加在线笔记。
-
浏览器渲染过程及JS引擎浅析 Home Programming >Front end >Javascript 浏览器渲染过程及JS引擎浅析 文章目录 前言 本文由于作者水平有限，肯定有错误之处，如果你看到，希望能够指出，感谢。 相信大家都听过一道经典的面试题：“在浏览器输入URL后回车之后发生了什么”，我一直想解答这个问题，不过这个题目涉及的知识…
-
快速上手最新的 Vue CLI 3概要：本文将指导你快速上手 Vue CLI 3，包括最新的用户图形界面和即时原型制作功能的使用步骤。
-
vue项目中使用fetch开发 fetch的由来和定义 fetch的由来 众所周知，传统 Ajax （指 XMLHttpRequest）是最早出现的发送异步请求技术，其核心是使用XMLHttpRequest对象。但是它也存在一些令人头疼的问题：XHR 是一个设计粗糙的 API，不符合关注分离的原则；配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，genera…
前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多
