分类 大观园 下的文章

例子:

当前有三张表A、B、C其中A和B是一对多关系,B和C是一对多关系,现在需要将B中A表的主键存到C中;
常规思路就是将B中查询出来然后通过一个update语句来更新C表就可以了,但是B表中有2000多条数据,
难道要执行2000多次?显然是不现实的;最终找到写一个存储过程然后通过循环来更新C表,
然而存储过程中的写法用的就是游标的形式。

【简介】

    游标实际上是一种能从包括多条数据记录的结果集中每次提取一条记录的机制。

    游标充当指针的作用。

    尽管游标能遍历结果中的所有行,但他一次只指向一行。

    游标的作用就是用于对查询数据库所返回的记录进行遍历,以便进行相应的操作。

【用法】

    一、声明一个游标: declare 游标名称 CURSOR for table;(这里的table可以是你查询出来的任意集合)
    二、打开定义的游标:open 游标名称;
    三、获得下一行数据:FETCH  游标名称 into testrangeid,versionid;
    四、需要执行的语句(增删改查):这里视具体情况而定
    五、释放游标:CLOSE 游标名称;
  注:mysql存储过程每一句后面必须用;结尾,使用的临时字段需要在定义游标之前进行声明。

【实例】

复制代码

-  BEGIN  
  --定义变量  declare testrangeid BIGINT;  
declare versionid BIGINT;   
declare done int;  
--创建游标,并存储数据  declare cur_test CURSOR for   
   select id as testrangeid,version_id as versionid from tp_testrange;  
--游标中的内容执行完后将done设置为1  
 DECLARE CONTINUE HANDLER FOR NOT FOUND SET done=1;   
--打开游标  open cur_test;  
--执行循环    posLoop:LOOP  
--判断是否结束循环  
        IF done=1 THEN    
      LEAVE posLoop;  
    END IF;   
--取游标中的值  
    FETCH  cur_test into testrangeid,versionid;  
--执行更新操作  
    update tp_data_execute set version_id=versionid where testrange_id = testrangeid;  
  END LOOP posLoop;  
--释放游标  CLOSE cur_test;  
  
END  -

复制代码

例子2:

我们现在要用存储过程做一个功能,统计iphone的总库存是多少,并把总数输出到控制台。

复制代码

--在windows系统中写存储过程时,如果需要使用declare声明变量,需要添加这个关键字,否则会报错。  delimiter //  drop procedure if exists StatisticStore;  
CREATE PROCEDURE StatisticStore()  
BEGIN  
    --创建接收游标数据的变量  
    declare c int;  
    declare n varchar(20);  
    --创建总数变量  
    declare total int default 0;  
    --创建结束标志变量  
    declare done int default false;  
    --创建游标  
    declare cur cursor for select name,count from store where name = 'iphone';  
    --指定游标循环结束时的返回值  
    declare continue HANDLER for not found set done = true;  
    --设置初始值  
    set total = 0;  
    --打开游标  
    open cur;  
    --开始循环游标里的数据      read_loop:loop  
    --根据游标当前指向的一条数据  
    fetch cur into n,c;  
    --判断游标的循环是否结束  
    if done then  
        leave read_loop;    --跳出游标循环  
    end if;  
    --获取一条数据时,将count值进行累加操作,这里可以做任意你想做的操作,  
    set total = total + c;  
    --结束游标循环  
    end loop;  
    --关闭游标  
    close cur;  
  
    --输出结果  
    select total;  
END;  
--调用存储过程  call StatisticStore();

复制代码

fetch是获取游标当前指向的数据行,并将指针指向下一行,当游标已经指向最后一行时继续执行会造成游标溢出。
使用loop循环游标时,他本身是不会监控是否到最后一条数据了,像下面代码这种写法,就会造成死循环;

read_loop:loop  
fetch cur into n,c;  
set total = total+c;  
end loop;

在MySql中,造成游标溢出时会引发mysql预定义的NOT FOUND错误,所以在上面使用下面的代码指定了当引发not found错误时定义一个continue 的事件,指定这个事件发生时修改done变量的值。

declare continue HANDLER for not found set done = true;

所以在循环时加上了下面这句代码:

--判断游标的循环是否结束  if done then  
    leave read_loop;    --跳出游标循环  end if;

如果done的值是true,就结束循环。继续执行下面的代码

使用方式

游标有三种使用方式:
第一种就是上面的实现,使用loop循环;
第二种方式如下,使用while循环:

复制代码

drop procedure if exists StatisticStore1;  
CREATE PROCEDURE StatisticStore1()  
BEGIN  
    declare c int;  
    declare n varchar(20);  
    declare total int default 0;  
    declare done int default false;  
    declare cur cursor for select name,count from store where name = 'iphone';  
    declare continue HANDLER for not found set done = true;  
    set total = 0;  
    open cur;  
    fetch cur into n,c;  
    while(not done) do  
        set total = total + c;  
        fetch cur into n,c;  
    end while;  
      
    close cur;  
    select total;  
END;  
  
call StatisticStore1();

复制代码

第三种方式是使用repeat执行:

复制代码

