由于js的代码逻辑越来越重,一个js文件可能会有上千行,十分不利于开发与维护。最近正在把逻辑很重的js拆分成模块,在一顿纠结是使用requirejs还是seajs的时候,最终还是偏向于requirejs。毕竟官方文档比较专业嘛... 不过即便是有完整的官方文档,仍然遇到不少的问题,比如jquery-ui的使用。 下面就循序渐进的讲解一下我遇到的问题,以及解决的办法。 关于AMD和CMD的理解 AMD(异步模块定义)的典型就是requirejs,而CMD(通用模块定义)的典型是淘宝的seajs。 他
基于Jquery开发的Autocomplete插件。具有易于使用,配置简单,既可以利用Ajax读取数据也可以直接从本地获取数据。
当看到墨颀 CMS的菜单,变成一个工具栏的时候。变认为这一切有了意义。于是就继续看看这样一个CMS的边栏是怎么组成的。
Webpack已升级为v4版本,优化之后性能提升好几倍,请移步这个 webpack4项目配置Demo,以及 这篇升级优化点
AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案。
有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。
在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求。目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站。利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑。本文的目的就是可以快速了解jQuery插件的开发原理以
在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求。目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站。利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑。本文的目的就是可以快速了解jQuery插件的开发原理以及掌握jQuery开发的基本技能。 进行jQuery插件开发前,首先要知道两个问题:什么是jQuery插件?jQuery插件如何使用? 第一个问题,jQuery插件就是用来扩展jQuery原型对象的一个方法,简单来说就是jQuery插件是jQuery对象的一个方法。其实回答了第一个问题,也就知道第二个问题的答案了,jQuery插件的使用方式就是jQuery对象方法的调用。 我们先看个例子:$("a").css("color","red")。我们知道每个jQuery对象都会包含jQuery中定义的DOM操作方法,这里使用$方法来选择a元素,返回一个a元素的jQuery对象,这个对象就可以使用jQuery中定义的DOM操作方法。那么jQuery对象是如何获取这些方法的呢?其实jQuery内部定义了一个jQuery.fn对象,查看jQuery源码可以发现jQuery.fn=jQuery.prototype,也就是说jQuery.fn对象是jQuery的原型对象,jQuery的DOM操作方法都在jQuery.fn对象上定义的,然后jQuery对象就可以通过原型继承这些方法。 基础版jQuery插件 知道了上面这些知识,我们就可以来写一个简单的jQuery插件。假如我现在需要一个jQuery插件用来改变标签内容颜色,就可以按下面的方式来实现这个插件: $.fn.changeStyle = function(colorStr){ this.css("color",colorStr); } 然后按下面的方式来使用插件: $("p").changeStyle("red"); 插件调用的时候,插件内部的this就是当前调用插件的jQuery对象,这样的话每个使用$()方法选择的标签,在调用changeStyle()插件时都会使用css()方法重设color样式。 满足链式调用的jQuery插件 链式调用时jQuery的一大特色,一个通用的插件应该遵循jQuery风格,满足链式调用要求。实现链式调用的方式也很简单: $.fn.changeStyle = function(colorStr){ this.css("color",colorStr); return this; } 然后使用的时候就可以链式调用其他方法了: $("p").changeStyle("red").addClass("red-color"); 实现链式调用的关键点就一行代码return this,插件中加了这行代码,那么在插件执行完之后,就会把当前的jQuery对象返回,然后就可以在插件方法后面继续调用其它jQuery方法。 防止$符号污染的jQuery插件 有很多js库都会使用$符号,虽然jQuery可以使用jQuery.noConflict()方法交出$符号的使用权,但是如果定义插件的时候,使用$.fn对象来定义的,那么这些插件使用的时候就会受到其它使用$变量的js库的影响。对于这种情况,我们可以使用立即执行函数通过传参的方式封装插件。形式如下: (function($){ $.fn.changeStyle = function(colorStr){ this.css("color",colorStr); return this; } })(jQuery); 因为使用了立即执行函数,所以此时的$只属于这个立即执行函数的函数作用域,这样就可以避免$符号的污染。 可以接受参数的jQuery插件 继续上面的例子,假如我还想为这个插件添加一个设置标签元素内容文字大小的功能,那么我可以这么来实现: (function($){ $.fn.changeStyle = function(colorStr,fontSize){ this.css("color",colorStr).css("fontSize",fontSize+"px"); return this; } })
JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaScript的身影。JavaScript正在逐渐进化为一门全能的开发语言。 但用好JavaScript并不容易,你除了需要掌握它的语法并知道如何写出高质量的代码之外,还需要了解如何解决那些几乎在每个项目中都会遇到的需求场景,比如:判断日期,高亮文本,限制字符数等等,有很多第三方库可以解决这些问题,但这些库可
Vue之所以受欢迎,主要就在于它的轻量和灵活,我们可以用vue做SPA,也可以用它做多页应用,一个页面对应一个VUE实例。而且因为他的轻量,低侵入性,所以我们可以很方便地和其他框架或者库搭配使用,那么我们怎么在基于vue的SPA应用中搭配jquery使用呢?
对于那些不知道的人来说,jQuery是一个JavaScript库,它包含了许多特性,非常小而且速度很快。它还包括一个易于使用的API,在所有浏览器上都是兼容的,并且可以很容易的进行HTML遍历、动画、DOM操作和事件处理。它不仅可扩展,而且经久耐用。因此,客户端脚本自开发以来变得容易得多。
1.UI.Layout jQuery UI布局插件 官方网站:http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局。布局
jQuery补充知识点 隐式迭代 基本概念 隐式迭代:jQuery在设置属性时会自动的遍历,因此我们不需要再遍历 jQuery在执行设置性操作时,会给所有的元素都设置上相同的值。 jQuery在执行获取性操作时,只会返回第一个元素对应的值。 如果想要给每一个元素都设置不同的值,需要手动进行遍历jQuery对象。 each方法 遍历jQuery对象集合,为每个匹配的元素执行一个函数 语法: // 参数一表示当前元素在所有匹配元素中的索引号 // 参数二表示当前元素, 在function中this也表示当前元素
jQuery Validation是一个用于验证表单的jQuery插件,简单易用,已经包含了16种内置的验证规则.Github上也有更多的验证规则可以使用.这都不是重点,重点是你可以轻松的定制自己的规则. 内置规则: required – Makes the element required. remote – Requests a resource to check the element for validity. minlength – Makes the element require a give
你不懂JS - 可能是用现代JavaScript编写的最好的书,完全可以免费在线阅读,或者可以买来支持作者。
今天想了解一下jQuery的插件开发,于是google了一下,列在前面的两篇文章都很不错,jQuery插件开发全解析 更是将插件开发的方方面面细致入微的进行了讲解,并提供了PDF进行下载。笔者今天详细的阅读了这篇文章并记录了一些笔记。
随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元测试等等一系列复杂的需求
上周我们聊了一下jQuery的基础部分,这周我们把jQuery的高级部分学习一下吧!同时也预祝各位小伙伴新年快乐!
原文:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
jQuery插件就是开发爱好者自己利用jQuery制作的特效,然后打包成js文件,发布到网上供大家使用的脚本集合。
要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统。这好比大公司们争相做平台一样,得平台者得天下。苹果,微软,谷歌等巨头,都有各自的平台及生态圈。
版权声明:本文为王小雷原创文章,未经博主允许不得转载 https://blog.csdn.net/dream_an/article/details/49658143
https://segmentfault.com/a/1190000019151460
在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败;这样就会显示一个很难看的坏图片缩略图;下面介绍两种方法,解决这个问题:
最近在做一个自适应的网站,经常遇到需要文本的溢出地方,我写了一个CSS简单设置文本溢出的方法:用css实现文本溢出div显示省略号 但是IE只能设置单行溢出隐藏,Webkit内核浏览器才支持多行溢出,于是找到了这款插件,能够达到不错的效果,用Chrome自带的翻译加上自己的理解写了这么一个教程,希望能对大家有所帮助。
最近被派去维护和开发一些做了一半、年久失修的项目。有一部分内容是关于word文件导出,顺带着把excel、pdf文件的导出也调研下吧,我想未来开发我应该会遇到的,遂做了下笔记分享给需要的人。
each 方法用来遍历 jQuery 对象的,它的参数是一个事件处理函数,这个事件处理函数有两个参数,第一个参数是索引,第二个参数时索引对应的 DOM 对象,使用的时候注意转成 jQuery 对象。
var Helloword = function(objId){ var _get_dom = function(Id){ return document.getElementById(Id); } var _aim_obj = _get_dom(objId); var _say_hello = function(str){ _aim_obj.innerHTML = str; HelloWorld.sayHello('hello','hello text'); } return{ sayHello:_say_hello } }
webpack支持监听模式,此时需要重新编译时就可以进行增量构建,增量构建是很快的,基本不到一秒或几秒之内就能重新编译好
第一次写jQuery插件,简直无从下手,好在一步一步从简单到复杂(对我来说挺复杂的),终于理解了jQuery插件的写法规则,并最终以一个新闻式插件面世。尤其感谢带领我的很棒的前端师傅~ 废话不多说,开始。(编写准备工具:sublime(其他只要可以开发HTML就行),jQuery包) 一、题目:编写一个类似新闻样式的小插件(即:用上这个插件,就能自动生成一个新闻样式),如图所示。 image.png 二、分析题目,整理思路,并用代码实现它 1、首先用HTML+CSS将静态页面写出来(不用想许多后续难度等等
jQuery是一个JavaScript框架。它兼容CSS3,还兼容各种浏览器。文档说明很全,应用详细,成熟插件多。
通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 jQuery对象。
data.php接收前台页面提交过来的两个参数,_POST[‘last’]即开始记录数,_POST[‘amount’]即单次显示记录数,看SQL语句就明白,其实就是分页中用到的语句。
本文主要介绍了高可维护的JavaScript代码规范,包括变量命名、注释、函数、正则表达式、对象、闭包、性能、模块化、私有变量、代码格式化、测试、编码规范、工具和最佳实践等。同时,本文还提供了常见代码规范的具体示例和JavaScript代码规范检查工具的输出结果。通过遵循这些规范,可以大大提高代码的可读性和可维护性,从而提高开发效率。
作者|波同学 原文|http://www.jianshu.com/p/3f97570d22b4 早几年学习前端,大家都非常热衷于研究jQuery源码。我还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,“原来JavaScript居然可以这样用!” 虽然随着前端的发展,另外几种前端框架的崛起,jQuery慢慢变得不再是必须。因此大家对于jQuery的热情低了很多。但是许多从jQuery中学到的技巧用在实际开发中仍然非常好用。简单的了解它也有助于我们更加深入的理解JavaScri
在追求页面互动效果的时代,大家都想把页面效果做的美轮美奂,这一切都离不开前端技术脚本Javascript,而最近常被人用到的Javascript库文件则是jQuery。 jQuery的使用具体步骤如下:
jQuery插件就是别人已经开发好弄的,我们直接约会就可以使用。并且基于jQuery制作的,可以实现某些特定的网页效果的js文件(js + css)。
最近在开发中碰到关于颜色拾取器的需求,正好搜索了一些不错的JavaScript颜色选择器插件。这里把自己整理的内容分享给大家。
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用,
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用,在jQuery官网有许多插件:
本插件基本算原创,其中大多数功能是在之前工作中发现经常会使用到的,但使用他人的插件放一起用会出现冲突,或者某个插件不能兼容各个浏览器,于是本人对一些插件进行修改或重写,也有些优秀的插件原封不动的整合进来,但由于插件开源共享,所以没有写明插件的来源地址以及作者信息,望见谅。
据统计,据媒体报道,据各种经验之谈:用户不喜欢点击,更爱滚动!所以,之前挺流行的文章分页没有了,沿用了几百年的“下一页”也被无限load取代。瀑布流和Twitter更是推动了无限load的普及。
在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式。这样我就可以复制并粘贴大部分的代码结构,只要专注最主要的逻辑代码就行了。 使用相同的设计模式和架构也让修复bug或者二次开发更容易。一套经过验证的架构可以保证我的插件不出大的问题,不论插件简单还是复杂。我在这里分享10条我总结的经验。
不知道在哪里看到了这篇关于jQuery编码的文章,挺实用的,恰好最近在研究jQuery的基础知识,今天打开收藏夹来翻译一下,原文的英语不难,但是内容很实用,可能有大神已经翻译过了,大家看精华就行了。
我至今还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,“原来JavaScript居然可以这样用!”
Jquery是优秀的Javascrīpt框架。我们现在来讨论下在 Jquery 中两个页面载入后执行的函数。 $(document).ready(function(){ // 在这里写你的代码... });在DOM加载完成时运行的代码 可以简写成 jQuery(function(){ }); (function($) {})(jQuery)什么意思? (function(){ })(jQuery); 其实际上是执行()(para)匿名方法,只不过是传递了jQuery对象。 相当于 function
为兼容较旧的jQuery插件,我把jQuery版本号从2.1.x降到了1.8.x,这比加入jquery-migration插件要来得干脆。
写jQuery插件时一些经验分享一下。 一、推荐写法 jQuery(function($){ //coding }); 全写为 jQuery(document).ready(function($){ //coding }); 1、意义为在DOM加载完毕后执行了ready()方法。 2、$私有变量,与其他插件不冲突 二、不推荐写法 (function($){ //coding })(jQuery); 1、立即执行函数;相当于先申明一个函数,声明完后直接调用 。
领取专属 10元无门槛券
手把手带您无忧上云