web前端
文章平均质量分 85
Fighting_No1
这个作者很懒,什么都没留下…
展开
-
现代前端技术解析读书笔记
思维导图链接:http://v3.processon.com/view/link/5f7ec592762131119546c899取材自《现代前端技术解析》本文只是个人读书笔记,更多详细内容请查看原书。前端技术解析Web前端技术基础 用户界面包括浏览器可见的地址输入框、浏览器前进返回按钮、打开书签、打开历史记录等用户可操作的功能选项。 浏览器引擎可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等,是浏览器中各个部分间相互通信的核心。 浏览器渲..原创 2020-10-08 16:14:26 · 467 阅读 · 0 评论 -
高性能网站建设指南读书笔记
思维导图链接:http://v3.processon.com/view/link/5f7ec46b762131119546c87d取材自《高性能网站建设指南》及《高性能网站建设进阶指南》》本文只是个人读书笔记,更多详细内容请查看原书。高性能网站建设指南1. 减少HTTP请求 CSS Sprites:干净的标签,很少的图片和很短的响应时间 Inline Images:data:[<mediatype>][;base64],<data> 由于data:U.原创 2020-10-08 15:53:20 · 260 阅读 · 0 评论 -
前端技能图谱笔记
思维导图链接:http://v3.processon.com/view/link/5c5c2794e4b056ae2a04a78e前端体系前端架构项 开发规范 目录规范、编码规范、按内容命名规范 开发模型 模块化方案,优化在模型中实现 开发体系 构建工具和组件化设计 项目部署 开发与部署打通 前端统计 性能统计、访问统计、用户行为统计、错误统计、安全监控 安全测试 安全意识和自动化高效开发测试等 部署流.原创 2020-10-08 15:48:25 · 550 阅读 · 1 评论 -
css实现椭圆、半椭圆
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css实现椭圆、半椭圆</title> <style> .ellipse { width: 250px; height: 150px; margin: 50px;原创 2020-10-08 13:37:38 · 2969 阅读 · 0 评论 -
HMTL5离线存储
HMTL5离线存储转载自有趣的HTML5:离线存储随着Web App的发展,越来越多的移动端App使用HTML5的方式来开发,除了一些HybridApp以外,其他一部分Web App还是通过浏览器来访问的,通过浏览器访问就需要联网发送请求,这样就使得用户在离线的状态下无法使用App,同时Web App中一部分资源并不是经常改变,并不需要每次都向服务器发出请求,出于这些原因,HTML5提出的一个新的特性:离线存储。通过离线存储,我们可以通过把需要离线存储在本地的文件列在一个manifest配置文件中,这样转载 2020-10-08 13:08:39 · 164 阅读 · 0 评论 -
Mustache
Mustache参考资料:mustache模板技术Mustache 模板引擎一、简介Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档。当然不同的开发语言有不同模板引擎,如 Javascript 下的 Hogan 、ASP 下的 aspTemplate、以及 PHP 下的 Smarty,这里主要介绍基于 Javasc...原创 2018-12-08 17:07:43 · 933 阅读 · 1 评论 -
HTML5 Boilerplate浅析
HTML5 Boilerplate浅析简介HTML5 Boilerplate——最流行的web开发前端模版,帮你构建 快速, 健壮, 并且 适应力强 的web app或网站。 其特点如下:一个干净、移动终端友好的HTML模版优化过的Google统计代码包含了 Normalize.css v1 版本 — 一个先进的、支持HTML5的CSS reset — 和基础样式、辅助功能、...原创 2018-08-04 23:03:24 · 8216 阅读 · 0 评论 -
webpack笔记
webpack笔记参考自: 1. WebPack 简明学习教程 2. webpack之傻瓜式教程及前端自动化入门 3. https://www.jianshu.com/p/42e11515c10f 4. webpack官方文档Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。从图中我们可以看出,...原创 2018-08-04 22:39:41 · 219 阅读 · 0 评论 -
vue、vuex、vue-router、vue-i18n、vue-http实践
vue、vuex、vue-router、vue-i18n、vue-http实践参考资料:Vue.js 教程Vue.js 官方文档Vuex 文档震惊!喝个茶的时间就学会了vuex使用vue-i18n实现多语言Vuex的Getter学习Vue-自带vue-resource插件实现http请求专门写了个demo来做vue框架笔记,demo是基于VuexExplanation项...原创 2018-07-22 20:43:01 · 1519 阅读 · 0 评论 -
前端代码检查
前端代码检查参考自:说一说前端代码检查前端代码检查front-end-code-checklist程序员必备的代码审查(Code Review)清单代码检查很重要,原因有三:避免低级bug:一些常见代码问题,如果在编译或运行前不能及时发现,代码中的语法问题会直接导致编译或运行时错误,影响开发效率和代码质量;统一代码习惯:每一个团队或个人都会有一些代码规范或者代码习惯,为...原创 2018-05-12 13:51:32 · 3000 阅读 · 0 评论 -
HTML5新API实例
HTML5新API实例注意,要引入jQuery,并且要查看浏览器是否支持这些新API。visibilityState<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>visibilityState</title&原创 2018-04-21 12:19:33 · 777 阅读 · 1 评论 -
Airbnb JavaScript 代码规范(ES6)
Airbnb JavaScript 代码规范(ES6)1. 类型1.1 基本类型: 直接存取基本类型(字符串、数值、布尔类型、null、undefined)。1.2 复杂类型: 通过引用的方式存取复杂类型(对象、数组、函数)。2. 引用2.1 对所有的引用使用 const ;避免使用 var。确保你无法对引用重新赋值,也不会导致出现 bug 或难以理解。2.2 如果...转载 2018-03-14 16:54:49 · 1407 阅读 · 0 评论 -
CommonJS和AMD
参考:CommonJS规范为什么模块很重要?答:因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套!于是下面三个模块规范出来了。CommonJSCommonJS规范中,每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私...原创 2018-03-14 16:48:09 · 196 阅读 · 0 评论 -
作为一个前端,可以如何机智地弄坏一台电脑?
作为一个前端,可以如何机智地弄坏一台电脑?转载自作为一个前端,可以如何机智地弄坏一台电脑?无论你触发了多少bug,最多导致浏览器崩溃,对系统影响不到哪去。 这就像二次元各种炫酷的毁灭世界,都不会导致三次元的世界末日。 然而,作为一个前端,我发现是有方式打开次元大门的…这个实验脑洞较大,动机无聊,但某种意义上反映了一些安全问题。 想象一下,有天你在家里上网,吃着火锅还唱着歌,点开一个链接,电脑...转载 2018-12-08 17:03:42 · 368 阅读 · 0 评论 -
浏览器内核的解析和对比
浏览器内核的解析和对比取材自 浏览器内核的解析和对比浏览器的构成浏览器可以分为两部分:shell+内核。Shell是指浏览器的外壳:例如菜单,工具栏 等。主要是提供给用户界面操作,参数设置等等。它是调用内核来实现各种功能的。内核是基于标记语言显示内容的程序或模块。浏览器内核浏览器内核的组成浏览器内核可以分成两部分:渲染引擎(layout engineer或者Rendering En...转载 2018-12-08 17:04:23 · 696 阅读 · 0 评论 -
浏览器的渲染机制
浏览器的渲染机制参考资料:浏览器的渲染机制浏览器主要组件结构概念理解(1) DOM:Document Object Model,浏览器将HTML解析成树形的数据结构,简称DOM。(2) CSSOM:CSS Object Model,浏览器将CSS代码解析成树形的数据结构。(3) DOM 和 CSSOM 都是以Bytes → characters → tokens → nodes → ...原创 2018-12-08 17:05:32 · 201 阅读 · 0 评论 -
关于HTML、js加密、混淆、源码保护、代码安全,防止解压直接看源码
关于HTML、js加密、混淆、源码保护、代码安全,防止解压直接看源码我们先理下需求,加密的目的是什么?加密到什么级别?为此我们可以牺牲什么?我们知道这个世界不存在绝对的安全,加密会被破解、混淆会被反混淆。技术小白、开发者、黑客,是完全不同的级别,防范不同级别的人策略都不一样。防范力度越大,投入代价也越大,比如聘请专业的安全公司。除了投入,我们还需要考虑程序的执行性能和用户体验。加密的代...转载 2018-12-08 17:06:54 · 8633 阅读 · 1 评论 -
使用CryptoJS中的md5和aes加密
使用CryptoJS中的md5和aes加密参考资料:使用CryptoJS中的md5和aes加密CryptoJS实现AES加密// md5function md5encode(word) { return CryptoJS.MD5(word).toString();}//aes加密function encrypt(word) { var key = Crypto...原创 2018-12-08 19:04:26 · 2028 阅读 · 0 评论 -
ios笔记
Wifi 定位原理及 iOS Wifi 列表获取iOS 上获取 Wifi 列表其实有很大限制,在 iOS 9 以前是不能获取Wifi列表的,只能获取当前连接的 Wifi 信息,也就表示只有连接了 Wifi 才能定位。Apple 在 iOS 9 以后,提供了获取Wifi列表的API,但是获取Wifi列表是有门槛的,主要步骤有:1、向 Apple 申请开发 Network Extension...原创 2018-12-26 23:34:55 · 783 阅读 · 0 评论 -
Hybrid App
Hybrid App参考资料:聊聊Web App、Hybrid App与Native App的设计差异8个hybrid app开发工具Hybrid APP混合开发的了解和其他两类app的对比Hybrid App的架构与实现HyBrid App框架介绍使用Appcelerator等跨平台App开发工具的优势及不足了解Web App、Native App与Hybrid App的差异...原创 2019-01-06 14:56:22 · 1534 阅读 · 0 评论 -
前端书籍分享
前端书籍分享整理了前端的学习书籍,对前端感兴趣的小伙伴可以下载来看。内容包括下载地址链接:https://pan.baidu.com/s/1Mlni6hxX_bEZWOE8JEMH5g原创 2019-06-28 14:00:49 · 710 阅读 · 2 评论 -
CoffeeScript笔记
CoffeeScript笔记参考资料: CoffeeScript 笔记 coffeescript中文 coffeescript英文CoffeeScript 是一门编译到 JavaScript 的小巧语言.CoffeeScript 的指导原则是: “她仅仅是 JavaScript”. 代码一一对应地编译到 JS, 不会在编译过程中进行解释。 已有的 JavaScript 类库可以无...原创 2018-03-14 14:46:34 · 567 阅读 · 0 评论 -
Javascript异步编程的4种方法
Javascript异步编程的4种方法转载自:Javascript异步编程的4种方法(阮一峰)你可能知道,Javascript语言的执行环境是”单线程”(single thread)。所谓”单线程”,就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时...转载 2018-03-14 14:25:35 · 357 阅读 · 0 评论 -
Gulp笔记
取材自: 1. Gulp资料大全:入门、插件、脚手架、包清单 2. http://blog.csdn.net/gongm24/article/category/6743264/2 3. gulp官网gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器。gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/h...原创 2017-11-20 12:25:26 · 538 阅读 · 0 评论 -
meta 标签
meta 标签<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。<head><meta http-equiv="content-Type" content="text/html; ...原创 2017-08-13 18:42:03 · 480 阅读 · 0 评论 -
HTML 笔记
HTML 笔记这只是我关于HTML的笔记,完整的HTML教程请自行查看 w3cschool 或者 菜鸟教程。HTML 结构HTML的结构基本如下:<!DOCTYPE html><html><head><title>网页标题</title><meta http-equiv="Content-Type" ..原创 2017-08-13 18:34:00 · 752 阅读 · 0 评论 -
JS Event对象详解
JS Event对象详解参考资料: js添加事件和移除事件:addEventListener()与removeEventListener()Event 对象Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。一旦事件发生,便会生成Event对象,如单击一个按钮,浏览器的内存中就产生相应的 event对象。事件通常与函数结合使...原创 2018-02-11 23:45:30 · 6794 阅读 · 2 评论 -
ajax笔记
ajax笔记AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。XMLHttpRequestXMLHttpRequest 对象用于在...原创 2018-02-11 23:44:05 · 457 阅读 · 0 评论 -
JQuery笔记
JQuery笔记jQuery 的功能概括:html的元素选取html的元素操作html dom遍历和修改js特效和动画效果css操作html事件操作ajax异步请求方式jQuery 版本 2 以上不支持 IE6,7,8 浏览器。如果需要支持 IE6/7/8,那么请选择1.9。你还可以通过条件注释在使用 IE6/7/8 时只包含进1.9。<!--[if lt...原创 2018-02-11 23:32:28 · 410 阅读 · 0 评论 -
JavaScript语法笔记
JS用法JavaScript在Web 页面中的基本用法有两种。一种是装入页面时动态创建HTML语句,另一种是监视并处理各种用户事件。两种方法结合起来,产生下面用法∶定制Web 页面;动态创建Web 页面;检查CGI 表单数据;管理Cookie;访问框窗。1. 在HTML文件中,嵌入JavaScript语句格式(内嵌)<script> JavaScript函数或语句...原创 2017-08-13 21:15:15 · 694 阅读 · 0 评论 -
CSS笔记
CSS笔记用法外部样式表当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。<head> <link rel="stylesheet" type="text/css" href="mystyle.css"></head>内部样式表当单个文件需要..原创 2017-08-13 19:02:24 · 1052 阅读 · 2 评论 -
SCSS 笔记
SCSS 笔记内容来自 sass语法总结编译使用gulp-sass自动化编译Gulp 配置 Sass 编译的示例代码:var gulp = require('gulp');var sass = require('gulp-sass');gulp.task('sass', function () { gulp.src('./scss/*.scss') ...转载 2017-08-18 16:12:37 · 737 阅读 · 0 评论 -
bower简明入门教程
什么是bowerBower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。准备工作安装node环境:node.js安装Git,bower从远程git仓库获取代码包:git简易指南安装bower使用npm,打开终端,输入:npm install -g bower其中-g命令表示全局安装...转载 2018-01-04 14:10:44 · 338 阅读 · 0 评论 -
Jade笔记
这只是我的Jade笔记,完整的Jade教程请参考Jade 官方的英文文档和https://www.w3cplus.com/html/how-to-use-jade.html简介Jade是编写HTML模板的简洁语言,简称模板引擎,其实就是 HTML 预处理语言,非常类似 Sass 之于 CSS。其特点如下:生成HTML支持动态代码支持可重用性(DRY)采用对缩进敏感的语法形式...原创 2017-12-03 21:31:28 · 1567 阅读 · 0 评论 -
HTML5 Web SQL
HTML5 Web SQLWeb SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。三个核心方法:openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。executeSql:这个方法用于执行实际的 SQL 查询。...原创 2017-12-03 15:49:52 · 530 阅读 · 0 评论 -
js执行机制
js执行机制参考资料:深入理解JavaScript运行机制10分钟理解JS引擎的执行机制JavaScript 运行机制详解:深入理解Event Loopjavascript执行机制想要理解JavaScript的运行机制,需要分别深刻理解以下几个点:JavaScript的单线程机制任务队列(同步任务和异步任务)事件和回调函数定时器Event Loop(事件循环)...原创 2018-03-14 14:24:20 · 2715 阅读 · 0 评论 -
ES6笔记
ES6笔记参考资料: ES6这些就够了 ECMAScript 6 入门变量声明const和let我们都知道在ES6以前,var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升。例如:function aa() { if(bool) { var test = 'hello man' } ...原创 2018-03-13 19:58:32 · 538 阅读 · 0 评论 -
web前端主要技术概述
web前端主要技术概述参考资料: 2018 Web 开发者路线图 2017年前端框架、类库、工具大比拼本文主要是介绍部分主流和新兴的web前端技术,希望能帮助想学web前端的小白,理清其技术学习路线。首先有些技能是web前端需要掌握的:字符编码:解决乱码问题HTTP协议:大体了解ajax请求的各种状态码代表的含义git:代码版本管理:项目协作和代码管理浏览器配置:用于网...原创 2018-03-18 13:10:26 · 24906 阅读 · 3 评论 -
npm笔记
npm笔记参考自: 1. npm 常用命令详解 2. npm入门文档 3. npm 中文文档概念理解什么是NPMNPM的全称是Node Package Manager,是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装...原创 2018-03-14 19:58:12 · 554 阅读 · 0 评论 -
前端编码规范
一般规范文件/资源命名在 web 项目中,所有的文件名应该都遵循同一命名约定。以可读性而言,减号(-)是用来分隔文件名的不二之选。同时它也是常见的 URL 分隔符(i.e. //example.com/blog/my-blog-entry or //s.example.com/images/big-black-background.jpg), 所以理所当然的,减号应该也是用来分隔资源名称的...转载 2017-08-15 14:37:58 · 965 阅读 · 0 评论