Why use it 近几年web应用的发展可以用疯狂来形容,依靠浏览器的支持以及前端技术和框架的发展,很多应用已经把大量的逻辑从服务器端迁移到了浏览器端,使用前后端分离技术,浏览器端与用户进行交互来完成复杂的逻辑.由于这个发展趋势,Web应用的前端代码的复杂度大大提高,尤其是 JavaScript 和 CSS 代码的数量大幅增加,面对空前庞大的css和js代码量,形成科学的代码组织方法和命名规范迫在眉睫. 好的命名规则应该满足以下几个优点: 安全的命名,不会干扰其它css 我需要很快知道一个…

[前言] BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介(推荐)的相关资料,感兴趣的小伙伴们可以参考一下 [主体] 1 什么是 BEM 命名规范 Bem 是块(block).元素(element).修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论. BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作…

一.什么是BEM? BEM代表块(Block),元素(Element),修饰符(Modifier).无论是什么网站页面,都可以拆解成这三部分. 二.带你认识网页 我们来看一下qq的官网,它可以由三个块组成:logo,导航nav和页面主题mian三个模块构成,如果再细分一下呢?logo是由图片和文字两个元素组成,导航由三个元素组成,页面主题中包含图片,文字和按钮三个元素, 如果把一个块看作是一个数组的话,那么元素就是数组中的每一项. 什么是修饰符呢?你可以看作是元素的属性,或者是他的形态.状态,比…

