前端开发

如何做一个职业规划 上面讲述了前端如何兴起和前端的现状，下面将基于上述两点，分几个方面为大家提供一些有关职业规划的观点，希望对大家有帮助。 确定方向 做职业规划的目的是避免迷茫，而避免迷茫最有效的方式就是确定明确的方向和目标。 对于任何一个技术岗位，都有固定的两个方向：技术专家（架构师）和 开发经理。前者偏重技术，需要你在当前领域钻研得很深；后者偏向管理，需要你在对技术有很深掌握的同时，可以带领团队完成项目的开发。当然，两者并不是鱼与熊掌的关系，你可以同时成为技术专家和开发经理。 对于技术专家和开发经理两个方向的选择，更多取决于你自身在工作中多巴胺的分泌情况。当你专研技术时，多巴胺分泌得更多，感到更兴奋，或许你会很容易成为技术专家；反之，当你跟团队一起做业务时，多巴胺分泌得更多，更有获得感，那么你可以尝试向开发经理方向发展。当然，你也可能做什么都没有分泌太多的多巴胺，那么，你可以在尝试一段时间后，转型其他职业，例如产品经理。前端作为核心是用户体验，与用户最近的工程师，转型产品经理，阻碍会小一些。况且，文艺型前端布道人豆瓣前端负责人张克军认为，前端工程师正慢慢演变为产品工程师，前端和产品离得确实很近。 做业务还是做架构 做业务，时间要求比较紧，代码质量要求高，可参考的代码比较多，业务知识需要学习。做架构，时间稍微自由，对经验要求比较高，无可参考代码，专业基础知识需要深刻理解；最主要的

文章目录 浏览器工作原理 了解html语言和Dreamweaver界面； 初识标签 通过div的书写熟悉html语法； 浏览器工作原理 客户端：Client 例如：浏览器 APP 服务器：sever CS开发: Client/Server或客户端/服务器模式，，开发难度大，不利于后期维护 BS开发: Brower/Server或浏览器/服务器，，快速便捷，是未来的趋势 .com .cn .edu .gov .org http协议： http超文本传输协议（HTTP，HyperText Transfer Protocol) HTTP是一个客户端和服务器端请求和应答的标准，是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。 FTP File Transfer Protocol（文件传输协议）的英文简称，而中文简称为“文传协议”。用于Internet上的控制文件的双向传输。 了解html语言和Dreamweaver界面； HTML(hyper text markup language)超文本标记语言 1993年提出了html的草案 1995年html2.0成型 目前html5已基本成熟并开始应用到互联网开发中 html编辑器： hbuilder、Dreamweaver、editorPlus、sublime、webstorm等等 视图 代码 设计 拆分 预览