drop procedure if exists StatisticStore2;  
CREATE PROCEDURE StatisticStore2()  
BEGIN  
    declare c int;  
    declare n varchar(20);  
    declare total int default 0;  
    declare done int default false;  
    declare cur cursor for select name,count from store where name = 'iphone';  
    declare continue HANDLER for not found set done = true;  
    set total = 0;  
    open cur;  
    repeat  
    fetch cur into n,c;  
    if not done then  
        set total = total + c;  
    end if;  
    until done end repeat;  
    close cur;  
    select total;  
END;  
  
call StatisticStore2();

复制代码

游标嵌套

在mysql中,每个begin end 块都是一个独立的scope区域,由于MySql中同一个error的事件只能定义一次,如果多定义的话在编译时会提示Duplicate handler declared in the same block。

复制代码

drop procedure if exists StatisticStore3;  
CREATE PROCEDURE StatisticStore3()  
BEGIN  
    declare _n varchar(20);  
    declare done int default false;  
    declare cur cursor for select name from store group by name;  
    declare continue HANDLER for not found set done = true;  
    open cur;  
    read_loop:loop  
    fetch cur into _n;  
    if done then  
        leave read_loop;  
    end if;  
    begin  
        declare c int;  
        declare n varchar(20);  
        declare total int default 0;  
        declare done int default false;  
        declare cur cursor for select name,count from store where name = 'iphone';  
        declare continue HANDLER for not found set done = true;  
        set total = 0;  
        open cur;  
        iphone_loop:loop  
        fetch cur into n,c;  
        if done then  
            leave iphone_loop;  
        end if;  
        set total = total + c;  
        end loop;  
        close cur;  
        select _n,n,total;  
    end;  
    begin  
            declare c int;  
            declare n varchar(20);  
            declare total int default 0;  
            declare done int default false;  
            declare cur cursor for select name,count from store where name = 'android';  
            declare continue HANDLER for not found set done = true;  
            set total = 0;  
            open cur;  
            android_loop:loop  
            fetch cur into n,c;  
            if done then  
                leave android_loop;  
            end if;  
            set total = total + c;  
            end loop;  
            close cur;  
        select _n,n,total;  
    end;  
    begin  
      
    end;  
    end loop;  
    close cur;  
END;  
  
call StatisticStore3();

复制代码

上面就是实现一个嵌套循环,当然这个例子比较牵强。凑合看看就行。

动态SQL

Mysql 支持动态SQL的功能

set @sqlStr='select * from table where condition1 = ?';  
prepare s1 for @sqlStr;  
--如果有多个参数用逗号分隔  execute s1 using @condition1;  
--手工释放,或者是 connection 关闭时, server 自动回收  deallocate prepare s1;


关于vue的npm run dev和npm run build

├─build
│   ├─build.js
│   ├─check-versions.js
│   ├─dev-client.js
│   ├─dev-server.js
│   ├─utils.js
│   ├─vue-loader.conf.js
│   ├─webpack.base.conf.js
│   ├─webpack.dev.conf.js
│   ├─webpack.prod.conf.js
│   └─webpack.test.conf.js
├─config
│   ├─dev.env.js
│   ├─index.js
│   ├─prod.env.js
│   └─test.env.js
├─...
└─package.json
以上是关于bulid与run的所有文件

指令分析

package.json里面

"dev": "node build/dev-server.js",

"build": "node build/build.js",

 

意思:运行”npm run dev”的时候执行的是build/dev-server.js文件,

运行”npm run build”的时候执行的是build/build.js文件。

build文件夹分析

build/dev-server.js

npm run dev 执行的文件build/dev-server.js文件,执行了:

检查node和npm的版本
引入相关插件和配置
创建express服务器和webpack编译器
配置开发中间件(webpack-dev-middleware)和热重载中间件(webpack-hot-middleware)
挂载代理服务和中间件
配置静态资源
启动服务器监听特定端口(8080)
自动打开浏览器并打开特定网址(localhost:8080)

说明: express服务器提供静态文件服务,不过它还使用了http-proxy-middleware,一个http请求代理的中间件。前端开发过程中需要使用到后台的API的话,可以通过配置proxyTable来将相应的后台请求代理到专用的API服务器。

build/webpack.base.conf.js

dev-server依赖的webpack配置是webpack.dev.conf.js文件,

测试环境下使用的是webpack.prod.conf.js

webpack.dev.conf.js中又引用了webpack.base.conf.js

webpack.base.conf.js主要完成了下面这些事情:

  1. 配置webpack编译入口

  2. 配置webpack输出路径和命名规则

  3. 配置模块resolve规则

  4. 配置不同类型模块的处理规则

这个配置里面只配置了.js、.vue、图片、字体等几类文件的处理规则,如果需要处理其他文件可以在module.rules里面配置。

build/webpack.dev.conf.js

在webpack.base.conf的基础上增加完善了开发环境下面的配置,主要包括下面几件事情:

将hot-reload相关的代码添加到entry chunks
合并基础的webpack配置
使用styleLoaders
配置Source Maps
配置webpack插件

build/check-versions.js和build/dev-client.js

