分享VUE实用的富文本MarkDown；你不知道WebSocket吗？；收集错误信息及堆栈-前端监控之数据收集篇；vue-cli 3.0脚手架，从入门到放弃（二）；【webpack】配置；重学Javascript之引用类型；Web前端学习笔记；css如何实现n宫格布局?
-
分享VUE实用的富文本MarkDown 最近在做一个博客的过程中，写文章这个需求可以说是最重要的，这对比markdown和quill-editor两者，我还是更喜欢markdown这样的富文本工具，那VUE项目如何去使用markdown富文本工具，以及如何在页面上显示我们所记录的markdown文本呢 接下来就以我博客为例子来分享给大家这款实用的富文本 安装 这里我们需要安装2个…
-
你不知道WebSocket吗？ WebSocket是一种在单个TCP连接上进行全双工通信的协议。这里我们发现了一个有趣的词:”全双工”,那我们就来简单了解下通信方式有哪些！ 单工 通信双方中，一方固定为发送端，一方则固定为接收端。信息只能沿一个方向传输。 例如计算机与打印机之间的通信是单工模式 说的简单些就是:我打你你只能忍着！ …
-
收集错误信息及堆栈-前端监控之数据收集篇 js错误是第一指标，任何一个js错误都有可能导致阻塞，影响我们页面的正常运转。 本篇主要对js错误收集的分享 1. 了解异常发生的情况和影响 注： 了解异常发生的情况及影响， 有助于我们选择合适方式进行异常捕获处理 任何一个js异常的发生都会导致当前代码块不能正常执行 那么那些情况会导致js异常阻塞呢? …
-
vue-cli 3.0脚手架，从入门到放弃（二） 想写好代码，和用好一个工具是离不开的， 一般我们使用的工具有 HuilderX,sublimetext3，vscode，webstorm等，个人目前使用的是hb，和vscode，可以根据个人爱好各自选择，但一定要熟练。 vue-cli3.0目录结构 这是创建完项目后的基础目录结构，这里我导入了bootstrap框架。接下来从上到下的看一下每个文件…
-
【webpack】配置 为了用 TypeScript 书写 webpack 的配置文件，必须先安装相关依赖： npm install –save-dev typescript ts-node @types/node @types/webpack 复制代码 类似的，为了使用 CoffeeScript 来书写配置文件, 同样需要安装相关的依赖： npm install –save-dev coffee-script 复制代码 module.exports …
-
重学Javascript之引用类型 注意： 本文章为 《重学js之JavaScript高级程序设计》系列第五章【JavaScript引用类型】。 关于《重学js之JavaScript高级程序设计》是重新回顾js基础的学习。 引用类型的值（对象）是引用类型的一个实例。在ES中，引用类型是一种数据结构，用于将数据和功能组织在一起，也被称之为类。但这并不妥当，引用类型有时候也被…
-
Web前端学习笔记 HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。MDN解释 HTML5 是 W3C 与 WHATWG 合作制定的下一代 HTML 标准。 现代浏览器都已支持Html5 Html5重要常用的知识点介绍。 文档的类型声明 <!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML …
-
css如何实现n宫格布局?常见应用场景 现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在. 带边框, 常用在”功能导航”页面 无边框, 常用在首页分类 设计目标 在scss环境下, 通过mixin实现n宫格, 并且可以支持”有无边…
-
JS中实现页面跳转和刷新方法总结 其实 .href 可以省略 window.location 和 window.location.href 实现的效果是一样的 例如： window.location = "http://www.baidu.com" window.location.href = "http://www.baidu.com" 复制代码 上面两种方法都可以从当前页面跳转到目标页面 不同之处在于 window.location 返回…
-
vue项目开发规范总结 文件名要为多个单词，且语义明确，同时要为大写驼峰 组件名应该始终是多个单词的，根组件 App 以及 、 之类的 Vue 内置组件除外。 反例： Vue.component(‘todo’, { // … }) 复制代码 好例： export default { name: ‘TodoItem’, // … } 复制代码 组件数据data必须为一个函数 反例…
-
JS 基础：函数、对象和原型、原型链的关系 JS的原型、原型链一直是比较难理解的内容，不少初学者甚至有一定经验的老鸟都不一定能完全说清楚，更多的”很可能”是一知半解，而这部分内容又是JS的核心内容，想要技术进阶的话肯定不能对这个概念一知半解，碰到问题靠“猜”，却不理解它的规则！ prototype 只有函数有prototype属性 let a = {} le…
-
JS数组方法总结 因为自己有时会忘记某个JS数组操作的方法，因此就对其进行总结，可以时常回顾。 ES5 join & split const colors = ‘green, red, black’; const colorsArr = colors.split(‘,’); console.log(colorsArr); // const colorsStr = colorsArr.join(‘,’); console.log(colorsStr); // gr…
-
Vue从甜小白到皮大佬系列(三) 生命周期 什么是生命周期? 生命周期是指一个事物从生到死的过程,软件也一样,每个语言都有其生命周期,从出生到死亡,每个阶段做每个阶段应该做的事情,简单说：一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期。 例如面前这位大侠,既然是小白那么就要苦练基本功,千里之行始于足下,万层高楼,平地起,相信在持续…
-
vue-cli3.0 + typescript 实例讲解 使用命令 vue create ，选择 Babel, TS, Router, CSS Pre-processors, Linter 。（虽然暂时没用过单元测试，但是单元测试还是挺重要的以后会学的。） 选好之后一路回车，但是需注意选择 linter 的时候，选择 ESLint ，因为 ts 官方已经宣布正式放弃 TSLint 转向生态更好的 ESLint 了。我这里选择的是 Stan…
-
Element ui表格组件+sortablejs实现行拖拽排序运营小姐姐说想要可以直接拖拽排序的功能，原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置，拖拽操作就很方便
-
浅谈react context好久不见！（两个多月没更新内容，惭愧了三分钟）。接下来的文章主要是开始对react的内容做一些整理（疯狂立Flag）。本文的对象是Context.
-
手把手教你撸一个webpack配置 在模块化的开发过程中我们经常会使用webpack来帮助我们搭建一个良好的开发环境，提升开发效率；很多人对webpack的那么多配置项感到无从下手，下面是我总结的如何构建一个简单的webpack配置。 准备工作 先看一下我们一个简单的webpack配置大概需要的目录结构，暂时我们只处理核心的build和config部分 bui…
-
前端优化之 Http 相关优化总结这个是最根本的途径，假设真的有个 10 几兆以上的静态资源文件，不减少大小的情况下，即使优化做到了极致，用户体验也好不了哪里去。
-
明白了，原来 Go web 框架中的中间件都是这样实现的 这篇文章想谈谈Go的装饰器模式、pipeline(filter)模式以及常见web框架中的中间件的实现方式。 修饰模式 修饰模式是常见的一种设计模式，是面向对象编程领域中，一种动态地往一个类中添加新的行为的设计模式。就功能而言，修饰模式相比生成子类更为灵活，这样可以给某个对象而不是整个类添加一些功…
-
现代 JavaScript 开发系列文章：语法基础与工程实践 历经二十载风云变幻，JavaScript 也终于成为了一流的语言，在前端开发、服务端开发、嵌入式开发乃至于机器学习与数据挖掘、操作系统开发等各个领域都有不俗的表现。而在这不断的变化之后，也有很多语法或者模式成了明日黄花；本系列文章即是希望为读者总结与呈现出最新的应该掌握的 JavaScript 语法基础与实践基础。 …
-
两百行代码实现简易vue框架 本文主要是通过vue原理及特点自己实现的简易vue框架，和源码相比不乏有些粗糙，但是对于JavaScript功底薄、阅读源码有些困难的同学来说，也算是一种探究vue原理的有效方式。 所以本文适合以下同学阅读 已经会使用vue框架的常见功能 JavaScript功底较弱 迫切想了解vue原理，但阅读vue源码感到困难 后…
-
spa前端路由的原理与实现方式 百科：单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 单页的页面即为一个html页面，可以理解为，某个应用中所有的其他页面和单元均为一个预设好的根页面的子组件，通过js，css来控制众多子组件的替换和更新…
-
使用 GitHub Actions 自动化构建 Golang 应用 GitHub 前一段时间推出了自家的自动化构建工具：GitHub Actions，不过目前还没有开放注册，只能通过申请等待官方审核。我第一时间就提交了申请，现在已经审核通过了，所以第一时间体验了GitHub Actions的功能，总体感受是 Travis CI 之类的工具应该现在在墙角瑟瑟发抖吧？ GitHub Actions允许构建一个完整的 CI/C…
-
应用：前端性能监控performance 项目上线后，通常都是都会做埋点，做数据监控、异常监控以及性能监控，本文主要聊聊前端性能监控。重点讲 performance 怎么做性能监控。 前端性能监控通常检测某些方面的加载时间，通过得到的加载时间的长短来判断项目某方面的性能怎样，具体是哪些方面呢？？？我们先来看下页面加载是一个怎样的过程： 页面加载 …
-
Web 安全漏洞之目录遍历 什么是目录遍历 第一次接触到目录遍历漏洞还是在 ThinkJS 2 的时候。代码如下图，目的是当用户访问的 URL 是静态资源的时候返回静态资源的地址。其中pathname就是用户访问的 URL 中的路径，我们发现代码中只是简单的解码之后就在22行将其与资源目录做了拼接，这就是非常明显的目录遍历漏洞了。 …
-
JavaScript 对象和原型链 我们都知道 JavaScript 是一个面向对象的语言，但是它却没有其他诸如 Java、C++ 这些面向对象的语言中都存在 类 的这个概念。取而代之的是 原型 的概念。这其实就是两种不同的编程范式。 基于类的面向对象 在这种范式中，类定义了对象的结构和行为以及继承关系，所有基于该类的对象都有 相同 的行为和结构，不…
-
如何通过 JavaScript 编写高质量的函数（一）：敲山震虎篇 一千个读者，有一千个哈姆雷特。 此系列文章将会从函数的执行机制、鲁棒性、函数式编程、设计模式等方面，全面阐述如何通过 JavaScript 编写高质量的函数。 引言 “ 如何通过 JavaScript 编写高质量的函数，这是一个很难回答的问题，不同人心中…
前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多
