Web前端
刘元涛
活着只为改变世界
展开
-
React 入门实例教程
文章来源:阮一峰的博客http://www.ruanyifeng.com/blog/2015/03/react.html现在最热门的前端框架,毫无疑问是 React 。上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑。React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaS转载 2015-12-13 22:12:53 · 1167 阅读 · 0 评论 -
CSS3:background-size背景图片尺寸属性
background-size 可以设置背景图片的大小,数值包括 长度length和百分比percentage。 并且会根据背景原点位置 background-origin 设置其图片覆盖的范围。那么下面我们一起来了解这个background-size属性吧。background-size语法w3c对background-size的语法规定如下:属性名:back转载 2014-10-30 20:44:08 · 26147 阅读 · 0 评论 -
CSS初学者到高手成长之路
CSS其实很简单,只要把所有“标签”都理解为“方形框”,写CSS代码就相当于用“方形框”拼图形。什么是“块”标签,什么是“内联”标签。“块”标签,可以理解为,和div类似的标签,定义width height 有效果的标签。“内联”标签,可以理解为,和span类似的标签,定义width height 没有效果的标签。(“块”标签一般用于网页布局,“内联”标签用于修饰文原创 2014-10-31 12:51:57 · 624 阅读 · 1 评论 -
前端代码规范 及 最佳实践
概述本文档包含了Isobar公司的创意技术部(前端工程)开发web应用的规范。现在我们把它开放给任何希望了解我们迭代过程最佳实践的人。编写本文档的主要驱动力是两方面: 1) 代码一致性 以及 2) 最佳实践。 通过保持代码风格和传统的一致性,我们可以减少遗留系统维护的负担,并降低未来系统崩溃的风险。而通过遵照最佳实践,我们能确保优化的页面加载、性能以及可维护的代码。总体指导转载 2014-10-31 12:47:35 · 2309 阅读 · 0 评论 -
用Javascript获取页面元素的位置
1.网页的大小和浏览器窗口的大小一张网页的全部面积,就是它的大小。通常情况下,网页的大小由内容和CSS样式表决定。浏览器窗口的大小,则是指在浏览器窗口中看到的那部分网页面积,又叫做viewport(视口)。如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示,则滚动浏览器窗口,可以显示出网页的各个部分。2.获取网原创 2014-10-30 20:57:54 · 848 阅读 · 0 评论 -
css3:border-image边框图像详解
前言对于这个border-image属性已经不是什么新奇的事情了,也是一个老生长谈的话题。这是属性从很多年前已经出现了,但一直形单影只的,似乎 不被看好,但是假如你对此深入研究之,想必其用处还是多多,不过很可惜到目前为止对于浏览器支持还不比其他css3属性多,特别是IE,只有IE11以上 才支持,详情请移步 border-image兼容性。不过很好,对于纯正的现代浏览器和移动浏览器支持度还是非转载 2014-10-30 20:49:31 · 883 阅读 · 0 评论 -
RequireJS 2.0 API
使用§ 1加载 JavaScript 文件§ 1.1RequireJS的目标是鼓励代码的模块化,它使用了不同于传统标签的脚本加载步骤。可以用它来加速、优化代码,但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。RequireJS以一个相对于baseUrl的地址来加载所有的代码。 页面顶层标签含有一个特殊的属性data-main,转载 2015-12-18 16:21:49 · 507 阅读 · 0 评论 -
Underscore.js 1.8.3
集合函数 (数组 或对象)each_.each(list, iteratee, [context]) Alias: forEach 遍历list中的所有元素,按顺序用遍历输出每个元素。如果传递了context参数,则把iteratee绑定到context对象上。每次调用iteratee都会传递三个参数:(element, index, list)。如果list是个JavaScrip转载 2015-12-18 16:38:11 · 1894 阅读 · 0 评论 -
Zepto.js 1.1.6
Zepto 模块moduledefaultdescriptionzepto✔核心模块;包含许多方法event✔通过on()& off()处理事件ajax✔XMLHttpRequest 和 JSONP 实用功能form✔序列化 & 提交web表单ie✔转载 2015-12-18 16:40:51 · 879 阅读 · 0 评论 -
Backbone.js 1.1.2
介绍(Introduction)当我们开发含有大量Javascript的web应用程序时,首先你需要做的事情之一便是停止向DOM对象附加数据。 通过复杂多变的jQuery选择符和回调函数很容易创建Javascript应用程序,包括在HTML UI,Javascript逻辑和数据之间保持同步,都不复杂。 但对富客户端应用来说,良好的架构通常是有很多益处的。通过Backbone,你可以转载 2015-12-18 16:42:14 · 812 阅读 · 0 评论 -
Less 简介
入门Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术,让你的Css更具维护性,主题性,扩展性。Less 可运行在 Node 环境,浏览器环境和Rhino环境.同时也有3种可选工具供你编译文件和监视任何改变。例如:@base: #f938ab;.box转载 2015-12-18 16:43:06 · 399 阅读 · 0 评论 -
快速理解RequireJs中的config
在html中引入requirejs在HTML中,添加这样的 标签:script src="/path/to/require.js" data-main="/path/to/app/config.js">script>通常使用requirejs的话,我们只需要导入requirejs即可,不需要显式导入其它的js库,因为这个工作会交给requirejs来做。属性 dat转载 2015-12-18 21:43:37 · 12822 阅读 · 0 评论 -
jQuery插件的理解 $.extend()与$.fn.extend()
插件开发包括两种:1.类级别的插件开发,即$.extend()扩展jquery对象本身;2.对象级别的插件开发,即$.fn.extend()扩展jquery元素集来提供新的方法。 1.类级别的插件开发 1.(function($){ $.extend({ hello:function(){ale转载 2015-12-19 20:34:32 · 336 阅读 · 0 评论 -
通过checkbox的属性理解jquery获取attribute与property
产生问题的原因如下:jquery无法设置checkbox选中即没有变成选中状态设置以后checkbox并没有变成选中状态,用chrome调试看了一下,checkbox中确实有checked属性,而且,值为checked,但是页面显示仍然为未选中状态 $("input").prop("checked",true); attributes和properties之间的差异在特定情况下是很原创 2016-01-21 15:45:10 · 1024 阅读 · 0 评论 -
JavaScript基本包装类型
为了便于操作基本类型值,ECMAScript 提供了3 个特殊的引用类型:Boolean、Number和String,即基本包装类型。 每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象,从而能够调用一些方法来操作这些数据. 定义一个字符串有两种方式: 1.字面量写法 var box = 'Mr. Lee'; //字面量 box原创 2015-01-08 20:11:45 · 527 阅读 · 0 评论 -
Backbone.js 的技巧和模式
Backbone.js是一个开源JavaScript“MV*”框架,在三年前它的第一次发布的时候就获得了显著的推动。尽管Backbone.js为Javascript应用程序提供了自己的结构,但它留下了大量根据开发者的需要而使用的设计模式和决策,并且当开发者们第一次使用Backbone.js开发的时候都会遇到许多共同的问题。 因此,在这篇文章中,我们除了会探索各种各样你能够应用到你的Backbo转载 2016-01-14 21:42:05 · 1071 阅读 · 0 评论 -
七步从Angular.JS菜鸟到专家(1):如何开始
AngularJS 重新定义了前端应用的开发方式。面对HTML和JavaScript之间的界线,它非但不畏缩不前,反而正面出击,提出了有效的解决方案。很多前端应用的开发框架,比如Backbone、EmberJS等,都要求开发者继承此框架特有的一些JavaScript对象。这种方式有其长 处,但它不必要地污染了开发者自己代码的对象空间,还要求开发者去了解内存里那些抽象对象。尽管如此我们还转载 2014-08-17 18:52:03 · 931 阅读 · 0 评论 -
利用原生JavaScript获取样式的方式小结
1、element.style:只能获取写在元素标签中的style属性里的样式值,无法获取到定义在和通过加载进来的样式属性 1: var ele = document.getElementById('ele'); 2: ele.style.color; //获取颜色 2、window.getComputedStyle():可以获取当前元素所有最终使用的原创 2014-10-30 20:56:18 · 394 阅读 · 0 评论 -
ReactJs入门介绍
现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~一、ReactJS简介React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaSc转载 2015-12-13 22:16:21 · 377 阅读 · 0 评论 -
七步从AngularJS菜鸟到专家(7):Routing(1)
这是"AngularJS – 七步从菜鸟到专家"系列的第七篇。在第一篇,我们展示了如何开始搭建一个AngularaJS应用。在第四、五篇我们讨论了Angular内建的directives,上一篇了解了services的强大。在这一章,我们来看几个前面没有机会细说的关键点,文章的最后会列举一些特别棒的学习资源链接和工具。通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播转载 2014-08-17 18:55:27 · 855 阅读 · 0 评论 -
css3:背景属性background-origin/clip详解
智能手机的出现让HTML5+CSS3有了一个全新的舞台去演绎。很多的单页面都应用到了css3的酷炫效果,所以捣腾一下webapp开发工具应该可以帮助自己了解一下相关知识。算是一个加分项么。。。前面的几篇文章已经介绍了边框属性,那么今天我们正式来入手这个背景属性,css3中新增了3大属性,分别是背景裁剪(background- clip)、背景尺寸(background-size)、背景起点(b转载 2014-10-30 20:46:20 · 1380 阅读 · 0 评论 -
Web前端相关面试题
2012-09-01 10:19:02| 分类: js |举报 |字号 订阅1,判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母、数字、下划线,总长度为5-20var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;/*注意:1.要用^开头和$结尾,2.总长度5-20翻译为{4,19};3.别忘了还有下划线;*/reg.test("a1a__a1原创 2014-07-12 10:43:31 · 2967 阅读 · 1 评论 -
如何让你的JavaScript代码更加语义化
语义化这个词在 HTML 中用的比较多,即根据内容的结构化选择合适的标签。其作用不容小觑:赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加 class 来标识,但这种通过属性来表示本体的形式会显得不够直接,而且在一定程度上也有冗余。优化搜索引擎(SEO),结构良好的网页对搜索引擎的亲和力是很高的,百度和 google 也给出了很多网页结构化的建议(规范),方便他们抓取网页。利于设转载 2015-01-08 20:11:11 · 429 阅读 · 0 评论 -
javascript中的this和prototype学习
学习是循序渐进的。作为前端菜鸟,也在一步一步慢慢学习当中。我不太习惯只是听原理学知识,看例子学习更适合我,而且学的更快。前端跟后端不同,写些代码 页面就会有些反应。最近在学习js中的闭包,对象,类,继承,this,prototype,call,apply。这些看起来很多,其实都是有联系的 ,比如技术中的四个继承方式中第一个:对象冒泡方式就是用的this,另两个call apply方式学习的时候就得原创 2015-01-08 20:10:20 · 786 阅读 · 0 评论 -
JavaScript依赖注入的实现思路
如今各个框架都在模块化,连前端的javascript也不例外。每个模块负责一定的功能,模块与模块之间又有相互依赖,那么问题来了:javascript的依赖注入如何实现?(javascript的依赖注入,各大框架都有相应的实现,这里只学习实现思路)如下需求:假设已经有定义好的服务模块Key-Value集合,func为添加的新服务,参数列表为服务依赖项。var services = { a原创 2015-01-08 20:08:35 · 764 阅读 · 0 评论 -
动态加载外部链接JS
面试题 /* // 1.提交表单时按勾选的复选框加载外部JS // 2.当所有代码加载完成后alert("Done") */ var aForm = document原创 2014-07-12 10:43:14 · 1437 阅读 · 0 评论 -
七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX(1)
这是"AngularJS - 七步从菜鸟到专家"系列的第三篇。在第一篇,我们展示了如何开始搭建一个AngularaJS应用。第二篇我们讨论了scope和 $scope 的功能。通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放。完成版的Demo可以看这里。第三转载 2014-08-17 18:53:27 · 1546 阅读 · 0 评论 -
七步从AngularJS菜鸟到专家(6):服务(1)
这是"AngularJS – 七步从菜鸟到专家"系列的第六篇。在第一篇,我们展示了如何开始搭建一个AngularaJS应用。在第五篇我们讨论了Angular内建的directives。在这一章,我们来讨论services,整理我们的代码并完成我们的音频播放器应用。通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Editio转载 2014-08-17 18:52:51 · 734 阅读 · 0 评论 -
七步从Angular.JS菜鸟到专家(2):Scopes(1)
这是"AngularJS - 七步从菜鸟到专家"系列的第二篇。在第一篇我们展示了如何开始搭建一个Angular应用。在这一篇里,我们要讨论一个理解AngularJS运作原理所必须的基本概念,以及你如何更好地运用它。在这个系列教程里,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放。完转载 2014-08-17 18:52:45 · 838 阅读 · 0 评论 -
七步从AngularJS菜鸟到专家(4和5):指令和表达式(1)
这一篇包含了"AngularJS - 七步从菜鸟到专家"系列的第四篇(指令)和第五篇(表达式)。之前的几篇展示了我们应用的核心组件,以及如何设置搭建一个Angular.js应用。在这一部分,我们会厘清一些术语,然后深入探讨很多Angular.js提供的核心功能。通 过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Editio转载 2014-08-17 18:52:12 · 820 阅读 · 0 评论 -
精通使用AngularJS开发Web App
相关背景、社区、工具介绍第一章 Angular之道这一章主要是介绍AngularJS,包括这个框架以及它背后的项目。首先我们先大概看看这个项目本身:谁在更新代码,到哪里去找源码和文档,如何寻求帮助等等。本章的大部分内容用来介绍AngularJS框架,它的核心概念,编码模式。这会覆盖到很广泛的内容,为了让学习的过程更快更轻松,书中会提供大量的代码示例。AngularJS是一个独特的框转载 2015-05-17 21:43:59 · 3144 阅读 · 0 评论 -
JavaScript定义类,定义属性,定义方法的几种方式详解与分析
感觉这篇文章写的很好,就转载过来分享给和我一样的初学者。提起面向对象我们就能想到类,对象,封装,继承,多态。在《javaScript高级程序设计》(人民邮电出版社,曹力、张欣译。英文名字 是:Professional JavaScript for Web Developers)这本书中描述的还算比较详细。我们看看JavaScript中定义类的各种方法。1.工厂方式 javaScr原创 2015-01-08 20:09:26 · 944 阅读 · 0 评论 -
Dom获取元素的几种方式
通过id获取获取元素document.getElementById();通过标签名获取元素(集合)document.getElementByTagName();通过class获取元素(集合) ie9失效 document.getElementByClassName();封装getByClass()方法一:function getByClass(转载 2014-10-30 20:56:22 · 3928 阅读 · 0 评论 -
SASS用法指南
原文地址:http://www.ruanyifeng.com/blog/2012/06/sass.html这是一篇很不错的博客,博主的其他博客也很精彩一、什么是SASSSASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。本文总结了SASS的主要用法。我的目标是,有了这篇文章,日常的一般使用就不需要去看官方转载 2016-01-14 21:43:15 · 287 阅读 · 0 评论