　　一开始我还以为vue的路由只能用在工程化的项目里面呢，然后研究了一下才发现，在脚本化里面也是可以用的。其实呢不管在哪里用，把原理研究明白就对了。 一、 官网demo 　　这里不得不吐槽一下官网，写的不清不楚的，在哪里使用都没有说清楚，几行代码一句话就轻飘飘的交代完事了，剩下的事情还得自己研究，比如 HTML5 History API 是怎么回事。这里又涉及了一个问题，想要用好vue，必须的基础是要先掌握的，因为vue的官网教程里面不会管这些基础知识的。 　　先看官网的代码： 1 const NotFound = { template: '<p>Page not found</p>' } 2 const Home = { template: '<p>home page</p>' } 3 const About = { template: '<p>about page</p>' } 4 5 const routes = { 6 '/': Home, 7 '/about': About 8 } 9 10 new Vue({ 11 el: '#app', 12 data: { 13 currentRoute: window.location.pathname 14 }, 15 computed: { 16 ViewComponent () { 17 return routes[this

秘制牛肉Alpha阶段项目展示 1.团队成员和个人博客 · 左顺：“我是左顺，秘制牛肉队开发人员”。 · 王尖兵：“C，java，html5都会一点的菜鸡，没做过团队项目，但会在团队中尽力”。 · 袁勤：“团队实力担当”。 · 顾展鹏：“我喜欢编程，很高兴能和大家一起做这个项目，希望我们能圆满完成任务”。 · 谢俊林：“喜欢打台球，闲暇时喜欢搓炉石。几种编程语言中，我最熟悉的是Java”。开发人员。 · 彭一夫：“我喜欢用Java，把事情规划好了再开始做，希望能与队友一起做好这个项目，提升个人能力”。 2.项目展示 预期： 利用该网站，辅助进行大学基础物理实验和大学物理课程相关内容的学习。 在大学基础物理实验方面，因本项目在前项目的基础上进行开发，保留原项目物理实验相关部分。 项目目标 ：为做物理实验的同学提供实验数据处理的平台，生成物理实验报告，辅助同学们完成物理实验相关学业课程 预期典型用户 ：大学物理系同学以及其他需要选修物理实验的同学以及物理实验教师 功能描述 ：用户通过界面选择相应的物理实验，并录入自己的物理实验数据，平台根据标准模板生成一份针对输入数据的物理实验报告，辅助同学进行数据处理，同时规范了数据报告，便于老师批阅 预期用户数量 ：优先考虑本校物理实验选课人数，为50人左右 产品： 如何满足用户需求 ： 1.提供了每个物理实验的报告模板

Koala v1.3.0 已发布，欢迎大家下载使用。 下载地址： http://koala-app.com/index-zh.html 更新说明： 新增功能：允许直接使用用户系统中已安装的编译程序。 新增功能：右键菜单增加“打开文件”选项。 设置默认输出路径为与项目目录同级目录下的css/js目录，如./less -> ./css。 修复bug：在遇到含空格目录时编译错误。 修复bug：config.rb解析出错导致无法添加项目。 UI优化，刷新文件列表状态提示。 加大版本号。 -------------------------------Koala 介绍---------------------------------- Koala是什么？ koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。 功能特性： 多语言支持：支持less、sass、coffeescript 和 compass framework。 实时编译：监听文件，当文件改变时自动执行编译，这一切都在后台运行，无需人工操作。 编译选项：可以设置各个语言的编译选项。 代码压缩：less & sass支持编译后自动代码压缩. 错误提示：在编译时如果遇到语法的错误

1.背景 本文中的自动化测试指的是单元测试 （UT），所谓单元测试也就是对每个单元进行测试，通俗的将一般针对的是函数，类或单个组件，不涉及系统和集成。单元测试是软件测试的基础测试，主要是用来验证所测代码是否和程序员的期望一致。 jest 是 facebook 开源的，用来进行单元测试的框架，功能比较全面，测试、断言、覆盖率它都可以，另外还提供了快照功能。 2.安装与配置 2.1安装 安装jest npm install --save-dev jest 安装babel-jest npm install --save-dev babel-jest 安装enzyme，需要根据项目的react版本来安装 对应的enzyme npm install --save-dev enzyme enzyme-adapter-react-16 安装react-test-renderer npm install --save-dev react-test-renderer 2.2配置 package.json 中添加： { "scripts": { "test": "jest" } } 执行npm run test 命令可在终端运行查看测试运行结果。 同时 Jest 还提供了生成测试覆盖率报告的命令，只需要添加上 --coverage 这个参数既可生成，再加上--colors可根据覆盖率生成不同颜色的报告

开源项目 一款很轻量的无所不能的工具集合 公司内部搭建一个工具网兼博客平台，没有广告用着爽，同事还膜拜 几乎每个前端开发都会用的Chrome插件，功能太全了 100%原生的JavaScript多线程和并行执行库——Hamsters.js 这个库收集 Web开发的各种 JavaScript 小工具，超过 300 个模块 阿里跨终端的H5游戏开发解决方案——Hilo 程序员的个人知识管理神器 JavaScript开发者的27个神奇VSCode工具 教你10秒快速克隆网站，学习、私活，不用愁 终于集齐的VUE中的UI组件，不看后悔奥 前端猿应该知道的十大最流行的前端UI框架 Vue独立组件——11个最佳Vue.js日期选择器组件 尤娜-基于Spring Boot 2.0构建的极简博客系统现已经开源 nodejs + docker + github pages 定制自己的今日头条 在树莓派上搭建web服务器——基于Apache ddBuy 高仿移动端开源电商项目(Vue+VantUI) 推荐 11 个好用的 JS 动画库 一个标星近 10k 的现代化的个人独立博客系统，程序员值得拥有 阿里巴巴开源的超轻量的跨平台图形渲染引擎——GCanvas 基于Spring Boot 2.x的前后端分离开发平台X-Boot 前台 10个最佳Vue.js开源项目 我的第一个 60k+ Star开源项目

制造假数据引入json https://blog.csdn.net/weixin_42118466/article/details/89533922 1、在项目开发的过程中，如果后台接口还未开发完成，这个时候所以我们可以自建一个假数据文件(如data.json)到项目文件夹中，这样我们就可以模仿后台的数据进行开发。但是，如何在一个vue.js 项目中引入本地的json文件呢，下面就将步骤贴出来 整个项目是由vue-cli脚手架搭建而成。具体项目结构如下： 1：首先我们使用vue-cli脚手架工具打包成上图所示的样子，不会vue-cli请跳转至这里： 传送门 https://www.cnblogs.com/momozjm/p/6297455.html 2：我们找到bulid>dev-server.js,然后打开 3：在里面加入这段代码，大概在20行左右）。 var app = express() // 从这后面开始加 var goodsData = require('../data.json') var router = express.Router() router.get("/goods", function (req,res) { res.json(goodsData) }) app.use(router) 这里用到的是node.js+express框架的知识 4

　　最近完成了公司安排的移动web触屏开发，期间涉及到在移动设备上显示线条，最开始采用PC常用的css board属性来显示1个像素的线条，但是发现在移动设备上并不美观，参考淘宝、京东的触屏发现它们均是采用浅细的线条来显示在移动设备上。 　　以下纪录了比较方便的4种绘制0.5像素线条方式 一、采用meta viewport的方式，这个也是淘宝触屏采用的方式 常用的移动html viewport的设置如下 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 具体意思就不多提，它就是让页面的高宽度即为设备的高宽像素，而为了方便绘制0.5像素的viewport的设置如下 <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" /> 这样html的宽高就是设备的2倍，此时依然使用css board为1像素的话，肉眼看到页面线条就相当于transform:scale(0.5)的效果，即为0.5像素 但是这种方式涉及到页面整体布局规划以及图片大小的制作，所以若采用这个方式还是事先确定为好 二、采用 border

第三方模块 Gulp Gulp是什么？ Gulp是基于node平台开发的前端构建工具 将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了 用机器代替手工，提高开发效率。 快速入门Gulp JavaScript 和 Gulpfile Gulp 允许你使用现有 JavaScript 知识来书写 gulpfile 文件，或者利用你所掌握的 gulpfile 经验来书写普通的 JavaScript 代码。虽然gulp 提供了一些实用工具来简化文件系统和命令行的操作，但是你所编写的其他代码都是纯 JavaScript 代码。 Gulp能做什么 项目上线，HTML、CSS、JS文件压缩合并 语法转换（es6、less …） 公共文件抽离 修改文件浏览器自动刷新 Gulp使用 使用npm install gulp下载gulp库文件 在项目根目录下建立gulpfile.js文件 重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件 在gulpfile.js文件中编写任务. 在命令行工具中执行gulp任务 Gulp中提供的方法 gulp.src()：获取任务要处理的文件 gulp.dest()：输出文件 gulp.task()：建立gulp任务 gulp.watch()：监控文件的变化 const gulp = require ( 'gulp'