快捷搜索:
来自 新京葡娱乐场网址 2019-08-18 11:58 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

我的前端学习历程,学习历程

我的前端学习历程

2015/05/19 · CSS, HTML5, JavaScript · 5 评论 · 前端

原文出处: 焰尾迭   

很难想象一个半年前还在做后台开发,对前端知之甚少的我,现在也可以从事前端开发了。这半年的学习过程将会是我人生一笔宝贵的财富,这让我想到一句话“在成长的道路上,我们不要给自己设定界限,只要拥有成长的力量,就能不断超越自己”。 下面以我自己的经历讲讲前端的学习过程。

我的前端学习历程,学习历程

很难想象一个半年前还在做后台开发,对前端知之甚少的我,现在也可以从事前端开发了。这半年的学习过程将会是我人生一笔宝贵的财富,这让我想到一句话“在成长的道路上,我们不要给自己设定界限,只要拥有成长的力量,就能不断超越自己”。 下面以我自己的经历讲讲前端的学习过程。

Jquery基础知识准备

学习前端需要掌握的基础知识有jquery,css。做移动端开发最好掌握CSS3,CSS3的许多新特性会让布局简单很多。Jquery可以不用每个知识点都很熟练,但是最好都了解,用的时候知道有这个东西再进行细致学习会更牢固。必须掌握的几个点

1.选择器

基础的id样式选择器是必须掌握的,这里不多说。

2.事件绑定

不推荐的写法

JavaScript

<button id="foo" onclick="dosomething()">Bar</button>

1
<button id="foo" onclick="dosomething()">Bar</button>

新京葡娱乐场网址 ,缺点:这样做的结果就是html前端和js前端的工作混在了一起,原则上HTML代码只能体现网页的结构

建议写法

JavaScript

