前端开发

Web开发是比较费神的，需要掌握很多很多的东西，特别是从事前端开发的朋友，需要通十行才行。今天，本文向初学者介绍一些Web开发中的基本概念和用到的技术，从A到Z总共26项，每项对应一个概念或者技术。 A — AJAX AJAX 全称为“ Asynchronous JavaScript and XML ”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。根据Ajax提出者Jesse James Garrett建议，AJAX： 使用XHTML+CSS来表示信息； 使用JavaScript操作DOM（Document Object Model）进行动态显示及交互； 使用XML和XSLT进行数据交换及相关操作； 使用XMLHttpRequest对象与Web服务器进行异步数据交换； 使用JavaScript将所有的东西绑定在一起。 类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生／合成”式（derivative/composite）的技术正在出现，如AFLAX。 B — Browser **网页浏览器 **是个显示网页服务器或文件系统内的文件，并让用户与此些文件交互的一种软件。它用来显示在万维网或局域网等内的文字、图像及其他信息。这些文字或图像，可以是连接其他网址的超连结

利用 CSS 框架，可以简化你的工作，提高工作效率。CSS 框架是一系列 CSS 文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则等代码块。下面给你推荐了27款优秀的CSS框架，你可以选用。 1. 960gs 960 像素的页面宽度似乎成为了一种设计标准，在当前各种分辨率下，能够很好地展现网页内容。提供较为常用的尺寸来简化网页设计过程，使工作简单高效。 2. YUI 2: Grids CSS 芒果曾经介绍过由雅虎开发小组推出的 YUI，而这个 YUI Grids CSS 正是其中的一部分。作为最著名的 CSS 框架之一，YUI Grids CSS 提供了四种预设页面宽度，六种预设模板。其中的负 Margin 技术，使用度量单位 em，清除布局浮动等技术非常值得学习和借鉴。 3. Blueprint Blueprint 是一款成熟的 CSS 框架，它将布局 (layout)、排版 (typography)、组件 (widget)、重置 (reset)、打印 (print) 等分放到不同的 CSS 文件中。在网页设计时就减少了引入的代码，提高了页面加载效率。 4. BlueTrip BlueTrip 是一个集成了BluePrint & Tripoli 框架的做好的部分；Hartija 的打印样式； 960.gs的简洁；Elements 图标的一个css框架

前言 2020年即将到来,在众多前端的招聘要求里, webpack 、 工程化 这些字眼频率越来越高。日常开发者中，我们常常在用诸如 vue-cli 、 create-react-app 的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的offer(还房贷)，那么你必须去深刻的认识下我们经常打交道的 webpack 本文共分为三个部分带你快速掌握webpack，阅读本篇大概需要60分钟。如有不足之处，恳请斧正 本文编写基于 webpack 4.41.2 版本 node: 10.15.3 版本 1 入门(一起来用这些小例子让你熟悉webpack的配置) 1.1 初始化项目 新建一个目录，初始化npm npm init webpack是运行在node环境中的,我们需要安装以下两个npm包 npm i -D webpack webpack-cli npm i -D 为npm install --save-dev的缩写 npm i -S 为npm install --save的缩写 新建一个文件夹 src ,然后新建一个文件 main.js ,写一点代码测试一下 console . log ( 'test 1...' ) 配置package.json命令 "scripts" : { "build" : "webpack src/main.js" } , 执行

1. 什么是HTML，CSS 是做网站的编程语言 2. 一个网站是由N多个网页组成的，每个网页就是一个.html文件 3. VS Code编辑器基本使用 ctrl+s：保存 shift+end：从头选中一行 shift+home：从尾部选中一行 shift+alt+⬇：快速复制一行 alt+⬆或⬇：快速移动一行 shift+tab：向前缩进 alt+鼠标左键：多光标 ctrl+d：选择同样元素的下一个 4. 网站开发 UI设计师：设计稿 web前端工程师：设计稿–>代码，数据里的数据–>显示到页面，HTML(结构)+CSS(样式)+JavaScript(行为) web后端工程师 5. HTML基础结构与属性 超文本标记语言(HyperText Markup Language) 超文本：文本内容+非文本内容（图片、视频、音频等） 标记（标签）：<单词> 单标签： 双标签： 创建标签的快捷键：tab+单词 标签可以嵌套和上下排列的 标签的属性：修饰标签，设置当前标签的一些功能 <标签 属性=“值” 属性2=“值2”> 语言：编程语言 来源： CSDN 作者： 玊玉Daisy 链接： https://blog.csdn.net/weixin_44983311/article/details/103925383

阅读目录 简而言之 组成部分 没有什么是一个栗子不能解决的 简而言之 之前对 MVVM 模式一直只是模模糊糊的认识，正所谓没有实践就没有发言权，通过这两年对 Vue 框架的深入学习和项目实践，终于 可以装B了 有了拨开云雾见月明的感觉。 Model–View–ViewModel(MVVM) 是一个软件架构设计模式，由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由 John Gossman（同样也是 WPF 和 Silverlight 的架构师）于2005年在他的博客上发表。 MVVM 源自于经典的 Model–View–Controller（MVC）模式（期间还演化出了 Model-View-Presenter（MVP）模式，可忽略不计）。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。 MVVM 的核心是 ViewModel 层 ，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。如下图所示： MVVM模式 MVVM 已经相当成熟了，主要运用但不仅仅在网络应用程序开发中