前段时间有写过一个TypeScript在node项目中的实践. 在里边有解释了为什么要使用TS,以及在Node中的一个项目结构是怎样的. 但是那仅仅是一个纯接口项目,碰巧赶上近期的另一个项目重构也由我来主持,经过上次的实践以后,尝到了TS所带来的甜头,毫不犹豫的选择用TS+React来重构这个项目. 这次的重构不仅包括Node的重构(之前是Express的项目),同时还包括前端的重构(之前是由jQuery驱动的多页应用). 项目结构 因为目前项目是没有做前后分离的打算的(一个内部工具平台类的项目…

一直以来自己对命名都是比较混乱的,并没有一个比较好的格式来命名,最近自己碰巧学习到了BEM命名规范,我想谈谈自己的理解以供自己来学习,同时也可以和各位大佬一起学习. BEM是一个很有用的方法可以创建复用组件和前端代码 有三个特性. 易用性,使用BEM只需要使用BEM的命名规范就可以. 单元性,使用独立的块和CSS选择器,可以使你的代码可重用和单元化. 灵活性,使用BEM后,方法和工具可以按照自己喜欢的方式去组织和配置. BEM的简介 BEM是一个强大而简单的命名规范,使得代码更容易让人理解,容易…

推荐阅读: https://juejin.im/post/5b925e616fb9a05cdd2ce70d 1 什么是 BEM 命名规范 Bem 是块(block).元素(element).修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论. - 中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号. __ 双下划线:双下划线用来连接块和块的子元素 -- 双中划线:双中划线用来描述一个块或者块的子元素的一种状态 BEM 是一个简单又非…

Android架构(一)MVP架构在Android中的实践 https://www.300168.com/yidong/show-2790.html   核心提示:为什么要重视程序的架构设计 对程序进行架构设计的原因,归根结底是为了 提高生产力 .通过设计是程序模块化,做到模块内部的 高聚合 和模块之间的 低耦合 (如依赖注入就是低耦合的集中体现). 这样做的好处是使得程序开发过程中,开发人员主需要专注于一点, 为什么要重视程序的架构设计 对程序进行架构设计的原因,归根结底是为了 提高生产力 .…

在CSS中,这种想法是无法实现的,但在Sass中,可以轻松的通过连体符&来实现.这也是我们今天要说的. 我们先来回忆一下,CSS中常见的一组样式: /*页面中链接的颜色*/ a {clolor: #ff3366; } a:hover {color: #cc0033; } /*主菜单中链接的颜色*/ .nav-menu a {color: #ff668c; } .nav-menu a:hover {color: #ff99b3; } .nav-menu a.active {color: #ff00…

继上一篇<Mysql事务探索及其在Django中的实践(一)>交代完问题的背景和Mysql事务基础后,这一篇主要想介绍一下事务在Django中的使用以及实际应用给我们带来的效率提升. 首先贴上Django官方文档中关于Database Transaction一章的介绍:https://docs.djangoproject.com/en/1.9/topics/db/transactions/. 在Django中实现事务主要有两种方式:第一种是基于django ORM框架的事务处理,第二种是基于原…

文/嶽永鹏 WPF 数据绑定中绑定到ENTITY,如果把数据文件做成一个类库,在UI文件中去应用它,可能遇到下面这种情况. 指定的命名连接在配置中找不到.非计划用于 EntityClient 提供程序或者无效. 解决方法: 将DataSource中的App.Config 复制一份到EFDome1中就OK!…

一. @import Sass 扩展了 CSS 的 @import 规则,让它能够引入 SCSS 和 Sass 文件. 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件. 另外,被导入的文件中所定义的变量或 mixins 都可以在主文件中使用. 例如: @import "foo.scss"; 二. @extend 是用来扩展选择器或占位符. 三. @at-root 从字面上解释就是跳出根元素.当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用 @…

05-雷海林-mysql备份原理与在TDSQL中的实践 下载地址: http://files.cnblogs.com/files/MYSQLZOUQI/05-%E9%9B%B7%E6%B5%B7%E6%9E%97-mysql%E5%A4%87%E4%BB%BD%E5%8E%9F%E7%90%86%E4%B8%8E%E5%9C%A8TDSQL%E4%B8%AD%E7%9A%84%E5%AE%9E%E8%B7%B5-update-20....rar…

在这园子里看到了很多优秀的资源,自己也想写写东西,就突然想到了以前遇到写sass的时候出现中文乱码的解决方案.所有就自己又总结了一下.(以下测试步骤都是自己完成的!没有任何转载,如有错误,希望大家指正) 简单说明下:sass来编写css样式方便了很多,让我们本来没有逻辑处理能力的css语法,在sass中编写具有了简单的逻辑处理能力. 这里sass的安装就不仔细介绍了.过程大致是这样  安装ruby  ---   安装sass  --  webstrom中配置sass 一:通过往sass的配置文件…

Sass中的Map长什么样 Sass 的 map 常常被称为数据地图,也有人称其为数组,因为他总是以 key:value 成对的出现, Sass 的 map 长得与 JSON 极其相似. json: { "employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , &q…

字符串函数 To-upper-case() 函数将字符串小写字母转换成大写字母 To-lower-case() 函数 与 To-upper-case() 刚好相反,将字符串转换成小写字母 数字函数 Sass 中的数字函数提要针对数字方面提供一系列的函数功能: percentage($value):将一个不带单位的数转换成百分比值: round($value):将数值四舍五入,转换成一个最接近的整数: ceil($value):将大于自己的小数转换成下一位整数: floor($value):将一个…

初学者都常常纠结于这个问题“什么时候用混合宏,什么时候用继承,什么时候使用占位符?”其实他们各有各的优点与缺点,先来看看他们使用效果: a) Sass 中的混合宏使用 举例代码见 2-24 行 编译出来的 CSS 见右侧结果窗口. 总结:编译出来的 CSS 清晰告诉了大家,他不会自动合并相同的样式代码,如果在样式文件中调用同一个混合宏,会产生多个对应的样式代码,造成代码的冗余,这也是 CSSer 无法忍受的一件事情.不过他并不是一无事处,他可以传参数. 个人建议:如果你的代码块中涉及到变量,建议…

//SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @include mt(5px); } } .header { color: orange; @include mt(5px); span{ display:block; @include mt(5px); } } 1.上面是sass混合宏方法编写的sass代码,下面是编译出来的css代码 .bloc…

以下内容来自互联网 (1)web: 需要在客户端配置文件的中增加connectionString节点,此节点描述了EntityClient的连接信息. 例如: 在web.config的中增加connectionString节点,此节点描述了EntityClient的连接信息. (connectionString缺少某些信息,所以报错.) (2)winfrom: 在app.config的中增加connectionString节点,此节点描述了EntityClient的连接信息. (connecti…

ceph简介 ceph是业界目前人气最高的开源存储项目之一,关于其定义在官网是这样的:"Ceph is a unified, distributed storage system designed for excellent performance, reliability and scalability." 翻译一下就是:Ceph是一种为优秀的性能.可靠性和可扩展性而设计的统一的.分布式的存储系统.这里面有两个重点,一是分布式的,关于这点我的理解是指其无中心解构和无理论上限系统规模,…

SASS 中定义的变量,后设置的值会覆盖旧的值. $color: red; $color: blue; .btn { color: $color; } 编译后为: .btn { color: blue; } 如果你编写了一个 UI 库提供 SASS 文件,可能会提供一些参数供用户使用时自定义.而在 SASS 组件内部,我们需要应用上用户设置的这些值.但是如果使用者没有自定义变量的值,那这些变量应该有自己的默认值. 利用前面提到的覆盖机制是不能实现的.因为无论是你在 @import UI 库之前设…

最近有一个项目,其中某个功能单表数据在可预估的未来达到了亿级,初步估算在90亿左右.与同事详细讨论后,决定采用一致性Hash算法来完成数据库的自动扩容和数据迁移.整个程序细节由我同事完成,我只是将其理解并成文,供有相同问题的同行参考. 参看此文的兄弟,默认各位已经熟悉一致性hash算法了.此文仅仅阐述代码细节,实现语言为Java. 项目背景 项目是一个实验室项目 其中有一个表叫做试验表,用于存储车型的试验数据,每个试验大概有6000条数据 总计初期约有2万个车型,每个车型初期包含超过50个试验.…

华为云容器实例服务,它基于 Kubernetes 打造,对最终用户直接提供 K8S 的 API.正如前面所说,它最大的优点是用户可以围绕 K8S 直接定义运行应用. 这里值得一提是,我们采用了全物理机的方案,对于端到端资源利用率有一个很大的提升.而在 K8S 之上我们通过一层封装实现了超规模资源池.大家知道 K8S 现开源的版本最大只能支持到5000节点,并且这是在 Google 云上的验证结果,而在很多其他的云平台往往达不到.主要是受限于底层网络和存储系统. 所以在华为云,我们的做法是通过一层…

React 与 Redux 在生产环境中的实践总结 前段时间使用 React 与 Redux 重构了我们360netlab 的 开放数据平台.现将其中一些技术实践经验总结如下: Universal 渲染 Universal (“同构”现在是公认的不准确的叫法)渲染是指在服务端与客户端使用一套代码进行渲染的技术.它所带来的优势如下: 与实现服务端渲染的传统应用相比,Universal 渲染中的客户端渲染减少了网络请求(主要是模板和静态资源的请求),提高了页面间切换的速度,可以看到页面之间的切换都是…

今天写sass的时候,发现在sass中使用calc,如果calc中包含一个变量,不会产生效果,看代码: .app-inner { display: flex; height: calc(100% - $topbar-height); } 在浏览器中没有产生效果: 可以看到sass并没有解析这个$topbar-height. 最后在github的issue中找到了方法,要想在sass的calc中使用变量,必须对这个变量使用sass的插值方法(#{$variable}). 所以把代码改正下面的形式就…

总结一下sass中用到@的地方. 1.继承@extend SASS允许一个选择器,继承另一个选择器.比如,现有class1: .class1 { border: 1px solid #ddd; } class2要继承class1,就要使用@extend命令: .class2 { @extend .class1; font-size:120%; } 2.混合@mixin sass中使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值.声明的@mix…

immutable.js 在React.Redux中的实践以及常用API简介 学习下 这个immutable Data 是什么鬼,有什么优点,好处等等 mark :  https://yq.aliyun.com/articles/69516 1简介 2一个说明不可变的例子 3有哪些数据类型? 4几个重要的API 5fromJS() 6toJS() 7Map 8简单介绍 OrderedMap 9List 10API 11创建 12通过构造函数 Map() 13Map() 14List() 15另一…

来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&utm_medium=referral 前言   本文主要介绍facebook推出的一个类库immutable.js,以及如何将immutable.js集成到我们团队现有的react+redux架构的移动端项目中. 本文较长(5000字左右),建议阅读时间: 20 min 通过阅读本文,你可以学习到: 什么是i…

TypeScript在node项目中的实践 TypeScript可以理解为是JavaScript的一个超集,也就是说涵盖了所有JavaScript的功能,并在之上有着自己独特的语法.最近的一个新项目开始了TS的踩坑之旅,现分享一些可以借鉴的套路给大家. 为什么选择TS 作为巨硬公司出品的一个静态强类型编译型语言,该语言已经出现了几年的时间了,相信在社区的维护下,已经是一门很稳定的语言.我们知道,JavaScript是一门动态弱类型解释型脚本语言,动态带来了很多的便利,我们可以在代码运行中随意的修…

Cookie和Session在Node.JS中的实践(三) 前面作者写的COOKIE篇.SESSION篇,算是已经比较详细的说明了两者间的区别.机制.联系了.阅读时间可能稍长,因为作者本身作图也做了不短时间,都是为了能形象的把COOKIE和SESSION的运行原理描述出来,但花点时间去阅读理解他们是值得的.因为这个技术点虽然小,但涉及到前后端交互,无论是做前端还是后台,都需要懂.不然,只会遭同事鄙视--所以,为了不被鄙视,还是好好读多点书,充实自己. 如果还未搞懂COOKIE和SESSION的,…

Cookie和Session在Node.JS中的实践(二) cookie篇在作者的上一篇文章Cookie和Session在Node.JS中的实践(一)已经是写得算是比较详细了,有兴趣可以翻看,这篇是session篇,重点在讨论session的特性.概念,以及session和cookie的区别和联系. session COOKIE存在于客户端,而SESSION存在于服务端,并且SESSION需要COOKIE的支持. session是存在于服务端的信息管理机制,它把客户端信息以某种信息形式记录在服务…