yq前端

yq前端 查看完整档案

长沙编辑湖南中医药大学  |  计算机 编辑  |  填写所在公司/组织填写个人主网站
编辑

前端爱好者,欢迎多多交流!前端工程师

个人动态

yq前端 赞了文章 · 2019-11-23

如何部署前端dist目录?

前端部署.png

前端部署其实也算前端工程化的一部分,这篇博客是我结合实际工作经验和业余探索,总结出的前端部署的一些尝试。一方面自己有所记录,另一方面也能给大家带来些启示。

  • 部署到七牛云
  • 部署到阿里云OSS,部署到腾讯云OSS
  • 部署到腾讯云服务器并使用nginx做反向代理
  • 总结与反思

前提条件:

  • 通过npm run build / yarn run build打包出的前端dist包,需要部署到公网环境供用户访问
  • 已购买一台腾讯云服务器,实例配置1核 1GB 1Mbps。可用于存储前端dist包,nginx反向代理,运行后端服务等等
  • 已购买一个可用域kaigege.cn并备案。可用于CNAME解析,二级域名解析等等

若是对上述一些名词不理解,不用着急,一点一点来。

dist包目录结构如下:

|-- arya-spring-vue-fe
      |-- favicon.ico
      |-- index.html
      |-- manifest.json
      |-- precache-manifest.dc33a1b9e99c64c524c43168e7777109.js
      |-- robots.txt
      |-- service-worker.js
      |-- css
      |   |-- app.8be73ceb.css
      |   |-- chunk-vendors.8aa8b174.css
      |   |-- login.8c104af7.css
      |   |-- user.2cc930ce.css
      |-- fonts
      |   |-- ionicons.99ac3308.woff
      |   |-- ionicons.d535a25a.ttf
      |-- img
      |   |-- arya-spring-vue-fe.8d6fbad1.png
      |   |-- ionicons.a2c4a261.svg
      |   |-- logo.82b9c7a5.png
      |   |-- icons
      |       |-- android-chrome-192x192.png
      |       |-- android-chrome-512x512.png
      |       |-- apple-touch-icon-120x120.png
      |       |-- apple-touch-icon-152x152.png
      |       |-- apple-touch-icon-180x180.png
      |       |-- apple-touch-icon-60x60.png
      |       |-- apple-touch-icon-76x76.png
      |       |-- apple-touch-icon.png
      |       |-- favicon-16x16.png
      |       |-- favicon-32x32.png
      |       |-- msapplication-icon-144x144.png
      |       |-- mstile-150x150.png
      |       |-- safari-pinned-tab.svg
      |-- js
          |-- about.b6757b1f.js
          |-- about.b6757b1f.js.map
          |-- app.15053451.js
          |-- app.15053451.js.map
          |-- chunk-vendors.acd76e03.js
          |-- chunk-vendors.acd76e03.js.map
          |-- login.e0db28e9.js
          |-- login.e0db28e9.js.map
          |-- user.4699a3d1.js
          |-- user.4699a3d1.js.map

部署到七牛云

因为手上负责的项目dist包是存储在七牛云的,而且第一个接触到的云存储也是七牛云,所以自然而然想到了七牛云OSS。

已具备条件:

  • 七牛云账号
  • 七牛云对象存储服务
  • 用于存储文件的bucket

需要做的事:

  • 融合CDN添加域名并绑定bucket
  • 域名添加CNAME解析
  • 上传文件到bucket

融合CDN添加域名并绑定bucket

融合CDN->域名管理->创建域名foo.kaigege.cn->源站配置里选择七牛云存储绑定bucket
image

域名添加CNAME解析

七牛云域名管理并复制CNAME->腾讯云域名管理->解析->添加记录->记录类型选择CNAME,主机记录填写foo->记录值填写foo-kaigege-cn.qiniudns.com
image

上传文件到bucket

这一步就很有趣了。
看一下我们的dist目录可以发现,除了index.html这一级外,还有css,fonts,img,js4个目录。
七牛云的bucket竟然不支持创建目录

唯一的办法就是如何在空间下创建文件夹?

在空间中不能创建文件夹,但是为了区分不同的文件,可以这么做:
文件名以 2017/1/12/1.img , 即创建这样的虚拟目录 2017/1/12/ 做区分。

虽然我手上的项目就是上传七牛云,是之前的老大写了一个node脚本按照这种方式上传的,但是当用过阿里云OSS和腾讯云OSS以后,我真心觉得七牛云这个功能有待提高。代码就不贴出了,七牛云提供了各种SDK,python,nodejs等等部署脚本都能写出。

考虑到后期项目部署的方便性,果断放弃上传前端文件到七牛云的方案。

部署到阿里云OSS,部署到腾讯云OSS

部署到阿里云OSS和部署到腾讯云OSS。
二者都是对象存储,bucket内都支持创建目录,和七牛云一样都有CDN加速。

阿里云OSS我实在是找不到收费标准,腾讯云有一个1块钱6个月都免费体验权,因此我就以腾讯云为例子来讲解。

已具备条件:

  • 腾讯云账号
  • 腾讯云对象存储服务
  • 用于存储文件的存储桶

需要做的事:

  • 为存储桶添加自定义加速域名
  • 域名添加CNAME解析
  • 创建文件夹并上传文件

为存储桶添加自定义加速域名

image

域名添加CNAME解析

