前端开发 | 易学教程

CSS品控与流程

阅读更多关于 CSS品控与流程

精通CSS意味着不仅能写出可用的标记和样式，还能让代码好阅读、方便移植、易维护。 1.外部代码质量：调试CSS 外部代理质量就是用户能体验到的最终结果。主要体现在几个方面。正确性。 CSS属性名都写对了吗？浏览器能否支持？健壮性。声明两套属性，其中一套用作旧版浏览器的后备。性能。页面加载快不快？动画和滚动是否平滑？我们要善于利用浏览器的开发者工具。 1.1 浏览器如何解析CSS 浏览器在加载一个网站时，首先会收到网址对应的一个HTML文件。然后浏览器把这个HTML文件解析为一个对象（节点）树。这就是文档对象模型（DOM，document object model）。 <html lang="en"> <head> <meta charset="utf-8"> <title>Test Document</title> </head> <body> <h1>This is a test.</h1> <p>This is a paragraph.</p> <p>This is anothr paragraph.</p> </body> </html> 浏览器在碰到HTML中指向CSS文件的链接时，会获取并解析CSS文件。类似于把HTML转换成DOM，CSS文件会被浏览器转换为 CSS对象模型（CSSOM，CSS object model）。不仅是外部CSS，

利用fis3构建前端项目工程

阅读更多关于利用fis3构建前端项目工程

FIS3是国内百度公司产出的一款前端工程构建工具，FIS3可以解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题，首先来简单的实现资源合并压缩提高性能等问题。安装fix3 npm install -g fis3 创建项目目录 cd 进入此目录中初始化，执行 fis3 init 对需要的插件进行安装，比如安装scss编译插件： npm install -g --save-dev fis-parser-node-sass 注意：如果 fis-parser-node-sass 安装失败，请卸载nodejs，安装低版本即可让 fis3 产出能够支持相对路径。 npm install -g fis3-hook-relative 常用fis3插件 http://fis.baidu.com/fis3/docs/common-plugin.html 配置文件打开fis-conf.js 做相应的配置 // 保持发布使用相对路径 fis.hook('relative'); fis.set('domain_test', ''); // 预发布环境 fis.set('domain_pre', 'http://test.zuobaiquan.com'); // 线上环境 fis.set('domain_build',

fis3学习笔记

阅读更多关于 fis3学习笔记

一、fis3是什么，能干什么？ FIS3 是面向前端的工程构建工具，可以解决前端中的性能优化，其实也就和gulp差不多，只不过gulp是轻量级的，需要什么操作，下载相对应的插件，而fis3已经集成好了很多功能。二、准备工作 1、首先要安装node和npm 2、安装fis3 --> npm install -g fis3 3、测试一下是否安装成功 --> fis3 -v 4、升级fis3 npm update -g fis3 或者重装 --> npm install -g fis3 三、熟悉fis3里面的命令 fis3里面内置了一个简易的web server，可以方便调试构建结果 1、fis3 server open -->打开web server的根目录（www目录） 2、fis3 release -->将构建结果发布到web server 的目录下面 3、fis3 release -d +路径 -->构建结果发布到指定的目录下面 4、fis3 server start -->启动本地web server（浏览器将会被打开） 5、fis3 release -w -->启动文件监听功能 6、fis3 release -wl -->浏览器自动刷新 7、fis3 server -h -->获取更多参数 8、fis3 server clean --> 清空web

前端SPA框架一些看法

阅读更多关于前端SPA框架一些看法

说起前端框架，我个人主张有框架不如无框架，这个观点要先从框架和库的区别说起。　　我所理解的库，解决的是代码或是模块级别的复用或者对复杂度的封装问题;而框架，更多的是对模式级别的复用和对程序组织的规范，这里的模式是指比如 MVC，为了实现 M 和 V 的解耦，通过 IOC 或是 PubSub 等手段，把丑陋的耦合由经常变化的业务代码转移到不经常变化的框架内部消化。　　对于前端来说，在 WebApp 概念兴起前，很少能看到所谓的框架，更多的是类似于 jQuery 、YUI 的库，因为前端的一路下来的发展历程和开发方式的特殊性决定了很难有什么通用的模式能满足多样化前端的开发需要。如果一定要说，也就是近些年伴随着 SPA(Single-page application)概念兴起而出现的所谓前端 MVC 的一系列衍生模式，但是即便如此，光靠一个框架还是解决不了什么问题。　　这里要重点说一下 SPA 这个随着 AJAX 技术火起来的概念，SPA 的好处有哪些相信不用多说，网上一搜一大堆，接近原生应用的表现、和 HTML5 技术发展方向向契合等等。SPA 的出现让前端变得越来越重，代码组织、逻辑解耦等后端常常面对的问题也开始在前端出现，人们也开始在前端引入 MVC 去应对这样一些问题，确实很有成效。但是前端变重所面临的问题就仅仅是 JavaScript 层面的 MVC 能解决的吗？　

