学习zepto.js(Hello World) Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。 昨天听说了zepto.js,正好最近也比较闲,所以就学习一下这个著名DOM操作库,由于本人刚接触这个,但又不想单纯的说如何使用,所以本人会按照API顺序来说明方法如何使用并试着将对于源码的理解写上来; $(): 与jQuery的$()几乎一样,但zepto的选择器是直接使用的
1:GMU:http://cloudajs.org/ui/brand/gmu GMU是基于zepto的mobile UI组件库,提供webapp、pad端简单易用的UI组件! http://gmu.b
webpack的核心是一切皆模块,所以它其实本质上就是个静态模块打包器。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
写这篇文章的目的,一方面是介绍一下自己编写的模块化 DOM 库 domq.js,另一方面是希望大家对 jQuery 有一个正确的认识,即使 jQuery 已经逐渐退出历史舞台,但是它的 API 将会以另外一种形式存在下去。
本文作者:IMWeb 谦龙 原文出处:IMWeb社区 未经同意,禁止转载 前言 前端在最近几年实在火爆异常,vue、react、angular各路框架层出不穷,咱们要是不知道个双向数据绑定
Zepto.js是一个轻量级的针对现代浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。 1. Why Zepto.js? API类似jQuery,熟悉jQuery可以无缝迁移到Zepto.js Zepto仅针对高版本现代浏览器设计了最小核心的通用库,代码体积小,尤其适合移动端开发。 Zepto增加了针对移动端的触摸和手势相关的事件 Zepto模块化做的很灵活,可以自定义组合模块 2. Zepto.js下载 代码下载:zeptojs中文站
说到选择器,大家可能会想到层叠样式表。在css中,选择器可以获取元素,为其添加css样式;但zepto框架与css选择器相比,它更加强大,因为zepto选择器为元素添加的是行为,行为的添加使得页面的交互更加丰富多彩。今天就来介绍一下zepto的常用选择器——层次选择器、属性选择器。
最近一直在看zepto的源码,希望通过学习它掌握一些框架设计的技巧,也将很久不再拾起的js基础重新温习巩固一遍。如果你对这个系列感兴趣,欢迎点击下方地址watch,随时关注动态。这篇文章主要想说一下zepto中事件模块(event.js)的trigger实现原理。
今天大师兄给大家分享一款功能非常强大的javascript视觉差特效引擎插件:Parallax.js。
Zepto是一个轻量级的针对现代高级浏览器的 JavaScript库, 它与jquery有着类似的api。
当我们网站的页面图片过多时,加载速度就会很慢。尤其是用手机2G/3G访问页面,不仅页面慢,而且还会用掉很多流量。我们主题之前也都采用了图片的懒加载形式,但都不完美,部分主题还采用了占位图片来控制懒加载,今天换一种js图片懒加载,它原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有图片在可视区域才去请求加载,这样的话应该就能满足我们日常所需,好了不说废话先按照教程操作试试,后期主题会逐一更新,稍安勿躁!!!
本文由 IMWeb 团队成员 Ciccy 首发于 IMWeb 社区网站 imweb.io。点击阅读原文查看 IMWeb 社区更多精彩文章。 webpack的核心是一切皆模块,所以它其实本质上就是个静态模块打包器。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。官网显示的这幅图很形象地描述了这个过程: webpack4相比于3做了很多优化,最大的改变就是支持了零配置打包,不再强制要求必须进行繁琐的webpac
课程地址:https://www.imooc.com/learn/229 一、 常见移动端开发框架简介 二、Zepto框架介绍和入门 三、 Zepto框架核心API 1.Core 2.事件 自定
本文作者:IMWeb 袁飞翔 原文出处:IMWeb社区 未经同意,禁止转载 部分插件 fis3-hook-lego 查找文件 fis3-hook-annotation 文件注解 Tip 1、勿使用lego_modules文件全路径 <script src="/lego_modules/zepto/1.1.7/zepto.js"></script> 直接 <script src="zepto"></script> js require: // js /** * @require "zepto"
Zepto简单来说是一个轻量级的JS库。它的优势在于能减少下载和与运行时间,兼容大多数移动浏览器和主流桌面现代浏览器。而传统的js框架,为了兼容低级、高级浏览器,代码量较大、运行时间长。移动端浏览器功能差异较小,兼容问题不突出。传统js框架代码大,在移动端会造成终端流量加大、显示迟缓的情况。zepto还实现了jQuery的大部分功能,其功能也是十分强大的。
WeUI 是微信官方团队针对微信提供的一个 H5 UI 库,它只提供了一组CSS组件。
jQuery确实非常有用,它的初衷就是为诸多浏览器提供统一的接口,避免书写各种条件语句判断当前环境 移动端已经被类似 Safari 和 Chrome 的 webkit 内核浏览器统治了,所以无需再抽象出统一的接口。反而是它庞大的体积,min版的也有90KB 现在很多人建议使用 Zeptojs 来代替,虽然它没有jQuery强大,但是压缩版只有25KB,因为 Zeptojs 拥有很多和 jQuery 一样的接口,代码编写非常方便 但是,Zepto的性能相比jQuery怎么样? 实际测试一下 <html> <b
本文介绍了Zepto源码分析之ie模块,从源码分析的角度介绍了Zepto中ie模块的实现原理和注意事项。主要包括获取元素样式、计算元素尺寸、浏览器渲染机制、事件处理等方面,并通过实例进行解释。
本文介绍了一种基于fis的插件,该插件具有查找文件、文件注解、查找文件、文件注解等功能。同时,该插件还可以将小于5k的js和小于20k的css文件内联到html中,并将被sprite的png文件排除在发布之外。此外,该插件还可以将不需要被打包的文件设置为pack=false,并将文件注解和文件全路径等选项设置为可选。
在近期的一个移动端项目中,有一个页面需要有弹框提示,并且这个弹框通过关闭按钮关闭。页面当中使用了 iScroll 来实现页面局部滚动,在 iScroll 的配置当中把 tap 和 click 事件都开启了。 代码如下:
链模式是实现链式调用的主要方法,通过在自身方法中返回自身的方式,在一个对象连续多次调用自身方法是可以简化写法的。
gitHub地址 1,移动端minimvvm框架qvm实现 qvm概念,一个适用于移动端的mini mvvm(什么是mvvm?没了解的同学自己去了解)框架。参考了angular和vuejs的设计实现思
UAParser.js 有时我们需要判断客户端的一些信息,如浏览器的类型、型号等,然后进行相应处理,例如,如果是使用微信访问的,就怎么怎么处理。 这就需要从 User-Agent中获取相应信息,UAParser.js 就是一个专业的 User-Agent 解析工具库。 主要特点: 功能全,使用方便 封装好了方法,可以方便的获取 浏览器的类型、布局引擎、操作系统、cpu类型、设备类型 浏览器、node.js中都可以使用 可用范围广:jQuery/Zepto 插件、Bower/Meteor包、 RequireJ
部分插件 fis3-hook-lego 查找文件 fis3-hook-annotation 文件注解 Tip 1、勿使用lego_modules文件全路径 <script src="/lego_modules/zepto/1.1.7/zepto.js"></script> 直接 <script src="zepto"></script> js require: // js /** * @require "zepto" */ 2、不需要被define包裹的文件使用@noWrap文件注解标示 /** *
学习zepto.js(对象方法)[5] clone: 该方法不接收任何参数,会返回对象中的所有元素集合,但不会对象绑定的事件. var $temp =$("div").clo
qvm概念,一个适用于移动端的mini mvvm(什么是mvvm?没了解的同学自己去了解)框架。参考了angular和vuejs的设计实现思路,并进行简化封装,目前使用的zepto基本依赖库,使用最少的代码实现了基础功能版。
HTML5学堂:相对来说,JS在移动端要远远低于PC端的使用频率,因此积累的开发经验并不是太多。在这里简要整理一些JavaScript在移动端的项目经验,主要包括click点击事件延迟、元素高亮点击区、zepto的touch问题等。 移动端click时间300ms延迟 在移动端,click点击事件会造成300ms的延迟,造成这种延迟的原因在于:当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单击操作。因此,浏览器就等待 300 毫秒,以判断用户是否再次点击了屏幕。 对于这种体验
问题:逻辑复杂,事件绑定逻辑混乱,在某些浏览器上onload和onreadystatechange都会触发,需要另外加标记位判断,逻辑复杂。
因为zepto默认构建包含: Core, Ajax, Event, Form, IE几个模块,要使用animate需要再引用fx模块。
先看一下zepto事件的函数,在这里,zepto是把zepto对象作为一个立即执行函数的参数传进去的。
不知道有没有朋友有这种经历。雄心勃勃的打开一个开源框架的源码,开始看,一行一行的看下去,看了几行就感觉,“我艹,这什么玩意儿”,然后就看不下去了。如果你有类似的经历,可以看看本文,本文会以几个常见开源库为例讲解几种常见的开源框架的代码架构,从架构出发,帮你轻松读懂框架源码。记住以下两个要点:
公众号的H5网页,里面跑的语言是JS,本质是脚本语言.是没有能力调用硬件的API的. 微信这个是本地APP,本身就有很多调用硬件的能力,比如拍照,扫码,速度计,GPS定义等等. 那就我们就可以在微信里面打开公众号的网页,这个网页调用微信,微信调用硬件不就可以了.能做的事情就很多了.
学习zepto.js(对象方法)[3] 继续说zepto里attributes的相关操作. attr,removeAttr,prop这三个方法. attr(): 三种用途 get: 返回值为一个string字符串 $("").attr("id"); //--> "special" 注意:只能返回对象中第一个节点的属性值 set: 返回值为一个zepto对象 $("").attr("id","special"); //
上一篇《浅谈HTML5单页面架构(一)——requirejs + angular + angular-route》探讨了angular+requirejs的一个简单架构,这一篇继续来看看backbon
H5 web Worker H5线程 线程中可用的变量、函数与类 self:用来表示本线程范围内的作用域。 postMessage(msg):向创建线程的源窗口发送消息。 onmessage:获取接收消息的事件句柄。 importScripts(urls):导入其它JavaScript脚本文件。参数为该脚本文件的URL地址,可以导入多个脚本文件,导入的脚本文件必须与使用该线程文件的页面在同一个域中,并在同一个端口中。 navigator对象:与window.navigator对象类似,具有appName、p
(该篇文章重点是想说jsonp实现过程,如果你想了解跨域相关的更多的知识,可以谷歌,度娘一把)
根据文章内容撰写摘要总结。
前端在最近几年实在火爆异常,vue、react、angular各路框架层出不穷,咱们要是不知道个双向数据绑定,不晓得啥是虚拟DOM,也许就被鄙视了。火热的背后往往也是无尽的浮躁,学习这些先进流行的类库或者框架可以让我们走的更快,但是静下心来回归基础,把基石打牢固,却可以让我们走的更稳,更远。
本文作者:IMWeb 谦龙 原文出处:IMWeb社区 未经同意,禁止转载 前言 原文地址 仓库地址 jsonp(JSON with padding)你一定不会陌生,前端向后端拿数据的方式之
本文作者:IMWeb 谦龙 原文出处:IMWeb社区 未经同意,禁止转载 前言 使用Zepto的时候,我们经常会要去操作一些DOM的属性,或元素本身的固有属性或自定义属性等。比如常见的有a
看到的一篇总结性的文章,收藏一下,感兴趣的可以自己看看,哪些是已经会的,哪些是没听说过的,哪些是一知半解的,都可以稍微看看。
Web前端目前现有的UI框架:Element、Bootstrap、JqueryUi、Foundation、Semantic UI、Pure、UIkit Web前端目前现有的JS框架:JQuery、Zepto、VueJS、AngularJS、ReactJS、backbone 、ember
前言 套用上篇文章向zepto.js学习如何手动触发DOM事件 的开头??? 前端在最近几年实在火爆异常,vue、react、angular各路框架层出不穷,咱们要是不知道个双向数据绑定,不晓得啥是
不用盲目的百度和问大神们WebApp 开发使用哪个框架最好?等等问题。在此,小编尽量解答各位的WebApp 问题。根据国内js大神以及有过WebApp 开发经验的前辈们分析,小编推荐下面6款常用的WebApp 开发框架。
Web动画的本质是元素状态改变造成的样式变更,CSS动画和JS动画的区别并不是由语言来决定的,而是由两者的特点和适用场景来判断的。CSS动画简洁高效,提升交互体验而编写的代码可以轻松地和主要业务逻辑之间实现隔离,开发中建议优先使用;而当你需要更丰富的缓动函数,多对象关联动画或是需要在动画执行的特定时间点关联一些其他的业务逻辑等需要细节控制的场景中,JS动画就会显得更加清晰且易维护,两者从来都不是非黑即白的选项。
前两篇简单讨论了requirejs+angular和requirejs+backbone的架构,这两个架构,估计也是国内最热门的做法。 浅谈HTML5单页面架构(一)——requirejs + angular + angular-route 浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore 不过,这一篇,我想进一步探讨一下这两个框架的优缺点,另外,再进一步,抛开这两个框架,回到本真,自己搞个简单的路由一样可以实现单页面。 这个对于刚做前端开
1.$() 的用法。 获取元素 $('div') //获取所有页面中的div元素 $('#foo') // 获取ID 为"foo"的元素 创建元素 $("Hellow"") //新的p元素 $("",{text:"Hellow",id:"greeting",css:{color:'darkblue'}}) //Hellow</
Hellow
Hellow</
用了document.documentElement.contains做判断,如果浏览器支持该方法,就用node.contains重新包了一层得到一个函数,差别就在于如果传入的两个节点相同,那么原生的node.contains返回true,具体用法可以查看MDN Node.contains但是$.contains返回false。
hello,大家好,经过上篇文章,相信大家都已经了解了js的红尘往事,但是往事不可追嘛,回顾当下,我们要学习最新的js,誓做前端街最靓的仔~
领取专属 10元无门槛券
手把手带您无忧上云