前端开发

如果 2019 年技术圈有十大流行词，容器化肯定占有一席之地，随着 Docker 的风靡，前端领域应用到 Docker 的场景也越来越多，本文主要来讲述下开源的分布式图数据库 Nebula Graph 是如何将 Docker 应用到可视化界面中，并将 1.3G 的 Docker 镜像优化到 0.3G 的实践经验。 为什么要用 Docker 对于前端日常开发而言，有时也会用到 Docker，结合到 Nebula Graph Studio （分布式图数据库 Nebula Graph 的图形界面工具）使用 Docker 主要基于以下考虑: 统一运行环境：我们的工具背后有好几个服务组合在一起，诸如不同技术栈的现有服务，纯前端的静态资源。 用户使用成本低：目前云服务还在开发中，想让用户对服务组合无感，能直接在本地一键启动应用并使用。 快速部署：团队本就提供有 Nebula镜像版本 实践，给了我们前端一些参考和借鉴。 Docker 镜像的构建 既然要使用 Docker 来承载我们的应用，就得将项目进行镜像构建。与所有 build 镜像类似，需要配置一份命名为Dockerfile 的文件，文件是一些步骤的描述，简单来说就是把项目复制到镜像里，并设置好启动方式： # 选择基础镜像 FROM node:10 # 设置工作目录 WORKDIR /nebula-web-console #

介绍Bundle之前先引用《淘宝技术这十年》中一段话，对Web前端稍微有点常识的人都应该知道，浏览器下一步会加载页面中用到的CSS、JS（JavaScript）、图片等样式、脚本和资源文件。但是可能相对较少的人才会知道，你的浏览器在同一个域名下并发加载的资源数量是有限的，例如IE 6和IE 7是两个，IE 8是6个，chrome各版本不大一样，一般是4～6个。Bundle是ASP.NET 4.5中的一个新特性，可 用来将js和css进行压缩（多个文件可以打包成一个文件，也可以说是合并多个文件），并且可以区分调试和非调试，在调试时不进行压缩，以原始方式显示出来，以方便查找问题。如果你新建一个有模板的MVC4项目，就可以直接使用了。 官方写法 新建完一个MVC4项目之后可以在APP_Start中的BundleConfig.cs看到这样的代码: public class BundleConfig { // 有关 Bundling 的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=254725 public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~

1.Object.prototype.toString，可以准确地判断数值类型，返回值是一个字符串，固定格式[object 数值类型] ####一、如何在vue中配置less开发环境 1.npm安装less 使用的话在vue中有两种方式1.全局引入，2.在每一个组件style区域内加入lang=‘less’ 2.安装插件postcss-pxtorem 在npmvue项目安装后，vue2.x会在主配置文件出现.postcssrc.js，在其中配置 ，详情在qq浏览器的收藏里 ####二、码云上传项目的记录 正常流程一般会出现error: src refspec master does not match any. error: failed to push some refs to 'git@github.com:hahaha/ftpmanage.git’报错,详情见浏览器收藏码云,注意 git add .（.应该是代表全部） ####三、跨域问题(前端解决方案) ##1.jsonp方式，2.反向代理(利用了虚假服务器，有个坑，https得加secure: false,)3.cors，4.websocket 来源： CSDN 作者： TE杨 链接： https://blog.csdn.net/wron_path/article/details/104258620

随着互联网的高速发展以及技术的不断革新， Web 前端工程师需要掌握的技术也有所变更。很多人想知道当前常用的 Web 前端技术有哪些？如何快速掌握这些技术？接下来 小编就给大家介绍下。 常用的 Web 前端技术有哪些？ Web 前端是为了协调前端设计与后端开发之间工作的岗位，是最接近产品和设计的工程师，起到衔接产品和技术的作用，前端为用户可以看到的部分负责，所以也是最接近用户的工程师。 Web 前端开发基础技能： HTML 、 CSS 、 JavaScript 前端的开发中，在页面的布局时， HTML 将元素进行定义， CSS 对展示的元素进行定位，再通过 JavaScript 实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。 Web 前端开发必知标准： http 标准、 W3C 标准、 ECMAScript 标准 浏览器要从服务端获取网页，网页也可能将信息再提交给服务器，这其中都有 http 的连接。 W3C 标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（ Structure ）、表现（ Presentation ）和行为（ Behavior ）。 JS 是在 ES 的基础上，为 Web 浏览器做了一部分封装（增加了 DOM 操作、 BOM 操作等）。

1.前端页面的构成？分别有哪些功能？ 分层： 1）结构层（html）structural layer 由HTML或者XHTML之类的标记语言负责创建，即：标签； 2）表示层（css）presentation layer 解决结构层如何显示的问题。 3）行为层（js）behavior layer 内容如何对事件作出反应一类的问题解决。 2.高度不固定的容器的上下左右的居中显示。(重点是垂直居中) 1）将父级容器设置为： display:table-cell; vertical-align:middle; text-align:center; 2)使用flex display: flex; justify-content:center; align-items:Center; 记住上面两个，还有其他的具体的参考下面的链接地址； 垂直居中的解决 3.margin塌陷的问题，以及margin重叠问题。 相信很多人都知道解决父容器不设置margin的值，只给里面的div设置一个margin-top，会有什么样的结果，就是父容器会margin-top == 子容器的margin-top值。 解决方案： 1）给父容器设置border：1px solid transparent; 2)padding>0 3)float 4)position:absolute; 5)display:inline

