前端开发

JavaScript概述 ECMAScript和JavaScript的关系 1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。 该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。 因此ECMAScript和JavaScript的关系是， 前者是后者的规格，后者是前者的一种实现 。 ECMAScript的历史 年份 名称 描述 1997 ECMAScript 1 第一个版本 1998 ECMAScript 2 版本变更 1999 ECMAScript 3 添加正则表达式 添加try/catch ECMAScript 4 没有发布 2009 ECMAScript 5 添加"strict mode"严格模式 添加JSON支持 2011 ECMAScript 5.1 版本变更 2015 ECMAScript 6

前言 最近在几个spa的项目中都使用前后端完全分离，后端只提供数据接口的方式。慢慢总结了一套前端的通用框架。这个框架没有语法限制，没有特别的规则，可接任何语言的后台。一切以快速开发为准则。 技术总览 技术上来说，使用seajs做模块调度。 核心模块有：jquery、jquery-ui、backbone（一个前端MVC框架）、less（一个是css能用变量等编程特性来编写的js库）。 已经包括的可用模块有：contextMenu（jquery右键菜单插件）、bootstrap（来自twitter的通用的css和js库）、uploadify（jquery文件上传插件）、qtip（jquery提示插件）。 后续可能加入：kindeditor（富文本插件）。 文件结构 根目录： core : 存放的是核心的库文件，如jquery。 module : 中存放的是可选的模块和用户自己创建的模块。 index.php : 是示例的页面模板，这个模板可以是任何文件，html或者jsp等都行。如果你的应用中有多个页面，都放在根目录下就行了。 init.js : 你的应用的初始化文件，可以在里面指定模块的别名。可以在里面启动默认的模块。一切初始化的工作都可以放在这里。 sea.js ： seajs核心文件，勿动。 示例 ：快速构建一个基础的应用 观看本示例时，你需要了解基本的seajs用法。 1

