前端开发 | 易学教程

前端干货之JS最佳实践

阅读更多关于前端干货之JS最佳实践

持续更新地址 https://wdd.js.org/js-best-pr... 1. 风格一千个读者有一千个哈姆雷特，每个人都有自己的code style。我也曾为了要不要加分号给同事闹个脸红脖子粗，实际上有必要吗？其实JavaScript已经有了比较流行的几个风格 JavaScript Standard Style Google JavaScript Style Guide Airbnb JavaScript Style Guide 我自己使用的是 JavaScript Standard Style , 我之所以使用这个，是因为它有一些工具。可以让你写完代码后，一旦保存，就自动帮你把你的风格的代码修正成标准分割，而不是死记硬背应该怎么写。看完这个页面，你就应该立马爱上 JavaScript Standard Style , 如果你用vscode, 恰好你有写vue, 你想在.vue文件中使用standard风格，那么你需要看看这篇文章 2. 可维护性很多时候，我们不是从零开始，开发新代码。而是去维护别人的代码，以他人的工作成果为基础。确保自己的代码可维护，是赠人玫瑰，手留余香的好事。一方面让别人看的舒服，另一方面也防止自己长时间没看过自己的代码，自己都难以理解。 2.1. 什么是可维护代码可维护的代码的一些特征可理解易于理解代码的用途可适应数据的变化

浅谈前端工程化

阅读更多关于浅谈前端工程化

这段时间对项目做了一次整体的优化，全站有了20%左右的提升（本来载入速度已经1.2S左右了，优化度很低），算一算已经做了四轮的全站性能优化了，回顾几次的优化手段，基本上几个字就能说清楚：传输层面：减少请求数，降低请求量执行层面：减少重绘&回流传输层面的从来都是优化的核心点，而这个层面的优化要对浏览器有一个基本的认识，比如： ① 网页自上而下的解析渲染，边解析边渲染，页面内CSS文件会阻塞渲染，异步CSS文件会导致回流 ② 浏览器在document下载结束会检测静态资源，新开线程下载（有并发上限），在带宽限制的条件下，无序并发会导致主资源速度下降，从而影响首屏渲染 ③ 浏览器缓存可用时会使用缓存资源，这个时候可以避免请求体的传输，对性能有极大提高衡量性能的重要指标为首屏载入速度（指页面可以看见，不一定可交互），影响首屏的最大因素为请求，所以请求是页面真正的杀手，一般来说我们会做这些优化：减少请求数 ① 合并样式、脚本文件 ② 合并背景图片 ③ CSS3图标、Icon Font 降低请求量 ① 开启GZip ② 优化静态资源，jQuery->Zepto、阉割IScroll、去除冗余代码 ③ 图片无损压缩 ④ 图片延迟加载 ⑤ 减少Cookie携带很多时候，我们也会采用类似“时间换空间、空间换时间”的做法，比如： ① 缓存为王，对更新较缓慢的资源&接口做缓存（浏览器缓存

前端code review规范以及流程

阅读更多关于前端code review规范以及流程

俗话说，没有无缘无故的爱，也没有无缘无故的恨，当然也没有无缘无故的Code Review! 一、目的保证团队编码风格一致自己的代码要给别人看，开发过程中需要潜意识的注意代码规，以及逻辑严谨性。保证项目质量，扼杀潜在风险虽然功能完成后自己会自测，但难免会遗漏掉一些边界点，或者受思维限制的一些点。相互提升多学习别人代码，看高手是如何写出严谨、简洁、优美的代码，和自己做对照，取齐精髓，去其糟粕！便捷交叉维护通过交叉Code Review过程，了解不同业务，方便后期交叉维护，无需花更多时间上手。二、如何开展结对至少两人为一小组 review以及上线流程所有项目master设置为Protected,并且设置allowed to push为No one，设置Merge checks为All discussions must be resolved，该分支作为deployment分支开发时创建dev分支，并且同样设置为Protected，allowed to push为No one，设置Merge checks为All discussions must be resolved，该分支作为development分支个人分支最好以自己名字命名，需要review代码时，提Merge Request到dev分支，代码review人对代码进行review

实践中的电商前端优化

阅读更多关于实践中的电商前端优化

