20190930 前端开发日报-前端开发博客

透过现象看本质: 常见的前端架构风格和案例；说说JS中的沙箱；前端资源治理（一）；React 遭遇 V8 性能崩溃的故事；Vue中 render 函数应用；全干工程师的自我修养—vue第一部分；Vue实现20+页面的复杂单页面应用（仿实验楼）；大前端时代，浅谈JavaScript开发重型跨平台应用以及架构

透过现象看本质: 常见的前端架构风格和案例所谓软件架构风格，是指描述某个特定应用领域中系统组织方式的惯用模式。架构风格定义一个词汇表和一组约束，词汇表中包含一些组件及连接器，约束则指出系统如何将构建和连接器组合起来。软件架构风格反映了领域中众多系统所共有的结构和语义特性，并指导如何将系统中的各个模块和子系统有机的结合为一个完整的系统 …
说说JS中的沙箱其实在前端编码中，或多或少都会接触到沙箱，可能天真善良的你没有留意到，又可能，你还并不知道它的真正用途，学会使用沙箱，可以避免潜在的代码注入以及未知的安全问题。
前端资源治理（一）本文探讨了前端资源治理的含义以及要解决的问题，并介绍了实现前端资源治理的思路。
React 遭遇 V8 性能崩溃的故事本篇文章主要讲述 V8 如何选择 JavaScript 值在内存中表现形式的优化方式，以及解释 React core 在 V8 中出现的性能断崖。
Vue中 render 函数应用因为最近接手维护一个基于 ivew 的项目, 新增模块中包含很多自定义功能, 所以大量使用到了 render 函数; 故对其做一下总结…关于 render 函数, 官方文档也做了比较详细的介绍: render 函数: [链接] ; 一般组件我…
全干工程师的自我修养—vue第一部分主要是搭建nodejs环境，设置淘宝源及安装cnpm，在之前的文章中有提到过，就不再赘述。接下来全局安装vue脚手架： cnpm install vue-cli -g 复制代码这样就可以成功安装了，安装完成后，我们就可以尽情的食用了。也可以使用在线加速cdn: <!– 开发环境版本，包含了有帮助的命令行警告 –> <script src=&…
Vue实现20+页面的复杂单页面应用（仿实验楼）初学Vue，搜 Vue项目时出现的几乎都是TODO应用，音乐播放器之类复杂度并不如想象中高的应用，当然慢慢摸索实现出来也会知道Vue的一些功能， v-on , v-bind 之类的绑定， v-for , v-if 等逻辑控制。但写完总感觉意犹未尽… 于是想实现一个稍微复杂些的应用。项目主要实现的是前端页面部分，数据来源于实验…
大前端时代，浅谈JavaScript开发重型跨平台应用以及架构大前端时代以及即将到来的 5G 时代， 3D 可视化，音视频直播技术， IM 即时通讯场景应用我觉得都是大有可为的。前段时间爆款换脸应用出现，到近段时间头像加:triangular_flag_on_post:的火爆，这是好事。不知不觉，九月就要过去，由于这个月工作上，被 C++ 折磨得很难受，而且其他时间都在学习，所以没有时间写文章…
细说 webpack 9. 使用 webpack 处理图片资源大家好！我是萝卜，今天和大家说一说 webpack 是如何处理图片资源的，前端项目离不开图片资源，Webpack 中图片资源也是可以作为模块直接使用的，下面我们就来看一看。图片的引入方式图片是前端项目必不可少的静态资源，在日常开发中，我们可能会在下面三种情况使用图片： 1.HTML 中通过img标签等方式引入； 2.CSS …
技术探索：60 天急速自研，搭建前端埋点 “决策源于数据，而数据源于采集，采集源于规则梳理，让这一切发生源于工程师的创造力和执行力。”
如何在Go语言中使用Websockets：最佳工具与行动指南如今，在不刷新页面的情况下发送消息并获得即时响应在我们看来是理所当然的事情。但是曾几何时，启用实时功能对开发人员来说是一个真正的挑战。开发社区在HTTP长轮询(http long polling)和 AJAX 上走了很长一段路，但终于还是找到了一种构建真正的实时应用程序的解决方案。该解决方案以 WebSockets 的形式出现，这…
Vue插槽父子调用规则因为要写一个弹窗组件，但是又要在弹窗组件里面写新的动画，那就只能在弹窗开启后把动画移除，子元素才能重新添加动画效果，但是 v-if 判断的弹窗，你又不能在他不存在的时候获取dom去添加类名，所以研究了半天，打算改成 v-show 的时候,奇怪的发现他第二次打开的时候又出现了了需要添加的动画 v-if 对dom的…
JS核心基础知识总结(一)——原型和继承 JS是一门基于原型实现继承的语言。那么，什么是原型？基于原型实现的继承又是怎么一回事？原型（prototype），根据字面意思，可以理解为一件事物的模板。比如iPhone的原型是以前只能打电话、发短信的功能机，这表示，iPhone也拥有打电话、发短信的功能（继承），但是相比它的原型又拥有了更多功能（…
Vue源码构建过程-不同平台&不同环境执行npm run build 得到各平台的rollup配置信息通过终端传入的构建平台或环境，过滤掉不需要构建的平台配置递归同步构建写入文件 build npm run build 执行命令，会定位到scripts下的build文件，下面来看一下这个文件中做了什么。首先会判断有没有dist目录，这是存放构建产出物的地方 if (!f…
初窥Git 文章记录本人使用window系统，一下都是针对window的操作指南，刚刚开始用，持续跟新维护还没有安装git的童鞋可以在git官网进行安装这里说实际用法创建一条分支 serve 分支 {代码…} 切换到创建serve的分支 {代码…} …
基于TypeScript+Node.js+Express搭建服务器鉴于 JavaScript 是弱类型语言和动态类型语言，因此 JavaScript 在变量声明的时候无需指定变量的类型，在声明之后便可为其赋值不同的类型。因此在多人团队的开发里面，JavaScript的这种“便捷”反而会带来很多麻烦。 Cannot read property ‘xxx’ of undefined ‘xxx’ is not a function/object ‘xxx’ is not defi…
#前端技术#【前端工作面试问题汇总】详见：这篇文章汇总了一些用于考查候选者的前端面试问题。你可以用于自检，或是挑出一些考查候选者的技能水平。
前端数据库——WebSQL和IndexedDBWebSQL是前端的一个独立模块，是web存储方式的一种，我们调试的时候会经常看到，只是一般很少使用。
基于nodeJS从0到1实现一个CMS全栈项目的服务端启动细节由于很多朋友对于我上一篇写的CMS系统中后台node部分的启动有些不太理解的地方或者存在一些问题，这里我会专门写一下启动的步骤和细节，关于CMS全栈系统感兴趣的朋友可以看看我之前写的两篇文章： 1. 基于nodeJS从0到1实现一个CMS全栈项目（上） 2. 基于nodeJS从0到1实现一个CMS全栈项目（中）摘要本文主…
【20190929 前端开发日报】Vue常见面试题精讲【持续更新】；HTTP3过去现在和未来(译)；10 分钟上手 Vue 组件 Vue-Draggable；前端String那些事儿；vue全家桶开发的一些小技巧和注意事项；基于nodeJ…详情→
javascript get checkbox checked value javascript如何获取checkbox被选中的值预备知识 javascript dom 常用方法方法名描述例子 document.getElementById 返回给定id属性值的元素节点相对应的对象 document.getElementsByTagName 返回给定name属性的元素节点对应的元素…
ES6之class在面向对象的编程中类是一个用于创建对象为状态(成员变量) 和行为实现（成员函数或方法）提供初始值的可扩展程序代码模板
全干工程师的自我修养—vue第二部分在components里面放置我们自己写的组件，例如在components文件夹里面创建一个Home组件。创建好组件后，我们来看看组件由哪些组成呢？有模板 template script style Home.vue <template> <div class="header"> <h2 class="word">{{msg}}</h2> <button c…
深入理解JS之作用域本文是在《你不知道的JS》基础上总结加工而来，中间有本人自己的理解和体会，希望对大家有所帮助，保证让大家理解什么是作用域。而且本文不是入门级所以基础的知识就没有涉及，比如闭包、this指向、let、const。作用域是规则为什么需要作用域？首先就一门语言而言，变量的声明、赋值和读取使用是一切的基础，数…
Angular服务组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。这次将创建一个 XuxuService，依靠 Angular 的依赖注入机制把它注入到 ServeDemoComponent 的构造函数中。服务是在多个“互相不知道”的类之间共享信息的好办法。一、创建服务在终端…
细说 webpack 8. 使用 loader 转换 css 文件大家好！我是萝卜，Webpack 中一切皆模块，我们可以将CSS作为模块引入到代码中，这时候就需要添加 Webpack 的loader 来处理 CSS 了。 css-loader 首先添加 css-loader： npm i -D css-loader复制代码然后给webpack.config.js添加rule： { module: { rules: { { test: /.css$/, use:…