最后是build文件夹下面两个比较简单的文件,

dev-client.js似乎没有使用到,代码也比较简单,这里不多讲。

check-version.js完成对node和npm的版本检测

build/utils.js和build/vue-loader.conf.js

webpack配置文件中使用到了utils.js和vue-loader.conf.js这两个文件,utils主要完成下面3件事:

配置静态资源路径
生成cssLoaders用于加载.vue文件中的样式
生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件


vue-loader.conf则只配置了css加载器以及编译css之后自动添加前缀。

build/build.js

构建环境下的配置,

build.js主要完成下面几件事:

loading动画
删除创建目标文件夹
webpack编译
输出信息

build/webpack.prod.conf.js

构建的时候用到的webpack配置来自webpack.prod.conf.js,该配置同样是在webpack.base.conf基础上的进一步完善。主要完成下面几件事情:

合并基础的webpack配置
使用styleLoaders
配置webpack的输出
配置webpack插件
gzip模式下的webpack插件配置
webpack-bundle分析
说明: webpack插件里面多了丑化压缩代码以及抽离css文件等插件。

config文件夹分析

config/index.js

config文件夹下最主要的文件就是index.js了,

在这里面描述了开发和构建两种环境下的配置,前面的build文件夹下也有不少文件引用了index.js里面的配置。

config/dev.env.js、config/prod.env.js和config/test.env.js

这三个文件就简单设置了环境变量而已,没什么特别的。

这是webpack的基本入门,webpack还有很多插件,还需要去探索

后面写这几个文件的源码解释。


Google Chrome 的开发者工具可以进一步提高你的工作效率。以下是我个人日常 Web 开发中常用的十个 Chrome 扩展。

CSS Peeper

CSS Peeper 是一个用于 CSS 检查的多功能工具,它允许您快速查看任何网站的样式、字体、调色板和资源。

CSS Peeper

CSS Peeper

CSS Peeper

点击此处安装扩展

React Developer Tools

React Developer Tools 是与 React 使用时的实际扩展,为 React 应用程序提供了所有必要的检查工具。

React Developer Tools

Vue.js devtools

Vue.js devtools 用于调试 Vue.js 应用程序的 Chrome 和 Firefox DevTools 扩展。

image.png

点击此处安装扩展

Screenity

Screenity 适用于 Chrome 的功能强大的屏幕录像机。它的功能亮点非常多,比如可以录制浏览器的标签页、整个屏幕(浏览器外),以及摄像头,通过在屏幕上的任意位置绘制、添加文本和创建箭头✏️

Vue


  • Vue2.0:Vue2.0 文档

  • Vue3.0:Vue3.0 文档

  • Vue-Router:Vue.js 官方的路由管理器。

  • Vuex:Vue.js 应用程序开发的状态管理模式。

  • Element-UI:饿了么UI组件库

  • View UI:一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。

  • Vuetify:用于构建功能丰富、快速的应用程序。

  • Buefy-UI: 简单且轻量的UI库。

  • Quasar: 编写代码一次并同时将其部署为网站、移动应用和/或Electron应用。

  • Vue Material: 一个轻量级的框架, 建立在谷歌的 Material Design 基础上。

  • Vux: 基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。

  • Vant: 有赞前端团队开源的移动端组件库。

  • NutUI: 一套京东风格的轻量级移动端Vue组件库。

  • YDUI Touch一只基于Vue2.x的移动端&微信UI。

  • Ant Design Vue: Vue UI组件库,开箱即用的高质量 Vue 组件。

  • Wot Design: 根据京东商家侧的UI设计规范(京麦移动端设计规范)开发,旨在给商家提供统一的UI交互,同时提高研发的开发效率。

  • VuePress: Vue 驱动的静态网站生成器。

  • Gridsome: 基于 Vue.js 构建的 Jamstack 框架。让开发人员可以轻松地构建静态生成的网站和应用程序,这些网站和应用程序 。

  • better-scroll: 解决移动端(已支持PC)各种滚动场景需求的插件。

  • vue-multiselect: Vue多选。

  • vue-table: vue-table-数据表简化!

  • vue-infinite-scroll: vue 的无限滚动插件。

  • vue-progressbar: Vue 进度条插件。

  • vue-devtools: Vue 游览器调试插件。

React


TypeScript


Flutter


微信小程序


  • 微信小程序文档

  • TouchUI WX: 一套完全免费的微信小程序开发框架,扩展了小程序的能力。

  • WePY:让小程序支持组件化开发的框架,一个最受欢迎的小程序框架.

  • mpvue:一个使用 Vue.js 开发小程序的前端框架。

  • taro: 一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。

  • uni-app: 一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

