前端开发

前面的话 　　本文将详细介绍从webpack3到webpack4的升级过程 概述 　　相比于webpack3，webpack4可以零配置运行，打包速度比之前提高了90%，可以直接到ES6的代码进行无用代码剔除，新增的optimization使用简单 　　在未来，CSS、HTMl和文件都会成为原生模块 【0配置】 　　webpack4 设置了默认值，以便无配置启动项目 entry 默认值是 ./src/ output.path 默认值是 ./dist mode 默认值是 production 【模块类型】 　　webpack4提供了5种模块类型 json: 可通过 require 和 import 导入的 JSON 格式的数据(默认为 .json 的文件) webassembly: WebAssembly 模块，（目前是 .wasm 文件的默认类型） javascript/auto: (webpack 3中的默认类型)支持所有的JS模块系统：CommonJS、AMD。 javascript/esm: EcmaScript模块（默认 .mjs 文件）。 javascript/dynamic: 仅支持 CommonJS & AMD。 　　webpack 4 不仅支持本地处理 JSON，还支持对 JSON 的 Tree Shaking。当使用 ESM 语法 import json 时

现在学前端的人是越来越多，学习质量也是参差不齐。过来人的身份告诉你，如果你还没有下定决心花时间去学习Web前端，那也可以先找些视频学习下，Web前端开发有哪些常见技术点!接下来，就看看Web前端开发有哪些常见技术点! 1、你有哪些性能优化的方法? (1)减少http请求次数：CSSSprites,JS、CSS源码压缩、图片大小控制合适;网页Gzip，CDN托管，data缓存，图片服务器。 (2)前端模板JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数 (3)用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。 (4)当需要设置的样式很多时设置className而不是直接操作style。 (5)少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。 (6)避免使用CSSExpression(css表达式)又称Dynamicproperties(动态属性)。 (7)图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。 2、什么叫优雅降级? 优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案

使用vue脚手架搭建项目 Vue项目开发实战系列 主要内容： 初识vues 升级到vue cli4.0 从零开始配置vue cli4.0 使用vue cli4.0创建项目 1 初识vue 1.1 Vue概述 我们就直接开门见山，看看Vue的官网吧： Vue官网： https://cn.vuejs.org/ 从官网中，我们可以知道： Vue是什么 Vue是一套用于构建用户界面的 渐进式JavaScript框架 。 Vue的核心库只关注视图层。 Vue读作[v’juː] 类似view Vue的特点是： 易用 只要掌握了HTML、CSS、JavaScript知识就可以开始构建应用 灵活 小到可以只使用一个库，大到可以使用整套完整框架 高效 运行大小仅20k，超快虚拟DOM，不必关心优化问题。 1.2 Vue开发者简介 开发者为尤雨溪。 尤雨溪简历： 尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位 现任职于纽约Google Creative Lab核心开发工程师 2014年2月，开源了一个前端开发库Vuejs。 2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入 Weex 团队来做 Vue

蚂蚁金服和饿了么好像不错 饿了么官网: http://element.eleme.io/#/zh-CN 饿了么github: http://github.com/elemefe 蚂蚁金服 https://ant.design/ Mint UI 项目主页: http://mint-ui.github.io/#!/zh-cn demo: http://elemefe.github.io/mint-ui/#/ github地址: https://github.com/ElemeFE/mint-ui 中文文档地址: http://mint-ui.github.io/docs/#!/zh-cn iview iView 配套的工作流: https://github.com/icarusion/vue-vueRouter-webpack github地址: https://github.com/iview/iview 官网: https://www.iviewui.com/ vue-mui 官网: http://mui.yaobieting.com/ github地址: https://github.com/creatshare/vue-mui radon-ui 中文文档： https://luojilab.github.io/radon-ui/#!/ github: https:/

前言 之前看了一篇文章：@ Charlie.Zheng Web系统开发构架再思考-前后端的完全分离 ，文中论述了为何要前后分离，站在前端的角度来看，是很有必要的；但是如何说服团队使用前端渲染方案却是一个现实问题，因为如果我是一个服务器端，我便会觉得不是很有必要，为什么要前后分离，前后分离后遗留了什么问题，如何解决，都得说清楚，这样才能说服团队使用前端渲染的方案，而最近我刚好遇到了框架选型的抉择。 来到新公司开始新项目了，需要做前端框架选型，因为之前内部同事采用的fis框架，而这边又是使用的php，这次也就直接采用fis基于php的解决方案： http://oak.baidu.com/fis-plus 说句实话，fis这套框架做的不错，但是如果使用php方案的话，我就需要蛋疼的在其中写smarty模板，然后完全按照规范走，虽然fis规范比较合理，也可以接受，但是稍微深入解后发现fis基于php的方案可以概括为（我们的框架用成这样，不特指fis）： 服务器端渲染html全部图给浏览器，再加载前端js处理逻辑 显然，这个不是我要的，梦想中的工作方式是做到静态html化，静态html装载js，使用json进行业务数据通信，这就是一些朋友所谓的前端渲染了 JS渲染的鄙利 前端渲染会带来很多好处： ① 完全释放前端，运行不需要服务器； ② 服务器端只提供接口数据服务，业务逻辑全部在前端