域名添加CNAME解析可参考七牛云域名解析,是一样的。

创建文件夹并上传文件

image

此时我们访问:foo.kaigege.cn/foo/index.html是不就可以访问到文件了呢?No。其它文件的请求路径为foo.kaigege.cn/js/app.js。缺失了foo目录。该怎么办呢?

在vue.config.js配置webpack的publicPath为"/foo"即可。

看一下index.html就知道了。

添加publicPath /foo前添加publicPath /foo后
<link href=/js/app.15053451.js><link href=/foo/js/app.15053451.js>

Ok,腾讯云OSS部署前端文件完毕。

部署到腾讯云服务器并使用nginx做反向代理

为什么会想到这样部署?

  • 托管再github pages的前端博客,需要一个域名做代理
  • 现公司开发环境就是使用nginx构建的反向代理服务器,手上负责项目的前端文件就存储在这台机器上
  • CDN加速是收费的,虽然腾讯云0.11元/G,但是免费的显然更好

于是开始折腾。

已具备条件:

  • frankkai.github.io
  • 腾讯云centOS服务器
  • 部署nginx并初步具备nginx知识点

需要做的事:

  • 配置nginx访问blog.kaigege.cn重定向到frankkai.github.io
  • 配置nginx访问foo.kaigege.cn加载前端静态文件
  • 腾讯云域名管理解析二级域名到服务器
  • 使用fileZIla连接腾讯云服务器上传前端静态文件

nginx配置如下

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;
    gzip                on;
    gzip_types          text/plain application/javascript text/css;    

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;
    # 配置nginx访问blog.kaigege.cn重定向到frankkai.github.io
    server {
        listen       80;
        server_name  blog.kaigege.cn;
        location / {
            proxy_pass https://frankkai.github.io; 
        }
    }
   # 配置nginx访问foo.kaigege.cn加载前端静态文件。
    server {
        listen       80;
        server_name  foo.kaigege.cn;
        location / {
            root     /usr/share/nginx/foo;
            index    index.html;
        }
    }

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _; 
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {}

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
}

对nginx以及nginx 反向代理不熟的话,可以看nginx入门前端必会的 Nginx入门视频教程(共11集)补充一下。这里就不再赘述了。

腾讯云域名管理解析二级域名到服务器

image

使用fileZIla连接腾讯云服务器上传前端静态文件

这个坑是比较多的,需要做以下几件事。

  • 放开腾讯云安全组的22端口
  • 腾讯云SSH秘钥下载秘钥
  • 配置fileZila新站点
  • 上传前端dist目录
放开腾讯云安全组的22端口

image

腾讯云SSH秘钥下载秘钥

image

配置fileZila新站点
添加秘钥

image

新增站点配置

需要选择SFTP协议,通过22端口登录
image

上传前端dist目录

上传到哪里呢?回看一下nginx的配置。
会发现dist目录下的文件,右键上传到/usr/share/nginx/foo即可。
image

上面的事情做完了,我们得到的结果是怎样呢?

  1. 访问blog.kaigege.cn重定向到frankkai.github.io
  2. 访问foo.kagege.cn/index.html获取到前端静态资源

ok,部署到腾讯云服务器并使用nginx做反向代理完毕。

备注:nginx的反向代理配置中,统一监听了80端口,同样也需要在服务器实例安全组配置中放开。

总结与反思

  • 七牛云对象存储,阿里云OSS,腾讯云OSS:存储文件并CDN加速。七牛云bucket不支持创建目录,OSS支持。
  • 腾讯云域名管理: CNAME,解析二级域名。需要公网备案过的域名才能玩起来。
  • 腾讯云服务器:存储文件并部署nginx。解析二级域名全靠这个。
  • nginx:反向代理重定向博客,访问前端资源。nginx是神器。
  • 未涉及docker,k8s新型前端部署,有机会实践时再做补充。

期待和大家交流,共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:

努力成为优秀前端工程师!

查看原文

赞 14 收藏 11 评论 7

yq前端 赞了文章 · 2019-11-23

快速学习nodejs系列:微信公众号开发一之环境准备

环境准备
微信公众号开发(或者是现在的小程序开发)都是目前比较火的项目开发,现在很多一些课程都是基于php进行讲解、学习的,我们现在使用nodejs来开发。

1.申请微信公众号
微信公众号现在分为:服务号和订阅号。具体业务上有什么不同,大家可以看微信的介绍,在开发者的角度的话,服务号的功能比订阅号较为丰富(如微信授权等),还有就是个人只能申请订阅号,不管是服务号还是订阅号,你想要获取微信开发文档上 https://mp.weixin.qq.com/wiki...,一定是要通过认证的(每年需300元),对于我们开发来说不可能都去认证,微信提供接口测试号的申请(可以获取到所有的微信接口功能),申请地址:https://mp.weixin.qq.com/debu... ,申请后扫码关注测试号即可。

clipboard.png

clipboard.png

clipboard.png

2.域名
进行微信开发我们需要开启公众号开发者模式(开启后才能调用微信的接口,才能进行开发),但开启开发者模式是要备案过的域名,那我们没有域名怎么办呢?这是我们可以通过内网穿透来解决这个问题。我们可以使用https://natapp.cn的服务

1.注册账号,通过实名认证。
2.开启免费通道,配置的是80端口,微信只支持80或443。
3.下载包到本地,修改authtoken,启动即可。
4.natapp 教程 https://natapp.cn/article/nat...