前端优化（原创）

阅读更多关于前端优化（原创）

前端优化只要在两方面进行，一是加载速度优化，二是渲染速度优化。在进行优化前，先掌握好2个基本理论知识理论知识（一）：浏览器的完整加载渲染过程 ①输入url，发送请求 ②加载(即下载)整个.html文件 ③加载完后解析(即运行)html，并在解析的过程中构建DOM树 ·JavaScript是单线程的。浏览器是多线程的：有的线程负责加载资源，有的线程负责执行脚本，有的线程负责渲染界面。 ·浏览器按从上之下(深度遍历)的原则解析各个html标签 ·解析标签的过程就是构建DOM树的过程 ·解析遇到link、script、img标签时，浏览器会向服务器发送请求资源。 script加载时不影响其他资源加载，但由于不知道js中的执行内容，所以需要等JS加载并执行完后才会继续解析和渲染。 script的执行会阻塞html解析、其他下载线程以及渲染线程。 link加载完css后会解析为CSSOM(层叠样式表对象模型,一棵仅含有样式信息的树)。css的加载和解析不会阻塞html的解析，但会阻塞渲染。 img的加载不会阻塞html的解析，但img加载后并不渲染，它需要等待Render Tree生成完后才和Render Tree一起渲染出来。未下载完的图片需等下载完后才渲染。 ④当css解析为CSSOM后，html解析为DOM后，两者将会结合在一起生成Render Tree(渲染树)。 ⑤Layout

Vue知识点精简汇总

阅读更多关于 Vue知识点精简汇总

一、组件component 1. 什么是组件？组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码组件是自定义元素（对象） 2. 定义组件的方式方式1：先创建组件构造器，然后由组件构造器创建组件方式2：直接创建组件 3. 组件的分类分类：全局组件、局部组件 4. 引用模板将组件内容放到模板<template>中并引用 5. 动态组件 <component :is="">组件多个组件使用同一个挂载点，然后动态的在它们之间切换 <keep-alive>组件二、组件间数据传递 1. 父子组件在一个组件内部定义另一个组件，称为父子组件子组件只能在父组件内部使用默认情况下，子组件无法访问父组件中的数据，每个组件实例的作用域是独立的 2. 组件间数据传递（通信） 2.1 子组件访问父组件的数据 a)在调用子组件时，绑定想要获取的父组件中的数据 b)在子组件内部，使用props选项声明获取的数据，即接收来自父组件的数据总结：父组件通过props向下传递数据给子组件注：组件中的数据共有三种形式：data、props、computed 2.2 父组件访问子组件的数据 a)在子组件中使用vm.$emit(事件名,数据)触发一个自定义事件，事件名自定义 b)父组件在使用子组件的地方监听子组件触发的事件

前端模块化，AMD与CMD的区别

阅读更多关于前端模块化，AMD与CMD的区别

最近在研究cmd和amd，在网上看到一篇不错的文章，整理下看看。在 JavaScript 发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用， jQuery 等前端库层出不穷，前端代码日益膨胀这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说模块（module）了，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码模块既然JavaScript不能handle如此大规模的代码，我们可以借鉴一下其它语言是怎么处理大规模程序设计的，在 Java 中有一个重要带概念——package，逻辑上相关的代码组织到同一个包内，包内是一个相对独立的王国，不用担心命名冲突什么的，那么外部如果使用呢？直接import对应的package即可 import java.util.ArrayList; 遗憾的是JavaScript在设计时定位原因，没有提供类似的功能，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化。一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能

前端模块化

阅读更多关于前端模块化

在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说模块（module）了，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码模块既然JavaScript不能handle如此大规模的代码，我们可以借鉴一下其它语言是怎么处理大规模程序设计的，在Java中有一个重要带概念—— package ，逻辑上相关的代码组织到同一个包内，包内是一个相对独立的王国，不用担心命名冲突什么的，那么外部如果使用呢？直接 import 对应的package即可 import java.util.ArrayList; 遗憾的是JavaScript在设计时定位原因，没有提供类似的功能，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化。一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，各行其是就都乱套了

前端模块化

阅读更多关于前端模块化

前端模块化在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说模块（module）了，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码模块既然JavaScript不能handle如此大规模的代码，我们可以借鉴一下其它语言是怎么处理大规模程序设计的，在Java中有一个重要带概念—— package ，逻辑上相关的代码组织到同一个包内，包内是一个相对独立的王国，不用担心命名冲突什么的，那么外部如果使用呢？直接 import 对应的package即可 import java.util.ArrayList; 遗憾的是JavaScript在设计时定位原因，没有提供类似的功能，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化。一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，各行其是就都乱套了

前端模块化

阅读更多关于前端模块化

订阅前端开发