前端

Yeoman-- 一个强大的前端构建工具

旧城冷巷雨未停 提交于 2020-04-08 11:50:26
原文还是在简书上: Yeoman-- 一个强大的前端构建工具 ,我只是自己的搬运工!! 上期跟大家试了试 Vue-cli这个构建工具 ,这个让我想起了很多其他的前端工具,其中一个就是Yeoman(上次就剧透了的),所以这期跟大家先简单介绍下这个脚手架工具,然后慢慢一步步深入下去。 先说说Yeoman是什么,它想做什么? Yeamon帮助你快速的开展一个项目工程,提供最佳实践和工具,来让你保持高效率编码。 他们自己提供了一个构建生态系统,主要通过‘yo’这个命令来构建一个完整的项目或者项目的一部分。 通过官方的生成器,他们建立了一个Yeoman的工作流,这个流是由一个强大的,固定的客户端组建,包含工具和框架帮助开发者快速建立牛逼的web应用。他们尽量提供了开发者所需的东西。 作为良好文档和深入思考构建过程的思想者,Yeoman包含了检测(静态检测)、测试以及压缩等等一系列工具,让开发者能够更加专注于思考解决方案。 Yeoman其实是3个工具的总和: yo --- 脚手架,自动生成工具 Grunt、gulp --- 构建工具 (最初只有grunt,后面gulp火了添加进来的) Bower、npm --- 包管理工具 (原来是 bower,后面添加了npm) 上面的三个是各自独立发展和运行的,混合后效果就不一样,主要在于yo,相当于一个粘合剂一样,把grunt这些工具粘合在一起。

2020年应该如何学习前端开发

一世执手 提交于 2020-04-08 11:34:50
现在用户对于产品的选择不仅仅是内容的完善,同时也更加注重产品的体验以及交互,因此前端开发工程师的重要作用愈发明显。2019年已经接近一半,很多准备入行前端开发工程师的或者还在犹豫小伙伴们,不知道准备得怎么样了呢?今天来给大家讲讲,在2019年,我们学习前端开发,如何才能高效学会前端开发? 零基础起步学前端开发 学习任何一门技术,都是从零开始的,前端开发也是一样。从事编程开发工作,必须先从语法基础开始学习,通过掌握语法最终组成产品效果。前端开发的基础语法包括:HTML+CSS+JavaScript,这是前端开发最基本也是最核心的3个语言。   1、HTML就是超文本标记语言,组成网页内容的最基本语言。你可以直接说他是网页的骨架,网页的图片、文字、视频、音频、程序都需要他引入到网页中体现。   2、CSS就是层叠样式表。通过样式属性来对标签进行布局规范,在不再使用table布局的时候,只要CSS样式对网页标签进行对应的布局实现才是正确的开发方式了。   3、JavaScript是我们学习前端开发中非常重要的一个内容,也是一个大家经常掉坑里的难点。JavaScript现在可以说是互联网时代使用率最高的脚本语言了,在网页中,所有的数据渲染,特效的交互都需要利用JavaScript,来影响浏览器的显示。在JavaScript部分学习,主要还是要去理解好交互的原理,把原理分析清楚,真的理解语法

前端知识普及之HTML

廉价感情. 提交于 2020-04-07 19:59:15
本文采用问答模式,目的是深入HTML内部,去学习一些我们不经常关注,但却实实在在存在的problem. 文章内容略显装逼,如果大家受不了,请带好护目镜。 什么是Doctype?能吃吗? 我想使用过sublime的同学,应该会有一个snippets。 !+[TAB] 结果就是: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> 没错,不知不觉中,!DOCTYPE html已经变为标准了。 没错,就是因为H5的出现。 Doctype就是用来告诉browser用什么文档标准来解析这个文档. 而!DOCTYPE html就是告诉浏览器使用h5的标准来解析文档。 说起DocType的内容,这应该算是一段血泪史。 一开始HTML是基于SGML来进行编译的,通过指定DTD,我们告诉浏览器使用哪一种DTD来对文档进行解析。在HTML5以前的title上,我们都需要指定某一个DTD。 以前比较流行的有:HTML 4.01/XHTML. 分别各有3中。 常见的就是比较宽松的DTD: 比如:HTML4.01 Transtional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

