前端开发 | 易学教程

HTML与CSS学习基础总结

阅读更多关于 HTML与CSS学习基础总结

HTML与CSS学习基础总结先了解学习的知识点有哪些： HTML HTML指的是超文本标记语言（Hyper Text Markip Language），它不是一种编程语言而是一种标记语言，通过使用标签来描述网页。 CSS CSS （Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。 JS JS 全称（javascript）中文是java脚本的意思。它的由来（在互联网刚兴起的时候，网络速度比较慢，而体验又是放在服务器端的，所以用户体验度非常差，为了了解这一难题，网景公司发明了livescript liverscript主要把表单验证功能从后台提升到了前端，因为不依赖网络，所以用户体验比较好。但是由于知名度比较差，知道的人很少，后来由于sum公司的java语言一飞冲天，爆红编程世界，为了跟风，博取知名度，网景公司把livescript 改成javascript. 后来微软眼红网景公司的成就，就发明了jscript。但是正因为此，导致了js的标准不同，所以给个大浏览器厂家带来了很大的麻烦。为了有一个统一的标准，js被提交到一个ecma组织，也正因为此，后来的js都是采用ecma标准

Vue.js 和 MVVM 小细节

阅读更多关于 Vue.js 和 MVVM 小细节

Vue.js 和 MVVM 小细节 MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。 Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。 1、为什么会出现 MVVM 呢？我接触MVVM 是在2015年，可以说2015年是MVVM 最火热的一年，而在这之前，我所知道的就是MVC, MVC 大约是在5年前，也就是2011年的时候接触的，那时候刚学编程语言，学的Java，而Java 中经典的 SSH 框架就用来构建一个标准的MVC 框架。说实话，MVC 用了这么多年，但始终没有很深刻的理解，只停留在用的层面，一直到接触 Vue.js 之后，研究了MVVM 架构思想，然后再回头看 MVC ，才有一种豁然开朗的感觉~ MVC 即 Model-View-Controller 的缩写，就是模型-视图-控制器 , 也就是说一个标准的Web

sublime 插件：Emmet

阅读更多关于 sublime 插件：Emmet

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= "#" > </ a > 3. 嵌套

如何选择JavaScript构建工具之Babel、Browserify、Webpack、Grunt以及Gulp

阅读更多关于如何选择JavaScript构建工具之Babel、Browserify、Webpack、Grunt以及Gulp

当我们开始一个新的 JavaScript 项目时，我们需要考虑的第一件事就是搭建一个前端编译环境。但是在面对众多的 JavaScript 构建工具时，我们却无所适从，不知道究竟哪一个才是最适合我们的。想象一下，如果有一个很简单的判断标准，让你知道如何针对不同的项目，选取不同的前端构建工具，那是不是很美好呢？事实上，在使用自动构建系统，积累了5年的项目开发经验之后，我总结出来如下内容。相信我，它是可以让你明白不同构建工具的使用场景的。开门见山判断你的项目需要使用哪种构建工具是很容易的：如果是小项目的话，基于 ES6 编译器即可如果是单页应用的话，还需要一个模块打包器如果你的项目，部署在了生产环境之中，除了上述之外，还需要一个能够自动执行的任务运行器下面是我推荐的一些可以满足你上述需求的前端构建工具：使用 Babel 可以编译适配 ES6 代码使用 Webpack 能够打包 JavaScript 文件以及其相关的依赖使用 Gulp 能够自动化地将文件批量重命名，从而刷新静态资源文件的缓存那么，问题来了，前端构建工具那么多，为什么我偏偏推荐上述的这些呢？追根溯源我对很多流行的 JavaScript 构建工具进行了分析，并分别找出了它们的优点与缺点。既然编译器是无论如何都需要的，那么我们就从编译器开始说起吧。编译器 ES5 版的 JavaScript

前端代码规范

阅读更多关于前端代码规范

