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

Vue全家桶之 KTV前台收银管理系统 (不想努力啦，回家收钱去)；Vue 组件间的通讯；一个合格的Webpack4配置工程师素养：第一部分；vue知识点记录；一篇文章构建你的 NodeJS 知识体系；使用Git你后悔过吗？；JavaScript 是如何工作: Shadow DOM 的内部结构+如何编写独立的组件；「Vue实践」项目升级vue-cli3的正确姿势

Vue全家桶之 KTV前台收银管理系统 (不想努力啦，回家收钱去)年关将至，归心似箭。家里在小镇上接手了家小型KTV，发现之前的前台收银管理系统已无法使用，收银员竟然在纸上用笔记录着客人的点单，杂乱无章。之前的管理系统和网上查找的其他的一些系统都大同小异，且都是有些…
Vue 组件间的通讯这一节我们一起看看 vue 中组件间的数据是如何传递的。前面，我们已经初步建立了 vue 组件化的思想，知道如何创建组件、引入组件以及如何在组件里的一些功能。接下来，我们来学习怎么建立组件之间的连接，也就是组件的通讯。直白一点说就是：在一个组件中做的操作如何更新到应用程序中的其他组件。这篇文章会…
一个合格的Webpack4配置工程师素养：第一部分总结Webpack4常见的配置, 含DEMO, 一步步肥肠详细，略长, 后续结束时候我们给出源码文件。准备开发环境 – 安装node – 安装webpack – npm init 初始化项目复制代码目录结构写跑一个小demo // src/index.js import _ from ‘lodash’ function create_div_element () { const div_element = d…
vue知识点记录 MVC是一种分层开发模式,让业务更加清晰，并不会减少业代码量，可能会更多,减少模块的耦合度 MVC是站在整个项目的角度对项目进行分层 1.M(数据连接层—数据库) 2.V(视图层)–前端页面 3.C(业务层—-路由那一块) cookie和session cookie 存在客户端，安全性很低 session 存在服务端，里面也使…
一篇文章构建你的 NodeJS 知识体系最近读《重学前端》，开篇就是让你拥有自己的知识体系图谱，后续学的东西补充到响应的模块，既可以加深对原有知识的理解，又可以强化记忆，很不错的学习方案。这篇文章主要知识点来自两个地方：《Node.js硬实战：115个核心技巧》 i0natan/nodebestpractices 希望某个点有更好的理解的话…
使用Git你后悔过吗？人总会有犯错的时候，值得感激的是Git允许你在任何时候反悔，并且将对应信息从历史记录中抹除，这样的历史记录往往看起来行云流水，令人赏心悦目，严谨的提交信息是对他人的一种尊重。
JavaScript 是如何工作: Shadow DOM 的内部结构+如何编写独立的组件这是专门探索 JavaScript 及其所构建的组件的系列文章的第 17 篇。如果你错过了前面的章节，可以在这里找到它们： JavaScript 是如何工作的：引擎，运行时和调用堆栈的概述！ JavaScript 是如何工作的：深入V8引擎&编写优化代码的5个技巧！ JavaScript 是如何工作的：内存管理+如何处理4个常见…
「Vue实践」项目升级vue-cli3的正确姿势创建vue-cli3项目，按原有项目的配置选好各项配置迁移目录 src->src static->public 复制代码对比新旧 package.json ，然后 yarn install ，完毕。然鹅… 运行项目，报错 You are using the runtime-only build of Vue…… ： …
JS: 变量提升与时间死区开始执行脚本时，执行脚本的第一步是编译代码，然后再开始执行代码，如图另外，在编译优化方面来说，最开始时也并不是全部编译好脚本，而是当函数执行时，才会先编译，再执行脚本，如图 Lexical Environment 变量提升如下图，左边灰色块区域，是演示函数执行前的编译阶段，先抽出所有声明变量…
说说JavaScript的类型转换最近在重读《JavaScript高级程序设计》，读到数据类型这一节，想到了JavaScript里令程序员抓狂的一个问题——类型转换。因为JS是一门弱类型的语言，在运行时系统会根据需要进行类型转换，而类型转换的规则又令人迷惑。于是写篇博文尝试自己总结来加深印象。基本概念首先，我们知道JavaScript里有7种数据类型： …
Next.js页面渲染的优化方案在过去一年的工作中我所使用的js框架是Next.js,尽管这个框架在前后端同构方面有着绝佳的体验，但是当页面js文件过大以及preload过多的时候还是会出现页面跳转卡顿和渲染阻塞等比较糟糕的用户体验问题。由于我之前既不知道这个框架的工作原理，自然也就不知道如何去优化它。乘着农历春节前工地活少所以稍微研究一下。 …
金s办公软件web前端笔试题这道题如果没有限定给出给定的代码，还可以根据ES6块级作用域的知识把for循环中的var改成let，或者用Promise
JavaScript深度迭代遍历未知对象面向对象编程的语言，都存在对对象的一些操作，其中就包括遍历未知对象的属性值。通常情况常见的遍历对象的方法： var o = { name: ‘cloud’, age: 20 } for (i in o) { console.log(i + ‘: ‘ + o ); } // name: cloud // age: 20 特殊情况但是对象中又含有子对象，对象的属性又是另一个对象…
一个合格的Webpack4配置工程师素养：第三部分之前有提过webpack根据不同的环境我们会加载不同的配置。我们只需要提取出三部分。 – base: 公共的部分 – dev: 开发环境部分 – prod: 生产环境部分复制代码 npm i -D webpack-merge 复制代码我们这里现在简单分层：正式项目最好创建一个config/webpack目录管理。下面是源代码。 "scripts&qu…
在JavaScript中理解策略模式设计模式是: 在面向对象软件过程中针对特定问题的简洁而优雅的解决方案. 通过对封装、继承、多态、组合等技术的反复利用, 提炼出可重复使用面向对象的设计技巧. JavaScript 可以模拟实现传统面向对象语言的设计模式. 事实上也的确如此, 好多的代码 demo 都是沿着这个思路分析的. 看完后心里不免有种一万头在奔腾, 还…
如何招一个靠谱的前端刚看了下面试记录，有 99 场了。前两天在内网分享了一点面试经验，索性也发到掘金，勉强维持下活跃度这样子……面试官可以参考下面试思路，当然所有开发同学都可以看看，或许会对如何自我提升产生些新的思考。明确你想招什么样的人我一直觉得面试就像相亲，除了考察面试者的硬性能力是否过硬，也得看缘分。缘分这一…
JS数据结构学习：栈什么是栈？栈是一种遵循后进先出原则的有序集合，新添加的或者待删除的元素都保存在栈的同一端，称为栈顶，另一端称为栈底，在栈里，新元素靠近栈顶，旧元素靠近栈底，用个图来看大概这样式的：用一个更形象的例…
从0到1使用VUE-CLI3开发实战(六)：这是一个有代码洁癖的项目一天我路过一座桥，碰巧看见一个人想跳河自杀。我跑过去对他大喊道：“别跳，别死啊。”“为什么不让我跳？”他说。“因为还有很多东西值得我们活下去啊。”“有吗？比如说？”“呃……你做什么工作？”“前端工程师。”我说：“…
React事务的一些理解学习React有一段时间了，刚接触不久对于React神奇的操作很好奇，迫不及待看了源码看过几遍源码总是一知半解，最近有时间再次学习React的相关知识，比如setState, componentDidMount等，意识到了之前被忽略提及的…
JS专题之函数柯里化#### 前言在计算机科学中，柯里化（英语：Currying），又译为卡瑞化或加里化，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。
一个合格的Webpack4配置工程师素养：第二部分我们给打包的文件打上hash是为了解决缓存更新问题，常见需要打上hash的地方有。 output: { filename: ‘bound. .js’, path: path.resolve(__dirname, ‘dist’) } 复制代码 // 提取CSS new MiniCssExtractPlugin({ filename: devMode ? ‘ .css’ : ‘ . .css’, // 设置输出的文件名 …
js的setTimeout和Promise—同步异步和微任务宏任务久经前端开发沙场，会经历各式各样的需求，处理这些需求时候，会使用各种各样的api和功能，这里集中对setTimeout和Promise的异步功能进行讨论一下。
【20190127 前端开发日报】JavaScript中纯函数是什么；JavaScript 判断 iPhone X Series 机型；从零实现Vue的组件库（十）- Select 实现；基础中的基础，JavaScript中的值和引用；2019年JavaScript…详情→
Vue自定义组件(简单实现一个自定义组件)在用vue构建项目的过程中，我们有时会用到别人开发的组件如vue-router；使用他人组件的正常步骤如下：1、命令行进行安装，执行install；2、在vue项目中的入口文件main.js中，进行导入；3、然后用Vue.use(plugin)…
vue路由篇(动态路由、路由嵌套)什么是路由？网络原理中，路由指的是根据上一接口的数据包中的IP地址，查询路由表转发到另一个接口，它决定的是一个端到端的网络路径。web中，路由的概念也是类似，根据URL来将请求分配到指定的一个’端’。(即根据…
温故而知新：JS 变量提升与时间死区另外，在编译优化方面来说，最开始时也并不是全部编译好脚本，而是当函数执行时，才会先编译，再执行脚本，如图
jquery全屏及退出全屏涉及方法： requestFullScreen：请求全屏 exitFullscreen：退出全屏 cancelFullScreen：取消全屏 fullscreenchange：监听全屏变化 html {代码…} js {代码…} 也可通过fullscreenchange来监控全屏变化 {代码…}
JS每日一题:Es6中新增的数据类型有哪些？使用场景？es6中新增一种原始数据类型Symbol,最大的特点是唯一性，Symbol值通过Symbol函数生成, 在es5中对象的属性都是字符串，我们使用他人定义的对象，然后去新增自己的属性，这样容易起冲突覆盖原有的属性, Symbol也可以…
Webex 如何在在线会议领域保持优势？在实时通讯的所有的细分领域中，在线会议领域的竞争尤为激烈。Webex如何在此领域中保持优势？本文来自ZK Research创始人兼首席分析师 Zeus Kerravala，LiveVideoStack进行了翻译。文/ Zeus Kerravala 译/ 元宝原文 https://www.nojitter.com/video-collaboration-av/…
搭建webpack简易脚手架本文是为下一篇《3分钟搞定 Vue + TypeScript开发》文章做的知识铺垫，文章结尾提供完整的github示例代码库。