blog
blog copied to clipboard
nanyang24
📒 Yang's Notes & Blog
## 木桶布局 ### 大致思路 每行的高度大致相等，不是完全相等，图片的宽度是不等的。 实现这种布局的思路是： 1， 首先获取图片原本的宽高比，定一个基本高度。通过图片原本的宽高比*基本高度获取到图片高度为基本高度时的宽度。 2. 有了图片宽度后，计算每行能放下几张图片，一般每行不可能正好放下整数张图片，所以当第一行的最后一张图片放不下时，就放在第二行，第一行就会剩余一些空间，这时候用该行所有图片宽度之和/基本高度 = 总宽度/x这个公式，算出的x值就是该行的高度，当高度一变，图片的宽度自然就发生变化，充满整行。 ### 具体实现： - getImgUrls : 得到每个img的url组成的数组 - loadImg ： 遍历得到的urls数组，每个图片都生成一个对象，对象的属性是其中的url 待每个img都load完成，获取它的宽度和高度，计算宽高比，再封装一个对象imgInfo，宽度是预期高度200px乘以宽高比，高度是预期高度。传入render函数渲染 - render ： 得到每个图片的imgInfo，将imgInfo推入rowList数组，遍历rowList数组，将每一项宽度累加至rowWidth。 如果rowWidth大于了容器宽度，就把上一个加入的imgInfo删除，rowWidth也删除此次加入的宽度，并计算现在高度rowHeight应该等于容器宽度乘以理想高度除以现在的rowWdith。并将rowHeight传入layout函数，再将rowList数组清空，将刚删去的imgInfo加入 - layout...
# JavaScript template engine # 模板引擎 ## 概念 模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档 ## 使用原因 前端模板引擎出现之前，在需要用js渲染页面的情况下，我们一般会通过js将数据和生成结构绑定。例如： ``` var html = ""; for(var i =0;i/g; ``` 这句正则表达式会捕获所有以结尾的片段。末尾的参数g（global）表示不只匹配一个，而是匹配所有符合的片段。 而且我们需要的是根据正则表达式输出一个数组，包含所有的字符串，这正是exec所做的。 ``` var re = /]+)?%>/g; var match...
## Waterfall Flow 实现瀑布流的三种方法，我目前知晓的有 - 1、绝对定位布局：关键是取得图片的高度，然后依次绝对定位每张图片(top、left)，这种方法是目前用的比较多，因为要一直算定位，所以性能不高； - 2、固定列数的浮动布局：加载页面时取页面宽度，算出可以有的列数，然后依次给每列插入图片，像发扑克牌一样，这种方法不用知道高度，比上一种方法简易； - 3、利用CSS3列(column)布局：这个最省事，不过兼容是个问题； ## 绝对定位布局 - 1.先计算当前屏幕最多能容纳几列瀑布，其值为 "取整(屏幕可见区域宽度/(格子外宽度) - 2.为了保证容器的居中，将容器的宽度设置为 列数* (格子外宽度)，这里需要注意的是 当容器的宽度计算出来之后再显示，否则会造成页面宽度的抖动，影响体验。 - 3.排序开始，然后每次寻找高度最小的一列，把格子放进去（left值为列序号*格子外宽度，top值为 列序号的高度），并刷新列的高度，遍历所有格子直到所有的格子都被排序。再将事件句柄绑定到window.onload和window.onresize ### 注意点 - 1.当缩放浏览器窗口时会不断地触发事件，如果每次都响应的话会狂耗性能，需要在缩放动作结束后再执行重排方法。 - 用setTimeout和clearTimeout解决 -...
## 题目1： 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()） play()可以设置传不同类型的参数执行不同的函数 比如boolean时的true执行下一张，false执行上一张 如果传具体的参数，将跳转至相应索引的图片 ### 左右滚动无线循环轮播 思路是使用js复制clone第一个图和最后一个图，分别放到父元素内的最后一个和第一个。 当右滚动至最后一图的时候，js切换成原来的第一个图，左滚动切换成原来的最后一张图。 ### 渐变效果的无限循环轮播 实际比上一个实现起来简单，因为不用去计算不同索引的具体位置。简单的控制fadein或out就可以了。 图片都设置默认不显示，初始化只有第一张显示，js控制渐变，当滚动下一张的时候，将此时的图fadeOut，下一张图fadeIn，具体的索引index使用index%=图片的个数来获得，另外jq对象的eq()支持负数，所以实现起来更简单。 还有很多细节，具体审查元素代码 ## 题目2： 实现视频中的左右滚动无限循环轮播效果 https://nanyang24.github.io/practice/slideshow/slideshow-slide.html ## 题目3： 实现一个渐变轮播效果 https://nanyang24.github.io/practice/slideshow/slideshow-fadeout.html
## 懒加载 ### 懒加载也就是延迟加载。 当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 ### 为什么要使用懒加载? 很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。 ### 懒加载的原理是什么? 页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。 懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置； ### 懒加载的实现步骤? 1)首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中。 2)页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。 3)在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。 ### 懒加载的优点是什么? 页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好 --- ## 题目1：如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现 ``` function isVisible($node){ var scrollTop =...
## 常用方法 ### .each( function(index, Element) ) 遍历一个jQuery对象，为每个匹配元素执行一个函数 ``` $( "li" ).each(function( index ) { console.log( index + ": "" + $(this).text() ); }); jQuery.each( collection, callback(indexInArray, valueOfElement) ) ```...
## jQuery 为什么要用 jQuery - 消除浏览器差异：你不需要自己写冗长的代码来针对不同的浏览器来绑定事件，编写AJAX等代码； - 简洁的操作DOM的方法：写$('#test')肯定比document.getElementById('test')来得简洁； - 轻松实现动画、修改CSS等各种操作。 jQuery的理念`“Write Less, Do More“`，写更少的代码，完成更多工作！ ### jQuery版本 目前jQuery有1.x和2.x两个主要版本，区别在于2.x移除了对古老的IE 6、7、8的支持，因此2.x的代码更精简。选择哪个版本主要取决于你是否想支持IE 6~8。 从jQuery官网可以下载最新版本。jQuery只是一个jquery-xxx.js文件，但你会看到有compressed（已压缩）和uncompressed（未压缩）两种版本，使用时完全一样，但如果你想深入研究jQuery源码，那就用uncompressed版本。 ### $符号 \$是著名的jQuery符号。实际上，jQuery把所有功能全部封装在一个全局变量jQuery中，而\$也是一个合法的变量名，它是变量jQuery的别名 $本质上就是一个函数，但是函数也是对象，于是\$除了可以直接调用外，也可以有很多其他属性。 注意，你看到的\$函数名可能不是jQuery(selector, context)，因为很多JavaScript压缩工具可以对函数名和参数改名，所以压缩过的jQuery源码$函数可能变成a(b, c)。 绝大多数时候，我们都直接用\$（因为写起来更简单嘛）。但是，如果\$这个变量不幸地被占用了，而且还不能改，那我们就只能让jQuery把\$变量交出来，然后就只能使用jQuery这个变量。 这种黑魔法的原理是jQuery在占用$之前，先在内部保存了原来的$,调用jQuery.noConflict()时会把原来保存的变量还原 ##...
## 理解与使用JavaScript中的回调函数 在JavaScript中，函数是第一类对象，这意味着函数可以像对象一样按照第一类管理被使用。既然函数实际上是对象：它们能被“存储”在变量中，能作为函数参数被传递，能在函数中被创建，能从函数中返回。 因为函数是第一类对象，我们可以在JavaScript使用回调函数。在下面的文章中，介绍关于回调函数的方方面面。回调函数可能是在JavaScript中使用最多的函数式编程技巧。 回调函数是从一个叫函数式编程的编程范式中衍生出来的概念。简单来说，函数式编程就是使用函数作为变量。函数式编程过去 - 甚至是现在，依旧没有被广泛使用 - 它过去常被看做是那些受过特许训练的，大师级别的程序员的秘传技巧。 # 什么是回调or高阶函数 一个回调函数，也被称为高阶函数，是一个被作为参数传递给另一个函数（在这里我们把另一个函数叫做otherFunction）的函数，回调函数在otherFunction中被调用。一个回调函数本质上是一种编程模式（为一个常见问题创建的解决方案），因此，使用回调函数也叫做回调模式。 下面是一个在jQuery中使用回调函数简单普遍的例子： ``` /注意到click方法中是一个函数而不是一个变量 //它就是回调函数 $("#btn_1").click(function() { alert("Btn 1 Clicked"); }); ``` 正如你在前面的例子中看到的，我们将一个函数作为参数传递给了click方法。click方法会调用（或者执行）我们传递给它的函数。这是JavaScript中回调函数的典型用法，它在jQuery中广泛被使用。 下面是另一个JavaScript中典型的回调函数的例子： ``` var friends = ["Mike",...
## Ajax 浏览器与服务器之间，采用HTTP协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出HTTP请求。 具体来说，AJAX包括以下几个步骤。 1. 创建AJAX对象 2. 发出HTTP请求 3. 接收服务器传回的数据 4. 更新网页数据 概括起来，就是一句话，AJAX通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理。 AJAX可以是同步请求，也可以是异步请求。但是，大多数情况下，特指异步请求。因为同步的Ajax请求，对浏览器有“堵塞效应”。 ## XMLHttpRequest对象 XMLHttpRequest对象用来在浏览器与服务器之间传送数据。 ## XMLHttpRequest实例的属性 ### 1. readyState `readyState`是一个只读属性，用一个整数和对应的常量，表示XMLHttpRequest请求当前所处的状态。 - 0，对应常量UNSENT，表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。 1，对应常量OPENED，表示send()方法还没有被调用，仍然可以使用`setRequestHeader()`，设定HTTP请求的头信息。 2，对应常量HEADERS_RECEIVED，表示send()方法已经执行，并且头信息和状态码已经收到。 3，对应常量LOADING，表示正在接收服务器传来的body部分的数据，如果`responseType`属性是text或者空字符串，`responseText`就会包含已经收到的部分信息。 4，对应常量DONE，表示服务器数据已经完全接收，或者本次接收已经失败了。 在通信过程中，每当发生状态变化的时候，`readyState`属性的值就会发生改变。这个值每一次变化，都会触发`readyStateChange`事件。...
## 闭包Closure 在我认为闭包这个东西其实是我们把他魔鬼化了。。。一开始我也不明白是什么概念，各种网上博客把它形容的玄之又玄，感觉自己还是没能理解。后来慢慢体悟到闭包不是我们不懂它的原理，而是不懂闭包这个词的含义。 简单粗暴的说就是： - 闭包：在爷爷的环境中执行了爸爸，爸爸中返回了孙子，本来爸爸被执行完了，爸爸的环境应该被清除掉，但是孙子引用了爸爸的环境，导致爸爸释放不了。 ### 基础概念 - 什么是闭包? 简单来说，闭包是指可以访问另一个函数作用域变量的函数，一般是定义在外层函数中的内层函数。 - 为什么需要闭包？局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。 - 特点 占用更多内存 不容易被释放 - 何时使用？ 变量既想反复使用，又想避免全局污染 - 如何使用？ 1.定义外层函数，封装被保护的局部变量。 2.定义内层函数，执行对外部函数变量的操作。 3.外层函数返回内层函数的对象，并且外层函数被调用，结果保存在一个全局的变量中。 > 参考 [阮一峰的网络日志](http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html) [方方讲 JS...