npm食用指南

NPM(Node Package Manager)是前端最基础的工具之一,管理着项目的依赖。但用了这么久,始终没有单独地讨论过:npm是一个怎样的系统。

Node.JS调用模块

如果没有npm,我们可能需要const <module_name> = require('./module_name.js');

但调用次数多了,这样的代码也多了,我们需要一个包管理系统替我们管理模块引用,也就是npm。

除了管理本地包,npm也提供了快速安装需要的依赖的能力,省心。

package.json

package.json位于项目根目录,定义了项目的配置信息与依赖的模块。一个完整的package.json文件是一个可能包括name,version,author,description,keywords,repository,license,browser,engines,bugs,contributors,scripts,dependencies,devDependencies等字段的json对象。

scripts支持自定义 npm run xxx 命令
dependencies/
devDependencies
项目依赖/项目开发时的依赖
main项目入口文件
config自定义scripts中命令的环境变量

npm init

npm init的作用是创建package.json文件,这个过程中终端会询问你有关这个包的信息,如果想自定义init过程,可以在用户目录下新建.npm-init.js。

const desc = prompt('description?','A new package...')//prompt用于获取用户输入

module.exports = {
  name: prompt('name?','A new project'),
  version: prompt('version?','0.1.0'),
  description: desc,
  main: 'index.js'
}

用户执行npm init后会生成包含name,version,description,main的pair(name:value)的package.json。

npm install

使用频率最高的命令,npm install的作用是安装package.json中定义的依赖。但也可以直接用npm install <package>安装某个依赖,依赖可以是文件夹,压缩文件,url,git仓库,可以用<name>@<version>或<name>@<tag>(通常是latest)指定版本。

package-lock.json

npm5才有package-lock.json,其作用是锁定依赖结构。它详细记载了每个包的版本号,安装源,内容hash,而它的json结构与node_modules的目录结构一致。这个文件保证了在任何地方执行npm install能够得到相同结果。

版本管理

semver(语义化)规范

semver指版本号格式为MAJOR.MINOR.PATCH,MAJOR指不兼容更新,MINOR指兼容的更新,PATCH指修复BUG。

npm update

升级MINOR版本

npm install <package>@<version>

升级或降级大版本

npm uninstall <package>

卸载依赖包

npm scripts

在package.json里也介绍了,定义scripts字段可以执行脚本。脚本执行时./node_modules/.bin/被添加到环境变量PATH,可以直接调用项目下安装的命令行包。需要参数时需要先在命令后加上" -- "再传入参数,如"npm run clean -- --mode="all" "。此外,脚本还可以访问process.env对象获得运行时信息。

npx

命令行包指的是可以在终端中直接调用的包,比如vue-cli和webpack。他们保存在node_modules/.bin目录中,如果不是全局安装,需要在调用的时候加上目录。

而npx的作用是,省去加上目录的烦恼,我们只需要npx <command>就可以执行脚本。

除此之外,npx支持直接执行远程二进制包(npm源,GitHub gist等),更可以跳过nvm选择node版本执行命令,如npx node@10 -e "console.log(process.version)"。

npm配置

npm config

npm config ls -l

查看npm所有配置

npm config set <key> <value>

<key>可选proxy, https-proxy(代理),registry(npm源),package-lock(是否默认生成package-lock),save(是否在npm install后保存包为dependencies,npm5开始默认为true)

npm config delete <key>

删除配置

npmrc

.npmrc文件可以存在于项目根目录,用户根目录,全局配置目录($PREFIX/etc/npmrc,可以用npm config get globalconfig输出),npm内配置文件(/path/to/npm/npmrc),优先级从前往后。

内容总结自互联网,主要参考https://juejin.im/post/5ab3f77df265da2392364341,感谢作者。

js中的const&let&var

js声明变量的方式有两种:

没有声明关键字

这种情况下变量会被自动添加到全局环境。

var

用var声明变量是最经典的方式,变量的作用域是它所在的环境(函数或对象,全局则是window对象)。但js中不存在块级作用域,花括号不会限制变量的环境,且可以重复声明。

这两种方式声明的变量会被变量提升(Hoisting),即任何函数声明都被预先放入到内存中,但仍在原来的位置初始化。


而ES6通过const与let提供了块级作用域的支持。

const

声明常量,其余与let一致。

let

拥有块级作用域:let定义的变量只能在当前块中访问,同一块中也不能用let重复声明相同的变量。

外边距折叠(Margin collapsing)笔记?

定义

外边距折叠是指有时候上边距与下边距坍缩成较大的那一个边距的行为。它只会发生在同一BFC的块级元素间,并且永远不会发生在浮动元素或绝对定位元素间。

可能的情况

毗邻的兄弟元素

相邻的兄弟元素垂直边距会发生折叠,但最后一个元素需要清除浮动时例外。

父元素和第一个/最后一个子元素

父元素与第一个子元素的margin-top可能重合,与最后一个子元素的margin-bottom可能重合。

如果要在这种情况下避免外边距折叠,请将两者的margin区分开。区分margin-top的方法有设置border、padding、inline content、清除浮动、避免创建BFC区域。区分margin-top的方法还有设置height、min-height、max-height。

空区块

如果一个块级元素没有border、padding、inline content(行内内容)、height或者min-height将其与其他元素分开,这个块级元素的margin将会被折叠。

演示

<p style="margin:4px 0 10px 0;background:yellow">下面的间隙是10px</p>
<p style="margin:4px 0 10px 0;background:yellow">上面的间隙是10px</p>

<div style="margin:16px 0 ;background:grey">
上面的间隙是16px,下面的间隙是4px
<p style="margin:4px 0 10px 0;background:yellow">下面的间隙是10px</p>
<p style="margin:4px 0 10px 0;background:yellow">上面的间隙是10px</p>
</div>

HTML演示

下面的间隙是10px

上面的间隙是10px

上面的间隙是16px,下面的间隙是4px

下面的间隙是10px

上面的间隙是10px

MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

BFC笔记?

什么是BFC

BFC(Block Formatting Context,块格式化上下文)指的是CSS布局的一块独立渲染区域。这块区域内只有Block-level box参与布局,因此会表现出一些特性。

触发BFC的常见条件

满足以下条件之一即可触发:

  • HTML元素
  • 浮动元素 float != none
  • 溢出内容不可见的元素 overflow != visible
  • 行内块元素 display = inline-block
  • 绝对定位元素 position = absolute或fixed
  • 弹性元素(flex)、网格元素(grid)的直接子元素
  • 多列容器 column-count != auto
  • display = flow-root 该属性使用flow layout布局内容,也就会创建bfc
  • contain =layout、content或 strict contain用于性能优化,layout声明外部元素与内部元素互不影响,content在layout的基础上声明子元素也不会在content-box外(padding,border,margin)显示,并且counter等具有影响其他元素能力的属性也会被隔离,strict在layout的基础上必须声明宽高,因为在此模式下子元素不能撑开父元素
  • 与表格有关的一些属性

BFC布局特性

浮动定位与清除浮动都只会影响同一个BFC内的元素。

独立的BFC区域不会被浮动元素覆盖,但可以包含。

外边距折叠(Margin collapsing)只发生在同一BFC中的块级元素间。见https://www.guohere.com/4198.html

DIY&&在线演示

http://www.cnblogs.com/xiaohuochai/p/5248536.html

RWD:viewport笔记

来由

Apple为了让网页在iphone上显示而设计的meta tag。尚未列入W3C标准但已得到主流浏览器支持。

示例

<meta name="viewport" content="width=device-width, initial-scale=1">

含义

visual viewport指的是浏览器可视区域,这里的宽高可以通过window.visualViewport查询,但不总是等于window.innerHeight和window.innerWidth,因为存在device pixel ratio(设备像素比)。

layout viewport指整个网页区域,包括可视区域外的网页内容。

比如retina屏幕上的像素比是2,那么对css来说,渲染宽度/高度只有物理宽度/高度的一半,四个物理像素对应一个渲染像素。

属性

width

设置layout viewport的宽度,可以取device-width或具体像素值,默认值等于980。

height

设置layout viewport的高度,可以取device-width或具体像素值,默认值与aspect ratio(纵横比)有关。

user-scalable

规定用户能否缩放网页,可以取yes/no,分别对应user-zoom的zoom和fixed。如果用数字赋值,zoom对应[-1,1],fixed对应实数集的余下部分。

initial-scale

设置页面初始缩放比率,可以取小数,默认值fit to screen。

minimum-scale

规定最小缩放比率,可以取小数,默认值0.25。

maximum-scale

规定最大缩放比率,可以取小数,默认值1.6。

CSS media query breakpoint

由viewport划定了渲染像素后,CSS媒体查询断点才能工作正常。以下样式表仅对渲染宽度小于等于720的设备有效。

@media screen and (max-width: 720px){
    body { background: grey;}
}

用webfont为你的网站添加图标

有些网站的图标不存在对应的图片文件,也并非通过js画图,它们的CSS长这样:

h2::before{

content:'\e942'

}

实际上e942是这个字符的16进制unicode编码,在unicode编码中,E000-F8FF是用户自定义区,形状可以任意制定。如果我们向网站引入自定义后的字体,就可以用上面的方式显示图标了。

css引入webfont:

@font-face {

font-family:;/**相当于变量名,可以自己定义,如果元素中的font-family对应这里,@font-face为这些元素定义了字体族,他们将使用src定义的字体**/

src:;/**使用的字体,可以是local("font名称")或者url("url地址"),支持多个来源**/

}

@font-face还可以为不同格式、不同字重的文字匹配字体,也可以为特定字符匹配特定字体,想了解更多可以参考:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face

那么,到哪里去生成自定义字体呢?下面推荐3个相关网站:

IcoMoon App
Ionicons: The premium icon font for Ionic Framework
Fontello - icon fonts generator

想了解更多关于css插入图标的细节,参阅:

https://www.cnblogs.com/zccst/p/3655069.html

php展示当前目录下文件

挺简单的一个文件,耗时一两个小时看UIkit文档以及熟悉了下php的相关函数,该文件配合伪静态规则可以实现通过浏览器查看下载文件。UIkit好看。

<?php 
$files;
class fileinfo
{
    public $filename;
}
$handler = opendir(__DIR__);
while(($filename=readdir($handler))==true){
    if($filename=="." || $filename=="..")continue;
    $temp=new fileinfo();
    $temp->filename=$filename;
    $temp->filedate=date('r',filemtime(getcwd().'/'.$filename));
    $temp->filesize=filesize(getcwd().'/'.$filename);
    $files[]=$temp;
    
}
closedir($handler);
echo '<div class="uk-card uk-card-body uk-card-default" style="margin:20px"><table class="uk-table uk-table-divider">
<thead>
    <tr>
        <th>文件名</th>
        <th>修改时间</th>
        <th>文件大小</th>
    </tr>
</thead>
<tbody>';
echo '<tr><td><a class="" href="../">..</a><br></td><td></td><td></td></tr>';
foreach($files as $fileinfo){
    echo'<tr>';
    echo '<td><a class="" href="'.$fileinfo->filename.'">'.$fileinfo->filename.'</a></td>';
    echo '<td>'.$fileinfo->filedate.'</td>';
    echo '<td>'.$fileinfo->filesize.'bytes</td>';
    echo'</tr>';
}
echo '    </tbody>
</table></div>';
echo '<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script>';

?>

http://demo.guohere.com/files/

unsyntactic break/continue

从unsyntactic可以看出来,这个报错其实是异步导致的。

使用jsonp请求的时候不知道它是异步的,于是我在for循环内发送jsonp请求。而我也在promise对象的then方法内写了continue,由于promise是异步的,触发break的时候循环可能已经执行完了,所以break与continue就不能用(在then方法中)了。

根据第一个请求结果决定发送第二个请求的场景,看来需要写到then方法里了。

说到js异步,我们来看一下async函数:

async function refresh(){
console.log(1);
var reply = await getData();
console.log(2);
return reply;
}

refresh().then(function(re){console.log(re)});

这段代码会先输出1,遇到await时等待getData()执行完后输出2,最后执行回调函数。

这么做有什么用呢?比如在等待getData完成的时候(通常网络请求耗时较长),该函数由于await交出了程序执行权,程序就不用等了,可以先执行下面的代码。

之所以能够这么顺利地交出执行权,是因为refresh()实际上在遇到await的时候先返回了一个promise对象,并且async函数自带执行器,待getData完成又能够继续执行函数。

async函数是属于es7的语法,但babel已经支持,实质上是对generator函数和自动执行器的包装。想了解更多可以访问下面的链接:

http://www.ruanyifeng.com/blog/2015/05/async.html