jQuery 结构的实现思路

前提: 使用 JS 创建对象的最优办法,是原型模式. step1: 原型模式的基础使用方式 function fn(){} fn.prototype = {} var x = new fn(); x.aaa(); 缺点:使用 fn.prototype 中的成员时,需要先创建 fn的实例:var x = new fn(); 麻烦,希望不需要每次都实例化. 尝试1: 让 fn()返回 fn的实例,即返回 new fn(); function fn()…

【学】jQuery的源码思路1——后代选择器

jQuery的源码思路1--后代选择器这里探讨一下jQuery中后代选择器的封装原理,并自己写一下 getEle('#div1 ul li .box');接受的参数就是个后代选择器,类似于这样: #div1 ul li .box id/tagname/class div#div1 div.box input[type=button] li:eq(3)/lt(3)/gt(3) li:first/last/odd/even function getEle(str){ var arr = str.m…

安全、结构良好的jQuery结构模板

安全.结构良好的jQuery结构模板 ;(function($,window,document,undefined){ //我们的代码- })(jQuery,window,document); 参考 http://www.cnblogs.com/studies/p/4160667.html…

【学】jQuery的源码思路2——$符号是如何封装的

jQuery中的$符号功能很强大,原因在于对函数参数的个数以及种类的控制,还有对于面向对象思想的运用 function jQuery(args){ //接受参数,并对其判断 this.elements = []; //定义一个数组,每个生成的jQuery对象里都有这么一个elements数组属性,用于放选择出的元素 switch (typeof args){ case 'function': //如果传的是函数,就把这个函数传到ready函数的参数中 ready(args); break; ca…

jQuery1.11源码分析(6)-----jQuery结构总揽

(在看以下内容之前请先对原型链有一定的了解,比如:prototype是对象还是函数?) 在看jQuery的其他源码之前,必须对jQuery的数据结构有一定的了解. jQuery的核心很简单,jQuery工厂函数和jQuery对象,其他的都是各个功能模块工具函数. jQuery工厂函数主要有两个作用,生成jQuery对象和充当其他工具函数的命名空间(总不能把那些函数命名成全局函数来污染了全局变量吧). 但jQuery工厂函数不是简简单单地直接new jQuery()来生成jQuery对象,而是采用…

jquery源码学习（一）——jquery结构概述以及如何合适的暴露全局变量

jQuery 源码学习是对js的能力提升很有帮助的一个方法,废话不说,我们来开始学习啦我们学习的源码是jquery-2.0.3已经不支持IE6,7,8了,因为可以少学很多hack和兼容的方法. jquery-2.0.3的代码结构如下首先最外层为一个闭包, 代码执行的最后一句为window.$ = window.jquery = jquery 让闭包中的变量暴露倒全局中. 传参传入window是为了便于压缩传入undefined是为了undifined被修改,他是window的属性,可以被修…

【学】jQuery的源码思路4——增加一些功能

本文说一些简单的jQuery实现原理 eq() get() hide() show() index() find() //返回找到的一组元素中的第n个 zQuery.prototype.eq=function(n){ return $(this.elements[n]); }; //将jQ元素改成原生的,其实就是取出jQ取得的元素数组中的n个 zQuery.prototype.get=function(n){ return this.elements[n]; }; //隐藏 zQuery.pro…

【学】jQuery的源码思路3——添加事件及其他

这段添加的方法有: 各类事件函数 css() addEvent() toggle() //添加各种事件,将常用的事件名称放入数组,然后循环着加入到zQuery对象的原型上 var eventArr = ['click','mouseover','mouseout','mousemove','contextmenu','mouseenter','mouseleave']; for(var i=0; i<eventArr.length; i++){ //因为循环里套了一层函数,所以用函数自执行,把每…

CMDB服务器管理系统【s5day89】：部分数据表结构-资产入库思路

1.用django的app作为统一调用库的好处 1.创建repository app截图如下: 2.好处如下: 1.app的本质就是一个文件夹 2.以后所有的app调用数据就只去repository调用 3.不用每个app建立一个库 4.也避免了多个app同事修改同一条数据的冲突 2.表结构设计类 3.具体代码 from django.db import models 1.服务器信息信息表 hostname = models.CharField(max_length=128, unique=Tr…

为jquery添加扩展标准思路

jquery扩展分为对象扩展和jquery本身类扩展: 对象扩展: (function($){ $.fn.abc = function(){ console.log($(this).get(0)); } })(jQuery); 使用方法: $(function(){ $(".otherdiv").abc(); }); jquery本身类扩展: (function($){ $.extend({ showMsg:function(){ alert('some msg'); } }); })…

【学】jQuery的源码思路6——增加each,animaion,ajax以及插件机制

each() 插件机制 animation ajax //each() //这里第一个参数指定将this指向每次循环到的那个元素身上,而第三个参数element其实就是this本身所以和第一个参数是一样的,而第二个参数是每次循环的下标 zQuery.prototype.each=function(fn){ for(var i=0;i<this.elements.length;i++){ fn.call(this.elements[i],i,this.elements[i]); } }; //插件…

【学】jQuery的源码思路5——增加class的操作

hasClass, addClass, removeClass, toggleClass //addClass,加入class会对元素,利用正则,将class中多余的空格去掉 zQuery.prototype.addClass=function(sClass){ var re=new RegExp('\\b'+sClass+'\\b'); for(var i=0;i<this.elements.length;i++){ if(!re.test(this.elements[i].className…

从零实现一个简易的jQuery框架之二—核心思路详解

如何读源码 jQuery整体框架甚是复杂,也不易读懂.但是若想要在前端的路上走得更远.更好,研究分析前端的框架无疑是进阶路上必经之路.但是庞大的源码往往让我们不知道从何处开始下手.在很长的时间里我也被这种问题困扰着,自己也慢慢摸索到一个比较不错的看源码的“姿势”. 一定不推荐的就是拿到源码直接开始啃,首先我们一定要对这个框架的整体的架构有一定的了解,每个模块之间的联系是怎样的: 然后找一找有没有关于源码分析的书籍,如果有的话那么恭喜你了,你可以直接跟着书的思路开始看源码: 如果没有框架源码分析相…

解密jQuery事件核心 - 委托设计（二）

第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中对于没有特殊事件特有监听方法和普通事件都用addEventListener来添加事件了. 而又特有监听方法的特殊事件,则用了另一种方式来添加事件. 本章分析的重点: 通过addEventListener触发事件后,回调句柄如何处理? 具体来说就是,如何委派事件的,用到哪些机制,我们如果用到项目上是否能借鉴? 涉及的处理: 事件句柄的读取与处理…

jQuery笔记总结

来源于:http://blog.poetries.top/2016/10/20/review-jQuery/ http://www.jianshu.com/p/f8e3936b34c9 首先,来了解一下jQuery学习的整体思路第一节 jQuery初步认知 jQuery概述 JQuery概念 javascript概念基于Js语言的API和语法组织逻辑,通过内置window和document对象,来操作内存中的DOM元素 JQuery概念基于javascript的,同上,提高了代码的效率 j…

贫下中农版jQuery

之前写过一篇JavaScript命名空间的文章,写完后一对比对jQuery的简单使用很是惊羡,看了看人家源码,用的原理很类似啊,改进一下之前的版本,做个简易版的jQuery 之前的代码 (function () { var _NS = function () { } _NS.prototype.select = function (selector,context) { var context = context || document; return context.querySelector…

第5章 jQuery对表单、表格的操作及更多应用

本章主要是对前面4章的小结和应用. 一. 表单form应用表单分为3个组成部分 (1)form标签表单可包含文本域,复选框,单选按钮等等.表单用于向指定的 URL 传递用户数据. (2)表单域 --文本框.密码框(password),隐藏域,多行文本域(textarea),复选框(checkbox),单选框(radio),下拉框(select)文件上传框 (3)表单按钮 --提交按钮(submit).复位(reset),一般按钮(button) 1.单行文本框(input type="tex…

JQuery源码解析（十一）

内存泄露什么是内存泄露? 内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束.在C++中,因为是手动管理内存,内存泄露是经常出现的事情.而现在流行的C#和Java等语言采用了自动垃圾回收方法管理内存,正常使用的情况下几乎不会发生内存泄露.浏览器中也是采用自动垃圾回收方法管理内存,但由于浏览器垃圾回收方法有bug,会产生内存泄露常见内存泄露的几种情况 1.循环引用 2.Javascript闭包 3.DOM插入一个DOM对象被一个Javascript对象引用,与此同时又引用同…

jQuery的无new创建方法

一般我们去写一个框架,会采用什么样的设计呢?比如设计一个jQuery框架,一般我们会创建一个函数对象 function jQuery(params){ //构造函数 }jQuery.prototype.init = function(params){ //初始化操作} jQuery.prototype.html = function(html){ //实现类似设置innerHTML的操作 } var jq = new jQuery("#id"); jq.init(); jq.html(…

前端js，如何在结构化与性能中做取舍。

js发展中的问题随着前端web技术的发展,js要解决的问题也变得越来越多,越来越复杂. 解决更复杂的问题,需要更好的结构. 解决更复杂的问题,也需要更好的性能. 结构的优化在一定程度上会牺牲性能,同样的,性能的优化也有可能会破坏原有的结构. 一般化的例子我们先来看看以前这些问题是如何(被)解决(妥协)的. jquery vs 原生api 回到10年前,精通jquery是前端程序员的一个里程碑,没有人执着于原生api.原生api有更好的性能,jquery有更好的结构.但问题在于开发效率的提升,…

jQuery架构设计与实现（2.1.4版本）

市面上的jQuery书太多了,良莠不齐,看了那么多总觉得少点什么对"干货",我不喜欢就事论事的写代码,我想把自己所学的知识点,代码技巧,设计思想,代码模式能很好的表达出来,所以考虑通过分析jQuery的源码库的方式来表达,尽力做最好内容结构还在不断的修正,欢迎给出建议 ps:写了数万字,因项目太忙,暂停下 https://github.com/JsAaron/jQuery 本书围绕的几个核心点: 设计理念结构组织抽象设计模式运用场景套用第一章:理解架构 1.1 我们真正会…

jquery实现可拖拽的div

由于项目中并未引入前端开发框架easyui.ext.没有现成的控件可以使用,今天时间算是充裕的时候,自己写了一个可以拖拽.放大缩小的例子.欢迎大家指正. 不啰嗦,上代码: 依赖的文件:jquery.js 需要大家下载一个,或者找个在线的jquery 比如:http://libs.baidu.com/jquery/1.11.1/jquery.min.js 拖动思路:拖动思路很简单就是监听鼠标的mousedown和mouseup事件, 放大缩小思路: 改变div的大小,我画了个图来看下把: 依据上诉…