都 9012了，该选择 Angular、React，还是Vue？；2019 前端工具调研；理解JavaScript的核心知识点：This；Vue中级指南-01 如何在Vue项目中导出Excel；原生JS知识点整理；webpack 配置哪些优化？；响应式前端框架；webpack4 + ejs + express 带你撸一个多页应用项目架构
-
都 9012了，该选择 Angular、React，还是Vue？ 转载请注明出处： 葡萄城官网 ，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 尽管 Web开发的典型应用场景除了将服务器用作平台、浏览器用作客户端之外，几乎很少活跃于其他业务领域，但不可否认JavaScript 语言和框架的使用已经成为了主流。Angular、React 和 Vue，作为 JavaScript 的三…
-
2019 前端工具调研 和往年一样，本年度调研的目的也很简单。是为了了解整个行业中，常见前端工具现有的知识和使用水平。 所以在 2019 年，哪些工具位居榜首呢？ :arrow_right: 现在我们开始本年度调研 我非常感谢你能抽出时间来参与。每一份回答都能为前端社区提供一份更有代表性的样本。 去年调研结果概述 去年，5461 名前端研…
-
理解JavaScript的核心知识点：This this 是 JavaScript 中非常重要且使用最广的一个关键字，它的值指向了一个对象的引用。这个引用的结果非常容易引起开发者的误判，所以必须对这个关键字刨根问底。 执行上下文：Execution Context 在深入了解 this 对象之前先介绍另一个概念：执行上下文。 没错，执行上下文与 this 在本质上是两个…
-
Vue中级指南-01 如何在Vue项目中导出Excel 由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。 所以你先需要安装如下命令： npm install xlsx file-saver -S npm install script-loader -S -D 复制代码 由于js-xlsx体积还是很大的，导出功能也不是一个非常常用的功能，所以使用的时候建议使用懒加载。使用方法如下： import(‘@/vendor/E…
-
原生JS知识点整理 1. 基本类型有哪几种？null 是对象吗？基本数据类型和复杂数据类型存储有什么区别？ 基本类型有6种，分别是undefined,null,bool,string,number,symbol(ES6新增)。 虽然 typeof null 返回的值是 object,但是null不是对象，而是基本数据类型的一种。 基本数据类型存储在栈内存，存储的是值。 复杂数据类型…
-
webpack 配置哪些优化？ module.exports = { //… module: { noParse: /jquery|lodash/, //不去解析jquery | lodash 中的依赖库 } }; 复制代码 如果js中引入jquery, webpack会去解析jq中是否有依赖库，配置 noParse 后打包时候忽略解析配置的库，提高打包效率。 2.解析时指定和排除查找目录 module:{ rules:[ { …
-
响应式前端框架 1. 响应式前端框架 (#1-响应式前端框架) * (#11-什么是响应式开发) * (#111-concept) * (#12-不同的框架中) * (#13-更新过程) * (#131-angularjs-脏检查) * [1.3.2. react (…
-
webpack4 + ejs + express 带你撸一个多页应用项目架构 最近接了一个公司官网的项目，需要 SEO 友好，所以不能使用前端框架，前端框架自带的脚手架工具自然也帮不上啥忙。只好自己使用 webpack4 + ejs + express ，从头搭建一个多页应用的项目架构。搭建过程中，遇到许多坑，然而网上的相关参考也是非常少，所以写个博客记录一下搭建过程以及注意事项。 以下我会将重要的细…
-
自己鼓捣一个Promise 源码 very-simple-promise ，包含了不完善的单元测试:heart:. 感谢 代码君的自白 这篇的文章主要参考了上面的博客，谢谢他的帮助:pray:。 Promise/A+规范 Promises/A+规范 , 下面:point_down:是对规范的内容的部分翻译。 英文比较烂，不喜欢的可以不看 。 承诺必须满足三种状态, pending(等处理), f…
-
keep-alive + vuex + mint + Infinite scroll 保存分页列表数据 在使用mintUI loadmore的时候，假如上拉加载到第三页，查看详情然后后退到列表页，列表组件重置。但是，有的情况是需要组件重置的，比如你在另一个组件添加了一条记录，那么再进入这个组件的时候就需要重置组件数据。 使用 keep-alive <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁…
-
vue组件之间的数据传递方法 在父组件中，可以通过子组件标签属性的形式将数据或者函数传给子组件，子组件通过props去读取父组件传过来的数据 用法 父组件传数据给子组件： 一般的属性值都是用来给子组件展示的 子组件传数据给父组件 属性值为函…
-
一道算法题(JS)-寻找数组中最大连续序列 给定一个未排序的整数数组，找出最长连续序列的长度。 要求算法的时间复杂度为 O(n) 。 示例: 输入: 输出: 4 解释:最长连续序列是 。它的长度为 4。 思路 连续序列，首先要对传入数组进行 排序 连续序列的标志为 s – s ===…
-
你从来没了解过的CSS浮动 | Design Shack浮动到底是做什么呢？他们是如何影响相关元素的盒模型的呢？浮动的元素与内联元素有什么不同呢？制定浮动元素的位置的具体规则是什么？clear属性是如何工作的，并且它的作用是什么？
-
JS常用数组方法总结笔记 数组(Array)和对象(Object)几乎是很多程序语言中最常用的类型。在ECMAScript中，数组的长度可以动态变化，数组中的数据可以是不同类型，相比其他语言更加灵活。另外，ECMAScript数组原生支持很多实用的方法，给数据的保存和处理带来很大的方便。 由于数组是引用类型，需要注意方法的可变性，简单理解就是“是否会改变原…
-
TypeScript + Webpack + Koa 搭建 React 服务端渲染 react-dom/server import { hydrate } from ‘react-dom’ 也可以使用 babel-core/register 让 React 代码能够运行在服务端，具体参考： segmentfault.com/a/119000001… 新建项目 $ mkdir customize-server-side-render $ cd customize-server-side-render # 初始化一个 package.json $ yarn init -y 复…
-
手撕遵循 Promise/A+ 规范的 Promise 相比于回调函数，Promise 解决了 “回调地狱” 和 “信任问题” 等痛点，并且大大提高了代码的可读性。在现代前端开发中，Promise 几乎成了处理异步的首选（虽然还有更方便的 async/await，逃）。这篇文章从 Promise 的思想和运行机制入手，深入理解每个 API，最后手写一个遵循 Promise/A+ 规范的 Promise 来。 异步方式 …
-
JavaScript中关于this指向的4种情况 对很多前端开发者来说，JavaScript语言的this指向是一个令人头疼的问题。先看下面这道测试题，如果你能实现并解释原因，那本文对你来说价值不大，可以直接略过。 **开篇测试题：**尝试实现注释部分的Javascript代码，可在其他任何地方添加更多代码（如不能实现，说明一下不能实现的原因）： let Obj = function (msg…
-
金三银四魔都两年半前端面经 先介绍下个人基本情况，16届本科非计算机相关专业，毕业转行前端，过年后裸辞休息了半个月，然后到三月份开始全力准备面试，主要是过去做过的项目总结，刷算法题，巩固基础知识之类的。3月末开始面试。因为目前网上面经还是以1~3年居多，我投简历对标的3~5年岗位，考察点确实有些不一样，这里把接近3个星期的面试经历分…
-
JavaScript 深入解剖bind内部机制 function foo(something) { this.a = something; } var obj1 = {}; var bar = foo.bind( obj1 ); bar( 2 ); // obj1.a === 2 var baz = new bar(3); console.log( obj1.a ); // 2 console.log( baz.a ); // 3 复制代码 bar 被硬绑定到 obj1 上，但是 new bar(3) 没有将 obj1.a 修改为 3。相反， …
-
JavaScript 中的 new 到底干了什么，跟原型链又有一些什么联系？如果按面向对象的思路去讲 JavaScript 的 new，还是很难去理解，我们可以从另一个方向去理解一下它。
-
React diff原理探究以及应用实践React通过引入Virtual DOM的概念，极大地避免无效的Dom操作，已使我们的页面的构建效率提到了极大的提升。但是如何高效地通过对比新旧Virtual DOM来找出真正的Dom变化之处同样也决定着页面的性能，React用其特殊…
-
Django 使用 Channels 实现 WebSocket（上） WebSocket – 开启通往新世界的大门 WebSocket是什么？ WebSocket是一种在单个TCP连接上进行全双工通讯的协议。WebSocket允许服务端主动向客户端推送数据。在WebSocket协议中，客户端浏览器和服务器只需要完成一次握手就可以创建持久性的连接，并在浏览器和服务器之间进行双向的数据传输。 …
-
浅谈Javascript中的对象和继承 Javascript是一门函数式编程语言，Javascript当中函数是核心，在Javascript中函数也是对象，函数对象在创建的时候会被添加属性和方法。 在Javascript中函数对象有两种调用方式，一种是new关键字的调用，另一种是没有new关键字的调用，前者会返回一个对象，后者会返回return语句中的内容。 function Obj (name) { …
-
将代码同时上传到到github和码云之前都是用github存储代码，后来接触到码云之后感觉也挺好用的。但是忽然发现上传代码的时候混掉了，想往github上上传结果传到码云上了，不知道怎么切换。终究还是git技能不过关。网上查询之后整理下，以免忘掉。
-
来听硬核干货 | 两天、十大专题论坛，速来约见 NJSD 全球软件大会吧 会议时间 6月7日、6月8日两天 十大专题论坛 一、大会Keynote演讲主题论坛 二、“智能技术前沿”专题论坛 三、“智能软件工程”专题论坛 四、“智能技术实践案例”专题论坛 五、“互联网系统架构”专题论坛 六、“可…
-
记录一波video.js的使用及问题最近的项目中需要播放视频，鉴于html5元素<video>的一些坑及不想自己造轮子，于是就找到了web端播放视频使用量最多的插件video.js，video.js是国外开发者开发的，英语本身就不好的我看英文文档简直是折磨，…
-
Edge 拥抱 Chromium 对前端工程师来说意味着什么？在2018年12月，微软宣布 Edge 将采用 Chromium 内核，这是一个为 Google Chrome 提供支持的开源项目。业内许多人对失去浏览器多样性而感到悲伤，然而我却非常高兴。官方正式的发布日期尚未公布，不过可能会在今年…
-
Fish Redux 中的 Dispatch 是怎么实现的？ 前言 开源地址：https://github.com/alibaba/fish-redux 我们在使用fish-redux构建应用的时候，界面代码（view）和事件的处理逻辑（reducer，effect）是完全解耦的，界面需要处理事件的时候将action分发给对应的事件处理逻辑去进行处理，而这个分发的过程就是下面要讲的dispatch， 通过本…
-
将打包好的vue项目上传github并制作预览链接（pages）实际上此命令就是执行build.js文件，将项目打包成静态资源。 此命令完成后，项目根目录下会多出一个dist文件夹，dist文件里面有：
-
Vue启动报错 Cannot find module 'webpack/bin/config-yargs' 项目背景是 使用Vue开发SPA单页面应用 鳖废话，先上错误 Cannot find module ‘webpack/bin/config-yargs’ at Function.Module._resolveFilename (module.js:325:15) at Function.Module._load (module.js:276:25) at Module.require (module.js:353:17) at require (internal/module.js:12:17) …
-
vue生命周期简介和钩子函数简单的来说一下vue的生命周期函数 beforeCreate // el 和 data 并未初始化 created // 完成了data数据的初始化，el没有 beforeMount // 完成了虚拟el和data初始化 mounted // 完成了真实el和data初始化 beforeUpd…
-
基于javascript的拖拽类封装^o^ 效果图如下： github地址如下： github地址 使用方法 引入js和对应的css import Drag from ‘../../static/dragger.js’ import ‘./assets/css/dragger.css’ 复制代码 之后，实例化 new Drag({ id: ‘box-dragger’, showAngle: true, isScale: false, showBorder: false }) new Drag…
-
从一个小Demo看React的diff算法React的虚拟Dom和其diff算法，是React渲染效率远远高于传统dom操作渲染效率的主要原因。一方面，虚拟Dom的存在，使得在操作Dom时，不再直接操作页面Dom，而是对虚拟Dom进行相关操作运算。再通过运算结果，结合dif…
-
Vue项目构建持续集成阿里云CDNCDN加速是Web应用性能优化和用户体验提升的至关重要的一环，当一个项目构建部署时，就需要考虑到如何高效的去完成相关资源的CDN部署。
-
TypeScript中的React高阶组件高阶组件（HOCs）在React中是组件复用的一个强大工具。但是，经常有开发者在结合TypeScript使用中抱怨道很难去为其设置types。
-
『前端开发』- 字体文件大小优化实践 这次项目中UI小姐姐要求用平方等其他字体，遂引入了这些字体，打包的时候发现，OMG，一个字体文件竟然要10M，实在不能忍，于是开始了字体文件大小的优化实践，最后变成38KB一个，还行吧。 解决思路 font-spider 字蛛 原理是通过爬取HTML文件以及关联的CSS，找到设置了字体的样式，再爬取相关的的字符，排序去重…
-
webpack-bundle-analyzer插件快速入门 首先，这是一个webpack的插件，需要配合webpack和webpack-cli一起使用。这个插件的功能是生成代码分析报告，帮助提升代码质量和网站性能。 安装 # NPM npm install –save-dev webpack-bundle-analyzer # Yarn yarn add -D webpack-bundle-analyzer 复制代码 使用方法一 1、配置webpack.config.js文件： // …
前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多