工具库


  • jQuery: 一个高效、精简并且功能丰富的 JavaScript 工具库。

  • Zepto.js: 一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。

  • Moment.js: JavaScript 日期处理类库。

  • date-fns.js: 一个现代的 JavaScript 日期工具类库,提供了最全面、最简单和一致的工具集,用于在浏览器和 Node.js 中操作。

  • Underscore.js:是一个JavaScript实用库,提供了一整套函数式编程的实用功能。

  • Sugar.js: 一个可以用来处理原生对象的库。

  • Math.js: Javascript 扩展数学库。

  • Lodash.js:一个一致性、模块化、高性能的 JavaScript 实用工具库。

  • cnhammer.js: 一个可以识别触摸、鼠标和点击事件等手势的开放源码类库。

  • Ramda.js:一款实用的 JavaScript 函数式编程库。

  • Axios.js:一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

  • lazy.js: 功能类似 Underscore 和 Lodash。

  • Voca.js: 一个用于操作字符串的 Javascript 库。

  • Babel.js: 一个 JavaScript 编译器。

  • RequireJS: 一个JavaScript模块加载器。

  • RxJS: 使用 Observables 的响应式编程的库,它使编写异步或基于回调的代码更容易。

  • sea.js: 一个适用于 Web 浏览器端的模块加载器。

  • Backbone.js: 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。英文

  • reveal.js: 一个能够帮助我们很轻易地使用 HTML 创建一个漂亮的演示文稿的框架。

  • Cycle.js: 一个函数式和响应式的 JavaScript 框架,编写可观测代码。

  • system.js:一个通用的模块加载器,它能在浏览器或者 NodeJS 上动态加载模块,并且支持 CommonJS、AMD、全局模块对象和 ES6 模块。

  • ESL.js:一个浏览器端、符合AMD的标准加载器,适合用于现代Web浏览器端应用的入口与模块管理。

  • expect.js: 简约的、适用于 Node.js 和浏览器端的 BDD 式断言工具。

  • can.js: 客户端JavaScript架构库的集合。

  • most.js: 用于反应式编程的工具包。

  • foundation.js: 一个支持响应式布局的前端框架。

  • Semantic.js: 一款开发框架,帮助开发者使用对人类友好的 HTML 语言构建优雅的响应式布局。

  • Bulma: 一个基于 Flexbox 布局技术的免费、开源的现代 CSS 框架。

  • Phaser.js: 一款快速、免费以及开源 HTML5 游戏框架,它支持 WebGL 和 Canvas 两种渲染模式,可以在任何 Web 浏览器环境下运行,游戏可以通过第三方工具转为 iOS、Android 支持的 Native APP,允许使用 JavaScript 和 TypeScript 进行开发。

  • Request.js: 针对浏览器和节点的请求库。

  • Hammer.js: 一个开源的,轻量级的 JavaScript 库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件。

  • Ember.js: 一个开源的 JavaScript 客户端框架,用于开发Web应用程序并使用MVC(模型 - 视图 - 控制器)架构模式。

  • handlebars.js: 一个 JavaScript 语义模板库,通过对视图(view)和数据的分离来快速构建 Web 模板。

  • jqueryui: jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。

  • Sizzle.js: 一个纯 JavaScript 实现的 CSS 选择器引擎。

  • Avalon.js: 一个迷你、易用、高性能的前端MVVM框架。

  • String.js: JavaScript字符串中没有包含的方法,例如转义html、解码html实体、剥离标记等。

Js插件


  • Swiper.js:移动端网站的内容触摸滑动插件。

  • Glide.js: 一个无依赖关系的JavaScript ES6滑块和carousel。

  • QRCode.js: 二维码生成插件。

  • slidePage.js: slidePage3 特别适合主流前端框架开发,无任何依赖库,一个优化的全屏插件。

  • fullPage.js: fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站。

  • Validate.js: JavaScript表单验证类库。

  • tree-d3.js: tree 树状图 d3.js。

  • zTree.js: 树插件。

  • jstree: jquery插件,提供交互式树。支持HTML和JSON数据源以及AJAX加载。

  • Datatables.js:一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。

  • DatePicker.js: 时间选择插件。

  • layDate.js: layDate 日期与时间组件。

  • Date.js: 一个开放源代码的JavaScript Date库,用于解析,格式化和处理。

  • clipboard.js:现代化的拷贝文字插件。

  • PDF.js: 一个基于 web 标准的通用 pdf 解析和渲染库。

  • jquery-i18n: 一个轻量级的jQuery插件,用于像Java Resource Bundles中那样从“ .properties”文件为javascript提供国际化。

  • i18next

  • TimelineJS: 时间轴插件。

  • amfe-flexible: 移动端适配。

  • lazyLoad.js:Lazy Load延迟加载图像插件,直到用户滚动到它们才显示!

  • spin.js: Loading界面插件。

  • CodeMirror.js: 文本编辑器。

  • TinyMCE.js:文本编辑器。

  • Video.js: 一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。

  • SweetAlert.js: 一个 JavaScript 插件,能够完美替代 JavaScript 自带的 alert 弹出框,并且功能强大、设计优美。

  • PhotoSwipe.js: 一个 JavaScript 实现的相册组件,没有外部依赖。

  • highlight.js: 用JavaScript编写的语法突出显示工具。

  • Cropper.js: 一款非常强大却又简单的图片裁剪工具,它可以进行非常灵活的配置,支持手机端使用,支持包括 IE9 以上的现代浏览器。

  • Store.js: 跨浏览器存储插件。

  • Js-cookie: 一个简单,轻巧的JavaScript API,用于处理Cookie.

  • Mousetrap.js: 一个用于处理键盘快捷键的简单库。

  • FlexSlider.js: 全屏响应式轮播图插件。

  • Leaflet.js: 一个开放源代码的JavaScript库,用于移动友好的交互式地图。

  • md5.js: md5加密。