$(“#foo”).click(function(){});

1
$(“#foo”).click(function(){});

优点:jQuery是追加绑定的,绑多少执行多少,还解决了IE的不兼容问题。

Jquery中的事件绑定方式有很多 click,live,bind,one,on…,它们之间的区别这里就不多讲了。on方法是官方推荐的绑定事件的一个方法,从性能和试用场景上来说都是很好的。

JavaScript

$(“#foo”).on(“click”,function(){});

1
$(“#foo”).on(“click”,function(){});

高级用法,场景(在多行的表格表格中,动态添加了一行,如果想给新增的这行绑定点击事件)

JavaScript

$(“#table”).on(“click”,”.row”,function(){});

1
$(“#table”).on(“click”,”.row”,function(){});

这里在页面初始化的时候可以给表格里面带row样式的行绑定click事件,就算row是新增的,也会添加上该click事件,即事件委托。用C#来解释:发布者会把click事件发布给所有继承row这个类的订阅者身上,即常说的发布-订阅者模式。

3.函数闭包

推荐使用闭包的方式封装函数,避免函数覆盖。

JavaScript

var PublicHandle=(function(){ /*私有变量和函数*/ var _privateVar; var _getName=function(){   }; /*对外提供的接口*/ return{ verifyName:function(){    },   getName:function(){   }   } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var PublicHandle=(function(){
    /*私有变量和函数*/
   var _privateVar;
   var _getName=function(){
 
  };
   /*对外提供的接口*/
   return{
       verifyName:function(){
      },
      getName:function(){
      }
  }
});

掌握的jquery的几个基础知识,结合前端开任务对js会越来越熟练。

Jquery基础知识准备

学习前端需要掌握的基础知识有jquery,css。做移动端开发最好掌握CSS3,CSS3的许多新特性会让布局简单很多。Jquery可以不用每个知识点都很熟练,但是最好都了解,用的时候知道有这个东西再进行细致学习会更牢固。必须掌握的几个点

1.选择器

基础的id样式选择器是必须掌握的,这里不多说。

2.事件绑定

不推荐的写法

1 <button id="foo" onclick="dosomething()">Bar</button>

缺点:这样做的结果就是html前端和js前端的工作混在了一起,原则上HTML代码只能体现网页的结构

建议写法

1 $(“#foo”).click(function(){});

优点:jQuery是追加绑定的,绑多少执行多少,还解决了IE的不兼容问题。

Jquery中的事件绑定方式有很多 click,live,bind,one,on…,它们之间的区别这里就不多讲了。on方法是官方推荐的绑定事件的一个方法,从性能和试用场景上来说都是很好的。

1 $(“#foo”).on(“click”,function(){});

高级用法,场景(在多行的表格表格中,动态添加了一行,如果想给新增的这行绑定点击事件)

1 $(“#table”).on(“click”,”.row”,function(){});

这里在页面初始化的时候可以给表格里面带row样式的行绑定click事件,就算row是新增的,也会添加上该click事件,即事件委托。用C#来解释:发布者会把click事件发布给所有继承row这个类的订阅者身上,即常说的发布-订阅者模式。

3.函数闭包

推荐使用闭包的方式封装函数,避免函数覆盖。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var PublicHandle=(function(){     /*私有变量和函数*/    var _privateVar;    var _getName=function(){     };    /*对外提供的接口*/    return{        verifyName:function(){       },       getName:function(){       }   } });

掌握的jquery的几个基础知识,结合前端开任务对js会越来越熟练。

CSS学习与技巧

CSS的学习主要重点是多看,可以学习别人现成的例子。看看是怎么布局的,CSS怎么写是规范的,网上有很多现成的资源如?W3CSchool???前端网。移动端开发框架如?Agile??Ratchet??Junior。

框架会提供许多功能都是可以拿来直接使用的,弄懂其中一个框架和CSS和JS会让自己的前端学习更加迅速,当然这是需要花时间的。

CSS学习与技巧

CSS的学习主要重点是多看,可以学习别人现成的例子。看看是怎么布局的,CSS怎么写是规范的,网上有很多现成的资源如?W3CSchool???前端网。移动端开发框架如?Agile??Ratchet??Junior。

框架会提供许多功能都是可以拿来直接使用的,弄懂其中一个框架和CSS和JS会让自己的前端学习更加迅速,当然这是需要花时间的。

代码优化

掌握了基本知识,就得向更高层级代码和性能优化方面前进了,网上有很多前端优化的指导意见,以下意见引用了博客毫秒必争,前端网页性能最佳实践。最佳实践我引用的来自yahoo前端性能团队总结的35条黄金定律。原文猛击这里。下面引用的是我了解的一些原则。

网页内容

  • 减少http请求次数
  • 避免页面跳转
  • 减少DOM元素数量
  • 避免404

服务器

  • Gzip压缩传输文件
  • 避免空的图片src

Cookie

  • 减少Cookie大小

CSS

  • 将样式表置顶
  • 避免CSS表达式

Javascript

  • 将脚本置底
  • 使用外部Javascirpt和CSS文件
  • 精简Javascript和CSS
  • 去除重复脚本
  • 减少DOM访问

代码优化

掌握了基本知识,就得向更高层级代码和性能优化方面前进了,网上有很多前端优化的指导意见,以下意见引用了博客毫秒必争,前端网页性能最佳实践。最佳实践我引用的来自yahoo前端性能团队总结的35条黄金定律。原文猛击这里。下面引用的是我了解的一些原则。

网页内容

  • 减少http请求次数
  • 避免页面跳转
  • 减少DOM元素数量
  • 避免404

服务器

  • Gzip压缩传输文件
  • 避免空的图片src

Cookie

  • 减少Cookie大小

CSS

  • 将样式表置顶
  • 避免CSS表达式

Javascript

  • 将脚本置底
  • 使用外部Javascirpt和CSS文件
  • 精简Javascript和CSS
  • 去除重复脚本
  • 减少DOM访问

网页内容

网页内容

减少http请求次数

80%的响应时间花在下载网页内容(images, stylesheets, javascripts, scripts, flash等)。减少请求次数是缩短响应时间的关键!可以通过简化页面设计来减少请求次数,但页面内容较多可以采用以下技巧。        

1.合并文件: 现在有很多现成的工具可以帮你将多个脚本文件文件合并成一个文件,将多个样式表文件合并成一个文件,以此来减少文件的下载次数。

2.CSS Sprites: 就是把多个图片拼成一副图片,然后通过CSS来控制在什么地方具体显示这整张图片的什么位置。给大家看个熟悉的Sprites实例。

新京葡娱乐场网址 1

豆瓣把他的图标集中在一起,然后我们看他如何控制只显示第一个图标的

CSS

.app-icon-read { background-position: 0 0; } .app-icon { background: url("/pics/app/app_icons_50_5.jpg") no-repeat scroll 0 0 transparent; border-radius: 10px 10px 10px 10px; box-shadow: 1px 1px 2px #999999; display: inline-block; height: 50px; width: 50px; }

1
2
3
4
5
6
7
8
9
10
11
.app-icon-read {
    background-position: 0 0;
}
.app-icon {
    background: url("/pics/app/app_icons_50_5.jpg") no-repeat scroll 0 0 transparent;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 1px 1px 2px #999999;
    display: inline-block;
    height: 50px;
    width: 50px;
}

3.BASE64编码图标: 通过编码的字符串将图片内嵌到网页文本中。例如下面的inline image的显示效果为一个勾选的checkbox。

CSS

.sample-inline-png { padding-left: 20px; background: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/// l2Z/dAAAAM0lEQVR4nGP4/5/h/1 G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top; }

1
2
3
4
.sample-inline-png {
    padding-left: 20px;
    background: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/// l2Z/dAAAAM0lEQVR4nGP4/5/h/1 G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
}

可以看到其中有很长的一串,那个就是base64编码的图片,网上有在线生成的工具。图片在线转换Base64

减少http请求次数

80%的响应时间花在下载网页内容(images, stylesheets, javascripts, scripts, flash等)。减少请求次数是缩短响应时间的关键!可以通过简化页面设计来减少请求次数,但页面内容较多可以采用以下技巧。        

1.合并文件: 现在有很多现成的工具可以帮你将多个脚本文件文件合并成一个文件,将多个样式表文件合并成一个文件,以此来减少文件的下载次数。

2.CSS Sprites: 就是把多个图片拼成一副图片,然后通过CSS来控制在什么地方具体显示这整张图片的什么位置。给大家看个熟悉的Sprites实例。

新京葡娱乐场网址 2

豆瓣把他的图标集中在一起,然后我们看他如何控制只显示第一个图标的

1 2 3 4 5 6 7 8 9 10 11 .app-icon-read {     background-position: 0 0; } .app-icon {     background: url("/pics/app/app_icons_50_5.jpg") no-repeat scroll 0 0 transparent;     border-radius: 10px 10px 10px 10px;     box-shadow: 1px 1px 2px #999999;     display: inline-block;     height: 50px;     width: 50px; }

3.BASE64编码图标: 通过编码的字符串将图片内嵌到网页文本中。例如下面的inline image的显示效果为一个勾选的checkbox。

1 2 3 4 .sample-inline-png {     padding-left: 20px;     background: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/// l2Z/dAAAAM0lEQVR4nGP4/5/h/1 G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top; }

可以看到其中有很长的一串,那个就是base64编码的图片,网上有在线生成的工具。图片在线转换Base64

减少DOM元素数量

网页中元素过多对网页的加载和脚本的执行都是沉重的负担,500个元素和5000个元素在加载速度上会有很大差别。想知道你的网页中有多少元素,通过在浏览器中的一条简单命令就可以算出,

JavaScript

document.getElementsByTagName('*').length

1
document.getElementsByTagName('*').length

减少DOM元素数量

网页中元素过多对网页的加载和脚本的执行都是沉重的负担,500个元素和5000个元素在加载速度上会有很大差别。想知道你的网页中有多少元素,通过在浏览器中的一条简单命令就可以算出,

1 document.getElementsByTagName('*').length

避免404

404我们都不陌生,代表服务器没有找到资源,我们要特别要注意404的情况不要在我们提供的网页资源上,客户端发送一个请求但是服务器却返回一个无用的结果,时间浪费掉了。更糟糕的是我们网页中需要加载一个外部脚本,结果返回一个404,不仅阻塞了其他脚本下载,下载回来的内容(404)客户端还会将其当成Javascript去解析。

避免404

404我们都不陌生,代表服务器没有找到资源,我们要特别要注意404的情况不要在我们提供的网页资源上,客户端发送一个请求但是服务器却返回一个无用的结果,时间浪费掉了。更糟糕的是我们网页中需要加载一个外部脚本,结果返回一个404,不仅阻塞了其他脚本下载,下载回来的内容(404)客户端还会将其当成Javascript去解析。

服务器

服务器

Gzip压缩传输文件

Gzip通常可以减少70%网页内容的大小,包括脚本、样式表、图片等文件。Gzip比deflate更高效,主流服务器都有相应的压缩支持模块。IIS中内建了静态压缩和动态压缩模块,如何配制可以参考Enable HTTP Compression of Static Content (IIS 7)和Enable HTTP Compression of Dynamic Content (IIS 7)。

值得注意的是pdf文件可以从需要被压缩的类型中剔除,因为pdf文件本身已经压缩,gzip对其效果不大,而且会浪费CPU。

Gzip压缩传输文件

Gzip通常可以减少70%网页内容的大小,包括脚本、样式表、图片等文件。Gzip比deflate更高效,主流服务器都有相应的压缩支持模块。IIS中内建了静态压缩和动态压缩模块,如何配制可以参考Enable HTTP Compression of Static Content (IIS 7)和Enable HTTP Compression of Dynamic Content (IIS 7)。

值得注意的是pdf文件可以从需要被压缩的类型中剔除,因为pdf文件本身已经压缩,gzip对其效果不大,而且会浪费CPU。

避免空的图片src

空的图片src仍然会使浏览器发送请求到服务器,这样完全是浪费时间,而且浪费服务器的资源。尤其是你的网站每天被很多人访问的时候,这种空请求造成的伤害不容忽略。浏览器如此实现也是根据RFC 3986 –?Uniform Resource Identifiers标准,空的src被定义为当前页面。所以注意我们的网页中是否存在这样的代码

JavaScript

straight HTML < img src=”"> JavaScript var img = new Image(); img.src = “”;

1
2
3
4
5
straight HTML
< img src=”">
JavaScript
var img = new Image();
img.src = “”;

避免空的图片src

空的图片src仍然会使浏览器发送请求到服务器,这样完全是浪费时间,而且浪费服务器的资源。尤其是你的网站每天被很多人访问的时候,这种空请求造成的伤害不容忽略。浏览器如此实现也是根据RFC 3986 –?Uniform Resource Identifiers标准,空的src被定义为当前页面。所以注意我们的网页中是否存在这样的代码

1 2 3 4 5 straight HTML < img src=”"> JavaScript var img = new Image(); img.src = “”;

Cookie

Cookie

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:我的前端学习历程,学习历程

关键词: