Oct1a
响应式布局的实现方法

设置Meta标签

首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这段代码的几个参数解释:

width = device-width:宽度等于当前设备的宽度

height = device-height:高度等于当前设备的高度

initial-scale:初始的缩放比例(默认设置为1.0)  

minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)    

maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)   

user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面) 
Npm包管理

CommonJS包规范是理论,NPM (Node Package Manager) 是其中一种实践。对于Node而言,NPM帮助其完成了第三方模块的发布、安装和依赖等。借助NPMNode与第三方模块之间形成了很好的一个生态系统。

## 查看版本
    • npm –v
## 帮助说明
    • npm
## 查看所有模块的版本
    • npm version
## 搜索模块包
    • npm search 包名
## 下载当前项目所依赖的包
    • npm install
## 在当前目录安装包
    • npm install 包名
## 全局模式安装包(全局安装的包一般都是一些工具)
    • npm install 包名 –g
## 安装包并指定版本
    • npm install 包名@1    |-这里会下1.几版本的最新版本,也可以指定详细版本1.2.4....-|
## 安装包并添加到生产依赖中(dependencies)
    • npm install 包名 –save 简写:-S
## 安装包并添加到开发依赖中(devDependencies)
    • npm install 包名 –save-dev 简写:-D
## 删除一个模块
    • npm remove 包名
## 从本地安装
    • npm install 文件路径
## 从镜像源安装
    • npm install 包名 –registry=地址
## 设置镜像源
    • npm config set registry 地址
## 初始化项目
    • npm init
## 用户登录 (本机第一次发布包)
    • npm adduser
## 用户登录 (非第一次发布项目)
    • npm login
## 上传该项目
    • npm publish

NPM 包的引入机制


通过npm下载的包,直接通过包名引入即可。node在使用模块名称来引入模块时,它会先在当前目录的node_modules中寻找是否含有该模块。如果有则直接使用,如果没有则去上一级目录的node_modules中寻找,如果有则直接使用,如果没有则再去上一级目录寻找,直到找到磁盘的根目录,如果依然没有,则报错。

NPM 本地仓库地址配置


  1. 配置本地仓库地址 在指定目录创建node_globalnode_cache

  2. 运行配置指令

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

NPM 基本配置命令


  1. 检测本地仓库 npm list -global

  2. 配置镜像站 npm install -g cnpm --registry=https://registry.npm.taobao.org npm config set registry https://registry.npm.taobao.org

    npm config set registry http://registry.npmjs.org

  3. 查看c盘配置文件仓库地址 C:\Users\Administrator\.npmrc

  4. 添加新的环境变量 环境变量NODE_PATH内容是:D:\nodejs\node_global\node_modules

  5. 编辑环境变量PATH D:\nodejs\node_global

package 文件代码解析


{
  "scripts":{}, // 包命令
  "name": "myName",    // 包的名字
  "version": "1.x.1",    // 包的版本
  "description": "description",    // 包的描述
    "homepage": "www.xxx.com",    // 包的官网url
  "dependencies": {...},    // 生产依赖环境
  "devDependencies": {...},    // 开发s依赖环境
  "repository": {...}, // 包代码的Repo信息
  "main":"./...",    // main 字段指定了程序的主入口文件
  "keywords":"xx" // 关键字
}

JS 中引入NPM 包


// node.js语法:require('包名')
var math = require('math')
console.log(math.add(123,456))
// ES6语法:import xxx from '包名'
var xxx from 'math'

开发 npm 命令行工具


# 初始化项目
npm init

# 修改 package.json 中bin字段
"bin": {
    "open-dev": "./index.js"
}

# 新建 index.js
#!/usr/bin/env node
console.log('open-dev')
# `#!/usr/bin/env node` 的意思是让系统自己去找node的执行程序,该行必不可少。

# 执行 npm link
npm link

# 运行脚手架工具
git-tool

# index.js 中 process.argv 可用来获取命令行参数
#!/usr/bin/env node
console.log('open-dev')
console.log(process.argv) # ['...', '...', ....]

commander.js 的使用


完整的 node.js (opens new window) 命令行解决方案,可以用于开发脚手架工具的使用。

命令行指令基本使用

#!/usr/bin/env node
const program = require('commander')
// 配置命令
program.option('-d, --debug', '开启调试模式')
// 读取命令行参数
program.parse(process.argv)
// 判断命令行参数
if (program.debug) {
    console.log('已开启调试模式....')
}
// 命令行运行 `open-dev -d`

命令行指令携带参数

#!/usr/bin/env node
// 配置命令, 携带值 <type>
program.option('-r, --run <type>', '开启微信开发者工具')
// 读取命令行参数
program.parse(process.argv);
// 判断命令行参数
if (program.run) {
  // 读取传入值
  const type = program.opts().run
  console.log(type)
}
深入了解JSON.stringify的使用

用过 json 的应该都知道,把一个对象通过 stringify 之后提交给后台是很常用的手段。但是 IE6-7 下没有 JSON 对象,所以要借助 json2.js 来实现。

JSON.stringify(value[, replacer[, space]])

1.经典用法 value

 var data = [
     {name: "悟空", sex:1, age: 30},
     {name: "八戒", sex:0, age: 20},
     {name: "唐僧", sex:1, age: 30}
 ];//JavaScript数组中包含对象
//将JavaScript对象转换为JSON格式的字符串
var str_json = JSON.stringify(data);
console.log(str_json);
//运行结果为:
//[{"name":"悟空","sex":1,"age":30},{"name":"八戒","sex":0,"age":20},{"name":"唐僧","sex":1,"age":30}]

2.复杂数据的提取 replacer

比如说,我们的数据非常复杂,还有类似头像,昵称,个人签名之类的信息。可是我保存在本地,只需要用户名和性别,如果操作呢?我们可以通过提供的第二参数搞定,遍历数据重新提取下即可。

a.传统方式提取数据思路

var data = [
    {name: "悟空", sex:1, age: 30},
    {name: "八戒", sex:0, age: 20},
    {name: "唐僧", sex:1, age: 30}
];
//传统方式提取数据
var new_data = [];
for (var i=0, new_data=[]; i<data.length; i++) {
    //构建行的数组
    new_data.push({
        name: data[i].name,
        sex:  data[i].age
    });
}
var str_json = JSON.stringify(new_data);
console.log(str_json);

b.使用stringify的第二参数搞定提取数据

var data = [
    {name: "悟空", sex:1, age: 30},
    {name: "八戒", sex:0, age: 20},
    {name: "唐僧", sex:1, age: 30}
];

var str_json = JSON.stringify(data,["name","age"]);
console.log(str_json);
//运行结果
//[{"name":"悟空","age":30},{"name":"八戒","age":20},{"name":"唐僧","age":30}]

第二个参数只要传入需要的keys数组,就非常轻松的就完成这种处理了。

当然如果我们要更纠结的处理,比如要把 1,0 修改为男女,那么第二个参数可以用回调函数来处理。

var data = [
    {name: "悟空", sex:1, age: 30},
    {name: "八戒", sex:0, age: 20},
    {name: "唐僧", sex:1, age: 30}
];

var str_json = JSON.stringify(data,function (key, value) {
    if(key==="sex"){
        return ["男生","女生"][value];
    }
    return value;
});
console.log(str_json);
// [{"name":"悟空","sex":"女生","age":30},{"name":"八戒","sex":"男生","age":20},{"name":"唐僧","sex":"女生","age":30}]

3.第三个参数space

参数可选,文本添加缩进、空格和换行符,如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格。space 也可以使用非数字,如:\t。

var data = [
    {name: "悟空", sex:1, age: 30},
    {name: "八戒", sex:0, age: 20},
    {name: "唐僧", sex:1, age: 30}
];

var str_json = JSON.stringify(data,["name","sex"],"\t");
console.log(str_json);
/*
[
    {
        "name": "悟空",
        "sex": 1
    },
    {
        "name": "八戒",
        "sex": 0
    },
    {
        "name": "唐僧",
        "sex": 1
    }
]
*/

不懂请查看api

参考文档:developer.mozilla.org/en-US/docs/…

JavaScript的DOM操作

DOM -> Document Object Model

DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象,由浏览器厂商定义,用来操作htmlxml功能的一类对象的集合。

对节点的增删改查

查看元素节点

  • document代表整个文档

  • .getElementsById()

    元素id在ie8以下的浏览器,不区分id大小写,而且也返回匹配name属性的元素

  • .getElementsByName()

    只有部分标签name可生效(表单,表单元素,img,iframe)

  • .getElementsByClassName()

    类名,ie8和ie8以下的ie版本中没有,可以多个class一起

  • .querySelector()

    css选择器 ,ie7和ie7以下的ie版本中没有

  • .querySelectorAll()

    css选择器 ,ie7和ie7以下的ie版本中没有

pm2 常用命令备份与命令解析
$ npm install pm2@lastest -g #安装最新的PM2版本

$ pm2 updatePM2 #升级pm2

$ pm2 start app.js  #启动应用

$ pm2 start app.js -i 4        # cluster mode 模式启动4个app.js的应用实例

# 4个应用程序会自动进行负载均衡

$ pm2 start app.js --name="api" # 启动应用程序并命名为 "api"

$ pm2 start app.js --watch      # 当文件变化时自动重启应用

$ pm2 start script.sh          # 启动 bash 脚本

$ pm2 list                      # 列表 PM2 启动的所有的应用程序

$ pm2 monit                    # 显示每个应用程序的CPU和内存占用情况

$ pm2 show [app-name]          # 显示应用程序的所有信息

$ pm2 logs                      # 显示所有应用程序的日志

$ pm2 logs [app-name]          # 显示指定应用程序的日志

$ pm2 flush                       # 清空所有日志文件

$ pm2 stop all                  # 停止所有的应用程序

$ pm2 stop 0                    # 停止 id为 0的指定应用程序

$ pm2 restart all              # 重启所有应用

$ pm2 reload all                # 重启 cluster mode下的所有应用

$ pm2 gracefulReload all        # Graceful reload all apps in cluster mode

$ pm2 delete all                # 关闭并删除所有应用

$ pm2 delete 0                  # 删除指定应用 id 0

$ pm2 scale api 10              # 把名字叫api的应用扩展到10个实例

$ pm2 reset [app-name]          # 重置重启数量

$ pm2 startup                  # 创建开机自启动命令

$ pm2 save                      # 保存当前应用列表

$ pm2 resurrect                # 重新加载保存的应用列表

$ pm2 update                    # Save processes, kill PM2 and restore processes

$ pm2 generate                  # Generate a sample json configuration file

pm2文档地址:http://pm2.keymetrics.io/docs/usage/quick-start/

##cluster mode 与fork模式的区别
fork模式,单实例多进程,常用于多语言混编,比如php、python等,不支持端口复用,需要自己做应用的端口分配和负载均衡的子
进程业务代码。
缺点就是单服务器实例容易由于异常会导致服务器实例崩溃。
cluster模式,多实例多进程,但是只支持node,端口可以复用,不需要额外的端口配置,0代码实现负载均衡。
优点就是由于多实例机制,可以保证服务器的容错性,就算出现异常也不会使多个服务器实例同时崩溃。
共同点,由于都是多进程,都需要消息机制或数据持久化来实现数据共享。
参考说法:https://segmentfault.com/q/1010000005972763

pip安装wordcloud词云报错

我只是要下载wordcloud库来尝试做词云的,使用pip install wordcloud安装报一个错:

error: command 'cl.exe' failed: No such file or directory
Python查看HTTP状态码

用urllib模块

import urllib
status=urllib.urlopen("http://segmentfault.com").code
print (status)

用requests模块

import requests
code=requests.get("http://segmentfault.com").status_code
print (code)

用head方法

http不止有get方法,用get方法会请求整个头部和正文,用head方法只请求头部信息

import requests
code=requests.head("http://segmentfault.com").status_code
print (code)
Selenium自动化测试

简介

Selenium 可以直接在浏览器中运行,就像真实用户所做的一样。Selenium 测试可以在 Windows、Linux 和 Macintosh上的 Internet Explorer、Chrome和 Firefox 中运行,其他测试工具都不能覆盖如此多的平台。

功能

  • 框架底层使用JavaScript模拟真实用户对浏览器进行操作。测试脚本执行时,浏览器自动按照脚本代码做出点击,输入,打开,验证等操作,就像真实用户所做的一样,从终端用户的角度测试应用程序。
  • 使浏览器兼容性测试自动化成为可能,尽管在不同的浏览器上依然有细微的差别。
  • 使用简单,可使用Java,Python等多种语言编写用例脚本。