![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 72
lizzvia
这个作者很懒,什么都没留下…
展开
-
工具学习——webpack 项目打包
webpack是一个专注于打包的工具。也就是把许多零碎的文件组合在一起,达到前端优化的效果。 打包原理 确定入口文件:即所有程序的入口 获取依赖:核心功能,分析依赖的顺序,并将各个文件按照依赖关系依次打包下去。 确定出口文件:一般打包都是输出一个文件,但也有打包成多原创 2016-09-06 11:25:33 · 1367 阅读 · 0 评论 -
jQuery学习——clickoutside应用
自定义clickoutside事件,使得点击绑定元素之外的位置可以执行handler。这个方法可以用event.special来实现,方法如下 (function($){ var elems = $([]); $.event.special.clickoutside = { setup: function(){ var elem = $(this);原创 2016-11-11 19:41:58 · 2222 阅读 · 0 评论 -
javascript学习——constructor、prototype、_proto_的区别
constructor:始终指向当前对象的构造函数var arr = [1,2,3];alert(arr.constructor); // function Array()function A(){};var a = new A();alert(a.constructor); // function A()prototype: 是函数对象具有的属性,叫做原型对象。一旦原型对象赋予了原创 2016-12-15 16:38:56 · 384 阅读 · 0 评论 -
javascript学习——浏览器嗅探优化技术
思路一:延时加载在使用的时候再判断该用哪个方法,并且在判断完了之后改写函数。之后再调用的时候,可以按照检测之后得结果进行操作。var addHandler = function(target,eventType,handle){ if(target.addEventListener){ addHandler = function(target,eventType,han原创 2017-01-12 10:25:32 · 760 阅读 · 0 评论 -
自动化构建工具学习——fis3
FIS3是什么?:FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。配置文件:默认fis-config.js常用命令:fis3 release -d : 构建发布版本到 地址fis3 inspect: 查看文件分配的属性,即在fis.match(sel原创 2017-03-27 16:41:45 · 304 阅读 · 0 评论 -
javascript组件——lazyload
前言:lazyload是一个懒加载的基于jquery的懒加载的库。实现原理:实现原理是在当图片不在视图区域内时,用一个class lazy标识图片,先将该图片的src置为空,把真正的url放到一个自定义属性里面。当检测到该图片需要被展示时,获取自定义属性里真正的url,修改到src里面,实现图片的懒加载。基于lazyload的实现原理,写了一个demo。以下为代码分析:缺省配置原创 2017-03-28 11:32:41 · 589 阅读 · 0 评论 -
模块化学习——AMD
模块化的由来: 随着前端业务越来越庞大,javascript代码的体量和职责也越来越大。由于javascript语言本身的特性没有继承和封装的概念,因此需要一种规范来约束js代码块的功能职责,使之完成自己的职责,同时不会对其他的部分造成污染。前端模块化的想法应运而生。模块化的定义: 模块就是实现特定功能的相互独立的一组方法。模块化的意义: 开发者能够随心所原创 2017-04-07 18:27:27 · 818 阅读 · 0 评论 -
javascript事件监听机制(二)——jquery的Event对象
jQuery封装了浏览器的事件监听方法,兼容了各个浏览器的区别,对外提供一套适合于jquery对象的事件监听接口。Event对象的核心方法主要有三个,add,remove和trigger。elem对于事件的维护,是通过在elem的内部空间里(_data访问的),用一个events对象来实现的{ events:{'click':handleObj, 'focusin':handleObj原创 2017-04-08 12:19:14 · 5391 阅读 · 0 评论 -
underscore.js源码学习——_.template()
前言:随着前端业务量的增长,页面的需求量越来越大。但是很多时候,页面的结构很多时候大同小异,区别在于数据量不同。因此借用mvc的思想,渲染模版和数据分离,即为前端的模版话。因此前端的模版在于,定义模版结构,和数据源。解析模版,把数据昂儒需要的地方,生成正常的html文档,然后插入到页面之中。一句话就是:模版+数据 ——(模版引擎) = html文档。引擎原理: 引擎要原创 2017-03-30 10:47:46 · 1344 阅读 · 0 评论 -
ES6学习——class到底是个啥
引言:在重新看红宝书的时候。复习到面向对象的程序设计这一章节,重温了一下对象,原型,属性这三个核心概念和用法。顺便想到,在ES6中,可以通过class这一个关键字,用一种清爽的方式来定义一个类(实际上是一个对象,但是在语义上当做一个class)。所以实际上,class实现了构造一个对象的语法糖。ES5是怎么样的?在es5的时候,定义一个对象的方法是:function Circl原创 2017-09-13 11:28:41 · 540 阅读 · 0 评论 -
javascript学习——数据表示和内存
引言:大家都知道在js语言中,只有基本数据类型boolean,Number,String,Null和Undefined,其他的都是对象。v8 和JavascriptCore数据管理的思路相似,都是通过使用句柄Handle来操作数据。句柄是大小固定的指向空间。在32位平台中是4 Byte。其中基本类型,直接把数据存放在句柄中即可,而对于引用类型,句柄中存放的是指针,具体的内容存放在堆中。句柄原创 2017-09-13 17:26:46 · 287 阅读 · 0 评论 -
jQuery源码学习——event.special用于执行异步任务的实践
该内容翻译自http://benalman.com/news/2010/03/jquery-special-events/ 在页面执行任务的一个确切的时间点上,所有绑定的click事件需要暂时的disabled掉。这种技术在执行异步任务的时候非常管用。比如说当提交表单的时候,不希望用户在任务完成之前意外的再次提交任务。 有一种优雅的做法,是使用special的add方法,这个方法将在每原创 2016-11-11 18:57:39 · 402 阅读 · 0 评论 -
javascript学习——高阶函数的几种常见应用
1、curring:部分求值。一个curring的函数会接收一些参数,接受了参数之后的该函数并不会立即求值,而是继续返回一个函数,并把之前传入的参数保存在闭包里面。等到函数真正需要求值的时候,之前传入的所有参数会一次性的用于求值。var curring = function(fn){ var args = []; return function(){ if(argument原创 2016-10-30 18:58:02 · 838 阅读 · 0 评论 -
jquery源码——jquery.fn.access()函数
这个函数是一个抽象的方法,很多对外暴露的方法,最终都调用这个方法。access: function( elems, fn, key, value, chainable, emptyGet, pass ) { var exec, bulk = key == null, //是不是传了key进来 i = 0, length = elems.length; // Sets原创 2016-10-21 19:40:18 · 344 阅读 · 0 评论 -
javascript学习——订阅发布抽象类
var Event = (function(){ var global = this, Event, _default = 'defalut'; Event = function(){ var _listen, _trigger, _remove, _slice原创 2016-10-13 17:31:21 · 253 阅读 · 0 评论 -
javascript组件——可拖拽模态框
可拖拽模态框,根据项目需求在模态框中生成一个map。后续将抽象出contentArea部分var Shamen = (function(global,$,echarts){ var defaults = { dragHandle:null, } var html = { ovl : '' + '' + '', title原创 2016-10-13 17:33:47 · 545 阅读 · 0 评论 -
jQuery源码——find函数
jQuery的全局方法find()作用是对调用的jquery对象中,查找是否有满足selector的节点.代码如下find: function( selector ) { //在已生成的DOM中按照selector查找对应元素 var i, l, length, n, r, ret, self = this; if ( typeof selector !== "string"原创 2016-10-24 18:57:39 · 2945 阅读 · 0 评论 -
jquery源码——buildFragment
buildFragment是在context上,根据args创建一个div区域。核心部分是调用了clean部分。但是buildFragment添加了cache的部分。如果能cache的话,则直接返回创建好的。具体情况加下:jQuery.buildFragment = function( args, context, scripts ) { //传入的html代码段(好几段),上下文,是否有原创 2016-10-24 19:23:07 · 271 阅读 · 0 评论 -
javascript学习——js版快排
QuickSort:function(array){ if(array.length <=1) return array; var pivotIndex = Math.floor(array.length / 2); var pivot = array.splice(pivotIndex,1)[0]; var left = [],right = [];原创 2016-10-14 10:06:21 · 312 阅读 · 0 评论 -
jQuery源码——extend()函数
jQuery.extend = jQuery.fn.extend = function() { var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {}, //传来的第一个参数是要合并的对象 i = 1, length = arguments.length, //要合并的对象个数 d原创 2016-10-25 16:17:32 · 216 阅读 · 0 评论 -
jquery源码分析——clean(elems,context,fragment,scripts)
目的:获取html代码段,生成DOM元素。流程:1、修正context为正确的文本对象 2、生成一个临时的div框,作为包裹必要的父对象。 3、处理传入的元素数组,处理之。 4、将处理好的元素数组安放在div里面。并且针对各个浏览器的特性进行适当的修正 5、如果传入了一个fragment,则原创 2016-10-16 19:56:22 · 267 阅读 · 0 评论 -
javascript组件——按thead排序的table
/** * options need table title,thead,rowData,$root * generated by dx */var TableGenerator = (function(global,$){ var testIntNum = / ^[0-9]*$/g, testFloatNum = /^[1-9]\d*.\d*|0.\d*[1-原创 2016-10-28 16:38:45 · 612 阅读 · 0 评论 -
【angular5】浅谈angular5与serviceWorker——(2)
上一篇文章介绍了serviceWorker是什么以及如何在项目中使用serviceWorker,这一篇着重分析ngsw-worker.js的结构,具体的缓存策略是如何实现的。 一切要从一个中介者开始。ngsw-worker定义了一个Driver,负责worker的初始化,版本更新管理,事件的监听和任务调度。 源头是一个driverclass Driver{ constru...原创 2018-09-16 17:15:00 · 745 阅读 · 0 评论