动画库


  • iTyped.js: 简单 Javascript 动画输入,没有任何依赖关系。

  • Three.js: 3D显示动画库。

  • Animejs:一个轻量的JavaScript 动画库, 拥有简单而强大的API。可对 CSS 属性、 SVG、 DOM 和JavaScript 对象进行动画。

  • Mo.js: 一款效果非常炫酷的HTML5 SVG气泡导航和波浪式页面切换特效。

  • Velocity.js:一个简单易用、高性能、功能丰富的轻量级JS动画库。

  • ScrollReveal.js: 一个JavaScript库,用于在元素进入/离开视口时轻松对其进行动画处理。

  • Kute.js: 一个完全成熟的原生 JavaScript 动画引擎,具有跨浏览器动画的基本功能。

  • Bounce.js:快速创建漂亮的 CSS3 动画效果。

  • Dynamicsjs: 一个JavaScript库,用于创建基于物理的动画。

  • GreenSock.js):适用于现代网络的专业级JavaScript动画。

  • Particles.js:用于创建粒子的轻量级JavaScript库。

  • Matter.js:Matter.js是Web的2D物理引擎。

  • Parallax.js:滚动视差效果封装,便于快速调用实现。

  • Tween.js: 补间动画。

  • Ramjet.js: 制作从一个元素变化为另外一个元素的动效,它能作用于DOM元素、SVG、静态和动态的图片。

  • Rellax.js:让页面滚动更有趣的动画库。

  • Hover.css: 一组CSS3动力悬停效果,可应用于链接,按钮,徽标,SVG,特色图像等。

  • Animista.css: 一个在线动画生成器,同时也是一个动画库。

  • Animate.css:一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果。

  • Vivify.css:一个免费的CSS动画库。

  • Magic Animations CSS3:CSS3 动画库。

  • cssanimation:一堆不同动画集合,CSS3 动画包。

  • Angrytools: 可以做动画生成器,同时也是一个动画库。

Css 预处理


  • sass: 世界上最成熟、最稳定、最强大的专业级CSS扩展语言。

  • less: 一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。

  • stylus: 一个高效、动态以及丰富的 CSS 预处理器。

图表库


  • C3.js: C3.js 开源图表库

  • Chart.js:为设计和开发人员准备的简单、灵活的 JavaScript 图表工具。

  • Chartist.js: 一个简单的 JavaScript 动画库,你能够自制美丽的响应式图表,或者进行其他创作。

  • D3.js: 一个非常强大的图形JavaScript库。D3.js可以作为图表库的构建块且免费。

  • Echarts: 数据可视化图表库。

  • Flot.js: jQuery的Javascript图表库。

  • HighCharts.js:兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库。

  • koolchart.js:基于HTML5 Canvas的JavaScript图表库。

  • Recharts: Recharts是一个用React和D3构建的重新定义的图表库。

包管理工具


  • npm: 包管理工具。

  • yarn: 快速、可靠、安全的依赖管理工具。

  • bower

打包工具


  • webpack: 一个现代 JavaScript 应用程序的静态模块打包器。

  • Parcel: Web 应用打包工具,适用于经验不同的开发者。

  • rollup: 一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码。

Node


  • Node 中文网文档

  • Express:基于 Node.js 平台,快速、开放、极简的 Web 开发框架。

  • koa: Koa -- 基于 Node.js 平台的下一代 web 开发框架。

  • Egg:为企业级框架和应用而生。

  • Meteor: 一个web APP开发框架。

  • Nodal: Node.js的网络服务器,经过优化可快速高效地构建API服务。

  • Keystone: 以Express和MongoDB为基础搭建的Node.js CMS和web应用程序平台。

  • Sails:一个优秀的web后台开发框架。它基于著名的express,添加了很多功能模块,支持REST、各种流行数据库等。

  • Loopback: LoopBack 框架是由一组Node.js的模块构成的。

  • Pomelo:一个轻量级的服务器框架,它最适合的应用领域是网页游戏、社交游戏、移动游戏的服务端,开发者会发现pomelo可以用如此少的代码达到强大的扩展性和伸缩性。。

  • Totaljs: Node.js 的 MVC 框架。

  • Derby: DerbyJS 是一个 MVC 框架,帮助编写实时,交互的应用。

  • Socket: Socket.io是一个类库,可以在浏览器与服务器之间实现实时、双向、基于事件的通信。英文

  • Mojito: 一个模块化的,由源代码控制的拆分测试框架,可让您通过Git / CI构建,启动和分析实验。

  • Next: 用于构建高效且可伸缩的服务端应用程序的渐进式 Node.js 框架。

  • ThinkJS: 一款面向未来开发的 Node.js 框架,整合了大量的项目最佳实践,让企业级开发变得更简单、高效。

  • Mean