前端工程师必须了解的主流前端框架

荒凉一梦 提交于 2020-04-07 19:57:03
现在前端工程师的工作已经不想几年前那样,仅仅写一些页面调整一下样式就可以拿到高薪了。由于前端技术的发展,以及企业对前端工程师的要求越来越高,现在前端工作也越来越复杂。不过只要掌握目前比较流行的主流框架,完全可以轻松应对老板提出的各种需求。今天就和大家聊聊前端工程师必须了解的主流前端框架。 已经从事前端工作,或者正在学习前端开发的朋友们都知道。HTML /CSS/JS是前端开发的基本功。其中 HTML负责结构,网页想要表达的内容由 html书写。 CSS负责样式,网页的美与丑由它来控制, JS负责交互,用户和网页产生的互动由它来控制。 具体来说说目前有哪些主流的前端框架! 1.Bootstrap 它可以让你的页面更简洁、直观、强悍、移动设备优先的前端开发框架,让 web开发更迅速、更简单。它还提供了更优雅的 HTML和 CSS规范,它即是由动态 CSS语言 Less写成。有着丰富的网格布局系统以及丰富的可重用组件,还有强大的支持十几的 JavaScript、 jQuery插件以及组件定制等。 2. Layui 它是一款口碑极佳的 web弹层组件,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。 layui 首个版本发布于 2016年秋,她区别于那些基于 MVVM 底层的 UI 框架,从核心代码到 API

不会编程能学前端吗?web前端需要学习什么?

可紊 提交于 2020-04-07 19:52:42
Web前端工程师,是伴随着Web的兴起而细分的行业,随着当下企业对用户体验的重视,无论互联网公司还是大型企业都把前端作为自己的招牌门面,看得相当重要。而且随着互联网的不断发展,每年都会诞生大量的企业,巨大的市场需求使得前端开发工程师越来越缺乏。那么,web前端需要学习什么? 1、基础部分,主要就是html、css、JavaScript。这个其实不用多讲,这些个基础不学扎实了啥也干不了,可以直接从html5、css3、ES5来学习。学习的方法很多,最方便的方法是像w3cschool、汇智网这种边学边练的,类似之前微软的所见即所得,喜欢读纸质书的可以买几本书来看看。 2、几个边界,与美工相关、后端开发、设计相关。想做好Web前端,一定搞清楚自己的工作界面在什么地方,这对你有很大帮助。每个公司可能都不一样,所以了解边界相关的知识就很重要。 美工相关,主要是说ps、切图之类的东西,photoshop还是需要会用的,至于说你能不能搞出漂亮的图片来那倒不是重点,关键点是体会美工的工作过程。如果你在公司兼了这件事,那你就得深入的学习了,别不以为然,前端的美术有修养还是挺重要的。 后端开发,虽说一般情况下,前端开发和后端开发是分开的,不过二般情况也很多。这个时候就需要你在后端中选择一条主线,很多人都在比较PHP、Python、Node.js哪种好,其实都差不多,不过从市场上的热度来说视乎Node

新手学Web前端有哪些方法?该怎么去规划学习?

瘦欲@ 提交于 2020-04-07 19:41:27
自学前端,首先的你得搞懂前端是什么,要学习的内容是什么,每天能抽出多少的时间去学习,能不能坚持的问题,很多同学可能就是三分钟的热情去学习,然后过几天就偷懒学不下去了,为了避免这样半途而废,大家选择学习的方式就是很重要的。还有就是重点的学习哪些技术。 以下就给大家分享一下Web前端开发中需要掌握的技术: 1、学习HTML,这是很简单,基本的是要掌握div,formtable、Ulli、P、跨度、字体这些标签,这些都是常用的,尤其是DIV和表格,DIV,表也可以用于布局,但不灵活,和用于基本表处理数据。 2、学习CSS,CSS这里说的不包括CSS3 Web前端开发工程师里面我们看到的,一个可以使用HTML或CSS + CSS+DIV的界面布局,所以CSS是用来协助HTML布局和显示,我们称之为“CSS样式”,为什么说DIV+CSS?因为我说div是HTML主要用于布局的,所以div是这个东西的核心!CSS必须配合部。CSS必须掌握浮、位置、宽度和高度,以及较大值和小值,以100%,溢出,边缘、填充等。这些都是与布局相关的样式。 3、然后就是JS的学习。JS入门很简单,不需要很多东西,只要根据ID或名称DOM或”风格或价值,然后以一个ID或名称元标签,或额外的数据,在HTML,这是对数据的操作有关系,那么数据逻辑的影响,无非是一个跳跃,弹框,隐藏什么,这一切都是结合其他应用