clipboard.png

clipboard.png

clipboard.png

clipboard.png

这样外网访问http://4bs2cr.natappfree.cc 就可访问到本地的127.0.0.1:80。

查看原文

赞 2 收藏 1 评论 0

yq前端 赞了文章 · 2019-11-23

微信公众号开发之三利器

声明:发布此文主要是希望能帮助到刚接触微信开发的同学。刚开始写文章,如有大神路过希望提出不足之处。谢谢!!在此安利一波作者的新文章,关于微信公众号后端开发,了解一下? —— 微信公众号开发——踩坑记录,持续记录中...

微信公众号开发之前需要准备三个利器。

  1. 微信公众平台接口测试帐号
  2. 内网穿透工具(下面介绍的工具由于现在.cc域名不能备案,导致不能用于公众号开发。现补充新的内网穿透工具,通过百度网盘分享给大家,地址:https://pan.baidu.com/s/1qd-X... 密码:v9io)
  3. 微信web开发者工具
  4. 补充新神器 - 微信公众平台接口调试工具(微信接口测试神器,由于本人近期(18年5月)开始探索公众号后端开发,所以发现了这个接口测试神器)

一、 微信公众平台接口测试帐号

由于用户体验和安全性方面的考虑,微信公众号的注册有一定门槛,某些高级接口的权限需要微信认证后才可以获取。所以,为了帮助开发者快速了解和上手微信公众号开发,熟悉各个接口的调用,腾讯推出了微信公众帐号测试号,可体验和测试全部高级接口。通过手机微信扫描二维码即可获得测试号。

进入微信公众帐号测试号申请系统

clipboard.png

二、使用内网穿透工具 Sunny-Ngrok

  由于开发微信公众号项目,经常需要将本地部署的接口让外网能直接调用到,这里我们使用内网穿透工具Sunny-Ngrok(还有其它同类型工具如:花生壳)来将本机映射到外网。支持Mac OS X,Linux,Windows平台。

注册账号 配置外网访问的域名和端口号
首先去Sunny-Ngrok官网注册账号,然后进入管理界面购买免费的内网穿透服务器如下:

clipboard.png

配置外网访问的域名前置和本地端口号

clipboard.png

配置完成点击确认添加即可在隧道管理查看隧道ID(隧道ID用于Sunny-Ngrok工具启动)

clipboard.png

Sunny-Ngrok下载运行

  体积很小,Sunny-Ngrok官网下载后直接解压得到一个二进制文件和bat小工具启动(这里以Windows为例,其它系统请查看官方文档)。

启动隧道:方法一
使用命令行工具切换到解压的Sunny-Ngrok目录,启动隧道

clipboard.png

命令解释:
sunny.exe: 下载的软件内网映射隧道工具
clientid: 通过隧道id启动,后面跟上隧道id(隧道ID是在官网注册账号后免费申请的),如果有多个隧道要一起启动那么使用英文逗号隔开第三个红色剪头所指的地方就是为了启动多个隧道

启动隧道:方法二

通过下载的软件包里面的bat小工具启动,双击bat文件输入隧道id回车启动即可。

clipboard.png

这里启动了两个隧道,使用了英文逗号隔开了。

填写微信测试号的配置信息

clipboard.png

三、下载微信开发者工具

点击进入下载页面

下载页面为微信最小开发者工具可同时用于微信公众号开发和微信小程序开发。
安装完成后打开微信开发者工具微信扫码登录(需在微信公众号绑定为开发者或者注册测试号关注测试公众号)
选择公众号网页项目

clipboard.png

在地址栏输入Sunny-Ngrok启动后得到的外网地址。在后端和公众测试号正确配置的情况下你即可看到你的web页面了。

clipboard.png

查看原文

赞 22 收藏 33 评论 0

yq前端 赞了文章 · 2019-11-23

程序员需要了解的硬核知识之操作系统和应用

利用计算机运行程序大部分都是为了提高处理效率。例如,Microsoft Word 这样的文字处理软件,是用来提高文本文件处理效率的程序,Microsoft Excel 等表格计算软件,是用来提高账本处理效率的程序。这种为了提高特定处理效率的程序统称为 应用

程序员的工作就是编写各种各样的应用来提高工作效率,程序员一般不编写操作系统,但是程序员编写的应用离不开操作系统,此篇文章我们就针对 Windows 操作系统来说明一下操作系统和应用之间的关系。

操作系统功能的历史

操作系统其实也是一种软件,任何新事物的出现肯定都有它的历史背景,那么操作系统也不是凭空出现的,肯定有它的历史背景。

在计算机尚不存在操作系统的年代,完全没有任何程序,人们通过各种按钮来控制计算机,这一过程非常麻烦。于是,有人开发出了仅具有加载和运行功能的监控程序,这就是操作系统的原型。通过事先启动监控程序,程序员可以根据需要将各种程序加载到内存中运行。虽然仍旧比较麻烦,但比起在没有任何程序的状态下进行开发,工作量得到了很大的缓解。

image.png

随着时代的发展,人们在利用监控程序编写程序的过程中发现很多程序都有公共的部分。例如,通过键盘进行文字输入,显示器进行数据展示等,如果每编写一个新的应用程序都需要相同的处理的话,那真是太浪费时间了。因此,基本的输入输出部分的程序就被追加到了监控程序中。初期的操作系统就是这样诞生了。

image.png

类似的想法可以共用,人们又发现有更多的应用程序可以追加到监控程序中,比如硬件控制程序编程语言处理器(汇编、编译、解析)以及各种应用程序等,结果就形成了和现在差异不大的操作系统,也就是说,其实操作系统是多个程序的集合体。

image.png

我在 程序员需要了解的硬核知识之CPU这篇文章中提到了汇编语言,这里简单再提一下。

汇编语言是一种低级语言,也被称为符号语言。汇编语言是第二代计算机语言,在汇编语言中,用助记符代替机器指令的操作码,用地址符号或标号代替指令或操作数的地址。用一些容易理解和记忆的字母,单词来代替一个特定的指令,比如:用ADD代表数字逻辑上的加减,MOV代表数据传递等等,通过这种方法,人们很容易去阅读已经完成的程序或者理解程序正在执行的功能,对现有程序的bug修复以及运营维护都变得更加简单方便

可以说共用思想真是人类前进的一大步,对于解放生产力而言简直是太重要了

要把操作系统放在第一位

对于程序员来说,程序员创造的不是硬件,而是各种应用程序,但是如果程序员只做应用不懂硬件层面的知识的话,是无法成为硬核程序员的。现在培训机构培养出了一批怎么用的人才,却没有培训出为什么这么做的人才,毕竟为什么不是培训机构教的,而是学校教的,我很相信耗子叔说的话:学习没有速成这回事。言归正题。

在操作系统诞生之后,程序员不需要在硬件层面考虑问题,所以程序员的数量就增加了。哪怕自称对硬件一窍不通的人也可能制作出一个有模有样的程序。不过,要想成为一个全面的程序员,有一点需要清楚的就是,掌握硬件的基本知识,并借助操作系统进行抽象化,可以大大提高编程效率。

下面就看一下操作系统是如何给开发人员带来便利的,在 Windows 操作系统下,用 C 语言制作一个具有表示当前时间功能的应用。time() 是用来取得当前日期和时间的函数,printf() 是把结果打印到显示器上的函数,如下:

#include <stdio.h>
#include <time.h>

void main(){
  // 保存当前日期和时间信息
  time_t tm;
  
  // 取得当前的日期和时间
  time(&tm);
  
  // 在显示器上显示日期和时间
  printf("%s\n", ctime(&tm));
}

读者可以自行运行程序查看结果,我们主要关注硬件在这段代码中做了什么事情

  • 通过 time_t tm,为 time_t 类型的变量申请分配内存空间;
  • 通过 time(&tm) ,将当前的日期和时间数据保存到变量的内存空间中
  • 通过 printf("%sn",ctime(&tm)), 把变量内存空间的内容输出到显示器上。

应用的可执行文件指的是,计算机的 CPU 可以直接解释并运行的本地代码,不过这些代码是无法直接控制硬件的,事实上,这些代码是通过操作系统来间接控制硬件的。变量中涉及到的内存分配情况,以及 time() 和 printf() 这些函数的运行结果,都不是面向硬件而是面向操作系统的。操作系统收到应用发出的指令后,首先会对该指令进行解释,然后会对 时钟IC 和显示器用的 I/O 进行控制。

计算机中都安装有保存日期和时间的实时时钟(Real-time clock),上面提到的时钟IC 就是值该实时时钟。

image.png

系统调用和编程语言的移植性

操作系统控制硬件的功能,都是通过一些小的函数集合体的形式来提供的。这些函数以及调用函数的行为称为系统调用,也就是通过应用进而调用操作系统的意思。在前面的程序中用到了 time() 以及 printf() 函数,这些函数内部也封装了系统调用。

C 语言等高级编程语言并不依存于特定的操作系统,这是因为人们希望不管是Windows 操作系统还是 Linux 操作系统都能够使用相同的源代码。因此,高级编程语言的机制就是,使用独自的函数名,然后在编译的时候将其转换为系统调用的方式(也有可能是多个系统调用的组合)。也就是说,高级语言编写的应用在编译后,就转换成了利用系统调用的本地代码

image.png

不过,在高级语言中也存在直接调用系统调用的编程语言,不过,利用这种方式做成应用,移植性并不友好。

移植性:移植性指的是同样的程序在不同操作系统下运行时所花费的时间,时间越少证明移植性越好。

操作系统和高级编程语言使硬件抽象化

通过使用操作系统提供的系统调用,程序员不必直接编写控制硬件的程序,而且,通过使用高级编程语言,有时也无需考虑系统调用的存在,系统调用往往是自动触发的,操作系统和高级编程语言能够使硬件抽象化,这很了不起。

下面让我们看一个硬件抽象化的具体实例

#include <stdio.h>

void main(){
  
  // 打开文件
  FILE *fp = fopen("MyFile.txt","w");
  
  // 写入文件
  fputs("你好", fp);
  
  // 关闭文件
  fclose(fp);
}

上述代码使用 C 编写的程序,fputs() 是用来往文件中写入字符串的函数,fclose() 是用来关闭文件的函数。

上述应用在编译运行后,会向文件中写入 "你好" 字符串。文件是操作系统对磁盘空间的抽象化,就如同我们在 程序员需要了解的硬核知识之磁盘 这篇文章提到的一样,磁盘就如同树的年轮,磁盘的读写是以扇区为单位的,通过磁道来寻址,如果直接对硬件读写的话,那么就会变为通过向磁盘用的 I/O 指定扇区位置来对数据进行读写了。

但是,在上面代码中,扇区压根就没有出现过传递给 fopen() 函数的参数,是文件名 MyFile.txt 和指定文件写入的 w。传递给 fputs() 的参数,是往文件中写入的字符串"你好" 和 fp,传递给 fclose() 的参数,也仅仅是 fp,也就是说磁盘通过打开文件这个操作,把磁盘抽象化了,打开文件这个操作就可以说是操作硬件的指令。

image.png

下面让我们来看一下代码清单中 fp 的功能,变量 fp 中被赋予的是 fopen() 函数的返回值,该值被称为文件指针。应用打开文件后,操作系统就会自动申请分配用来管理文件读写的内存空间。内存地址可以通过 fopen() 函数的返回值获得。用 fopen() 打开文件后,接下来就是通过制定的文件指针进行操作,正因为如此,fputs() 和 fclose() 以及 fclose() 参数中都制定了文件指针。

由此我们可以得出一个结论,应用程序是通过系统调用,磁盘抽象来实现对硬盘的控制的。

Windows 操作系统的特征

Windows 操作系统是世界上用户数量最庞大的群体,作为 Windows 操作系统的资深用户,你都知道 Windows 操作系统有哪些特征吗?下面列举了一些 Windows 操作系统的特性

  • Windows 操作系统有两个版本:32位和64位
  • 通过 API 函数集成来提供系统调用
  • 提供了采用图形用户界面的用户界面
  • 通过 WYSIWYG 实现打印输出,WYSIWYG 其实就是 What You See Is What You Get ,值得是显示器上显示的图形和文本都是可以原样输出到打印机打印的。
  • 提供多任务功能,即能够同时开启多个任务
  • 提供网络功能和数据库功能
  • 通过即插即用实现设备驱动的自设定

这些是对程序员来讲比较有意义的一些特征,下面针对这些特征来进行分别的介绍

32位操作系统

这里表示的32位操作系统表示的是处理效率最高的数据大小。Windows 处理数据的基本单位是 32 位。这与最一开始在 MS-DOS 等16位操作系统不同,因为在16位操作系统中处理32位数据需要两次,而32位操作系统只需要一次就能够处理32位的数据,所以一般在 windows 上的应用,它们的最高能够处理的数据都是 32 位的。

比如,用 C 语言来处理整数数据时,有8位的 char 类型,16位的short类型,以及32位的long类型三个选项,使用位数较大的 long 类型进行处理的话,增加的只是内存以及磁盘的开销,对性能影响不大。

现在市面上大部分都是64位操作系统了,64位操作系统也是如此。

通过 API 函数集来提供系统调用

Windows 是通过名为 API 的函数集来提供系统调用的。API是联系应用程序和操作系统之间的接口,全称叫做 Application Programming Interface,应用程序接口。

当前主流的32位版 Windows API 也称为 Win32 API,之所以这样命名,是需要和不同的操作系统进行区分,比如最一开始的 16 位版的 Win16 API,和后来流行的 Win64 API

API 通过多个 DLL 文件来提供,各个 API 的实体都是用 C 语言编写的函数。所以,在 C 语言环境下,使用 API 更加容易,比如 API 所用到的 MessageBox() 函数,就被保存在了 Windows 提供的 user32.dll 这个 DLL 文件中。

提供采用了 GUI 的用户界面

GUI(Graphical User Interface) 指得就是图形用户界面,通过点击显示器中的窗口以及图标等可视化的用户界面,举个例子:Linux 操作系统就有两个版本,一种是简洁版,直接通过命令行控制硬件,还有一种是可视化版,通过光标点击图形界面来控制硬件。

通过 WYSIWYG 实现打印输出

WYSIWYG 指的是显示器上输出的内容可以直接通过打印机打印输出。在 Windows 中,显示器和打印机被认作同等的图形输出设备处理的,该功能也为 WYSIWYG 提供了条件。

借助 WYSIWYG 功能,程序员可以轻松不少。最初,为了是现在显示器中显示和在打印机中打印,就必须分别编写各自的程序,而在 Windows 中,可以借助 WYSIWYG 基本上在一个程序中就可以做到显示和打印这两个功能了。

提供多任务功能

多任务指的就是同时能够运行多个应用程序的功能,Windows 是通过时钟分割技术来实现多任务功能的。时钟分割指的是短时间间隔内,多个程序切换运行的方式。在用户看来,就好像是多个程序在同时运行,其底层是 CPU 时间切片,这也是多线程多任务的核心。

image.png

提供网络功能和数据库功能

Windows 中,网络功能是作为标准功能提供的。数据库(数据库服务器)功能有时也会在后面追加。网络功能和数据库功能虽然并不是操作系统不可或缺的,但因为它们和操作系统很接近,所以被统称为中间件而不是应用。意思是处于操作系统和应用的中间层,操作系统和中间件组合在一起,称为系统软件。应用不仅可以利用操作系统,也可以利用中间件的功能。

image.png

相对于操作系统一旦安装就不能轻易更换,中间件可以根据需要进行更换,不过,对于大部分应用来说,更换中间件的话,会造成应用也随之更换,从这个角度来说,更换中间件也不是那么容易。

通过即插即用实现设备驱动的自动设定

即插即用(Plug-and-Play)指的是新的设备连接(plug) 后就可以直接使用的机制,新设备连接计算机后,计算机就会自动安装和设定用来控制该设备的驱动程序

设备驱动是操作系统的一部分,提供了同硬件进行基本的输入输出的功能。键盘、鼠标、显示器、磁盘装置等,这些计算机中必备的硬件的设备驱动,一般都是随操作系统一起安装的。

有时 DLL 文件也会同设备驱动文件一起安装。这些 DLL 文件中存储着用来利用该新追加的硬件API,通过 API ,可以制作出运行该硬件的心应用。

文章参考:

汇编语言

《程序是怎样跑起来的》第九章

https://baike.baidu.com/item/Windows操作系统/852149?fr=aladdin

查看原文

赞 30 收藏 18 评论 0

yq前端 赞了文章 · 2019-03-04

CSS学习笔记(十二) CSS命名规范

引言:最近想将这几个月做过的东西组件化,然后首先想到的是 编码规范化!本文只涉及 CSS 命名规范,搬来了Alloyteam 造好的轮子。可能并不完全适用,在以后开发过程中再根据需要进行修改。╮(╯_╰)╭

1.常用的css命名规范

  • 头:header
  • 内容:content/container
  • 尾:footer
  • 导航:nav
  • 侧边:sidebar
  • 栏目:column
  • 页面外围控制整体布局宽度:wrapper
  • 左右中:left right center
  • 登录条:loginbar
  • 标志:logo
  • 广告:banner
  • 页面主体:main
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 子导航:subnav
  • 菜单:menu
  • 子菜单:submenu
  • 搜索:search
  • 友情链接:friendlink
  • 页脚:footer
  • 版权:copyright
  • 滚动:scroll
  • 内容:content
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg
  • 小技巧:tips
  • 栏目标题:title
  • 加入:joinus
  • 指南:guild
  • 服务:service
  • 注册:regsiter
  • 状态:status
  • 投票:vote
  • 合作伙伴:partner

2.注释的写法

/* Footer */

内容区

/* End Footer */

3.id的命名

3.1 页面结构

  • 容器: container
  • 页头:header
  • 内容:content/container
  • 页面主体:main
  • 页尾:footer
  • 导航:nav
  • 侧栏:sidebar
  • 栏目:column
  • 页面外围控制整体布局宽度:wrapper
  • 左右中:left right center

3.2 导航

  • 导航:nav
  • 主导航:mainnav
  • 子导航:subnav
  • 顶导航:topnav
  • 边导航:sidebar
  • 左导航:leftsidebar
  • 右导航:rightsidebar
  • 菜单:menu
  • 子菜单:submenu
  • 标题: title
  • 摘要: summary

3.3 功能

  • 标志:logo
  • 广告:banner
  • 登陆:login
  • 登录条:loginbar
  • 注册:regsiter
  • 搜索:search
  • 功能区:shop
  • 标题:title
  • 加入:joinus
  • 状态:status
  • 按钮:btn
  • 滚动:scroll
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg
  • 当前的: current
  • 小技巧:tips
  • 图标: icon
  • 注释:note
  • 指南:guild
  • 服务:service
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 投票:vote
  • 合作伙伴:partner
  • 友情链接:link
  • 版权:copyright

4.class的命名

4.1 颜色

使用颜色的名称或者十六进制。

举例:

.red{color:red;}
.f60{color:#f60;}
.ff8600{color:#ff8600;}

4.2 字体大小

直接使用 font+字体大小 作为名称。

举例:

.font12px{font-size:12px;}
.font9pt{font-size:9pt;}

4.3 对齐样式

使用对齐目标的英文名称。

举例:

.left{float:left;}
.bottom{float:bottom;}

4.4 标题栏样式

使用 类别+功能 的方式命名。

举例:

.barnews{}
.barproduct{}

5.注意事项

  1. 一律小写;
  2. 尽量用英文;
  3. 不加中杠和下划线;
  4. 尽量不缩写,除非一看就明白的单词。

6.常用css文件命名

  • 主要的 master.css
  • 模块 module.css
  • 基本共用 base.css
  • 布局,版面 layout.css
  • 主题 themes.css
  • 专栏 columns.css
  • 文字 font.css
  • 表单 forms.css
  • 补丁 mend.css
  • 打印 print.css

后记:搬到最后,看到注意事项里面的一条:不加中杠和下划线。Σ(っ °Д °;)っ有点接受不了。。。然后继续搜索,发现一个好东西—— BEM!然后,我放下最后一块砖头,滚去学习了,再见(。・_・)/~~~


参考资料

查看原文

赞 9 收藏 84 评论 2

yq前端 赞了文章 · 2019-02-25

CSS单行、多行文本溢出显示省略号

  • 单行文本溢出显示省略号

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
(需要对容器设置单行高度)
  • 多行文本溢出显示省略号

    webkit浏览器或移动端的页面

       在webkit浏览器或移动端(绝大部分是webkit内核的浏览器)可以直接使用webkit的css扩展属性(webkit是私有属性)-webkit-line-clamp;
       注意:这是一个不规范的属性,它没有在CSS的规范草案中
       -webkit-line-clamp用来限制在一个块元素显示的文本行数,为了实现效果,他要与一下webkit属性结合使用:
           display:-webkit-box;(必须结合的属性,将对象作为弹性伸缩盒子模型展示)
           -webkit-box-orient(必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式)

    完整版写法如下:

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2; (两行文字)
-webkit-box-orient:vertical;
**跨浏览器兼容的方案**
比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(...)的元素模拟实现
p{
position:relative;
line-height:1.4em;
/*设置容器高度为3倍行高就是显示3行*/
height:4.2em;
overflow:hidden;
}
p::after{
content:'...';
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:#fff;
}

注意:IE6-7不显示content内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如<span>...</span>去模拟;要支持IE8,需要将::after替换为:after

JavaScript解决方案

使用js也可以根据上面的思路去模拟,实现也很简单,推荐两个做类似工作的成熟小工具:
1、clamp.js
2、jQuery插件  jquery.dotdotdot
使用简单,实现方法自行百度
查看原文

赞 19 收藏 14 评论 0

yq前端 赞了文章 · 2019-02-23

纯 CSS 实现多行文字截断

做响应式系统设计的时候遇到需要对标题进行多行文字截取的效果,如下图:

clipboard.png

看似十分简单的标题截断效果,但是竟然没有一个统一 CSS 属性实现标准,需要用到一些奇淫妙计来实现,一般来说,在做这样文字截断效果时我们更多是希望:

兼容性好,对各大主流浏览器有好的支持
响应式截断,根据不同宽度做出调整
文本超出范围才显示省略号,否则不显示省略号
省略号位置显示刚好
基于上述的准则,下面我就讲介绍各种技巧实现截断效果,并根据上述的评判标准得出最优解。(代码我都传到 jsfiddle 平台,可点击 demo 地址查看)

单行文本截断 text-overflow
文本溢出我们经常用到的应该就是 text-overflow: ellipsis 了,相信大家也很熟悉,只需轻松几行代码就可以实现单行文本截断。

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

实现效果:

属性浏览器原生支持,各大浏览器兼容性好,缺点就是只支持单行文本截断,并不支持多行文本截取。

适用场景:单行文字截断最简单实现,效果最好,放心使用。

如果是多行文字截取效果,实现起来就没有那么轻松。

-webkit-line-clamp 实现

先介绍第一种方式,就是通过 -webkit-line-clamp 属性实现。具体的方式如下:

div {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

它需要和 display、-webkit-box-orient 和 overflow 结合使用:

display: -webkit-box; 必须结合的属性,将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient; 必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式。
text-overflow: ellipsis; 可选属性,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本。

实现效果:

从效果上来看,它的优点有:

1.响应式截断,根据不同宽度做出调整
2.文本超出范围才显示省略号,否则不显示省略号
3.浏览器原生实现,所以省略号位置显示刚好

但是缺点也是很直接,因为 -webkit-line-clamp 是一个不规范的属性,它没有出现在 CSS 规范草案中。也就是说只有 webkit 内核的浏览器才支持这个属性,像 Firefox, IE 浏览器统统都不支持这个属性,浏览器兼容性不好。

使用场景:多用于移动端页面,因为移动设备浏览器更多是基于 webkit 内核,除了兼容性不好,实现截断的效果不错。

定位元素实现多行文本截断

另外还有一种靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现,实现方式如下:

p {
    position: relative;
    line-height: 18px;
    height: 36px;
    overflow: hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    
    /* 为了展示效果更好 */
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

实现原理很好理解,就是通过伪元素绝对定位到行尾并遮住文字,再通过 overflow: hidden 隐藏多余文字。

实现效果:
图片描述

从实现效果来看,它所具备的优点:

1.兼容性好,对各大主流浏览器有好的支持
2.响应式截断,根据不同宽度做出调整

但是它无法识别文字的长短,即文本超出范围才显示省略号,否则不显示省略号。还有因为是我们人为地在文字末尾添加一个省略号效果,就会导致它跟文字其实没有贴合的很紧密,遇到这种情况可以通过添加 word-break: break-all; 使一个单词能够在换行时进行拆分。

适合场景:文字内容较多,确定文字内容一定会超过容器的,那么选择这种方式不错。

float 特性实现多行文本截断

回到一开始我要做的内容是多行标题文字截取效果,显然是无法控制标题的长度的,显然是无法使用上述的方式。回到事情的本质来看:我们希望 CSS 能够有一种属性,能够在文字溢出的情况下显示省略号,不溢出时不显示省略号。(两种形式,两种效果)

正当我以为 CSS 已经无能为力,只能通过 JS 去实现的时候,后来看到了一个方法非常巧妙,而且能够满足上述提到的所有准则,下面我就介绍如何通过 float 特性实现多行文本截断效果。

基本原理:

clipboard.png

有个三个盒子 div,粉色盒子左浮动,浅蓝色盒子和黄色盒子右浮动,

1.当浅蓝色盒子的高度低于粉色盒子,黄色盒子仍会处于浅蓝色盒子右下方。
2.如果浅蓝色盒子文本过多,高度超过了粉色盒子,则黄色盒子不会停留在右下方,而是掉到了粉色盒子下。

好了,这样两种状态的两种展示形式已经区分开了,那么我们可以将黄色盒子进行相对定位,将内容溢出的黄色盒子移动到文本内容右下角,而未溢出的则会被移到外太空去了,只要我们使用 overflow: hidden 就可以隐藏掉。

clipboard.png

基本原理就是这样,我们可以将浅蓝色区域想象成标题,黄色区域想象为省略号效果。那么你可能会觉得粉色盒子占了空间,那岂不是标题会整体延后了吗,这里可以通过 margin 的负值来出来,设置浅蓝色盒子的 margin-left 的负值与粉色盒子的宽度相同,标题也能正常显示。

那么我们将前面的 DOM 结构简化下,变成下面这样:

<div class="wrap">
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.</div>
</div>

刚才的粉色盒子和黄色盒子都可以用伪元素来代替。

.wrap {
  height: 40px;
  line-height: 20px;
  overflow: hidden;
}
.wrap .text {
  float: right;
  margin-left: -5px;
  width: 100%;
  word-break: break-all;
}
.wrap::before {
  float: left;
  width: 5px;
  content: '';
  height: 40px;
}
.wrap::after {
  float: right;
  content: "...";
  height: 20px;
  line-height: 20px;
  /* 为三个省略号的宽度 */
  width: 3em;
  /* 使盒子不占位置 */
  margin-left: -3em;
  /* 移动省略号位置 */
  position: relative;
  left: 100%;
  top: -20px;
  padding-right: 5px;
}

实现效果:

这里我目前看到最巧妙的方式了。只需要支持 CSS 2.1 的特性就可以了,它的优点有:

1.兼容性好,对各大主流浏览器有好的支持
2.响应式截断,根据不同宽度做出调整
3.文本超出范围才显示省略号,否则不显示省略号

至于缺点,因为我们是模拟省略号,所以显示位置有时候没办法刚刚好,所以可以考虑:

1.加一个渐变效果,贴合文字,就像上述 demo 效果一样
2.添加 word-break: break-all; 使一个单词能够在换行时进行拆分,这样文字和省略号贴合效果更佳。

这个方法应该是我看到最好的用纯 CSS 处理的方式了,如果你有更好的方法,欢迎留言交流!

查看原文

赞 131 收藏 105 评论 14

yq前端 赞了文章 · 2018-10-26

js实现 web页面的滚动条下拉时加载更多

js实现 web页面的滚动条下拉时加载更多

在手机上,数据列表的分页都是下拉到底部的时候会加载更多,但是,去年三月份的时候遇到了客户要求web页面也要下拉加载更多的需求,于是按照web页面在滚动条下拉时加载更多内容(个人项目经验)文中的代码实现了这个下拉加载,很简单的,代码如下:

var totalPages;//总页数
var pageno = 0;//当前页数
$(function(){
    $(window).scroll(function() {
       var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
       var positionValue = (scrollTop + windowHeight) - scrollHeight;
       if (positionValue == 0) {
           //do something
           if (pageno < totalPages - 1) {
               pageno++;
               doSomething(pageno);
           } else {
               alert('没有更多了');
           }
       }
   });
);
 
function doSomething(pageno) {
        var url = "*******";//分页列表的接口
        var data = {
                size: 5,
                start: pageno,
        };
        $.getJSON(url, data, function (rtn) {
                
        });
}

但是,今天测试人员发现,当浏览器缩放了或者屏幕显示设置缩放时,就不能下拉加载了。时隔一年多,真是惊人@_@

经过调试,发现是有缩放时positionValue的值就无法等于0了,没法继续加载更多了,这时看到一篇文章下拉加载更多DEMO(js实现)中讲到:

如果等滚动条拉到底部时再加载,会影响用户体验。因为一般动态加载的时候都需要向服务端请求资源,这时需要时间。一个更佳的方式是,当滚动条距离底部一定距离(C)时,就动态加载更多,向服务端请求资源。也就是预加载,预读取。公式如下
this.scrollHeight - C == $(this).scrollTop() + $(this).height()

看完后收到启发,于是将positionValue的值设为大于等于-10,这里的10也就是滚动条距离底部一定距离(C)的值。
果然,没问题了,有缩放时也可以正常实现下拉加载。

于是,记录下来,分享给大家,共勉。

另外提醒一点,$(window).scroll(function()监听滚动事件不执行这个问题中的采纳答案提到:

html,body的高度样式如果设置为100%,$(window).scroll方法将检测不到正确的滚出高度(0),导致滚动监听事件失效,设置html,body{ height:auto }可以解决。

代码

var totalPages;//总页数
var pageno = 0;//当前页数
var C = 10;//滚动条距离底部的距离
$(function(){
    $(window).scroll(function() {
       var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
       var positionValue = (scrollTop + windowHeight) - scrollHeight;
       if (positionValue >= -C) {
           //do something
           if (pageno < totalPages - 1) {
               pageno++;
               doSomething(pageno);
           } else {
               alert('没有更多了');
           }
       }
   });
);
 
function doSomething(pageno) {
        var url = "*******";//分页列表的接口
        var data = {
                size: 5,
                start: pageno,
        };
        $.getJSON(url, data, function (rtn) {
                
        });
}

相关参考

web页面在滚动条下拉时加载更多内容(个人项目经验)
下拉加载更多DEMO(js实现)
$(window).scroll(function()监听滚动事件不执行

查看原文

赞 195 收藏 154 评论 6

认证与成就

  • 获得 54 次点赞
  • 获得 5 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 5 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-01-12
个人主页被 518 人浏览