前言 像我们熟悉的 vue-cli，taro-cli 等脚手架，只需要输入简单的命令 taro init project ，即可快速帮我们生成一个初始项目。在日常开发中，有一个脚手架工具可以用来提高工作效率。 搭建前准备 第三方工具 commander.js ，可以自动的解析命令和参数，用于处理用户输入的命令。 download-git-repo ，下载并提取 git 仓库，用于下载项目模板。 Inquirer.js ，通用的命令行用户界面集合，用于和用户进行交互。 handlebars.js ，模板引擎，将用户提交的信息动态填充到文件中。 ora ，下载过程久的话，可以用于显示下载中的动画效果。 chalk ，可以给终端的字体加上颜色。 log-symbols ，可以在终端上显示出 √ 或 × 等的图标 开始 新建一个文件夹，然后npm init初始化 npm 不单单用来管理你的应用和网页的依赖，你还能用它来封装和分发新的 shell 命令。 这时在我们的 lq-cli 项目中有 package.json 文件，然后需要创建一个 JS 文件包含我们的脚本就取名 index.js 吧。 package.json 内容如下： { "name": "lq-shell", "version": "1.0.0", "description": "脚手架搭建", "main": "index

什么是前后端分离 对接模式 1、项目启动时，前端工程师和后端工程师开会确定JSON数据的详细格式。 字段 类型 作用 必传 2、JSON格式确定后前后端分头开发 3、前端工程师在后端工程师未完成时使用Mock.js技术提供的假数据开发 后端开发完成将程序部署到测试服务器之后，前端工程师连接测试服务器使用真实数据测试，联调。 来源： CSDN 作者： Ocean&&Star 链接： https://blog.csdn.net/zhizhengguan/article/details/103854522

http://caibaojian.com/some-fe 蒋长浩博士 Facebook 介绍：蒋长浩，祖籍湖南，获清华大学计算机本硕学位、伊利诺伊大学(UIUC)博士学位，在卡耐基梅隆大学(CMU)、谷歌公司从事过“普适计算~大规模计算”的优化研究。在Facebook任研究科学家，他创造BIGPIPE，使大型网站访速翻1倍，举世关注。 钱宝坤 新浪微博 微博：貘吃馍香 博客： http://w3help.org 混迹于IT行业多年的普通程序员，偏好浏览器相关内容研究。w3help.org文章内容主要提供者之一。现就职于新浪微博前端基础架构组，参与微博前端公用组件开发，以及前端工具开发相关工作。 嗷嗷 淘宝网 微博：aoao 博客： http://www.aoao.org.cn 介绍：从事前端开发多年，期间做过设计转过产品，混过后端，写过《Web标准设计》一书。目前就职于淘宝网，主要负责前端性能监控、优化等前端开发相关的工作。 郭润增 腾讯 微博：grzcn 博客： http://grz.qzone.qq.com 介绍：aka郭小帅，08年毕业加入腾讯QQ空间前端团队至今一直在关注Web前端优化，主要负责Qzone Feeds和个人中心的业务特性和性能优化，也是Qzone 6.0的开拓者之一。 李成银 百度 微博：welefen 博客： http://www.welefen.com

在App开发中，内嵌WebView始终占有着一席之地。它能以较低的成本实现Android、iOS和Web的复用，也可以冠冕堂皇的突破苹果对热更新的封锁。 然而便利性的同时，WebView的性能体验却备受质疑，导致很多客户端中需要动态更新等页面时不得不采用其他方案。 以发展的眼光来看，功能的动态加载以及三端的融合将会是大趋势。那么如何克服WebView固有的问题呢？我们将从性能、内存消耗、体验、安全几个维度，来系统的分析客户端默认WebView的问题，以及对应的优化方案。 性能 对于WebView的性能，给人最直观的莫过于：打开速度比native慢。 是的，当我们打开一个WebView页面，页面往往会慢吞吞的loading很久，若干秒后才出现你所需要看到的页面。 这是为什么呢？ 对于一个普通用户来讲，打开一个WebView通常会经历以下几个阶段： 交互无反馈 到达新的页面，页面白屏 页面基本框架出现，但是没有数据；页面处于loading状态 出现所需的数据 如果从程序上观察，WebView启动过程大概分为以下几个阶段： 如何缩短这些过程的时间，就成了优化WebView性能的关键。 接下来我们逐一分析各个阶段的耗时情况，以及需要注意的优化点。 WebView初始化 当App首次打开时，默认是并不初始化浏览器内核的；只有当创建WebView实例的时候，才会创建WebView的基础框架。

V2EX 这两天有一篇这样的帖子： 《说句实话，我后端现在已经看不懂前端了，太难了》 原文内容是： 看不懂惹，肿么办，最近在学 react，完全抓瞎。 然后又附加了内容： 一直用的 jquery，手动找位置然后对应 dom 操作，现在各种前端各种依赖，一会 route 一会 webpack 的 给爷整蒙了都。 类似这样的帖子多年来数不胜数，但这次评论区的评论比较典型，所以我决定这次不再沉默。当然，本文并非针对帖子作者。 对于那些抱怨前端「看不懂」的网友，我们应该问他们一个问题：为什么前端就应该是谁都能看懂？ 这些网友从来不会抱怨别的领域的代码看不懂，比如他们不会说「我一个前端已经看不懂后端了」，或者「我一个后端已经看不懂 iOS 」了。 所以在这些网友心中，前端代码就是要谁都看得懂才是正常的。因为谁都应该看得懂 HTML, 谁都看得懂 CSS. 显然，这群人对前端的认知还活在过去，他们一边享受着用 Web 技术做出来应用，一边意淫着这些包含复杂业务逻辑的 Web 应用靠 HTML 和 Vanilla JS (原生 JS) 就能写成。 换句话说，这群人最大的问题在于，他们意识不到 GUI 开发 (Graphic User Interface Programming) 是一个从图形界面被发明开始就一直在被研究的独立领域，而 Web 前端只是 GUI 开发的其中一个分支而已。

webpack5都出了，webpack4的的基本配置，解析ES6，引入CSS，编译Less，设置image等等，你都会了么？ ​解析ES6 了解Babel Babel是一个JavaScript编译器，可以实现将ES6+转换成浏览器能够 识别的代码。 Babel在执行编译时，可以依赖.babelrc文件，当设置依赖文件时， 会从项目的根目录下读取 .babelrc 的配置项，.babelrc配置文件 主要是对 预设(presets) 和 插件(plugins) 进行配置。 其中，presets可以标识需要转换的源码使用了哪些新特性， 可以理解为一系列plugins的集合，例如babel-preset-es2015，可以 将es6转换为es5；而plugins则指示babel如何对代码进行转换， 例如plugin-transform-arrow-functions可将ES6语法转换为 ES5。 解析ES6 1、安装依赖 npm i @babel/core @babel/preset-env babel-loader -D 2、配置webpack.config.js设置loader module: { rules: [ { test: /.js$/, use: 'babel-loader' } ] } 3、根目录创建.babelrc，并配置preset-env对ES6+语法特性进行转换

我们知道，在NodeJS之前，由于没有过于复杂的开发场景，前端是不存在模块化的，后端才有模块化。NodeJS诞生之后，它使用CommonJS的模块化规范。从此，js模块化开始快速发展。 模块化的开发方式可以提供代码复用率，方便进行代码的管理。通常来说， 一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数 。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。下面开始一一介绍： 回到顶部 CommonJS NodeJS是CommonJS规范的主要实践者，它有四个重要的环境变量为模块化的实现提供支持： module 、 exports 、 require 、 global 。实际使用时，用 module.exports 定义当前模块对外输出的接口（不推荐直接用 exports ），用 require 加载模块。 复制// 定义模块math.js var basicNum = 0; function add(a, b) { return a + b; } module.exports = { //在这里写上需要向外暴露的函数、变量 add: add, basicNum: basicNum } /** 必须加./路径，不加的话只会去node_modules文件找 **/ // 引用自定义的模块时，参数包含路径，可省略.js var math =

表现层（CSS） CSS 层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下： 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器； 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护； 这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为 【CSS 预处理器】 的工具，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率。 什么是 CSS 预处理器 CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。 常用的 CSS 预处理器有哪些 SASS：基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习 Ruby 语言，上手难度高于 LESS。 LESS：基于 NodeJS，通过客户端处理，使用简单。功能比 SASS 简单，解析效率也低于 SASS，但在实际开发中足够了