前端优化已经是一个被写烂的题材了。虽千万人吾往矣，这里我仅分享我的一些实践经验。欢迎一起交流欢迎关注我的个人公众号，不定期更新自己的工作心得。正文如下前端性能 1. 模块化严格来说，代码模块化并不能带来性能上的提升，但我还是将模块化提出来，因为它真的很重要，重要到几乎所有的优化都与它息息相关。常见的模块化方案有：AMD、CMD、UMD、ES6 如何选择？团队习惯个人偏好业务需要我靠！你怎么能把业务需要放在最后一个考虑？因为没有哪一块业务会因为使用了不同的模块化方案而产生不同的结果。而且我觉得软件开发中的以人为本用在这里刚好合适，其他地方就只能呵呵了。毕竟业务高于一切，这是操守。 2. 缓存缓存一定要加！缓存一定要加！缓存一定要加！因为CDN真的很贵。。。没有CDN？那就更得加缓存了！！！缓存有很多方式，最为常见的就是下面这两种了浏览器304缓存 localstorage本地存储业界，一直有关于304缓存与localstorage性能的争议，这里我们不讨论两者的差异，或性能问题。我一向以业务导向选择方案，这里我选择的是localstorage，如果你愿意，你可以通过localstorage将缓存玩出一朵花出来。你可以这么干：通过localstorage存储js、css资源；资源版本控制；只要你愿意

前端面试题目整理

阅读更多关于前端面试题目整理

1.请说出三种减少页面加载时间的方法。 * 1.优化图片 * 2.优化css,压缩合并css * 3.减少http请求（合并文件，合并图片） 2.解释下CSS sprites ,以及你要如何在页面或网站中使用它。 * CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”,“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。 3.简述一下你对HTML语义化的理解？ * 用正确的标签做正确的事情。 * HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析。即使在没有样式css情况下也以一种文档格式显示，并且是容易阅读的。 4.为什么要推出es6,相较es5有啥好处？（es6，实际上，就是一种新的javascript规范） * es6，它包含了一些很棒的新特性，可以更加方便的实现很多复杂的操作，提高开发人员的效率。你所不知道的es6新特性 5.原生forEach和map的区别以及兼容 https://www.cnblogs.com/liuruyi/p/6483526.html 前端开发的优化问题 1、减少http请求次数：css spirit,data url 2、JS

前端基础CSS篇之一

阅读更多关于前端基础CSS篇之一

OXO1 写在前面 1.HTML和CSS的对比 (1)HTML只关注语义和结构，主要是对网页元素的整理和分类。（2）CSS的主要使用场景就是美化页面，布局页面。（3) CSS和HTML搭配使用，实现网页结构，表现分离。 2.CSS概述（1）概念 CSS是叠层样式表（Cascading Style Sheets)也称为CSS样式表或级联样式表。也是一种标记语言。（2)作用 CSS主要用于设置HTML页面中的文本内容(字体，大小，对齐方式等)，图片的外形（宽高，边框样式，边距等）以及版面布局和外观显示样式。 (3)CSS语法 CSS主要是由选择器和一条或者多条申明组成。选择器 { 属性1: 值1；属性2: 值2；属性n: 值n； } demo: p { color: red; font-size: 12px; } 注：选择器：指定修改样式的目标声明：要改成的样式（4）CSS注释： /* 我是被注释掉的内容 */ OXO2 选择器的分类一. 基础选择器 1.标签选择器 (1) 标签选择器(元素选择器)是指用HTML标签名称作为选择器，按照标签分类，为页面中某一类型的标签，指定统一的CSS样式。（2）语法：标签名 { 属性1：值1；属性2：值2； .... } demo : <!DOCTYPE html> <html lang="en"> <head>

最近关于css样式重构的一点心得体会

阅读更多关于最近关于css样式重构的一点心得体会