1. 安装包管理工具 npm 或者yarn npm install -g yarn yarn基于node，并且速度更快，能自动缓存你下载过的包，让你在离线、重复下载时不需要通过去网上拉取文件，直接在本地就可以安装你需要的包！并且，yarn分离的各个包的安装过程，合理排队，不产生高频请求，单个包安装失败并不影响其他包的安装，有效的重试机制等. 2. 目前最流行的前端开发工具或者IDE或者编辑器：vscode、sublime、各种Storm！还有Hbuilder（这个是完美支持Vue的特供、还支持特有小程序等N端转化插件，如果需要多端覆盖这个绝对的强大！ 3. VS code 插件 Auto Rename Tag Beautify， 该插件支持js、josn、css、sass和html的代码美化 CSS Peek , 支持css的快速跳转 图标库 Material Icon Theme 对当前流行语言和后缀名进行单独匹配好看又丰富的图标！ view in Browser 静态网页可以支持直接在默认浏览器预览 Quokka.js 支持js文件内的部分代码直接计算并返回计算结果 JavaScript (ES6) code snippets 支持最新的ES6语法，支持很多代码快捷公式 GitLens — Git supercharged 、 Git History Markdown All

什么是Vue 是目前最火的前端框架，React是最流行的一个前端框架 (React除了开发网站，还可以开发手机App，Vue语法也可以用户进行手机App开发的，需要借助于Weex) vue.js是前端主流框架之一，和Angular.js、React.js一起，并称为前端主流三大框架！ vue.js，不仅容易上手，还便于与第三方你库或既有项目整合。 前端主要工作，主要负责mvc中的v这一层；主要工作是和界面打交道； 为什么要学习流行框架 企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱； 提高开发效率的历程：原生js --jquery之类的类库—前端模板引擎—Angular.js/Vue.js 在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多 的时间去关注业务逻辑； 框架和库的区别 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要换框架，则需要重新架构整个项目。 库（插件）：提供某一个小功能，对项目的侵入性较小，如果开某个库无法完成某些需求可以很容易切换到其它库实现需求 MVC和MVVM的区别 MVC是后端分层开发的概念 MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端视图层，分喂了三部分Model，VIew，VM ViewModel 前端中的MVVM思想 MVVM是前端视图层的概念

