- 博客(63)
- 收藏
- 关注
RSS订阅转载 第二周技术周报-前端的自我修养
前言修养是评判一个人的标准。我们做人要有修养，那么我们做事情同样的也是要有修养。那么我们做前端开发也是必须要有修养的。这也是我们常常会忽略的地方。举个例子:添加a标签的时候，你是否扩大了点击区域。多菜单进行切换的时候，是否加了延时所有请求后台数据，是否加了结果反馈当数据请求时间过长时，是否添加了loading以上的这些点与你的技术好坏无关，关乎的是一种“工匠精神”。甚至...
2019-06-24 10:05:00
280
转载 第一周技术周报-前端框架演变
前言在本周接触了一个关于“前端框架演变”的话题。今天我们就来聊聊，它到底是怎么进行演变的。前端框架演变web1.0时代此时前端展示数据比较简单，通常是由后台使用模板引擎直接渲染的。在这个时期都还未产生“前端工程师”，更别谈前端的发展能有多快了。这个时代作者经历的并不多，比较也已经过去了很多年了，这里就不深究。web2.0时代前端展示趋于复杂，所以逐渐就开始前后端分离式架构。...
2019-06-15 23:58:00
284
转载 JavaScript数据类型检测 数组(Array)检测方式
前言对于确定某个对象是不是数组，一直是数组的一个经典问题。本文专门将该问题择出来，介绍什么才是正确的javascript数组检测方式typeof首先，使用最常用的类型检测工具——typeof运算符var arr = [1,2,3];console.log(typeof arr);//'object'数组的本质是一种特殊的对象，所以返回'object'。typeof运算符只能用...
2019-04-27 07:32:00
1069
转载 CSS定位 深入理解定位(position)的偏移
前言CSS有三种基本的布局机制：普通流、浮动和绝对定位。利用定位，可以准确地定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。但元素究竟如何定位，定位到什么位置，主要依靠top/right/bottom/left这四个偏移属性。本文就定位中的偏移做详细介绍position定位值: static | relative | absolute...
2019-04-26 14:53:00
1976
转载 CSS难点 为什么height设置100%会失效，分栏目等高布局(高度自适用布局)的实现方案...
前言相信在平时写CSS的时候大家都或多或少遇见过设置了height为百分比的时候发现不起作用。今天我们就来一探究竟原因：父元素未设置具体高度，子元素设置height:100%是无效的。现象以及方案[1] 设置高度为100%时，无法实现全屏<!DOCTYPE html><html lang="en"><head> <meta ...
2019-04-23 12:11:00
1023
转载 react实战项目开发(2) react几个重要概念以及JSX语法
前言前面我们已经学习了利用官方脚手架搭建一套可以应用在生产环境下的React开发环境。那么今天这篇文章主要先了解几个react重要的概念，以及讲解本文的重要知识JSX语法React重要概念【思想】React 的核心思想是：封装组件，各个组件维护自己的状态和 UI，当状态变更，自动重新渲染整个组件。如果我们使用react编写的话，会把他拆分成一个一个的小组件进行编写方便管理复用...
2019-04-21 07:08:00
165
转载 react实战项目开发(1) 搭建react开发环境初始化项目（Create-react-app）
前言Create React Appnpm install -g create-react-appcreate-react-app my-appcd my-appnpm start执行命令后新建项目：study-react可以看下项目基本目录：工程目录介绍【node_modules】项目依赖的包文件都在这里【package.json】{ "name":...
2019-04-16 11:42:00
174
转载 Node.js实战项目学习系列(5) node基础模块 path
前言前面已经学习了很多跟Node相关的知识，譬如开发环境、CommonJs，那么从现在开始要正式学习node的基本模块了，开始node编程之旅了。pathpath 模块提供用于处理文件路径和目录路径的实用工具。 它可以使用以下方式访问：const path = require('path');【path.normalize(path)】path.normalize() ...
2019-04-16 08:16:00
133
转载 Node.js实战项目学习系列(4) node 对象(global、process进程、debug调试)
前言在之前的课程我们学习了Node的模块化规则，接下来我们将学习下 Node的几个新特性：global ，process进程，debug调试global跟在浏览器中的window一样都是全局变量，我们先来熟悉些常用的全局变量Buffer(二进制数据处理)、process、consoletimer(setImmediate)看一段简单的代码：>>> ...
2019-04-15 17:05:00
190
转载 Node.js实战项目学习系列(3) CommonJS 模块化规范
前言想开始编写Node.js代码，那么我们就必须先熟悉它的模块化规范CommonJS，本文将详细讲解CommonJS规范本文代码 >>> github 地址CommonJSNode 应用由模块组成，采用 CommonJS 模块规范。每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。【特点】所有代码都运...
2019-04-15 07:25:00
105
转载 Node.js实战项目学习系列(2) 开发环境和调试工具
前言上一节让我们对Node.js有一个初步的了解，那么现在可以开始正式学习下Node.js的开发了，但是任何一门语言要设计到开发，就必须先学习开发环境以及调试。本文将主要讲解这些内容。本文涉及到的代码全部可在github地址找到>>>node 代码安装点击查看>>>node 中文官网地址【版本选择】看图发现包含两种版本：长期支持的稳定版本...
2019-04-14 16:24:00
110
转载 Node.js实战项目学习系列(1) 初识Node.js
前言一直想好好学习node.js都是半途而废的状态，这次沉下心来，想好好的学习下node.js。打算写一个系列的文章大概10几篇文章，会一直以实际案例作为贯穿的学习。什么是nodeNode.js是一个JavaScript运行平台，其显著特征是它的异步和事件驱动机制，以及小巧精悍的标准库。Node目前有两个活跃版本：长期支持版（LTS）和当前版，由Node.js基金会进行管理并提供支...
2019-04-13 19:05:00
130
转载 CSS 水平垂直居中的几种实现方法
前言项目中经常碰到需要实现水平垂直居中的样式。下面就总结几种常用的方法水平对齐+行高【思路一】text-align + line-height实现单行文本水平垂直居中<style> .f10 .test{ text-align: center; line-height: 100px; }</style>&...
2019-04-12 15:17:00
154
转载 * CSS 视觉格式化（基本框、包含块、盒模型、水平格式化、垂直格式化、行布局、em框、内容区、行间距、行内框、行框）...
前言CSS视觉格式化这个词可能比较陌生，但说起盒模型可能就恍然大悟了。实际上，盒模型只是CSS视觉格式化的一部分。视觉格式化分为块级和行内两种处理方式。理解视觉格式化，可以确定得到的效果是应该显示的正确效果，还是浏览器兼容性的bug。基本概念【基本框】CSS假定每个元素都会生成一个或多个矩形框，这称为元素框。各元素框中心有一个内容区(content area)。这个内容区周围...
2019-04-11 16:25:00
306
转载 chart.js angular组件封装(ng6)、实战配置、插件编写
前言项目需要使用chart.js插件，由于项目是使用angular开发，那么我第一步就是先把chart.js改造成angular组件来使用。本项目代码都可以在github上下载：项目git地址angular改造1、搭建angular项目步骤省略了，可以自行查询ng官方文档2、创建一个chart-js的组件ng g c chart-jschart-js.component.h...
2019-04-11 11:48:00
337
转载 JavaScript 执行环境、作用域、内存管理及垃圾回收机制
前言JavaScript具有自动垃圾收集机制，也就是说，执行环境会负责管理代码执行过程中使用的内存。[原理]找出那些不再继续使用的变量，然后释放其占用的内存。为此，垃圾收集器会按照固定的时间间隔（或代码执行中预定的收集时间），周期性地执行这一操作。在学习垃圾回收机制之前让我们先来学习下执行环境及作用域执行环境执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为...
2019-04-09 09:46:00
105
转载 CSS margin负值学习及实际应用
前言margin属性在实际中非常常用，也是平时踩坑较多的地方。margin折叠部分相信不少人都因为这样那样的原因中过招。margin负值也是很常用的功能，很多特殊的布局方法都依赖于它。表现虽然margin可以应用到所有元素，但display属性不同时，表现也不同【1】block元素可以使用四个方向的margin值【2】inline元素使用上下方向的margin值无效【3】in...
2019-04-08 17:32:00
180
转载 ES6 Class语法学习
前言大多数面向对象的编程语言都支持类和类继承的特性，而JS却不支持这些特性，只能通过其他方法定义并关联多个相似的对象，这种状态一直延续到了ES5。由于类似的库层出不穷，最终还是在ECMAScript 6中引入了类的特性。本文将详细介绍ES6中的类类的定义【ES5的类】function Point(x, y) { this.x = x; this.y = y;}Poi...
2019-04-08 15:04:00
114
转载 深入学习CSS外边距margin（重叠效果，margin传递效果，margin:auto实现块级元素水平垂直居中效果）...
前言margin是盒模型几个属性中一个非常特殊的属性。简单举几个例子：只有margin不显示当前元素背景，只有margin可以设置为负值，margin和宽高支持auto，以及margin具有非常奇怪的重叠特性。重叠margin重叠又叫margin合并，发生这种情况有两个前提1、只发生在block元素上(不包括float、absolute、inline-block元素)2、只发生...
2019-04-08 10:27:00
586
转载 CSS布局 两列布局之单列定宽,单列自适应布局思路
前言说起自适应布局方式，单列定宽单列自适应布局是最基本的布局形式。比如斗鱼的直播间，后台管理系统都是常用的我们将从 float, inline-block, table, absolute, flex, grid 这几个布局方式来实现这种效果float【float + margin】将定宽的一列使用float，而自适应的一列使用计算后的margin<style&...
2019-04-07 07:02:00
167
转载 JavaScript 基本类型和引用类型
前言ECMAScript变量可能包含两种不同数据类型的值：基本类型值和引用类型值。基本类型值指的是简单的数据段，而引用类型值指那些可能由多个值构成的对象。基本类型Undefined、Null、Boolean、Number和String引用类型除了上诉基础类型以外的都是引用类型，例如Object，Array等引用类型的值是保存在内存中的对象。与其他语言不同，JavaSc...
2019-04-06 17:03:00
95
转载 JavaScript 实现一个简单的MVVM前端框架(ES6语法)
前言随着前端各大框架的崛起，为我们平时的开发带来了相当的便利，我们不能一直停留在应用层面，今天就自己动手实现一个乞丐版的MVVM小框架完整代码github地址效果html代码<div id="app"> <p>{{a}}</p> <p>{{b.b}}</p> <input type="...
2019-04-05 21:03:00
102
转载 CSS iconfont阿里巴巴矢量图库在开发中实战使用
前言项目开发中，是避免不了使用小图标的，那么国内比较好用的图标网站当属iconfont了，下面我们将详细介绍如何使用。iconfont选择所需图标1、iconfont官网2、把所需要的添加进入购物车3、添加所需图标完毕后，点击右上角的购物车图标4、下载代码5、下载的代码解压后图片上圈起来的都是字体文件6、项目中新建一个font文件夹用来放置字体文件7、取出i...
2019-04-04 11:46:00
323
转载 CSS font字体知识学习
字体系列【1】5种通用字体系列：拥有相似外观的字体系列serif字体:字体成比例，且有上下短线(衬线字体)，包括Times\Georgia\New century Schoolbooksans-serif字体:字体成比例，且没有上下短线(无衬线字体)，包括Helvetica\Geneva\Verdana\Arial\UniversMonospace字体:字体不成比例，等宽字体，包...
2019-04-04 07:53:00
199
转载 JavaScript 日期和时间基础知识
前言学习Date对象之前，首先要先了解关于日期和时间的一些知识。比如，闰年、UTC等等。深入了解这些，有助于更好地理解javascript中的Date对象。标准时间一般而言的标准时间是指GMT和UTC，以前是GMT，现在是UTC【GMT】格林尼治标准时间(GMT)是指位于伦敦郊区的皇家格林尼治天文台的标准时间，因为本初子午线被定义在通过那里的经线理论上来说，格林尼治标准时间的...
2019-04-03 11:25:00
138
转载 JavaScript null和undefined的区别
前言1995年javascript诞生时，最初像Java一样，只设置了null作为表示”无”的值。根据C语言的传统，null被设计成可以自动转为0但是，javascript的设计者Brendan Eich，觉得这样做还不够，有两个原因。首先，null像在Java里一样，被当成一个对象。但是，javascript的值分成原始类型和对象类型两大类，Brendan Eich觉得表示”无”的...
2019-04-03 10:18:00
130
转载 line-height && vertical-align 学习总结
前言line-height、font-size、vertical-align是设置行内元素布局的关键属性。这三个属性是相互依赖的关系，改变行间距离、设置垂直对齐等都需要它们的通力合作。行高 line-heightline-height行高是指文本行基线之间的距离。行高line-height实际上只影响行内元素和其他行内内容，而不会直接影响块级元素，也可以为一个块级元素设置...
2019-04-02 22:15:00
97
转载 CSS盒模型深入理解
前言所有文档元素都生成一个矩形框，这称为元素框(element box)，它描述了一个元素在文档布局中所占的空间大小。而且，每个框影响着其他元素框的位置和大小宽高宽度width被定义为从左内边界到右内边界的距离，高度height被定义为从上内边界到下内边界的距离在CSS中，可以对任何块级元素设置显式高度。如果指定高度大于显示内容所需高度，多余的高度会产生一个视觉效果，就好像...
2019-04-02 11:45:00
98
转载 CSS BFC（格式化上下文）深入理解
什么是BFC在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC是formatting context的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。BFC是block form...
2019-04-01 12:08:00
110
转载 css清除浮动
前言之所以要清除浮动，就是解决浮动元素造成的一些问题，如包含块高度塌陷，浮动流造成的布局混乱等问题。clear清除值: left | right | both | none | inherit初始值: none应用于: 块级元素(块级元素指block元素，不包括inline-block元素)继承性: 无left:左侧不允许存在浮动元素right:右侧不允许存在浮动元素b...
2019-04-01 09:36:00
70
转载 JavaScript IIEF 模仿块级作用域
前言JavaScript没有块级作用域的概念。但是通过IIEF 立即执行函数我们可以实现块级作用域。function outputNumbers(count){ for (var i=0; i < count; i++){ alert(i); } alert(i); //计数}这个函数中定义了一个for循环，而变量i的初始值被设置...
2019-03-31 13:27:00
217
转载 css浮动(float)全方位案例解析
前言浮动最早的使用是出自<img src="#" align="right" />，用于文本环绕图片的排版处理。当然也是一种常用的布局方式。float 浮动浮动元素脱离普通流，然后按照指定方向，向左或者向右移动，碰到父级边界或者另外一个浮动元素停止值: left | right | none | inherit(继承)初始值: none应用于: 所有元素继承...
2019-03-30 18:09:00
213
转载 CSS布局-flex布局入门教程
前言2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。查询兼容Flex 布局是什么Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.flexBox...
2019-03-29 16:23:00
144
转载 CSS Grid基于网格的二维布局系统(详细教程)
.grid-wrap{ display: inline-flex; padding: 20px; background: #f4f4f4; word-break: initial; } .handle-grid{ wid...
2019-03-28 14:26:00
312
转载 JavaScript 函数递归
递归函数递归函数是在一个函数通过名字调用自身的情况下构成的项目中例如树状结构渲染，对象深复制，等很多方面都会使用到递归函数function factorial(num){ if (num <= 1){ return 1; } else { return num * factorial(num-1); }}非严格模...
2019-03-27 10:47:00
130
转载 css中font-size为0的妙用（消除内联元素间的间隔）
前言<div> <input type="text"> <input type="button" value="提交"></div>看不片我们不难发现为什么会多出一个间隙出来呢。我们该如何消除呢？inline && inline-block元素间隙元素间留白间距出现的原因就是标签段之间的空格...
2019-03-27 10:07:00
293
转载 css预编译语言 sass scss（变量$var, css嵌套规则，@import规则，@extend，@mixin）
什么是sassSass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配 Compass 样式库一同使用时【特点】完全兼容 CSS3在 CSS 语言的基础上增加变量(variables)、嵌...
2019-03-26 17:45:00
1883
转载 深入学习javaScript闭包(闭包的原理，闭包的作用，闭包与内存管理)
前言虽然JavaScript是一门完整的面向对象的编程语言，但这门语言同时也拥有许多函数式语言的特性。函数式语言的鼻祖是LISP，JavaScript在设计之初参考了LISP两大方言之一的Scheme，引入了Lambda表达式、闭包、高阶函数等特性。使用这些特性，我们经常可以用一些灵活而巧妙的方式来编写JavaScript代码。闭包闭包是指有权访问另一个函数作用域中的变量的函数...
2019-03-26 10:30:00
106
转载 深入学习css伪类和伪元素及其用法
前言CSS的伪类和伪元素在平时的代码中经常会出现，可是一旦别人问你，什么是伪类，什么是伪元素，可能还是不能完整的表述出来，下面我们来一探究竟。伪类和伪元素定义伪类用于在页面中的元素处于某个状态时，为其添加指定的样式。伪元素会创建一个抽象的伪元素，这个元素不是DOM中的真实元素，但是会存在于最终的渲染树中，我们可以为其添加样式。[重点]最常规的区分伪类和伪元素的方法是：实...
2019-03-25 16:34:00
256
转载 css中的数学表达式calc()
前言数学表达式calc()是CSS中的函数，主要用于数学运算。使用calc()为页面元素布局提供了便利和新的思路。概念数学表达式calc()是calculate计算的缩写，它允许使用+、-、*、/这四种运算符，可以混合使用%、px、em、rem等单位进行计算[兼容性] IE8-、safari5.1-、ios5.1-、android4.3-不支持，android4.4-4....
2019-03-25 11:47:00
684
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人