编写可维护代码，就需要有一定的代码规范。基本命名规范变量名应为名词,eg： car,person 函数名以动词开始。 getName(), 返回类型是布尔类型，一般以is开头，eg: isEnable(); 变量和函数命名，不要担心长度，合乎逻辑重要。变量命名 -- 类型透明通过初始化指定变量类型 var found = false; // 布尔类型 var count = -1; // 数字类型 var name = “”; // 字符串 var person = null; // 对象匈牙利标记法变量名前面加上一个或者多个字符来表示数据类型。 "o" =>变量 var oPerson; "s" => 字符串 var iCount “i” => 整数 var sName; “f” => 浮点数 var fMath; “b” => 布尔值 var bFound; 全局命名空间创建唯一的全局的对象，然后再把需要的变量和函数添加到对象上。避免与其他功能冲突。产生对应的作用域 // 声明全局对象 var Wrox = {}; // 为Wrox 创建 Professional JavaScript 命名空间 Wrox.ProJS = {}; // 分别在添加各种事件 Wrox.ProJS.EventUtil = {}; Wrox.ProJS.CookieUtil = {}

成为web前端程序员需要学习哪些知识

阅读更多关于成为web前端程序员需要学习哪些知识

互联网的高速发展促使互联网企业对于网站等页面的用户体验要求也越来越高，导致网站开发难度越来越大，但同时，伴随着的是开发人员的是高福利高工资，让很多人想加入到这个行业中，那么怎样才能成为一名前端开发人员呢?应该学习哪些知识呢首先，学习之前要先了解前端是做什么的，前端开发，简单来说，就是把平面效果图转换成网页，把静态转换成动态。它的工作包括了:切图、写样式、做鼠标效果和图片切换效果等。而优秀的前端开发可以保障实现这些效果的同时，即不能影响网站的打开速度、浏览器兼容性还有搜索引擎的收录，还可以让用户体验更加舒适，使网站在访问中显得更精细、更用心。访客使用起来更简便。前端是WEB的未来，不仅在电脑端，而且在移动端也一定会得到广泛的应用。WEB技术发展越来越迅速，前端的到来更是把WEB技术推向了巅峰，目前前端技术已经日趋成熟，前端的未来十分光明，值得我们去学习。然后你要有一个非常清晰的学习大纲，切记学习任何东西都要系统，不可胡乱的瞎学浪费时间。成为web前端程序员需要学习哪些知识，下面是给大家提供的一个学习大纲：基础：HTML+CSS网站页面搭建，CS核心和PC端页面开发，HTML5移动端页面开发。核心：web前端核心技术JavaScript，ecmasript，dom，ajax，json，正则，作用域，运动框架，核心算法，高级函数，插件封装，jQuery等。高级：html5

web前端开发可以从事哪些工作

阅读更多关于 web前端开发可以从事哪些工作

随着互联网进几年来的高速发展，web前端这一门技术和对应的行业岗位就应运而生。Web前端主要就是网站的页面展现以及动态交互部分，比如大家逛淘宝所看到的页面就是web前端所做的。 Web前端是当下互联网时代下最流行的技术之一，在大部分的软件产品的研发中，Web前端扮演着非常重要的角色。几乎所有的用户终端产品与视觉效果和交互有关的部分，都属于前端开发工程师所要涉及的专业领域。从具体的角度上看，Web前端是利用HTML、CSS、JavaScript等专业的技能和相关的工具，将产品的UI设计稿实现成网站产品，涵盖用户PC端、移动端等网页，进而去处理视觉和交互的相关问题。在掌握基础模块的基础上，Web前端工程师还必须进一步将技能层次化、系统化，从而能够视线页面架构、移动页面开发等等任务。不仅新人小白需要努力，就连已经入职0~3年的前端开发工程师，也需要不断学习了解前端高阶知识和技能，不断修炼自身武功。在成为一个优秀的前端工程师的道路上，充满了汗水和辛劳，现在的前端工程师做到一定阶段不可避免会接触到很多比切页面、实现视觉要求、实现交互等更深入的问题，比如前端自动化、图像编程、性能优化等等，再往后推一点就是PHP/JSP/ASP/nodeJs，过去后端模板一般属于后端的范畴，现在随着前端架构的演进，可能会让你去写后端模板的代码，需要用到后端语言（PHP/Java/C#等），这就是所谓大前端

【前端开发】JSON.parse 解析json字符串时，遇换行符报错

阅读更多关于【前端开发】JSON.parse 解析json字符串时，遇换行符报错