作者：猿码道 链接：https://www.jianshu.com/p/c81008b68350 1. 前言 　　随着互联网的高速发展，前端页面的展示、交互体验越来越灵活、炫丽，响应体验也要求越来越高，后端服务的高并发、高可用、高性能、高扩展等特性的要求也愈加苛刻，从而导致前后端研发各自专注于自己擅长的领域深耕细作。 　　然而带来的另一个问题：前后端的对接界面双方却关注甚少，没有任何接口约定规范情况下各自撸起袖子就是干，导致我们在产品项目开发过程中，前后端的接口联调对接 工作量占比在30%-50%左右，甚至会更高。往往前后端接口联调对接及系统间的联调对接都是整个产品项目研发的软肋。 　　本文的主要初衷就是规范约定先行，尽量避免沟通联调产生的不必要的问题，让大家身心愉快地专注于各自擅长的领域。 2. 为何要分离 　　参考两篇文章《Web 研发模式的演变》、《Web应用的组件化开发》, 目前现有前后端开发模式：“后端为主的MVC时代”，如下图所示： 　　代码可维护性得到明显好转，MVC 是个非常好的协作模式，从架构层面让开发者懂得什么代码应该写在什么地方。为了让 View 层更简单干脆，还可以选择 Velocity、Freemaker 等模板，使得模板里写不了 Java 代码。看起来是功能变弱了，但正是这种限制使得前后端分工更清晰。然而依旧并不是那么清晰，这个阶段的典型问题是： 　　

JavaScript概述 JavaScript 的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript 微软随后模仿在其IE3.0的产品中搭载了一个JavaScript的克隆版叫Jscript. 为了统一三家,ECMA(欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。EcmaScript是规范. View Code ECMAScript 尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的： 核心（ECMAScript） 文档对象模型（DOM）

几个web UI框架 1.Aliceui Aliceui是支付宝的样式解决方案，是一套精选的基于 spm 生态圈的样式模块集合，是 Arale 的子集，也是一套模块化的样式命名和组织规范，是写 CSS 的更好方式。 gitHub地址： https://github.com/aliceui/aliceui.github.io 2.Amazeui Amaze UI 是一个轻量级、 Mobile first 的前端框架, 基于开源社区流行前端框架编写的。 官网地址： http://amazeui.org/ 3.sui SUI是一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。 通过SUI，可以非常方便的设计和实现精美的页面。 官网地址： http://sui.taobao.org/ 同时sui还有移动端版本msui，msui是阿里巴巴共享业务事业部UED团队的作品。目的是为了手机H5页面提供一个常用的组件库，减少重复工作。 地址： http://m.sui.taobao.org/ 4.FrozeUI Frozen UI是一个开源的简单易用，轻量快捷的移动端UI框架。基于手Q样式规范，选取最常用的组件，做成手Q公用离线包减少请求，升级方式友好，文档完善，目前全面应用在腾讯手Q增值业务中。 官网地址： http://frozenui.github.io/ 5.uiKit

先说项目开发过程中团队人员的分工协作。 　　 一、人员安排 　　毕业至今的大部分项目都是独立完成，虽然也有和其他同事协作的时候，但自认为对团队协作的了解和认知都还有所欠缺。很清楚团队协作的重要性，但尚未有很好的机会在相对成熟的团队中锻炼实践。 　　先抛开 软件开发 团队中人员的具体安排不讲，单纯的看软件开发工作的分工。在上面设想的开发架构中，宏观上可将一个项目划分为前端、程序、 数据库 三个模块。由此可推导出团队中需要的成员：美工、程序员和项目经理。 　　认为理想的软件开发团队由四个专业技能过硬的成员组成：一个美工，熟悉UI的设计并具备将效果图转换成前端页面的能力，也就是得同时精通PhotoShop、HTML、CSS、jQuery等前端知识；一个程序员，熟练掌握代码的编写重构；一个项目经理，具备 需求分析 的能力、数据库设计维护的能力、架构设计的能力、程序编写的能力、前端样式脚本编写的能力，最重要的是对业务流程有精准的把握；一个部门经理，和前三位不一样，部门经理只具备领导能力即可，他是兼职，不需要把全部时间投入到团队中。 　　大部分中小型项目可以由这样的四人团队完成，可如果项目较大，已经大大超出了四个人可完成的工作量，可以再加一个前端开发人员。也就是说两个前端开发者，一个负责UI设计，做出完整的效果图，这个人的设计功底应该比较强；一个负责将效果图转换成页面，并完成样式、脚本等的编写

本文摘自： http://www.iteye.com/news/27580 Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示： Zen coding下的编码演示 去年年底，该插件已经改名为Emmet。 但Emmet不只改名，还带来了一些新特性。本文就来直观地演示给你。 一、快速编写HTML代码 1. 初始化 HTML文档需要包含一些固定的标签，比如<html>、<head>、<body>等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键： html:5 或!：用于HTML5文档类型 html:xt：用于XHTML过渡文档类型 html:4s：用于HTML4严格文档类型 2. 轻松添加类、id、文本和属性 连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo： 连续输入类和id，比如p.bar#foo，会自动生成： Html代码 < p class= "bar" id= "foo" > </ p > 下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#]，就可以自动生成如下代码： Html代码 < h1 >foo </ h1 > < a href