1 P1:凉凉好像挺厉害的奥？ 听完了！ 2 P2:HTML是用来描述网页的一种语言 官方：超文本 标记语言 Hyper Text Markup Language 使用标签来描述网页 < >括起来的就是标签，成双成对 开始标签+结束标签 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>第一个程序</title> 5 </head> 6 <body> 7 <h1>Hello world</h1> 8 <p>2020 CS</p> 9 </body> 10 </html> 第一行：声明——由HTML5（最新）编写。声明的作用是帮助编译器去解析你的代码。 html元素：描述所有网页的内容 head元素：所有头部元素的容器 title指定网页的标题 body:包含网页中所有可见的内容 h1:标题的尺寸 往下由h1,h2,h3,h4,h5,h6 h1最大 p元素：定义了一个段落，存放文本 P3: 服务器搭建？? 课程案例在线演示：http://demo.fishc.com HTML5速查宝典：http://man.fishc.com/html5 CSS3速查宝典：http://man.fishc.com/css3 扩展阅读：bbs.fishc.com 课堂课后资料 阶段考核——项目！！！ img标签——插入一个图片 必须设置alt src属性

课程介绍 高性能极致用户体验前端开发实战课程适合所有前端开发学习或者从业者，结合目前前端开发的最佳实践，提供前端网页性能分析优化知识，结合实际项目经验分析可以采用的优化思路，并给出开发高性能极致体验网页的通用方法和技巧。 课程官方博客： 前端学堂 在开始学习本课程之前，先提2个基本要求： 了解业务 作为一名合格的前端开发，我们的开发工作不是盲目的，我们的优化目标需要明确，所以首先要了解你所做的业务。不仅要知道整个业务背景，还需要了解业务需求，业务目的，最后最好能拿到业务结果。 了解业务的目的是能让你更好的分配开发的权重，合理安排开发的重点。比如开发的是视频类网站，那么开发的重点自然在于播放器加载和流畅播放以及降级方案。如果是天气类业务，那么核心业务是要保障稳定快速的展示出天气相关数据，然后是加载展示其他内容。如果是博文类网站，那么重点在于首屏的信息加载和展示。 了解用户 了解用户也是至关重要，如果连自己所做业务的受众都不知道，那么何谈用户体验，何谈极致性能？ 这一部分至少你要知道现在做的业务主要是面向PC用户还是移动web用户，PC用户所用的浏览器都是什么版本，比例分布是怎样？移动端用户android和ios比例多少，各自平台版本分布情况如何？这是最基本的要求，因为我们开发的代码是在这些平台运行的。 如果不知道怎么办？没关系，从今天开始统计起来，做个埋点日志服务

引言 市面上有许多前端开发工具可以加速 Web 开发工作。本文是对一些顶级 Web 开发工具的一次精选汇总，分别介绍了每款工具的关键特性，并已附上下载链接。 1. Novi Builder Novi Builder 是一个拖放式构建器，它对于经验丰富的 Web 开发人员而言是一个不错的选择。它为开发人员提供了访问源代码的权限，并允许开发人员在 Web 设计中进行多项更改。你能用它完全控制你的 Web 项目，并且可以充分利用它的各项功能。尽管这款工具对于初学者来说可能很难入门，但在它的众多优势面前这一不足也就不值一提了。 特性： 高级代码编辑器 附加应用集成 多种预制主题 拖放界面 电商功能支持 预览工具 下载链接： https://novibuilder.com/ 2. ONE Subscription ONE Subscription 是一款很有用的 Web 开发工具包，包含了众多高质量的数字产品。它提供了大批高品质的部件，可以打造出功能完善的博客、在线商店、登录页面等各种网站。总的来说，它能为你提供数以千计的主题和模板、多种插件和图形元素、附加服务以及其他许多好处。 特性： 对所有部件提供专业支持 定期更新 安全性（如果你订阅后尚未从数据库中下载任何内容，则可以在订阅开始后的 14 天内轻松取消订阅） 无使用限制的年度许可证 很多有用的服务（例如模板定制或安装） 下载链接：