1.如何解决CSS的模块化问题? 使用Less,Sass等CSS预处理器 使用PostCSS插件(postcss-import/precss) 使用webpack处理CSS(css-loader + style-loader) 2.PostCSS是什么? PostCSS是一个平台,具体要取决于这个平台上面的插件可以做什么 常用的插件如下 // 1. 可以添加属性前缀,适应所有的浏览器 const autoprefixer = require('autoprefixer'); // 2. 将所有的…
NodeJS基础知识 1. Node的全局对象和全局变量 1.1 全局对象:所有模块都可以调用的 global:表示Node所在的全局环境,类似于浏览器的window对象. process:该对象表示Node所处的当前进程,允许开发者与该进程互动. console:指向Node内置的console模块,提供命令行环境中的标准输入.标准输出功能. 1.2 全局函数 定时器函数:共有4个,分别是setTimeout(), clearTimeout(), setInterval(), clearInt…
1. 为什么JavaScript是单线程? 防止DOM渲染冲突的问题: Html5中的Web Worker可以实现多线程 2.什么是任务队列? 任务队列"是一个先进先出的数据结构,排在前面的事件,优先被主线程读取.主线程的读取过程基本上是自动的,只要执行栈一清空,"任务队列"上第一位的事件就自动进入主线程. 2.1 同步和异步任务 同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务: 异步任务指的是,不进入主线程.而进入"任务队列&…
1.如何理解HTML? HTML类似于一份word"文档" 描述文档的"结构" 有区块和大纲 2.对WEB标准的理解? Web标准是由一系列标准组合而成.一个网页主要由三部分组成:结构层.表现层和行为层. 对应的标准也分三方面: 结构化标准语言主要包括XHTML和HTML以及XML, 表现层标准语言主要包括CSS, 行为标准主要包括对象模型,DOM.ECMAScript等 2.1 结构层标准 结构化标准语言,就是W3C规定的主要包括HTML和XHTML以及XML,在…
1.常见的CSS预处理器有哪些? [!NOTE] css预处理器:用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作,可以让你的CSS更加简洁.适应性更强.可读性更佳,更易于代码的维护等诸多好处 Sass(Scss):2007,ruby编写 Less: 2009,js编译 1.1 使用流程? 基于CSS的另外一种语言 通过工具编译成CSS 添加了很多CSS不具备的特性 同时CSS文件的组织方式 1.2 预处理器的作用有哪些? 帮…
1. CommonJS模块规范 1.1 模块引用 var math = require('math'); 1.2 模块定义 [!NOTE] 上下文提供exports对象用于导出当前模块的方法和变量,并且他是唯一的导出出口 exports实际上是module.exports,而module.exports就是以一个暴露给外部的对象. exports.some就是给这个对象上添加属性 直接使用 module.exports = {...} 则可以让外部直接获取到这个对象,相当与为exports换了一…
1.Bootstrap 的优缺点? 优点:CSS代码结构合理,现成的代码可以直接使用(响应式布局) 缺点:定制流程较为繁琐,体积大 2.如何实现响应式布局? 原理:通过media query设置不同分辨率的class 使用:为不同分辨率选择不同的class 3.如何定制自己的bootstrap样式? 使用CSS同名类覆盖(门槛低,见效快,可能会有bug) 修改源码重新构建(一次性彻底解决) [ bootstrap.scss是入口文件,修改这个文件内容之后,使用node-sass重新编译scss文…
CSS效果 1.使用div绘制图形(三角形)? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .triangle-top { width: 0; height: 0; border-width: 0 40px 40px; border-style:…
EventLoop 1. EventLoop的执行流程图 ┌───────────────────────┐ ┌─>│ timers │<----- 执行 setTimeout().setInterval() 的回调 │ └──────────┬────────────┘ | |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调 │ ┌──────────┴────────────┐ │ │ pending callbacks │<---…
1. 中间件到底是个什么东西呢? [!NOTE] 中间件其是一个函数,在响应发送之前对请求进行一些操作 function middleware(req,res,next){ // 做该干的事 // 做完后调用下一个函数 next(); } 这个函数有些不太一样,它还有一个next参数,而这个next也是一个函数,它表示函数数组中的下一个函数 2. 函数数组又是什么呢? [!NOTE] express内部维护一个函数数组,这个函数数组表示在发出响应之前要执行的所有函数,也就是中间件数组 使用app…
1.实现两栏/三栏布局的方法? 表格布局 float + margin布局 inline-block布局 flexbox布局(兼容性的问题) 1.1 基础布局 <style> * { margin: 0; padding: 0; } .layout { margin-top: 10px; } .layout div{ min-height: 100px; } </style> <body> <!--1.浮动的方式来实现布局--> <section cl…
1.CSS样式(选择器)的优先级? 1.1 权重的计算规则 第一优先级:无条件优先的属性只需要在属性后面使用!important.它会覆盖页面内任何位置定义的元素样式.(ie6支持上有些bug). 第一等:内联样式,如:style="color:red;",权值为1000.(该方法会造成css难以管理,所以不推荐使用) 第二等:ID选择器,如:#header,权值为0100. 第三等:类选择器.如:.bar, 权值为0010. 第四等:类型(标签)选择器和伪元素选择器,如:div ::…
看到一篇不错的文章,拿来收藏和分享. 原文:http://mp.weixin.qq.com/s/UFTfdE7LYhHquWEzwZKLCQ Web前端技术由html.css和 javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构.本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍.目的是帮助大家审查自己的…
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html.css.js)的认识——做web前端需要的比这三大块要多得多. 拖了好几个月了,但是由于近期将要参加的某一个活动,我不得不这两天把这个东西整出来.说干就干.上午我就开始在办公室画草图,乱七八糟的在那儿理思路. 大家不要害怕,其实下文中的这个知识框架要比草图中的好看的…
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html.css.js)的认识——做web前端需要的比这三大块要多得多. 拖了好几个月了,但是由于近期将要参加的某一个活动,我不得不这两天把这个东西整出来.说干就干.上午我就开始在办公室画草图,乱七八糟的在那儿理思路. 大家不要害怕,其实下文中的这个知识框架要比草图中的好看的…
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html.css.js)的认识——做web前端需要的比这三大块要多得多. 拖了好几个月了,但是由于近期将要参加的某一个活动,我不得不这两天把这个东西整出来.说干就干.上午我就开始在办公室画草图,乱七八糟的在那儿理思路. 大家不要害怕,其实下文中的这个知识框架要比草图中的好看的…
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html.css.js)的认识——做web前端需要的比这三大块要多得多. 拖了好几个月了,但是由于近期将要参加的某一个活动,我不得不这两天把这个东西整出来.说干就干.上午我就开始在办公室画草图,乱七八糟的在那儿理思路. 大家不要害怕,其实下文中的这个知识框架要比草图中的好看的…
Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构.本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍.目的是帮助大家审查自己的知识结构是否完善,如有遗漏或不正确的地方,希望共勉. JAVASCRIPT 篇 0.基础语法 Javascript基础语法包括:变量定义.数据类…
大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html.css.js)的认识——做web前端需要的比这三大块要多得多. 拖了好几个月了,但是由于近期将要参加的某一个活动,我不得不这两天把这个东西整出来.说干就干.上午我就开始在办公室画草图,乱七八糟的在那儿理思路. 大家不要害怕,其实下文中的这个知识框架要比草图中的好看的多,草图大家…
自己总结的web前端知识体系大全[欢迎补充]   1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html.css.js)的认识——做web前端需要的比这三大块要多得多. 拖了好几个月了,但是由于近期将要参加的某一个活动,我不得不这两天把这个东西整出来.说干就干.上午我就开始在办公室画草图,乱七八糟的在那儿理思路. 大家不…
说在开始的话: 我上大学那会,虽说主要是学Java语言,但是web前端也稍微学了一些,那时候对前端也没多在意,因为涉入的不深,可以搞一个差不多可以看的界面就可以了,其他也没过多在意. 因为稍微了解一点点前端,所以看到前端相关资源的时候,总是也会忍不住也收藏下来,这篇文章就把我平时看到的一些关于WEB前端知识体系的脑图给列举出来,因为我一直觉得在学习每门语言之前一定要对这门语言有个概况性认知,不然连自己学到什么程度都不知道(就如我上大学学前端一样,以为前端就这么简单,结果……). 1.2015-2…
学习,是一个建立“索引”的过程-好比我们读一本书,读完之后,再次看这本书的目录结构,就会联想起很多书中的具体内容: 博客,是一个回顾所学的载体-学习完教学Video之后,通过书写博客,以达到记忆的目的,回过头再来看自己的博客,思路与记忆会非常清晰,也减少了再次看视频的时间耽误: 实战,是一个融会贯通的催化剂,正所谓,“学以致用”就是这个道理. Web前端知识体系V0.1:https://www.processon.com/view/link/5b722c67e4b0edb751071f6e…
前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. 关于这道题目的吐槽暂且不提(这是一道被提到无数次的题,得到不少人的赞同,也被很多人反感),本文的目的是如何借助这道题梳理自己的前端知识体系! 窃认为,每一个前端人员,如果要往更高阶发展,必然会将自己的知识体系梳理一遍, 没有牢固的知识体系,无法往更高处走! 展现形式:本文并不是将所有的知识点列一遍,…
依然chsakell,他写了一篇前端AngularJS,后端OData,ASP.NET Web API的Demo,关于OData在ASP.NET Web API中的正删改查没有什么特别之处,但在前端调用API时,把各种调用使用$resouce封装在一个服务中的写法颇有借鉴意义. 文章:http://chsakell.com/2015/04/04/asp-net-web-api-feat-odata/源码:https://github.com/chsakell/odatawebapi 首先是领域模…
在前一篇博文中,我们通过以 OAuth 的 Client Credential Grant 授权方式(只验证调用客户端,不验证登录用户)拿到的 Access Token ,成功调用了与用户无关的 Web API. 在这篇博文中,我们将以 OAuth 的 Resource Owner Password Credentials Grant 的授权方式( grant_type=password )获取 Access Token,并以这个 Token 调用与用户相关的 Web API. 对应的应用场景是…
[重构前端知识体系之HTML]讲讲对HTML5的一大特性--语义化的理解 引言 在讲什么是语义化之前,先看看语义化的背景. 在之前的文章中提到HTML最重要的特性,那就是标签.但是项目一大,标签多的看不懂,一堆叠着一堆.一些命名奇奇怪怪,想维护被劝退,团队协作导致团战开始! 因此语义化迫在眉睫! 什么是语义化 在我们写HTML时其实无所谓,因为你里面长啥样,用户看不到,也不用看到. 因为你有CSS的漂亮衣服,即使你的HTML一塌糊涂,CSS也可以让它光鲜亮丽. 但是用户看不到,开发者看得到呀!因…
[重构前端知识体系之HTML]HTML5给网页音频带来的变化 引言 音乐播放,相信大家都很熟悉,但是早在之前的音乐播放之前,你的浏览器会问你,是否下载flash插件.然而现在,估计一些年轻的开发者都不用了解flash是啥了.因为HTML5来了,它改变了这一切. HTML5音频的播放方式 是的,HTML5带来了不止一种能够播放音频的方式. 使用插件 浏览器插件是一种扩展浏览器标准功能的小型计算机程序. 插件可以使用 object 标签 或者 embed 标签添加在页面上. embed方式 embe…
最近在熟悉Abp框架,其基于DDD领域驱动设计...前段可以绕过mvc直接调用根据app层动态生成的webapi,有点神奇~,Web API之前有简单接触过,WCF的轻量级版,一般用于做一写开发性的服务接口,形式上类似与MVC,只是不渲染视图(其他基于restful设计什么的我不想去扯). 因此我的想法是页面用mvc view带model验证,提交操作使用jquery.unobtrusive-ajax.js自动收集form表单内容直接调webapi:因为人少做的东西不大,view model就是…
一.比较全面的思维导图 二.相关资源 1. 布局框架:Bootstrap: http://getbootstrap.com/Foundation: http://foundation.zurb.com/Uikit: http://www.getuikit.com/Web Components:http://css-tricks.com/modular-future-web-components// 2. 构建工具及包管理器:Grunt: http://gruntjs.com/Yeoman: ht…
REFERENCE FROM : http://www.cnblogs.com/artech/archive/2012/07/04/Knockout-web-api.html 较之面向最终消费者的网站,企业级Web应用对用户体验的要求要低一些.不过客户对“用户体验”的要求是“与日俱增”的,很多被“惯坏了”的用户已经不能忍受Postback带来的页面刷新,所以Ajax在企业级Web应用中得到了广泛的应用.企业级Web应用的一个特点是以“数据处理”为主,所以“面向绑定”的Knockout.js 是一…