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

写了十年JS却不知道模块化为何物？；灵活运用JavaScript开发技巧；js性能优化浅析；Vue数据绑定简析；JavaScript DOM 操作简易速查手册；没有废话的vue进阶( 一 )；JS数组扁平化的思路与实现；自学NodeJS设置Header

写了十年JS却不知道模块化为何物？模块化这个问题并非一开始就存在，WWW刚刚问世的时候，html，JavaScript，CSS（JS和CSS都是后来在网景被引进浏览器的）都是极其简单的存在，不需要模块化。模块化的需求是规模的产物，当web page进化到web application，浏览器端处理的逻辑越来越复杂，展现的样式和动画越来多，对于工程的要求也就越来越高。于是模块…
灵活运用JavaScript开发技巧何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼…
js性能优化浅析当用户输入一个域名网址时，浏览器会将这个域名发送到DNS服务器（这一过程中，我们可以通过改变我们host的配置，将域名配置为我们开发环境的服务器ip。实现远程开发）；通过DNS服务器进行域名解析，拿到对应的服务器ip地址；浏览器拿到服务器的ip后，找到对应的服务器； =>这个过程可…
Vue数据绑定简析作为MVVM框架的一种，Vue最为人津津乐道的当是数据与视图的绑定，将直接操作DOM节点变为修改 data 数据，利用 Virtual Dom 来 Diff 对比新旧视图，从而实现更新。不仅如此，还可以通过 Vue.prototype.$watch 来监听 data 的变化并执行回调函数，实现自定义的逻辑。虽然日常的编码运用已经驾轻就熟，但未曾去深究技术背后…
#前端技术#【JavaScript DOM 操作简易速查手册】详见：在本文中，作者简要罗列了JavaScript 操作 Dom 的基本方法，涉及元素查询、文档结构遍历、属性及内容操作等内容。（作者：毛瑞）
没有废话的vue进阶( 一 ) vue组件主要包含：由vue-router产生的页面，可以称之为路由组件独立基础组件：例如Date和input这之类的可以全局复用的基础组件业务组件，除了以上两种就是业务组件组件精髓 props tppe 类型 default 默认如果是对象，数组，必须要写成方法进行返回 …
JS数组扁平化的思路与实现其实最核心的思路就是递归，如果单纯用编程语言实现，而不是使用一些巧妙的API的话，本质的思路就是递归，因为JS数组多层嵌套，实现扁平化的过程其实就是层层递归取出元素的过程，这里给出三种实现JS数组扁平化的方法。纯递归实现扩展运算符降维打击纯递归实现算法的步骤是这样的： …
自学NodeJS设置Header 服务端设置CORS 只允许127.0.0.1:8888进行跨域请求就可以这样设置 response.writeHead(200,{ ‘Access-Control-Allow-Origin’:’http://127.0.0.1:8888′ }) 复制代码 CORS的预请求我们前端如果在header里携带了token,那么后台则需要做一下类似的配置： response.writeHead(200,{ ‘Access-Control-Allow-O…
【vue源码】深度理解v-for 最近在阅读element源码的，但是element内部有很多 this._l 方法， element 源码里面也找不到，查了一下，原来是vue的内部渲染列表的方法源码位置，代码不长，可以一读三个工具函数 isDef isDef是isDefined的缩写，反过来就是isUndefined，反正就是看它是不是undefined function isDef (v) {…
6 月技术节，NJSD 带你全面了解技术最前沿 ▽ 大会盛况视频最新文章：来听硬核干货 | 两天、十大专题论坛，速来约见NJSD全球软件大会吧！！ NJSD Global 2019正式开放注册！三个圈划重点 … 这些技术演讲都值得你去听 | NJSD全球大会精彩议题一览（第一…
一个合格的 Webpack4 配置工程师素养（一）准备开发环境 – 安装node – 安装webpack – npm init 初始化项目目录结构先跑一个小demo // src/index.js import _ from ‘lodash’ function create_div_element () { const div_element = document.createElement(‘div’) div_element.innerHTML = _.join([‘kobe…
[Vue.js进阶]从源码角度剖析计算属性的原理最近在学习Vue计算属性的源码，发现和普通的响应式变量内部的实现还有一些不同，特地写了这篇博客，记录下自己学习的成果文中的源码截图只保留核心逻辑完整源码地址可能需要了解一些Vue响应式的原理 Vue 版本： 2.5.21 计算属性的概念一般的计算属性值是一个函数，这个函数会返回一个值，并且其函数内…
深入理解js的执行机制 javascript在浏览器中被浏览器的js引擎执行解释，从执行上下文的角度分析一下js的执行机制执行上下文执行上下文被定义成javascript引擎在处理理解js代码时，所创建的一个动态的环境。理解执行上下文对理解javascript的运行机制至关重要。this指向问题、原型链、作用域和垃圾回收都与这个环境密切相关。 javascri…
看一眼就学会的 HTML 小游戏搭建身边经常会有小伙伴问我有没有办法不买服务器也能上线自己的个人项目，比如不少同学都非常喜欢搭建一个属于自己的博客站点或者小游戏等。
js创建对象的各种方法以及优缺点整理《javascript高级程序设计》中创建对象的7种方式以及优缺点, 还是要再说一句，这本书是写的真好啊。 1. 工厂模式工厂模式是软件工程领域一种广为人知的设计模式，这种模式抽象了创建具体对象的过程 function createPerson(name, age, job) { let o = new Object(); o.name = name; o.age = age; …
webpack结合express实现自动刷新在我们开发的过程中，我们会使用 webpack-dev-server 实现自动刷新， webpack-dev-server 会把编译后的文件全部保存在内存里，而不会写入到文件目录内。但当我们的开发是前端和后端在一个项目里的时候就不行了。我们可以使用webpack结合express实现自动编译刷新配置webpack 首先就是配置webpack的…
Node.js一行代码实现静态文件服务器 nodejs不仅仅可以用来写服务端接口，用来做静态文件服务器替代nginx的功能，也是分分钟可以搞定的。话不多说，先上代码： var server=http.createServer(function (req,res){ fs.createReadStream(Path.resolve(__dirname,"."+req.url)).pipe(res); }) 复制代码在项目根目录建一个hello.html文件测…
JavaScript中的浅拷贝与深拷贝前言文章开始之前，让我们先思考一下这几个问题：为什么会有浅拷贝与深拷贝什么是浅拷贝与深拷贝如何实现浅拷贝与深拷贝好了，问题出来了，那么下面就让我们带着这几个问题去探究一下吧！如果文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过以下↓ 数据类型在开…
有趣的CSS弹跳动画这是只用了一个div来做的小动画，纯粹利用CSS3的animation来完成，就像是一个正方形在地上弹跳，碰到地面的时候尖角还会压缩变圆，阴影的部分也会随着正方形升高而缩小，至于到底该怎么完成呢？让我们继续看下去。
了解 JavaScript 函数式编程-类型签名 JavaScript 是一种动态的类型语言，但这并不意味着要否定类型的使用。我们日常打交道的主要就是字符串、数值、布尔值等。虽然 JavaScript 语言成面上没有相关的集成。不过我们可以使用类型签名生成文档，也可以使用注释帮助我们区分类型。有些朋友应该使用过一些 JavaScript 类型检查工具，比如 Flow 或者是其他的静…
利用babel(AST)优雅地解决0.1+0.2=0.3的问题你了解过0.1+0.2到底等于多少吗？那0.1+0.7，0.8-0.2呢？类似于这种问题现在已经有了很多的解决方案，无论引入外部库或者是自己定义计算函数最终的目的都是利用函数去代替计算。例如一个涨跌幅百分比的一个计算公式： (现价-原价)/原价*100 + ‘%’ 实际代码： Mul(Div(Sub(现价, 原价), 原价), 100) + ‘%…
react基础学习和react服务端渲染框架next.js踩坑React作为Facebook 内部开发 Instagram 的项目中，是一个用来构建用户界面的优秀 JS 库，于 2013 年 5 月开源。作为前端的三大框架之一，React的应用可以说是非常的广泛。这里讲一个react服务端渲染的框架-next.j…
webpack 3 零基础入门教程 #1 – 介绍先来说一下 webpack 是什么。 webpack 的官方对它是这样定义的： webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. 中文的大概意思是说： webpack …
webpack-mvc 传统多页面组件化开发最近有一个项目，还是使用的传统 MVC 模式开发，完全基于jQuery，使用了基于java模板引擎velocity，页面中嵌入了大量java语法，使得前后端分离不彻底，工程打包上线苦不堪言，为实现后端为服务化，前端也得彻底从…
用 Vue 编写抽象组件看过 Vue 源码的同学可以知道，<keep-alive>、<transition>、<transition-group>等组件组件的实现是一个对象，注意它有一个属性 abstract 为 true，表明是它一个抽象组件。
从前端角度看企业软件的研发过程这是一篇我想写了很久的文章。一直以来，企业软件前端工程体系处于一个很尴尬的局面，无数前端对它有过各种吐槽：技术栈老旧、封闭，体验差，而项目和交付经理又会觉得开发效率太低。据我所见，大部分吐槽的人并没有理解造成这些状况的深层原因，或者说，当自己去构建这么一套体系的时候，并不理解在选型和技术集成过程…
Vue-Cli 项目基础搭建目标搭建一个Vue Cli 中后台项目的基础。一步一步搭建，希望能有所收益。学习的时候，希望多翻阅文档，资料地址也会引入到原文后台可能是这样的（参考 AdminLTE）主要包含侧边菜单 aside 右侧 container 头部 header 主体 main。页面主要变化的部分资料 …
防手抖开源之 Git 钩子最近“从开源到跑路”的事件逐渐增多，给涉事企业造成了不小的损失。因而相关的防范工作显得愈发重要。客观而言，人为手动的防范显得原始和笨拙，好在git提供了相关的钩子方法，为我们这里的防范提供了可行性。这里我们以git push命令对应的pre-push钩子为例，因为想要开源出去，这个命令通常是必须执…
webpack4插件及工作流程 webpack4重写了 Tapable , 是webpack的插件组织的核心。它提供给各个插件钩子，在事件触发时执行这些挂载的方法。webapck的插件里必须有 apply() 方法，当其被调用的时候webpack将钩子上的方法挂载到各个事件下面有点像 nodejs 里 EventEmitter 的 $on class Car { constructor() { this.hooks =…
JavaScript 工厂函数 vs 构造函数当谈到JavaScript语言与其他编程语言相比时，你可能会听到一些令人困惑东西，其中之一是工厂函数和构造函数。
vue中使用protobuf踩坑记官方解释为： Protocol buffers are a flexible, efficient, automated mechanism for serializing structured data – think XML, but smaller, faster, and simpler. You define how you want your data to be structured once, then you can use special generated source code to easily write and read your struc…
《一次 Web 端大量图片同时加载卡顿问题的优化之旅》由于业务的需要，笔者最近需要实现一个大量图片同时加载的需求。在实现这个需求的过程中，笔者遇到了很多的坑，也总结了一些优化方案。这里将笔者使用或准备使用的优化方案总结一下。（by 苏格团队）
【quill.js】深入理解quilljs 这篇文章中的很多内容都来自Adam Charron的《Getting to know QuillJS – Part 1》中，文中结合了我自己的一些理解和经验，内容也做了些调整，希望能帮到准备使用quilljs的你。 quilljs是什么？ quilljs是一个现代富文本编辑器，它具备良好的兼容性及强大的可扩展性。用户可以非常方便地实现自定义功能。另一特点…
Node.js 宣布一个新的 –experimental-modules 原文:Announcing a new –experimental-modules 译文地址在2017年，Node.js 8.9.0发布了对ECMAScript模块的实验性支持。这种ECMAScript模块的支持是需要在后面加上 –experimental-modules 标识来运行。现在，主流浏览器都能通过 <script type=”module”> 标签支持ECMAScript 模块 (E…
用Node.js创建安全的 GraphQL API翻译：疯狂的技术宅[链接] 本文首发微信公众号：前端先锋欢迎关注，每天都给你推送新鲜的前端技术文章本文的目标是提供关于如何创建安全的 Node.js GraphQL API 的快速指南。你可能会想到一些问题：使用 Graph…
【入门GitHub，这一个开源项目足够了！】万事开头难，特别是和其他人合作时，犯错格外令人不舒服，而GitHub就是大家协作的一个平台，每天有数百万开发者聚集在一起协作。详见