测试工具


  • eslint: 可组装的JavaScript和JSX检查工具。

  • Jest: 一个令人愉快的 JavaScript 测试框架,专注于简洁明快。

  • mocha: 一个功能丰富的javascript测试框架,运行在node.js和浏览器中,使异步测试变得简单有趣。

  • JSHint: 用于标记用JavaScript编写的程序中的可疑用法。

  • JScs.js: 验证JavaScript代码。

其他


  • Markdown: 一份免费且开源的 Markdown 参考手册,详细讲解了 Markdown 这一简单、易用的文档格式化标记语言的用法。

  • Ionic 一个强大的 HTML5 应用程序开发框架。

  • mui: 最接近原生APP体验的高性能前端框架。

  • leetCode: 力扣提供海量技术面试资源,帮助你高效提升编程技能,轻松拿下世界IT 名企。

  • font-awesome: 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用 CSS 的样式。



作者:涅槃快乐是金
链接:https://www.jianshu.com/p/d8584f850d65
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


前言

哈哈哈哈,最近事情太多了,已经快三个月没更新了,现在也忙的差不多了,咱们更新继续~~

今天给大家分享的是关于如何从零开始搭建 B 端设计规范

时间转眼即逝,掐指一算,我接触 B 端已有 4 年之久了,当年刚接触的时候,B 端的从业人员比例还是很少的。近两年 B 端越来越火热,无论从设计风格还是产品数量上,都有了很大的提升。

随着 B 端的产品越来越完善,要求设计师的专业性也要越来越强。设计规范作为基础中的基础,是大家都要熟练掌握的技能,我们不仅要会运用各种规范,还要会撰写适合产品的规范。

分享开始,敲黑板~~

一  设计规范的目标

在搭建设计系统之前,我们要想清楚设计规范的目标是什么?使用者是谁?

目标:保持产品风格统一性提高设计输出效率减少无效沟通

使用人群:UI交互前端测试。

二  设计原则

设计规范要符合基本的设计原则,否则你的规范会杂乱无章。这里我总结了 6 条原则供大家参考。

Unity(统一性):页面风格、色彩、布局等要保持全局统一,不可为了某一功能的美观而去破坏整体性。

Accessibility(易用性):易用是首要考虑的因素,能一步解决的事情绝不两步。

Proximity(亲密性):如果信息的关联性强,则他们的距离就要相应的缩短,让他们看起来是一个视觉单元;反之,则距离要加大。要让用户对信息的区域划分一目了然。

Alignment(对齐原则):在界面中,将元素进行对齐,即符合用户的认知,也可以引导视觉流向,让用户更加流畅的阅读信息。

Contrast(对比原则):对比是增加视觉效果最有效方法之一,同时也能在不同元素之间建立一种有组织的层次结构,让用户快速识别关键信息。

Repetition(重复原则):相同的元素在整个界面中不断重复,不仅可以有效降低用户的学习成本,也可以帮助用户识别出这些元素之间的关联性。

三  框架布局

这里一般采用栅格布局。说到栅格,有好多小伙伴又要再回顾一下知识点了。我今天再把栅格知识帮大家复习一遍,如果之前不是很了解栅格的,拿个小本本记下来,要考~~

栅格布局能够适应各种屏幕尺寸及分辨率,确保整体布局的一致性。

栅格建议使用 1、2、3、4、6 切分布局,可以进行多种布局组合,并在整个设计中保持布局的结构的一致性。

页面中一般采用 24 列自适应网格,你可以使用它为各种屏幕尺寸创建灵活的布局。

边距 Margins、列 Columns、间隔 Gutters 分别是什么?

边距 Margins:边距是内容与左右边缘之间的空间。控制台内容区的边距选用 8 的倍数为设定值,一般采用 16/24px 的居多。

需要注意的是:

减去 margin 后,列在页面区域均分,保证每列的宽度是一致的;

在区域有 margin 的情况下,划分列的区域不能包含 margin。

列 Columns:在电脑端列的数量是个常量(24列),每一列宽度的尺寸随屏幕大小进行自适应调整。

间隔 Gutters:间隔是列与列之间的空隙,控制台产品 gutter 使用固定值也要是 8 的倍数,一般采用 16/24px。

需要注意的是:

布局的左右两边的分界线 gutter 可以为 0;

必须保证 column 的宽度是一致的。

边距 Padding:padding 指一个元素的内容和其边界之间的空间,padding 最小值是 4px,然后其余均为 8px 的倍数,建议值为 8/16/24px。

内容区定宽:此场景常用于用户欢迎页、结果页等需要将内容区宽度设置为固定值的页面。此时 column 和 gutter 保持不变,根据页面宽度改变 margin 的值。

四  设计风格

4.1  Color(颜色)

色彩内容主要包含基础色(如品牌色、黑色、白色)和功能色(如链接色、提醒色等)。图表配色为单独的配色体系。

在前期制定颜色规范的时候,精益求精的设定颜色,切忌颜色过多。

颜色的状态色尽量用原色进行转换,设置一个合理的变色公式,让所有颜色的状态色都根据这个公式进行转换。例:

Hover:H不变 S加10 B减5

Click:H不变 S加20 B减10

Disable:HSB均不变,不透明度 30%

在设计规范中,尽量把颜色的色值和 rgba 值都写出来(这里是强迫症患者要标的,因为有时候色值完全一样,但 rgba 数值略有不同,虽然效果一样,但是对于强迫症的你来说,舒服吗?)

状态色有 4 状态色:Normal、Hover、Click、Disable

在设定图表颜色的时候,要考虑不同的使用样式(柱状图、环形图、饼图等...),同时也要考虑他的延展性,比如你设定 12 个 chart 色值,在使用的时候按着顺序来使用,当超过 12 个后可以为同一个颜色。

4.2  Font(文字)

设定统一的字体规范,使用非衬线字体在各个操作系统下都有最佳展示效果。

首先,要设置一个字体家族,保证产品界面的最优展示。

例如(仅作为展示,不是建议):font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

4.2.1  字号

现在主流的产品中,主体字为 12px / 14px 的居多,可根据自身的产品定位以及用户的习惯进行设定。字号不要出现奇数,否则在一些显示器上会有对不齐像素的状况发生。

4.2.2  行高

行高常规的有两种规范:

字号+8px;

1.5倍 / 2倍 * 字号。

我喜欢用第一种,就是字号大小 + 8px 作为行高的规范。行高是不可被忽略的重要细节之一,因为在算间距的时候,行高是要被算进去的。

4.2.3  字重

字重有很多,但是在真正的产品使用中,字重尽量不要太多种,2~3 种即可。

4.2.4  字体颜色

字体颜色数量建议在 3~4 个,不宜过多,但是每个层级之间区分要大一些。

文本应该保持至少 4.5:1 (基于亮度值计算)的对比度以保持文本清晰;最佳对比度为 7:1。测试对比度的网站:https://contrast-ratio.com

WCAG 2.0 中将颜色对比等级分为 3 种,A级,AA级,AAA级,等级越高意味着颜色的对比度越高,呈现出来的视觉压力越大。

A级:对比度 3:1,是普通观察者可接受的最低对比;

AA级:对比度 4.5:1,是普通视力损失的人可接受的最低对比度;

AAA级:对比度 7:1,是严重视力损失的人可接受的最低对比度。

4.3  icon(图标)

设定统一的图标使用规范,让视觉效果更和谐。

4.3.1  Icon 大小

icon 的常用尺寸有很多,需要注意的是 icon 的大小中,相邻的两个尺寸至少相差 4px,否则你会在后期用的时候会有选择困难症。同时功能 icon 尽量贴边或尽量贴边绘制,保证展现的视觉统一性(操作 icon 除外)。

单独 icon 使用的时候,尽量不要太小,最小值建议为 12px。

4.3.2  Icon 热区

icon 的热区经常被设计师和开发所忽略,本身 icon 的尺寸一般就很小,再加上如果没有设置热区的话,操作体验极差。所以一定一定要设置 icon 的热区,设置的值我建议为 icon 大小的 2倍。例:icon 大小为 14 * 14px,则热区大小为 28 * 28px。

4.4  size(尺寸)

页面内布局间、模块间、模块内的各部件距离。

尺寸大部分规范中都用的是 8 的倍数,不用纠结,直接用就行。我这里有个公式:Sn = 8px * n,n为正整数。特殊:最小支持4px。

五  交互

交互我分为两个方面:交互方式交互状态

5.1  交互方式

交互方式指的是对某一个操作所进行的具体行为,比如刷新方式有下拉上滑按压点击等方式,这就是所谓的交互方式。交互方式有很多种,没有最优,只有最适合。

交互方式要保持产品的统一性,同类别的交互不可有不同的操作感受。同时交互方式要符合大众的认知习惯,可创新但不可违背潜意识。

随着时代的发展,交互方式也在不断的更新。比如最开始的手机是按键式的,随着大众对屏幕大小的需求不断提升,到了现在的全面屏手机,如果这个时候你再去做当年火爆的按键手机,那你就只能跟市场说拜拜。

总结交互方式的几个关键点:创新统一紧跟趋势

5.2  交互状态

一个完整的产品生态是不会遗漏每一个交互状态的。

同样是做售票的软件,为什么高铁管家就比 12306 做的好呢?是因为高铁管家把很多交互状态友好的做了展现反馈,而不是冰冷的数据吞吐。

同类产品中,每个都有自己独特的交互状态,可能你一直用某个软件的原因只是有个功能的交互状态打动了你,从此你就深深爱上了它。

现在工作中,我们都在讲人效,拼命的去更新迭代,去研发新功能,开拓新产品,往往会忽略交互状态这个点,因为很多时候付出收获比是很低的,但是真正好的产品,这部分是不可或缺的。

交互真的太大了,单独写一篇文章都写不完,这篇我只能抛砖引玉,勾起你的思维,如果有任何要探讨的,欢迎来叨扰。

六  引导

引导分为 5 种:Newbie guide(新手引导)Steps guide(步骤引导)Help / Operation guide(帮助/操作引导)New function guide(新功能引导)Blank guide(空白页引导)

