搜索到
11
篇与
笔记
的结果
-
css/less书写规范 **一.属性规范1.属性书写顺序** （1）位置属性(position, top, right, z-index, display, float等)；（2）大小(width, height, padding, margin)；（3）文字系列(font, line-height, letter-spacing, color- text-align等)；（4）背景(background, border等)；（5）其他(animation, transition等)。总结：建议遵循 布局定位属性-->自身属性-->文本属性-->其他属性。/推荐顺序/.example { position: absolute; width: 100px; font-size: 20px; background-color: #ccc;}/不推荐顺序/.example { width: 100px; background-color: #ccc; position: absolute; font-size: 20px;}2.属性用法规范 （1）缩进：建议使用4个空格做为一个缩进层级。（2）非特殊场景尽量少使用!important，如果使用须添加必要的注释。（3）属性定义必须另起一行，且属性定义后以分号结尾。（4）选择器与"{"之间必须包含空格；属性名与之后的":"之间不允许包含空格；":"与属性值之间必须包含空格。（5）尽量少使用将样式的定义写在标签中（如内联样式：style="color:red;"），也不要用js为元素添加内联样式。3.属性简写 属性可以简写时，强制采用简写方式，可以精简代码且提高阅读体验。（1）如padding,margin,font,color等等/推荐写法/.example { padding: 5px 10px; }/不推荐写法/.example { padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; }（2）小数点前面的'0'建议去除/推荐写法/.example { font-size: .8rem; }/不推荐写法/.example { font-size: 0.8rem; }（3）使用十六进制表示颜色值css 中的颜色值可以使用十六进制来表示，在可能的情况下，可以进行缩写，比如：#abf,#ccc。4.嵌套规则： （1）嵌套层级不超过四个层级。（2） 在css,less中可以嵌套选择器，可以提升代码的简洁性和可读性，但是应该尽量避免使用没有任何内容的选择器。应遵循css/less嵌套顺序：a.当前选择器的@extend和@includeb.当前选择器的样式属性c.父级选择器的伪类选择器（:first-child,:active等）d.伪类元素（:before,:after）e.父级选择器的声明样式f.用 css 的上下文媒体查询g.子选择器二.命名规范 1.文件名称命名不得包含汉字空格和特殊字符，全部采用小写方式，多个单词组成时，以中划线分割。2.样式命名采用相应样式效果、功能描述的单词或缩写，不得包含汉字空格和特殊字符。（1）id命名：驼峰式命名法。建议尽量避免使用id作为样式控制。（2）class命名：小写英文&数字&-（中划线）来组合命名。（3）常规命名：命名中除众所周知的缩写外，尽量不采用缩写。网页外层重要部分CSS样式命名：外套： wrap头部： header主要内容： main左侧： main-left右侧： main-right导航条： nav内容 ：content底部： footer常用的CSS命名规则侧栏：sidebar栏目：column左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签：tags文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guide服务：service注册：regsiter状态：status投票：vote合作伙伴：partner3.其他 （1）使用的类名应区别于用于js操作或其它用途的类名。（2）建议每行不得超过120个字符，除非单行不可分割。三.注释规范1.统一采用 /**/，具体参照下方的写法。2.缩进与下一行的代码保持一致；可位于一个代码行的末尾，与代码间隔一个空格。3.css文件必须书写顶部注释，标明该文件隶属模块。一个规则中有多条声明时，每条声明应独占一行；只有一条声明，整个规则可以写为一行。四.使用规范引用规范：不要使用@import，在使用less时除外，less使用@import，需避免在css中生成@import代码五.图片1.使用PNG格式时，使用场景为单色背景、图中主要颜色不超过3种的，应采用PNG-8编码保存。其它场合下，采用PNG-24保存。2.推荐单个图片体积在10kb以下时，应考虑在css中以base64编码内联提供，不单独提供图片文件。 -
目前流行的9大前端框架 1.Vue https://cn.vuejs.orgVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 2.React https://react.docschina.org/React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。 3.Angular https://angular.ioAngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。 4.QucikUI http://www.uileader.com/product_quickuiQucikUI 4.0是一套完整的企业级web前端开发解决方案，由基础框架、UI组件库、皮肤包、示例工程和文档等组成。底层基于jquery构建。使用QucikUI 开发者可以极大地减少工作量，提高开发效率，快速构建功能强大、美观、兼容的web应用系统。 5.Layui https://www.layui.com/layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。 6.Avalon http://avalonjs.coding.me/avalon2是一款基于虚拟DOM与属性劫持的 迷你、 易用、 高性能 的 前端MVVM框架， 拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开箱即用。 7.Dojo https://dojo.io/Dojo致力于实现最大的互操作性。Web组件提供了一种机制，可以在Dojo应用程序中利用非Dojo组件，并在非Dojo应用程序中轻松使用基于Dojo的小部件。Dojo为Web组件提供一流的支持。您今天做出的决定不应该将您锁定在未来的决策中。 8.Ember https://emberjs.com/Ember.js可能是最固执己见的主流框架，这也是其最大的优势。它有创建Ember.js应用程序的正确方法，通常只有一种方法来创建应用程序。Ember.js更类似于一个产品或平台，在那里你会到一个供应商的长期支持和维护。Ember.js提供了对其平台的全面版本管理，升级工具以及对API升级的强大指导和工具。成熟，是对Ember.js的一个很好的总结。 9.Aurelia https://aurelia.io/Aurelia是一个令人惊叹的框架，它在不牺牲功能的情况下采用简单而干净的代码。在本教程中，我们将通过构建“Todo”应用程序向您介绍Aurelia的简单性。您将看到应用程序代码的简洁程度，您将学习Aurelia的几个基本概念和功能。
-
CSS 常用命名 在前端开发中，规范使用 DIV+CSS 命名，可以增强团队合作提高开发效率，有利于页面后期的维护和优化。1、页面结构 wrap：外套、包裹，用于最外层。 wrapper：外套，用于页面外围控制整体布局宽度。 box：盒子，容器。 header：头部，用于页头部分。 nav：导航，主导航。 main：主要区域，内容主体。 content/container：内容，内容容器。 sidebar：侧边栏。 footer：底部，用于页脚部分。2、功能区块 left center right：左中右。 main-left：左侧主要布局。 main-right：右侧主要布局。 logo：网站 LOGO 标志。 search：搜索输入框。 loginbar：登录条。 regsiter：注册模块。 banner：广告，用于横幅广告条。 menu：菜单。 submenu：子菜单，二级菜单。 top：顶部。 topnav：顶导航。 mainnav：主导航。 subnav：子导航，二级导航。 leftsideBar：左导航。 rightsideBar：右导航。 topbar：顶部工具/菜单。 bottom：底部。 bottombar：底部工具栏。 tool：工具条。 shop：功能区，如购物车、收银台。3、其他常用命名 title：栏目标题。 summary：摘要。 hot：热门热点信息，推荐。 msg：提示信息。 news：新闻。 list：列表，文章列表。 piclist：图片列表。 newslist：新闻列表。 search-output：搜索输出。 search-results：搜索结果。 drop/dropdown：下拉。 dropmenu/dorpdown-content：下拉菜单。 scroll：滚动。 homepage：首页。 subpage：子页面，二级页面。 tag：标签。 tab：标签页。 tips：小技巧。 ranking：排行。 vote：投票。 bth：按钮。 icon：图标。 arr/arrow：箭头。 status：状态。 note：注释。 skin：皮肤。 current：当前的。 active：活跃的，有效的。 download：下载。 friendLink：友情链接。 copyright：版权信息。 partner：合作伙伴。 joinus：加入我们。 sitemap：网站地图。 siteinfo：网站信息。 siteinfoLegar：法律声明。 announcement：公告。 guild：指南。 service：服务。 promotion：推广。 blog：博客。 forum：论坛。4、产品相关命名 keyword：关键词。 products：产品。 products-prices：产品价格。 products-description：产品描述。 products-review：产品评论。 editor-review：编辑评论。 news-products：最新产品。 publisher：生产商。 screenshot：缩略图。 faqs：常见问题。 barnding：商标。 pay：充值。 reputation：信誉。5、常用的文件命名 全局样式：global.css 布局结构：layout.css 基本共用：base.css 综合样式：style.css 主要的：master.css 模块：module.css 表单：forms.css 主题/网页换肤：themes.css 字体：font.css 打印：print.css 补丁：mend.css 私有样式/独立页面，根据实际情况，可以自定义命名 CSS 文件。 以上这些常用的文件命名，无需全部使用，根据实际情况，每个页面引用不超过 3 个 CSS 文件。6、 ID 和 Class 命名规范 (1)、主要的、重要的、特殊的、最外层的盒子使用 ID 属性命名，其他的都使用 class 属性命名。 (2)、命名规则须以内容优先，表现为辅。首先根据所要呈现的内容、功能来命名，如果内容实在无法找到合适的命名，可以再根据表现命名。 (3)、大多数情况下，命名都使用英文单词，可以增加代码的可读性，但特殊情况下，实在找不到合适的单词时，可以使用拼音命名，但必须简明，结构清晰。 (4)、ID 和 Class 命名尽量全部都使用小写，多个单词可以使用连字符（-）链接，命名可以使用数字，但不能以数字开头。 (5)、命名可以使用单词缩写，但必须确保是有效的缩写，即别人能看懂，不能自定义缩写。
-
青龙面板安装 准备 推荐购买腾讯云或阿里云云服务器，最低配的就行。云服务器系统镜像：CentOS 7.6安装宝塔yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh登录宝塔在软件商店下载 Docker管理器拉取青龙镜像docker pull whyour/qinglong:latest复制下列命令在ssh执行(先安装docker)docker run -dit \ --name ql \ --hostname ql \ --restart always \ -p 5700:5700 \ -v $PWD/ql/config:/ql/config \ -v $PWD/ql/log:/ql/log \ -v $PWD/ql/db:/ql/db \ -v $PWD/ql/scripts:/ql/scripts \ -v $PWD/ql/jbot:/ql/jbot \ whyour/qinglong:latest放行服务器5700端口登录访问地址ip:5700例如http://192.168.100.123:5700首次登录设置账号密码在ssh输入1. docker exec -it qinglong bash 2. ql update 3. ql repo https://ghproxy.com/https://github.com/shufflewzc/faker2.git "jd_|jx_|gua_|jddj_|getJDCookie" "activity|backUp" "^jd[^_]|USER|function|utils|ZooFaker_Necklace.js|JDJRValidator_Pure|sign_graphics_validate|ql"到这里就设置完成了！方法二Linux一键安装青龙面板脚本脚本全自动安装Docker环境+青龙面板SSH命令行中执行：bash -c "$(curl -fsSL https://dl.mikumiku.cc/d/s1/sh/ql/latest.sh)"下方有韵诺整理 GitHub 上的一些任务库，通过添加任务，并设置定时规则，使其自动拉取、更新羊毛任务。Faker 集合仓库ql repo https://ghproxy.com/https://github.com/shufflewzc/faker2.git "jd_|jx_|getJDCookie" "activity|backUp" "^jd[^_]|USER|ZooFaker_Necklace"Curtinlv 仓库ql repo https://github.com/curtinlv/JD-Script.gitStarql repo https://github.com/star261/jd.git "scripts" "code"怨念集合仓库ql repo https://hub.fastgit.org/yuannian1112/jd_scripts.git "jd_|jx_|getJDCookie" "activity|backUp" "^jd[^_]|USER|utils"ddo（hyzaw）ql repo https://ghproxy.com/https://github.com/shufflewzc/hyzaw.git "ddo_"柠檬（胖虎）ql repo https://github.com/panghu999/panghu.git "jd_"温某某ql repo https://ghproxy.com/https://github.com/shufflewzc/Wenmoux.git混沌ql repo https://github.com/whyour/hundun.git "quanx" "tokens|caiyun|didi|donate|fold|Env"龙珠ql repo https://github.com/whyour/hundun.git "quanx" "tokens|caiyun|didi|donate|fold|Env"
-
NodeJS 获取系统时间 并格式化输出 1.安装 silly-datetime 模块：npm i silly-datetime --save2.使用的示例代码：const sd = require('silly-datetime'); // silly-datetime 当前时间格式化 console.log(sd.format(new Date(), 'YYYY-MM-DD HH:mm')); // 2022-01-05 21:32 console.log(sd.format(new Date(), 'YYYY-MM-DD HH:mm:ss')); // 2022-01-05 21:32:21 // 通过时间戳拼接 格式化时间 const date = new Date((new Date()).getTime()) Y = date.getFullYear() + '-'; M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '; h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'; m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'; s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()); console.log(Y + M + D + h + m + s); // 2022-01-05 21:32:21 // 获取当前时间戳 console.log((new Date()).getTime()); // 1641389779636 console.log((new Date()).valueOf()); // 1641389779636 console.log(Date.parse(new Date())); // 1641389779000 // 将指定时间转化成时间戳 const newDate = new Date(sd.format(new Date(), 'YYYY-MM-DD HH:mm:ss')); console.log(newDate.getTime());