今天遇到后台返回的json字符串转对象时报错了，发现有个textarea提交的字段里有换行符。错误原因：JSON.parse转json字符串时遇到一些特殊字符需要先转义，如图所示可以用str.replace(/\n/g,"\\\\n")转义,'\\'转成单个'\','\\n'转成'\n',最后转成'\\n'这样就可以用parse转成对象时变为'\n'，取出的字符串设置到html文本中\n被解析为换行。测试: 1.var kks="{"id":2,"name":null}"的reviver遍历前面两个是json字符串中的键值，空值暂时不知道是什么(原型Object？)。 2.json字符串有值为undefined解析会报错 2.JSON.stringify会忽略值为undefined的对象语法规定：值undefined不包含在可以解析的范围内，所以会报错，哈哈。错误原因：JSON.parse转json字符串时遇到一些特殊字符需要先转义，如图所示可以用str.replace(/\n/g,"\\\\n")转义,'\\'转成单个'\','\\n'转成'\n',最后转成'\\n'这样就可以用parse转成对象时变为'\n'，取出的字符串设置到html文本中\n被解析为换行。测试: 1.var kks="{"id":2,"name":null}

跳槽面试技巧记录

阅读更多关于跳槽面试技巧记录

　　最近观看了《前端跳槽面试必备技巧》，视频出举出了很多实用技巧，特在此记录。　　视频开头给出了面试的定义：面试是测查和评价人员能力素质的一种考试活动。具体地说，面试是一种经过组织者精心设计，在特定场景下，以考官对考生的面对面交谈与观察为主要手段，由表及里测评考生的知识、能力、经验等有关素质的一种考试活动。一、面试准备　　在面试前，对公司的情况、技术栈、企业文化、要求的知识点等都得做足够的了解和准备。 1）职位描述（JD）分析　　对公司的分析，快速判断这个岗位是否与自己匹配，以及自己是否能Hold住该岗位。通过这样的分析能快速决定是否要去面这个岗位，再有针对性的做技术准备，包括知识内容、准备程度等。　　以京东金融的前端招聘信息为例，通过职位描述和任职要求（如下所列）来分析要求的知识点和技术栈。职位描述： 1、负责京东金融企业业务PC端和移动端相关的前端开发工作； 2、负责企业金融App H5开发，完成前端界面与后端交互开发； 3、负责与后端工程师沟通协作、调试数据接口； 4、负责京东金融前端组件库的建立； 5、负责对现有系统的优化与重构。任职要求： 1、3年以上相关工作经验，精通HTML5特性，了解HTML5最新规范，能够熟练运用HTML5特性构建移动端的WebApp； 2、熟悉当前流行的JavaScript类库，熟悉JavaScript面向对象编程方法； 3

分享一个博客园皮肤制作脚手架

阅读更多关于分享一个博客园皮肤制作脚手架

前言最近本着新年新气象的想法，想换套新的博客园皮肤。之前自己做了一套制作皮肤的解决方案，这是当时分享皮肤以及解决方案的博客：分享一款博客园皮肤及其解决方案。不过在制作新的皮肤过程中，使用这个解决方案时还是遇到了很多问题。而为了更方便地制作新皮肤，就升级了原先的解决方案，搭建了这套博客园皮肤制作脚手架。项目地址已从github换到了码云： https://gitee.com/vvjiang/cnblogs-skin 。具体的使用方式项目文档有介绍，这里就不赘述了，接下来主要是讲脚手架解决了什么问题以及解决方法。原先的方案以及遇到的问题原先的解决方案其实很简单，将css写在不同的less文件中，然后用 webpack-dev-server 保证本地开发。在需要build最终的css时，通过 mini-css-extract-plugin 提取样式到最终的css文件中。自定义js部分，就是一个单独的文件，在开发环境下通过引用这个文件来处理，构建时不需要这个文件，直接复制粘贴到博客园后台即可。现在说一说原有方案遇到的一些问题：没有压缩css和js。早期时还好，但是到了后面功能变多，js和css文件体积在逐渐膨胀。博客园的脚本功能，实际上是通过script元素包裹的html元素，而且有的功能需要自己的html元素

订阅前端开发