6.1  Newbie guide(新手引导)

新手引导是针对新用户的,首次进入产品的时候,我们要着重的把自己产品的亮点以及操作快速的介绍给新用户,让他用最短的时候上手我们的产品。

新手引导要言简意赅,并且如果非必要的话,尽量给用户一个可以直接关闭的按钮,让用户有选择权。我就非常讨厌有一些产品的新手引导,必须走完全部流程后才能关闭,恶心的不行。

6.2  Steps guide(步骤引导)

步骤引导一般用在有固定操作步骤的场景下,指引用户一步一步的完成想要的结果。常规的步骤引导建议在 3~5 步之间为合理。

6.3  Help/Operation guide(帮助/操作引导)

帮助/操作引导的展现方式是比较丰富多彩的,可以是提示语、辅助性文本、tooltips 等等,他的作用就是辅助用户去了解并且知道如何操作这个功能。

这个也是在产品中使用频率最高的,运用好他,可以让你的产品事半功倍。

6.4  New function guide(新功能引导)

他就是常用在新功能上线后,用户第一次登陆相关页面后做的一些引导,目的是为了告诉用户我们做了新东西,你快来试试吧。

6.5  Blank guide(空白页引导)

空白页引导一般用在在缺省页,对用户进行一些操作指引,让无信息的页面变得更有价值。比如百度在一些缺省页上就放了一些关于失踪儿童的信息,就因为做了这个引导,帮助了千万个家庭找到了失散的孩子。

七  组件

组件是设计系统里面最为庞大的东西。组件可以分为了 5 类:

Navigation(导航)

Data Entry(数据录入)

Data Display(数据显示)

Feedback(反馈)

Other(其它)

基本上这几类已经覆盖了多数的组件,下面我把我自己整理的这几类分别都包含哪些组件,以及组件的简单介绍给列出来,快来保存吧。

7.1  Navigation(导航)

Affix(固钉):将页面元素钉在可视范围。

Breadcrumb(面包屑):显示当前页面在系统层级结构中的位置,并能向上返回。

Menu(导航菜单):为页面和功能提供导航的菜单列表。

Pagination(分页):采用分页的形式分隔长列表,每次只加载一个页面。

Steps(步骤条):引导用户按照流程完成任务的导航条。

7.2  Data Entry(数据录入)

Checkbox(多选框):可选择多个。

Radio(单选框):只可选择一个。

Switch(开关):开关选择器。

Form(表单):具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。

Input(输入框):通过鼠标或键盘输入内容,是最基础的表单域的包装。

Select(选择器):下拉选择器。

Skeleton(加载占位图):在需要等待加载内容的位置提供一个占位图。

Time selectors and sliders(日期时间选择过滤器):当用户需要输入一个时间或日期,可以点击标准输入框,弹出时间面板进行选择。

Transfer(穿梭框):双栏穿梭选择框。

Upload(上传):文件选择上传和拖拽上传控件。

7.3  Data Display(数据显示)

Badge(微标):图标右上角的圆形徽标数字。

Card(卡片):通用卡片容器。

Collapse(折叠面板):可以折叠/展开的内容区域。

Popover(气泡卡片):点击/鼠标移入元素,弹出气泡式的卡片浮层(可操作)。

Tabs(标签页):选项卡切换组件。

Table(表格):展示行列数据。

Tag(标签):进行标记和分类的小标签。

Timeline(时间轴):垂直展示的时间流信息。

Tooltip(文字提示):简单的文字提示气泡框。

Tree(树形控件):文件夹、组织架构、生物分类、国家地区等等,世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系,并具有展开收起选择等交互功能。

7.4  Feedback(反馈)

Alert(警告提示):警告提示,展现需要关注的信息。

Notification(通知提示框):全局展示通知提醒信息。

Drawer(抽屉):抽屉从父窗体边缘滑入,覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到到原任务。

Modal(对话框):模态对话框和非模态对话框。

Progress(进度):展示操作的当前进度。

Spin(加载):用于页面和区块的加载中状态。

7.5  Other(其它)

Button(按钮):按钮用于开始一个即时操作。

chart(图表):图标数据显示。

Copyright(版权):版权信息。

Divider(分割线):区隔内容的分割线。

logo(标志):logo 的使用。

LocaleProvider(国际化):为组件内建文案提供统一的国际化支持。

Text link(文字链):点击有链接跳转的文字。

Scrollbar(滚动条):在特定界面区域内进行内容的更多展示。

以上组件可根据自己的产品进行增删,把组件规范设计完成后,整个设计规范就完成了 90% 以上,可以算一个比较完整的设计规范了。

总结

每一个设计规范都是有灵魂的,规范是为了更好的做设计,而不是限制设计师双手的枷锁。

设计规范也不是一成不变的,他在落地使用的时候多少都会有问题,需要慢慢的去反复检验规范的合理性,发现不合理的及时更正。

最后,希望本编文章能对看完的你有所帮助,这也是我做分享的初衷,我们下期见。



作者:友设青年
链接:https://www.jianshu.com/p/4752bf2e25bb
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。