javascript 中有关于回调函数的详细深入解读
什么是回调函数
把一个函数当做实参值传递给函数的形参变量(或者传递给函数,通过arguments获取),在另外一个函数中把传递的函数执行,这种机制叫做回调函数机制
反思在某一个函数的某一个阶段需要完成某一件事情(而这件事情是不确定的)都可以利用回调函数机制,把需要处理的事情当做值传递进来
function fn(num, callBack) {
//=>callBack:传递进来的回调函数
typeof callBack === 'function' ? callBack():null;
//callBack && callBack(); //=>这种方式默认就是,要不然不传参数,传递的话参数值肯定是函数
}
fn(10);
f...
点我阅读更多...margin兼容之margin-top的传递问题
两个盒子嵌套,如果给里面的盒子设置margin-top的话,这个margin-top会传递到外层盒子上,使得外层盒子具有margin-top 而里面盒子没有margin-top:
解决方案:
给外层盒子加 overflow:hidden; 属性
在某些情况下可以 设置内层盒子的 padding-top代替 margin-top
为外层盒子设置一个透明的上边框border-top:transparent 1px solid;
为外层盒子设置一个 padding-top: 1px;
为外层盒子设置 display: inline-block;
为外层盒子或者内层盒子设置position:absolute;
点我阅读更多...call apply bind的区别
在js中,所有函数在执行的时候都会默认传入两个参数,一个是this,一个是arguments。在默认情况下this都是指向当前调用函数的对象的。但是有时候我们需要改变this的指向,也就是说使函数可以被其他指定的对象来调用。这时候我们就需要用到call,apply和bind了。
call,apply和bind方法的来历
在js中所有的函数都是Function的实例,而且对于Function来说,它的原型即Function.prototype中含有很多东西,其中call,apply和bind方法就是Function原型中的方法,所以根据原型的规则,所有的函数都可以使用原型中属性和方法,所以来说,对于所有的函数都可以使用call,apply和bind方法。简单一句话:call,appl...
点我阅读更多...webpack 学习笔记
开始
安装webpack
先全局安装
npm install webpack -g
然后本地安装,安装到node_modules并安装到了依赖列表里
npm install webpack --save-dev(开发依赖)
创建
index.html
entry.js
webpack ./entry.js bundle.js
模块依赖 webpack会分析入口文件,解析包依赖关系的各个文件
这些文件(模块)都打包到bundle.js文件中
webpack会给每个模块分配一个唯一的id并通过这个id索引和访问模块
页面启动时先执行entry.js 代码,其他的模块会在require时依赖加载
加载css文件
安装loader:
npm inst...
点我阅读更多...koa 学习笔记
##开始
就像官网上说的,一切框架都从一个”Hello World”开始,首先我们新建一个 package.json,内容尽量简单:
{
"name": "koa-note",
"description": "Koa 学习笔记",
"main": "index.js"
}
然后 npm 安装 Koa
npm i koa
将官网上给的示例粘贴进去:
const Koa = require('koa');
const app = new Koa();
app.use(ctx => {
ctx.body = 'Hello World';
});
app.listen(4000);
然后执行 node –harmony index.js,就可以...
点我阅读更多...栅格化流式布局
使用方法
javascript { .theme-peacock }
\<div class="c-row">
\<div class="c-span3">3n</div>
\<div class="c-span9">9n</div>
\</div>
\<div class="c-row">
\<div class="c-span6">6n</div>
\<div class="c-span6">6n</div>
\</div>"
全局样式组件,可直接使用。
12列栅格系统,由父元素”c-row”及子元素...
点我阅读更多...栅格化布局rem布局
REM简介
rem是相对于html元素font-size的一个单位。如果html上定义了font-size:100px;,则无论在任何地方都是1rem = 100px。这个大小不会受到父元素的影响。
我们统一针对不同宽度的设备修改基准font-size值。当遇到需要适应页面大小的元素,都可以使用rem为单位来定义。
基准规则
|屏幕宽度 | font-size | 典型设备 |
|—| | |
| 大于360px | 100px | ip6/6s/6p |
| 不大于360px | ip4/5/5s | Nexus 5|
定义页面基准font-size为100px,当屏幕宽度小于等于360px时,基准值变为90px,即所有使用rem单位的元素按0.9倍缩小。
注意:由于rem单位...
点我阅读更多...