之前的项目一直都是基于bootstrap,elementUI这些已经很成熟的框架进行二次开发，要么就是一些很小的宣传页面，h5页面，或者结构相对简单的移动端。一直都没有机会对css的整体进行一个思考，这次正好有个整站的重构项目，让我对css模块化以及重用这些进行了一个很好的梳理。很早以前就读过bootstrap的sass源码，当时就十分的震惊，仿佛打开了新世界的大门，原来css还可以这么玩？css原来也有模块化，原来也可以这么优雅？对比之下，自己写的，简直杂乱无章，一堆狗屎，重用性不行，后期不易于维护，扩展性也不行，这些都是一个很致命的缺陷，或许区分一个前端开发工程师的好坏从这方面就能够有一个很好的体现吧，同样一个页面，或许一个初级前端工程师和一个高级前端工程师都可以100%的还原出来，但是你是用1K的css代码写出来的还是用10K的css代码写出来的就有天壤之别，或许从数据上面来看只有9K的差距，但是如果考虑到用户流量的问题，这个就是很大的问题了。如果是个访问量100的小网站那么就是 900K，如果是像淘宝网这样的产品，那么差距就十分明显了。一个简洁可复用的css代码不仅可以节约大量的带宽，提高性能，同时也是工程化的需要。开始的时候写的都是css，这个时候什么模块化啥的根本就不可能有很深刻的感觉，直到看了bootsrap源码后，开始使用sass

2014年最新前端开发面试题

阅读更多关于 2014年最新前端开发面试题

PS：在其基础上完善了一些答案，增加一些问题欢迎fork wj：）目录前言 HTML 部分 CSS 部分 JavaScript 部分其他问题优质网站推荐前言本文总结了一些优质的前端面试题（多数源于网络），初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。万不可投机取巧，只求面试过关是错误的！面试有几点需注意：(来源程劭非老师 github:@wintercn) 面试题目：根据你的等级和职位变化，入门级到专家级：范围↑、深度↑、方向↑。题目类型：技术视野、项目细节、理论知识题，算法题，开放性题，案例题。进行追问：可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种关联知识是长时期的学习，绝对不是临时记得住的。回答问题再棒，面试官（可能是你的直接领导面试），会考虑我要不要这个人做我的同事？所以态度很重要。（感觉更像是相亲）资深的工程师能把absolute和relative弄混，这样的人不要也罢，因为团队需要的你这个人具有可以依靠的才能（靠谱）。前端开发面试知识点大纲： HTML&CSS：对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应 JavaScript：数据类型、面向对象

前端工程化

阅读更多关于前端工程化

什么是前端工程化？ web前端这几年飞速发展，以前前端工程师还是一个不受重视的职位，日常工作就是切图、用JQuery写脚本，从某种意义上来说，只是后端的附属物。最近几年，尤其是nodejs的出现，使前端越来越受重视，同时也带来一个问题，前端规模越来越大，如何提高前端工程师的开发效率变得非常重要。这就是前端工程化的目的。前端工程化是将前端开发规范化、标准化，包括开发流程、技术选型、项目测试、项目部署。前端工程化提倡用完善的流程规范和代码规范来保证大型项目的质量和可维护性。开发阶段：由于原生HTML、CSS、JS效率并不高，于是出现了模板、scss、less、typescript等中间型语言用于转义为原生语言，或者将JQuery代替原生JS、在开发阶段希望浏览器自动刷新等。测试阶段：自动化测试部署阶段：首先对代码进行压缩，将静态资源部署到静态服务器上，对文件加上md5防止浏览器使旧缓存等。解决前端工程化的问题，可以从开发和部署入手：开发方面要解决的问题：（1）提高开发效率　　比如事件监听从原始DOM到jquery再到Vue；　　比如为减少请求次数，将多个图片合并成一个雪碧图，通过background-position来使用图片。（2）降低大型项目的开发难度　　首先前端工程化提倡模块化、组件化。核心思想是分治　　模块化和组件化的区别：　　模块（module

几个前端自动化工具（一）bower，grunt，gulp，jspm，karmam，webpack

阅读更多关于几个前端自动化工具（一）bower，grunt，gulp，jspm，karmam，webpack

3 月，跳不动了？>>> 前端有很多包管理工具，除了常见的webpack外还有bower，grunt，gulp，jspm，karma，这里就走马观花的都测试一遍 1 Bower https://bower.io/ 使用方法：安装bower：npm install bower 使用bower安装包： install jquery --save 维护一个bower.json，格式如下： { "name": "example", "version": "0.0.1", "dependencies": { "jquery": "~2.1.3" }, "private": true } 2 GRUNT http://gruntjs.com/ 安装grunt：npm install -g grunt-cli 使用grunt：直接执行grunt 维护一个gruntfile.js module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.initConfig({ jshint: { files: ['Gruntfile.js', 'src/main/javascript/*.js','src/test/javascript/*.js'] } }); grunt.registerTask

订阅前端开发