平时收藏了一些好的站点，在些谢谢那些作者： Bookmarks 书签栏 书签工具栏 综合 看雪安全论坛 - www.pediy.com 蓝色理想 经典论坛-前端开发 UI设计 web编程 w3school 在线教程 DIV+CSS教程_DIV+CSS布局_十天学会div+css_web标准化——标准之路 禅意花园 学习编程 | Codecademy 51CTO.COM - 技术成就梦想 - 中国领先的IT技术网站 后代选择器和子选择器的区别！！！ - Knuth_档案 - 博客园 详细解读DIV+CSS定位 CSS/DIV网页设计视频教程目录 - CSS,Javascript,jQuery,视频教程 - Web网页设计开发制作技巧，前沿视频教室 CSS论坛 - DIVCSS5 前端练习系列60-ie绝对定位点击的问题 | <前端开发> CSS3-HTML5之家 中文CSS3,HTML5教程网站 让IE也支持box-shadow | Web前端开发 – 专注于网站前端设计与Web用户体验 W3CPlus | css3教程-css3实例-css3动画 | 记述前端那些事——引领Web前沿 22款给力的HTML5和CSS3帮助工具前端集锦工具 | 前端开发网(W3Cfuns.com)! RD1012: 不同浏览器内 'line-height' 样式设置会影响不同行内替换元素的显示高度 -

《一统江湖的大前端》 系列是自己的前端学习笔记，旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库，不定期更新。如果你对前端的理解还是写写页面绑绑事件，那你真的是有点OUT了，前端能做的事情已经太多了, 手机app开发 , 桌面应用开发 , 用于神经网络人工智能的库 , 页面游戏 , 数据可视化 , 甚至 嵌入式开发 ，什么火就搞什么,活脱脱一个 蹭热点小能手 。如果你也觉得前端的日常开发有些枯燥，不妨一起来看看前端的另一番模样。// 华为云社区首发 为什么你总是下不了班 大部分工程化的项目为方便维护，大多都会采用前后端分离的开发方式，而前端和后端的工作基本也是同时下发的，这时前端开发人员就会很尴尬，后端在干活的时候，领导几乎一定会让你先做个 静态页面 看看，这时候你和后端之间可能只是约定了接口（当然也可能连接口都没约定，那我只能祝你幸福了），并没有数据的传输，没法直接拿到填充网页的数据，如果一次将前端代码写到位，那么打开网页时轻则页面提示没有获取到数据，重则直接报错退出脚本。 而真正的问题在于 静态页面 做起来是非常快的，以至于你的领导会认为当你把 静态页面 中加入javascript的逻辑部分的代码后 也应该非常快 ,而实际上逻辑部分的代码量和联调的工作量几乎是写一个静态页面的 5-10倍 。 基本上前端的一个需求的开发至少需要经历 静态页面 ——>

《一统江湖的大前端》 系列是自己的前端学习笔记，旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库，不定期更新。如果你对前端的理解还是写写页面绑绑事件，那你真的是有点OUT了，前端能做的事情已经太多了, 手机app开发 , 桌面应用开发 , 用于神经网络人工智能的库 , 页面游戏 , 数据可视化 , 甚至 嵌入式开发 ，什么火就搞什么,活脱脱一个 蹭热点小能手 。如果你也觉得前端的日常开发有些枯燥，不妨一起来看看前端的另一番模样。//华为云社区首发 一.[懒]——才是第一生产力 你没有看错， 懒 绝壁是第一生产力，技术的进步，很多时候都是因为一些非常聪明的人难以忍受一些（在他们眼里）枯燥重复且低效的东西，从而发明出的东西，无论这些新发明在经历了迭代和打磨之后看起来多么牛逼耀眼，但其本质基本都可以归纳为： 是聪明的 懒 人搞出的可以让自己更省事的东西。 jQuery的流行，是因为开发者 懒得 为DOM编写跨浏览器兼容性代码 Angular.js的流行, 是因为开发者连DOM都 懒得 操作 Bootstrap的流行, 是因为开发者 懒得 编写自适应样式 Webpack的流行, 是因为开发者 懒得 做一系列上线前的准备工作 ...... 有的人越懒越牛逼，有的人越懒越逗逼，看来懒也是个技术活，懒出高度，懒出艺术，那才是真的高端懒。 二.从GUI到CLI GUI

《一统江湖的大前端》 系列是自己的前端学习笔记，旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库，不定期更新。如果你对前端的理解还是写写页面绑绑事件，那你真的是有点OUT了，前端能做的事情已经太多了, 手机app开发 , 桌面应用开发 , 用于神经网络人工智能的库 , 页面游戏 , 数据可视化 , 甚至 嵌入式开发 ，什么火就搞什么,活脱脱一个 蹭热点小能手 。如果你也觉得前端的日常开发有些枯燥，不妨一起来看看前端的另一番模样。 一.协作开发引发的问题 前端有个很流行的段子（其实前端有很多流行的段子）： 看完你们项目的源码，就知道你们团队有多少个人。 各种命名风格，各种冗余代码，各种缩进风格，各种奇葩注释和各种没有注释， 眼中有码，心中无码，只有 心累 两个字 ，项目的整洁度会受到很多客观因素的影响，为了自己的身心健康，我们应该试图将这种影响降到最低。简单地说，统一格式和风格的代码让人更加赏心悦目，更不容易让你产生想摔键盘的冲动;用一个B格更高的词语，叫做 “熵减” ，也就是降低团队产出代码的无序性，如果你想在未来成为一名合格的前端架构师，这将是你的工作目标。 二.码如其人 从做开发开始，我就是一个名 sublime 的爱好者，随着常用快捷键的熟练和各种插件的配合，自己的开发速度得到了很大提升，毕竟这是一个 颜值决定一切 的时代，作为一个前端

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