站内搜索

本次搜索找到结果 10 条
title: 透明封装 Vue 组件date: 2019-09-12 15:13:00updated: 2019-09-12 15:13:00tags:Vuecategories:前端在项目中我们通常会有封装一个现有组件的需求,为组件添加一些额外的特性或配置。例如封装 textarea 以提供自动调整大小的功能、封装第三方组件库中的某个组件以提供额外的默认配置等。以 textarea 为例,textarea 有一些常用的属性如 rows、cols、placeholder 等,也有一堆事件如 input、keydown 等。如果直接对其封装的话就意味着要把一堆属性和事件绑定到新的组件上,如下:<templat...
看到小黑的文章关于webapp中的文字单位的一些捣腾感觉很赞。尤其是,他提到了手机淘宝的meta,所以觉得要讲讲我们这方面的一些实践。手机淘宝从2014年中开始,全面推行flexible设计。什么叫flexible呢?其实flexible就是responsive的低端形态和基础。对我们来说,最直观的感受就是,在超宽屏幕上,网页显示不会两边留白。以前pc时代大家经常讲的流体布局,其实就是一种flexibledesign。只不过,流体的表述角度是实现,flexible的表述角度是结果,为了跟高大上的responsive保持一致,我们这里使用了flexible这个说法。讨论方案之前,需要先了解三个关键概念:单位英寸像素...
序ES6,或许应该叫ES2015(2015年6月正式发布),对于大多数前端同学都不陌生。首先这篇文章不是工具书,不会去过多谈概念,而是想聊聊关于每个特性你可能不知道的事,希望能为各位同学正确使用ES6,提供一些指导。对于ES6,有些同学已经在项目中有过深入使用了,有些则刚刚开始认识他,但不论你是属于哪一类,相信这篇文章都有适合你的部分。针对文章中的问题或不同意见,欢迎随时拍砖、指正。正文Let+Const这个大概是开始了解ES6后,我们第一个感觉自己完全明白并兴致勃勃的开始使用的特性。以如下方式使用的同学请举下手?//定义常量constREG_GET_INPUT=/^\d{1,3}$/;//定义配置项letcon...
作者ZachHolman本文为Coding用户协作翻译,转载请注明来源。如果你对本文的翻译有建议,欢迎提交PullRequest。让我们来聊聊部署无论你何时对自己的代码库做出改动,总会伴随着要破坏一些东西的风险。没有人喜欢宕机,没有人喜欢暴躁的用户,也没有人喜欢生气的经理,所以部署新代码到生产环境变成颇具压力的一个环节。你完全没必要对它有压力,我将在这里重复一遍又一遍这句话:你的部署应该尽可能单调、直接、毫无压力。部署新功能到生产环境中应该像在HackerNews开始一场关于用spaces还是tabs的口水战一样简单。它应该足够简单到让新员工理解,它应该为防止错误而生,它应该在第一个最终用户看到新代码前被很好地测...
这两天在做公司的PC站时因为需要使用angular的$http服务存取数据,而且接口又在另一个域名下面,不得不研究下跨域的问题.以下把这两天遇到的一些问题总结下.(都是我自己遇到的一些问题,所以可能不太全面)Access-Control-Allow-Origin的问题跨域遇到的第一个问题就是Access-Control-Allow-Origin的错误,Chrome报错Responsetopreflightrequestdoesn'tpassaccesscontrolcheck:No'Access-Control-Allow-Origin'headerispresentonthereques...
现在,WebApp日益重视用户的交互体验,了解性能优化的方式则可以有效提高用户体验。阅读和实践下面的性能优化技巧,可以帮你改善应用的流畅度、渲染时间和其他方面的性能表现。概述对WebApp进行性能优化是一份冗杂沉重的工作,这不仅是因为构建一个WebApp需要前后端协作,而且需要多方面的技术栈:数据库、后端、前端,需要运行在多种平台:iOS,安卓,Chrome,Firefox,Edge。这太复杂了!不过,还是有一些历经实践的通用方式可以用来优化WebApp的性能。在接下来的小节中,我们将逐步介绍相关的细节。一份来自Bing的研究表明,页面加载时间每增加10ms,每年就会减少$250k的收入。————RobTrace...
以前或许我们在做前端效果时都是在使用JS来,如JQuery的animate,而如今在前端效果中,CSS3占据越来越重要的作用,如何检测一个CSS3的动画是否结束并在结束后执行下一个动画呢?用jQuery的时候可能是这样:$('.element').animate({left:'100px'},function(){alert('动画执行结束');});下面以一个简单的例子演示下使用CSS3的动画如何响应这种操作:/*一个简单的CSS3动画(这里不再写-webkit-之类的前缀了*/@keyframesfade{from{left:0;}to{left:200px;}}.animate-fade{animation...
做前端的应该都会知道LESS,使用LESS书写CSS样式可以在很大程序上降低工作量以及由拼写造成的错误,但对新手来说除了LESS的语法外,如何在自己的工作环境上用上LESS可能也是个问题。个人认为,使用LESS最简单的方法就是实时编译:即对LESS文件做的修改可以在不额外加任何操作(编译)的情况下应用在测试环境甚至生产环境,毕竟对LESS文件每做一点小修改都要重新编译一次也太麻烦了些,而且很慢。实时编译有两种方法:一是在HTML中引入less.js文件,并且设置工作环境是“development”,这样在网页每次载入时都会重新编译LESS文件;二是使用某些编辑器,如SublimeText,SublimeText有...
CSS3对于前端工程师来说,越来越重要了。有很多CSS3的效果真的不需我们自己一个一个去写,在这种情况就互联网上有关于CSS3的工具就出现了,这些工具将给你的制作节省很多时间,让你有更多的时间去做自己想要做的事情。CSSAnimatieCSSAnimatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码。http://cssanimate.com/LongShadowsGenerateLongShadowsGenerate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器。http://sandbox.juan-i.com/longshadows/Fontasti...
本文章来给大家介绍一个jQuery+Ajax+PHP实现“喜欢”评级功能代码,用户点击页面中自己喜欢的图片上的红心按钮时,前端页面向后台发送一个ajax请求,后台PHP程序接收请求后,查询IP库中是否已经有该用户的点击记录,如果没有,则将对应的数值+1,同时将该用户IP信息写入IP库,反之则告诉用户已经“喜欢过了”。数据库设计先准备两张表,pic表保存的是图片信息,包括图片对应的名称、路径以及图片“喜欢”总数,pic_ip则记录用户点击喜欢后的IP数据。CREATETABLEIFNOTEXISTS`pic`(`id`int(11)NOTNULLAUTO_INCREMENT,`pic_name`varchar(60...