JavaScript系列： 一、手撕JS中的深浅拷贝；在Vue.js编写更好的v-for循环的6种技巧；利用CSS变量进行黑暗模式切换；Vue 组件通信的几种方式汇总；浅谈webpack+vue从零开始的后台管理项目(一) —– webpack配置及构建vue初始化项目；JavaScript 之选择控制语句及很重要的表达式真与假；回炉重造-页面优化-js加载和执行1；[推荐] Web 前端崩溃监控优化历程
-
对象、数组、函数 数据类型不是本文重点， 重点是实现深浅拷贝 下面是要copy的对象, 之后的代码都会直接使用$obj， 之后不会再次声明 // lmran var $obj = { func: function () { console.log(‘this is function’) }, date: new Date(), symbol: Symbol(), a: null, b: undefined, …
-
在VueJS中，v-for循环是每个项目都会使用的东西，它允许您在模板代码中编写for循环。 在最基本的用法中，它们的用法如下。 {代码…} 但是，在本文中，我将介绍六种方法来使你的 v-for 代码更加精确，可预测和强…
-
利用CSS变量进行黑暗模式切换 本文以react为例。 用css变量来切换黑暗模式，易于维护和扩展。 css变量的用法： {代码…} 方案一 设置主题对应的CSS变量，切换主题只需切换css属性的变量值。例如：切换APP元素的…
-
Vue 组件间通信主要有 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信。 Github 地址 props/$emit 父子组件通信 父组件向子组件传递数据是通过 props ，子组件向父组件传值是通过 events（$emit） （事件形式）。 父组件向子组件传值 父组件 Parent： <template> <div> <chil…
-
浅谈webpack+vue从零开始的后台管理项目(一) —– webpack配置及构建vue初始化项目
最近在总结深入自身掌握的知识点, 然后试着从零开始构建一个完整的webpack + VUE的项目. 然后通过 项目对整体流程进行了一个归纳总结, 文章会挺长, 分篇上传吧, 内容方面就以当前在做的后台 项目为示例对象, 发表一些个人归纳的东西, 希望对大家会有一定帮助. 当然, 还是那句话, 每个人的理 解观念不同, 也希望不…
-
虽互不曾谋面,但希望能和你成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 标星公众号（ID：itclanCoder） 如果不知道如何操作 点击这里,标星不迷路 ━━━━━━ …
-
最近回顾梳理毕业几年以来的知识储备，打算从最原始的方式来一步步的回顾至目前流行的三个框架知识，话不多说撸起袖子干。 在阅读之前我们需要知道在页面加载过程中脚本和样式文件的下载过程。假如我们页面有以下代码: <html> <script type="text/javascript" src="file1.js"/>…
-
某天产品经理，在群里吐槽，自己打开自家的网站，浏览器崩溃了。然后又有人运营跟着评论，说某天也遇见了这种情况。这个时候 HR 也跳出来说面试的候选人也说遇到过这种情况。似乎这个时候，无论我们自己的电脑怎样，但是这个问题就必须有结论。 *前端不想看到的崩溃界面* 确定问题 其实大家日常在开发的时…
-
最近开发过程中发现有两种case都是因为js精度导致的问题，记录一下~ Case 1：后端要求前端对某个值限制最大long型 后端大大说线上发现一种报错case，用户输入的id超过了Java Long型最大值，因为Long类型解析异常，直接返回系统异常。后端大大希望前端能加个校验，对输入的id进行下判断，超过Long型最大值时提示下输…
-
推荐使用vsCode进行开发，轻量级界面美观，调试方便，代码自动格式化 vscode相关 推荐使用箭头函数，可以很好地解决了this的指向问题，并且更加简洁明了 常规函数写法 function getPersonList() { // do something return personList } 复制代码 箭头函数 const getPersonList = ()…
-
Real-Time Communication with WebRTC 中文翻译。
-
浅谈webpack+vue从零开始的后台管理项目(三) —–项目整理及代码书写规范
上一篇讲完了vue基本功能的完善, 这一篇就讲一讲关于项目的整理与代码的书写规范, 这一部分的话, 样式是参照bootstrap的css规范, 其他都采用见名知意的规则.当然, 还是那句话, 每个人自身理解的不同, 我这边就是分享下关于我的见解, 希望能给到大家参考帮助, 也希望有不足的地方能够在评论区给出, 一起学习, 一起进步 …
-
2019 年 6 月，微前端框架 qiankun 正式发布了 1.0 版本，在这一年不到的时间内，我们收获了 4k+ star，收获了来自 single-spa 官方团队的问候，支撑了阿里 200+ 线上应用，也成为社区很多团队选用的微前端解决方…
-
简介：本次调查由阿里巴巴、腾讯等公司领衔，调查时间从 2020 年 2 月至 4 月，以中文进行。截止至 4 月 10 日共有 1113 名受访者参加调研。本报告将从 Nodejs 开发者人群、应用场景、开发场景等多个维度分析当下…
-
Vue 和 React 中的 key 的作用 key 是给每一个 vnode 的唯一 id,依靠 key,我们的 diff 操作可以更准确、更快速。对于简单列表页渲染来说 diff 节点也更快,但会产生一些隐藏的副作用,比如可能不会产生过渡效果,或者在某些节点有绑定数据（表单）状态，会出现状态错位。) diff 算法的过程中,先会进行新…
-
一 第一版一版的递归实现 n！，比如 5！= 5 * 4 * 3 * 2 *1 let count = 9000; const fact = (n) => { if (n == 1) { return 1; } else { return n * fact(n – 1); } }; let a = fact(count); //3628800; console.log(a); 但这样就会保持10条记录，这样很容易造成栈溢出；我们可以这样理解，执行…
-
异步编程是前端开发者必需的技能，过去管理异步的主要机制都是通过函数回调，然而会出现像“回调地狱”这样的问题。为了更好的管理回调，ES6 增加了一个新的特性 Promise。Promise 是 ES7 中 async/await 语法的基…
-
new Vue({ template: `<div>My name is {{name}}<div>`, data: { name: ‘FooBar’, gender: ‘male’ } }) 复制代码 结合上面的代码来看， 响应式 意味着：当name属性值改变时，渲染的内容也应随之变化。 建立联系 如何才能建立视图渲染与属性值之间的联系？先来搞清楚两个问题 谁 …
-
「 你们听说了吗，因为开发者有两个伊朗人， GitHub 把 Aurelia 封了 」。 「 理由呢？」「 贸易禁令呗 」。 啧啧，又开始了。 可能有人得问了，Aurelia 是个啥啊？ 实际上，Aurelia 是一款还算流行的前端框架，是程序员们在制作网页时经常会用到的玩意。 打个比方的话就是，我们平常做 P…
-
最近混子前端想探究一波 React diff，发现网上博客能讲通俗易懂的很少(也可能本人水平有限)，所以打算四处借鉴，更新一篇 React 老版本的 diff 探究，虽然大家现在可能都在使用 React Hooks，但也许这和我本人一样总是后知后觉，好了，废话不多说，进入正文： 前言 React render 函数每次执行都会生成一个新的 Virt…
-
最近看一下webpack相关的内容，谈一下如何编写loader和plugin 01 前言 相信大家对webpack也有一定的了解，其实深入浅出webpack这本书也看了很多遍，每一次看都会有一些细节之前没有注意到，我觉得其实可以把它当成是一本工具书来看，之前我也是只看配置都有点让你看不过来，更别说其他的了。 …
-
W3C 标准、 ECMAScript 规范与JavaScript 什么关系 ？
在前端知识体系中，我是把 Web 标准放在第 1 位的。对于初学者，可能会对 W3C、ECMAScript 和 JavaScript 的内容和关系搞不清楚，这里简单为大家梳理一下。 什么是标准？标准制定后可以告知负责实现该技术的程序员，有哪些特性是必须提供的，以及它们应该如何实现。比如由 W3C (World Wide Web Consortium) 制定…
-
socket–vue-socket.io前端-express服务端
import VueSocketIO from ‘vue-socket.io’; connetFun(); function connetFun(){ Vue.use(new VueSocketIO({ //研发环境会打印socket初始化过程+socket中定义的事件 debug: true, //我们的鉴权是拼接在query的 这个根据自己项目的实际情况来 connection: `http…
-
作为 attribute 和 property 的 value 及 Vue.js 的相关处理
attribute 和 property 是 Web 开发中，比较容易混淆的概念，而对于 value，因其特殊性，更易困惑，本文尝试做一下梳理和例证 attribute 和 property 的概念 简单的说，attribute 是元素标签的属性，property 是元素对象的属性，例如： <input id="input" value="test value"> <script&…
-
最近做到的react项目就有一个拖拽的需求，然后大概搜索了一下，找到了star比较高的 react-dnd 库，但是阅读 react-dnd 的官方文档还是有点 难受的 ,因为 概念性比较强 ，所以在介绍 react-dnd 之前我们来实现 原生拖拽 原生实现拖拽 Mouse事件实现拖拽 在h5之前，原生实现拖拽是根据 Mouse事件来实现的 ，需…
-
终于回京了，刚来第一天填写了各种表格，还接到了公安局的电话，紧张的很。酒店隔离环境还可以，每天的一日三餐也还挺丰盛，就是空间太狭小了不利于活动。 想要留下的代码 1.之前处理一些不常变化的数据文件，都是使用script标签引入的，但这个项目的文件改成了私有读写，这样就没法用这种方法了，所以需要在node层调…
-
发现这个React 内存泄露问题是某一天的晚上一直开着直播页，直播页用的 react 版本是 16.8.6，到了早上跳到这个页面的时候，控制台有点卡，怀疑是有内存泄露，于是就开始分析这个直播页面。
-
本文首发于本人github上，以梳理本人JavaScript知识体系以及应对未来的工作面试。很多解决方案非原创，参考了很多博客和资料。内容将会持续更新中… 类型 值类型 vs. 引用类型 1. 区别 三点：存储位置，访问机制，变量间赋值不同。 前者：栈区，变量访问的是值本身，在栈区复制一份。 后者：堆区（+栈区），…
-
Vue 使用websocket + json + protobuf 与后端交互golang
看这篇文章的时候，千万不要害怕代码，重要的核心的都加注释了，原理很简单！！祝阅读顺利 当学习一门新的语言的时候，总是喜欢先建立一个Demo项目，通过构建一个基本的项目，来了解语言的特点。 对于web的交互，以前常用的技术主要是Ajax、Form表单提交这类，如果要做长连接，可以使用Websocket 关于websocket和sock…
-
【Vue】 生命周期， created，mounted, methods , computed , watched
生命周期： 用通俗的语言来说，就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。 beforecreate : 一般使用场景是在加 loading事件 的时候 created ：处于loading结束后，还做一些初始化，实现函数自执行（data数据已经初始化，但是DOM结构渲染完成，组件没有加载） beforemount ：处于…
-
全栈后台管理系统脚手架 gin-vue-admin 2.0版本介绍
项目文档 在线文档项目地址 前端UI框架：element-ui 后台框架：gin 1. 基本介绍 1.1 项目介绍 在线预览 Gin-vue-admin是一个基于vue和gin开发的全栈前后端分离的后台管理系统，集成jwt鉴权，动态路由，动态菜单，…
-
如 果 你 是 前 端 程 序 员 的 话 ， 相 信 你 会 和 我 有 一 样 的 感 概 ‘ 前 端 个 丫 的 ， 技 术 更 新 太 快 了 ， 老 子 学 不 动 了 ’ 但 是 现 实 谁 会 管 你 哈 ， 学 不 动 回 家 养 猪 去 。 :sob: 现 在 面 试 除 了 基 础 的 前 端 三 大 框 架 外 ， 你 还 必 须 得 掌 握 w e b p a c k …
-
三大应用场景调研，Webpack 新功能 Module Federation 深入解析
导读：Federated Modules 是一个令人激动的功能，它可能会改变未来几年的前端打包方式，作者深入分析了 Module Federation 的原理及其应用场景，希望能对大家有所启发。 WHAT（Module Federation 是什么？） Module Federation 使 JavaScript 应用得以在客户端或服务器上 动…
-
element UI Vue.js tracking-min.js face-min.js 源码 由于我们的电脑有的有摄像头，有的没有摄像头，所以我们需要根据不同的场景来封装这个组件。先放个图吧，大家可以看得更加直观一些。 有摄像头的话，我们就显示（需要人像识别组件）： 没有摄像头的话，我们就显示（这个直接上传人像…
-
本文将介绍一些JavaScript数组问题，通过从零开始实现数组方法来学习更多关于JavaScript数组的知识，并练习使用它们进行常见的操作。
-
3 月 25 日晚，面向 21 届学生，淘系前端团队举办直播活动，由淘系前端技术专家大果带来「淘系前端技术体系揭秘」和「校招问题答疑」，答疑环节更是邀请了淘系前端校招负责人、淘系高级技术专家元彦，直播回答问…
-
A：别急着理解标题，先问你个问题。 A：1+1 是什么？ B：是 2 ？ A：不不不，我要说的不是这个，它由 1 + 1 组成。 B：这不是废话吗。 A：不不不，我说的是。 A：它由 1 + 1 组成。 A：而不是 + 1 1 A：也不是 1 1 + B：你有病吗？ A：哈哈哈，这就引出了我们的标题，符合我们常理的 1+1 …
-
1. 概述 所谓”编译“，通俗来讲就是把我们写的代码“翻译“成机器可以读懂的机器码。而编译器就是做这个翻译工作的。 Java 技术中的编译器可以分为如下三类： 前端编译器：把 *.java 文件转变为 *.class 文件的过程。比如 JDK 的 Javac。 即时编译器：Just…
-
写一个 react hooks + koa 风格的 web 框架
最近一直打算写一个 web 框架自用，但是一直头疼于插件之间的互相依赖问题，所以最近暂时停止了开发。 但是最近从 react 的学习中，突然冒出了一些好玩的想法，那就是能不能以 react hooks 风格写 nodejs 代码呢？ 一、设计 api 风格 主应用代码设想 import { Server } from ‘http’ import { useCallback, us…
-
作为一个前端，在开发过程即便十分小心，自测充分，在不同用户复杂的操作下也难免会出现程序员意想不到的问题，给公司或个人带来巨大的损失。 这时一款能够及时上报错误和能够帮助程序员很好的解决错误的前端错误监控系统就必不可少了。 接下来我们就聊聊常见的错误发生与处理。 本文主要围绕以下几点讨论： 常…
-
什么是stream 定义 流的英文stream，流（Stream）是一个抽象的数据接口，Node.js中很多对象都实现了流，流是EventEmitter对象的一个实例，总之它是会冒数据（以 Buffer 为单位），或者能够吸收数据的东西，它的本质就是让数据流动起来。可能看一张图会更直观： 水桶管道流转图 注意：stream不是node.js独有…
-
Vue 中的对象变化侦测是通过 Object.definePorperty 实现的，但是 Object.definePorperty 的方式有缺陷，比如不能直接代理整个对象，每次都要循环遍历对象的所有属性；尤大大说之后会使用 ES6 中的 Proxy 重写这个部分。这篇博客介绍的是 Object.definePorperty 实现的对象侦测。 我们来看下面这段代码，定义一个 def…
-
页面需要在pc端和移动端同时兼容，以前我的方案都是使用媒体查询来判断当前设备大小，然后写两套或者三套css代码来兼容他们，能达到目的，并且效果不错，但是感觉还是稍微麻烦了一丢丢。后面了解了一下flexable.j…
-
什么是闭包？闭包是有权限访问其它函数作用域内的变量的一个函数。 在js中，变量分为全局变量和局部变量，局部变量的作用域属于函数作用域，在函数执行完以后作用域就会被销毁，内存也会被回收，但是由于闭包是建立在函数内部的子函数，由于其可访问上级作用域的原因，即使上级函数执行完，作用域也不会被销毁，此时…
-
如何实现 Vue 自定义组件中 hover 事件以及 v-model
在CSS中，很容易在鼠标hover时进行更改，只需： .item { background: blue; } .item:hover { background: green; } 在Vue中，它会变得更复杂一些，因为我们没有内置这个功能。我们必须自己实现这些。不过别担心，工作量不…
-
今天是系列第五篇，主要讲一下 上一篇 遗留下来的es6继承的具体使用问题。因为在es6继承中用到了一些语法糖，书写方式跟es5的继承写法上有很大的不同，所以专门把它拎出来讲。言归正传，下面我将其对应的一些关键字的用法进行阐述，并配合一些例子来解释。 constructor 定义：是类的构造函数。 用法：在使用 ne…
-
对于我们现在的 web 开发项目中，我们快乐的使用着 export/import 来进行模块化开发。好像一切原本就这么简单~ 但是我们也知道， esm 是es6 才在规范中引入。在此之前 js 语言规范中并没有模块化一说（当然，以前 web 也没有那么复杂）。 cjs 就是在没有 esm 之前的一个产物。正是 cjs 简单而又高效的模块化设计， 使得…
-
插件通常用来为 Vue 添加全局功能，一般有下面几种： 添加全局方法或者属性。 添加全局资源：指令/过滤器/过渡等。 通过全局混入来添加一些组件选项。 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现…
-
现在很多的前端开发框架都有自己的一套语法，经过编译之后变为javascript代码，并最终通过DOM创建出页面。里面的关键一环是模板解析引擎。比如vue，能够在页面中支持各种指令，变量等。本文将实现一个简易的模板解析，支持循环，条件指令和变量。这个简易实现没有太多的错误处理，仅仅是为了展示解析的一个思路。为了可…
-
在闲鱼消息体系中，富文本在 UI 侧占了非常大的比重。最近消息部分在整体 Flutter 化，如何解决 Flutter 侧富文本问题，成为了项目早期的风险点。
-
超赞推荐一个专注于 Java 后端源码分析的 GitHub 项目
大家好，最近有小伙伴们建议我把源码分析文章及源码分析项目（带注释版）放到github上，这样小伙伴们就可以把带中文注释的源码项目下载到自己本地电脑，结合源码分析文章自己本地调试，总之对于学习开源项目源码会更方便。 因此下面提供【源码笔记】的Github地址，若您觉得不错，欢迎小伙伴们Star点亮哦： …
-
以上4节我们完成了PDF的预览，和基本功能的实现，前端渲染PDF的原理就是为每一页数据添加canvas，如果要渲染页面的文字就会在 canvas 同级添加一个 div 显示文本信息，如果pdf文件页数特别多的时候，就会重复操作以上操作，导致浏览器的回流和重绘。这就会造成性能浪费，导致页面卡顿。可以自己找一个几千页的PDF文件感…
-
vue create ts_vue_btn 复制代码 这里使用了 vue CLI3 自定义选择的服务，我选择了 ts、stylus 等工具。然后创建完项目之后，进入项目。使用快捷命令 code . 进入Vs code编辑器(如果没有 code . ，需要将编辑器的 bin文件目录地址 放到环境变量的 path 中)。然后，我进入编辑器之后，进入设置工作区，随便设置一个参…
-
自己的项目文件都需要放到 src 文件夹下 项目开发完成之后，可以输入 ==npm run build== 来进行打包工作 打包完成后，会生成 dist 文件夹，打包后的文件结构如下 注意下面的tip，告诉你这个打包后的文件需要放到服务器才能打开，不能直接使用浏览器打开 这时我们…
-
由于对于vue中一些操作的疑惑比如computed存在缓存机制如何实现，带着问题尝试去阅读vue源码，没想到越往后看想要了解的越多，根本停不下继续深入研究的脚步，断断续续花了几周的时间，终于初略地有点理解，如果有不正确的地方希望得到大牛的指正。 在开始前最好能先了解下Vue.component，Vue.extend，Vue.use，nextTi…
-
问题重现 需求是要获取一个车型列表，并且输出到页面上按年份排序，故而接口提供的对象简化如下 let obj = { ‘2018’: { modelCode: "204313", modelName: "2018款 Vanquish 6.0L S Coupe" }, ‘2017’: { modelCode: "202479", modelNam…
-
业务的 h5 工程是基于 Koa 封装的 node 应用，前端采用的是多页面的方式，目录大概如下： ├── bin ├── app │ ├── controllers │ ├── routes │ └── views ├── src │ ├── pages │ ├── common 复制代码 在新增一个页面的时候，需要这样做： app/routes 中增加路由 app/controllers 中增加路由对应的中间…
-
事件可以理解为行为，如对button的点击，事件的本质是一个函数，他接收一个event对象。每个事件会产生一个Event对象，Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按…
-
在 Flutter 中玩转 Objective-C Block
作者 | 杨萧玉 来源 | 玉令天下的博客 dart_native 作为一条比 Channel 性能更高开发成本更低的超级通道，通过 C++ 调用 Native 的 API，深入底层且考虑全面。很多 Objective-C 接口的参数和返回值是 Block，所以这就需要支持用 Dart 语言创建和调用 Objective-C Block。 Dart 调用 Objective-C 带 …
-
记一次webpack+typescript+react的优化过程
项目采用的是react + webpack + typescript + tslint的技术栈，优化之后速度有了大幅度的提高。 优化之前的webpack配置 module.exports = { …, module: { rules : [ { test: /.tsx?$/, use: [ { …
-
前言 2018年7月，信息化部印发了《工业互联网平台建设及推广指南》和《工业互联网平台评价方法》，掀起了 工业互联网 的浪潮，并成为热词写入了报告中。同为信息发展下的产物 建筑智能化集成系统 也是兼具着信息与管理的重要体现，数据化信息通过可视化的管理系统展示出一套互联网智能优化的解决方案，…
-
前端新手的初级前端面试学习笔记(有答案,有些我自己觉得可以)
千里之行始于足下, 基础知识就要一个脚印一个脚印的走才能走的远.我,前端新手,找了一点可能常出现的初级前端面试题,注意,是 初级前端面试题 . 每个问题的答案都是由我,也就是前端新手的我写的,所以肯定有和大家相悖的地方,欢迎大家支出错误,大家一起成长,一起进步. 前端新手的我写的 前端新手的我写的 前端新手的…
-
大部分文章展示类的网站都有用户评论的功能，看了这么多的评论消息的你是不是也想封装一个通过的组件呢，以备用到的时候可以直接拿来复用。现在我们就简单概括一下这个组件的主要功能， 既然是评论消息组件，首先把用户已经评论过的消息展示出来是这个组件的基本功能，然后针对每一条消息还可以对他进行回复，这就好比…
-
最近在重构代码时，我发现早期的代码使用太多的 if 语句，其程度是我从未见过的。这就是为什么我认为分享这些简单的技巧是非常重要的，这些技巧可以帮助我们避免过多的使用 if 语句。 接下来会介绍6种方式来代替 if 的使用，这样做不是坚决不使用 if 偏执狂，而是换个方式思考我们的编码思路。 1. 三元运算符 …
更多内容请关注公众号【前端开发博客】每日更新