JavaScript基础挖掘目录

微笑、不失礼 提交于 2020-04-07 13:32:21
前端基础进阶(一):内存空间详细图解 前端基础进阶(二):执行上下文详细图解 前端基础进阶(三):变量对象详解 前端基础进阶(四):详细图解作用域链与闭包 前端基础进阶(五):全方位解读this 前端基础进阶(六):在chrome开发者工具中观察函数调用栈、作用域链与闭包 前端基础进阶(七):函数与函数式编程 前端基础进阶(八):深入详解函数的柯里化 前端基础进阶(九):详解面向对象、构造函数、原型与原型链 前端基础进阶(十):面向对象实战之封装拖拽对象 前端基础进阶(十一):详细图解jQuery对象,以及如何扩展jQuery插件 前端基础进阶(十二):深入核心,详解事件循环机制 前端基础进阶(十三):透彻掌握Promise的使用,读这篇就够了 前端基础进阶(十四):es6常用基础合集 前端基础进阶(十五):详解 ES6 Modules 来源: https://www.cnblogs.com/mingweiyard/p/8269022.html

基于函数计算的 BFF 架构

╄→尐↘猪︶ㄣ 提交于 2020-04-07 13:09:36
什么是 BFF BFF 全称是 Backends For Frontends (服务于前端的后端),起源于 2015 年 Sam Newman 一篇博客文章 《Pattern: Backends For Frontends —— Single-purpose Edge Services for UIs and external parties》 。 微服务和前后端分离的流行,在后端服务边界上通常会有一个 API 层,向下调系统内的多个微服务,经过聚合、适配和裁剪等一些列的处理后,向上为前端提供 HTTP 协议的 API。 然后随着移动端的兴起,出现了 H5、iOS 和 Android 等多端并存的开发场景,由于移动端的屏幕尺寸比较小,所以显示的信息和传统 Web 端会有较大的区别,而且移动端对于访问连接数和数据量也有更高的要求。此时通用 API 层的开发就会碰到一些困境,比如需要为不同的端提供不同的 API。而这些 API 的设计与不同端上的展示逻辑相关性较强,所以不太适合由后端团队或者 API 团队来负责。因为这些 API 的维护人员会夹在前后端之间去做协调和取舍,非常的心累。 Sam Newman 先后在 REA 和 SoundCloud 两家公司实践了为不同的端做独立的 Backend API,称之为 BFF。以解决不同端对 API 的差异化需求的问题。 BFF 的好处

从实战中学前端:html+css实现漂亮的按钮

依然范特西╮ 提交于 2020-04-07 02:05:10
本篇是从实战中学前端的第一篇,先来用css实现一些按钮。大概样式如图: 按钮初体验 html表示中作为按钮的标签有button和input <!-- type="button"可省,省略时表示type="submit" --> <button type="button">按钮</button> <!-- 也可为type="submit" 此时主要用在表单提交中(如登录时),此时type不能省略 --> <input type="button" value="按钮" /> 我们来看看默认的按钮效果: <button>按钮</button>或<input type="button" value="按钮" /><!-- 为了简单,本篇就默认前一种 --> 默认的按钮太丑了有木有?肿么让它变得好看点呢?此时就是css展示它的功法了。 css神奇初见 css全称为层叠样式表,简单说来就是实现网页的效果,如按钮美化。 <button style="width: 80px;height: 40px;background: #4CAF50;- border: none;">按钮</button> 变漂亮点了对不对?让我们来解释一下: style="" style翻译成中文就是样式,引号里边的内容就表示这个按钮的样式。 注:给Html元素设置css样式有三种,此为第一种,后面再介绍 width: