前言 JavaScript代码基本上都是由业务逻辑和数据组成的,逻辑代码根据数据完成一定的操作.很多数据在代码中是写死的,比如一些URL.显示在界面上的提示信息.页面元素相关的样式值及其他使用到的固定值,这部分无逻辑的数据可统称为配置数据.一种好的编码实践是把这部分配置数据和业务逻辑分离,这样修改配置数据时就不需要修改业务逻辑代码了,从而提高了代码的可维护性.同时,配置数据的分离,使得业务逻辑代码也可以重用了,不同的配置数据可以对应相同的业务逻辑. 配置数据和逻辑分离 那么,要如何把配置数据和代

摘要 在前端开发过程中,后端接口还没有完全开发完成时,前端开发人员就需要学会自己模拟后端接口数据,更快更好的完成开发任务.模拟后端接口数据的js库有很多,今天就简单就简单的分享下mock.js在前端开发的应用(嘿嘿,毕竟这个mock应用的开发人员较多). 内容 1.Mock的安装 根据官方文档安装mock,运行安装命令安装即可. npm install mockjs 2.Mock的简单介绍 2.1.mock数据模板定义 根据官方文档示例介绍,输出一个随机数的‘*’字符串来展示mock的数据模板,

昨日内容回顾 1. 内容回顾 1. VueX VueX分三部分 1. state 2. mutations 3. actions 存放数据 修改数据的唯一方式 异步操作 修改state中数据的步骤: 1. 页面上交互 触发数据的变化 2. 去后端获取新的数据(异步操作 ajax请求) 3. dispatch('获取新数据') --> 放在actions中 4. 拿到了新数据了 5. 去更新state中对应的数据(同步操作 state.noteList=[xx,xx,xx])--> 放在muta

1.为什么要实现数据 mock 要理解为什么要实现数据 mock,我们可以提供几个场景来解释, 1.现在的开发很多都是前后端分离的模式,前后端的工作是不同的,当我们前端界面已经完成,但是后端的接口迟迟不能提供 前端很多时候都会等接口. 2.测试人员想要你提供一份可以直接测试,自行修改后端接口,测试 UI 的时候. 3.后端的接口,不能提供一些匹配不到的场景的时候. 这个时候如果前端可以实现自己的一套 mock 数据,这里的问题都会迎刃而解,我们可以模拟真实的接口,提供我们自己需要的数据及其数据结

自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里打滚了两年的文艺小码农来说,也有自己的一些体会,今天就来分享一下自己基于Gulp编写的一个比较丑陋的前端开发环境,本人技术有限,有问题和意见请私下聊,勿喷: 首先安装Node.js,至于怎么安装的话 ,自行度娘.安装完成之后在命令行里面输入下面两个命令,如果输出了版本号的话(这个是我自己电脑上的版本

前言 不知不觉来百度已有半年之久,这半年是996的半年,是孤军奋战的半年,是跌跌撞撞的半年,一个字:真的是累死人啦! 我所进入的团队相当于公司内部创业团队,人员基本全部是新招的,最初开发时连数据库都没设计,当时评审需求的时候居然有一个产品经理拿了一份他设计的数据库,当时我作为一个前端就惊呆了...... 最初的前端只有我1人,这事实上与我想来学习学习的愿望是背道而驰的,但既然来都来了也只能独挑大梁,马上投入开发,当时涉及的项目有: ① H5站点 ② PC站点 ③ Mis后台管理系统 ④ 各种百度

前端开发工具icestar 最近忙里偷闲,把之前的mock工具进行了全面的重构,最大的改变就是换了个名称icestar,icestar意思就是"爱死他",首先他的预想并不只是替代mock工具,他应该支持更丰富的扩展,可以mock数据,也可以做接口post测试,还可以有一些其他的辅助开发的工具,更可以扩展无限的插件.所以从ui界面上,我借用了vs code的风格与交互,底层框架也升级为vue2.0 + electron.首先来看下,主界面: 在初次打开时,主界面会有一个演示文档,它会展示

* {-webkit-tap-highlight-color: rgba(0,0,0,0);}html {-webkit-text-size-adjust: none;}body {font-family: Arial, Helvetica, sans-serif;margin: 0;color: #333;word-wrap: break-word;}h1, h2, h3, h4, h5, h6 {line-height: 1.1;}img {max-width: 100% !importan

第6章--Mini项目实战 项目简介 Mini项目简介-Ego社区开发 回顾: 页面制作 页面架构 JavaScript程序设计 DOM编程艺术 产品前端架构 实践课Mini项目--Ego: 主题:漫画阅读.二次元文化.漫画创作者 产品背景:爱画漫画的用户基数大.展示作品可以获得认可关注从而提高画技.寻找同好.寻找灵感 用户背景:爱画漫画的用户.青少年群体.科班或者业余爱好者 现有途径:QQ空间.朋友圈.贴吧.微博等--不够专业.针对性不强 竞品:半次元.P站.苹果树下等 功能模块: 首页 登录

语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,不像后台想用什么就用什么,iOS只能用Objective-C,前端只能javascript,当然iOS还可以用RubyMotion,前端还能用GWT/CoffieScript,但不是主流,用的人很少,真正用了也会多出很多麻烦. 这两者有个有意思的对比:变量/方法命名的风格正好相反.苹果一直鼓吹用户体验,写代码也不例外,程序命名都是用英文全称并且要多详细有多详细,力求看变量和方法名就能知

CMS前端开发 1 Vue.js与Webpack研究 参考链接:https://www.cnblogs.com/artwalker/p/13387386.html 2 CMS前端工程创建 2.1 导入系统管理前端工程 CMS系统使用Vue-cli脚手架创建, Vue-cli是Vue官方提供的快速构建单页应用的脚手架,github地址: https://github.com/vuejs/vue-cli(有兴趣的同学可以参考官方指导使用vue-cli创建前端工程),本项目对Vue-cli 创建的工程

作为一个伪开发,在一个平台项目中负责前端的开发工作,开发框架为vue,本文我会站在前端开发的角度介绍,我是如何使用cypress的. [x] 如何在vue中使用cypress [x] 如何运行cypress [x] 如何编写测试用例 [x] 如何解决测试数据的问题 [x] 遇到的元素定位的问题 [x] 如何看待cypress [x] cypress是否为最佳工具 [x] 测试怎么办? 如何在vue中使用cypress vue提供了vue-cli 可以快速的创建vue项目. vue create

前言 前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题.计算问题.安全问题等)暴露在后端,这就意味着前端起到了至关重要的承载和连接作用. 前端技术的更新日新月异:前端框架的技术选型百家争鸣:视觉审美的潮流不断更替:可视化效果酷炫无比:用户的运营体系逐渐精细化:适老化.无障碍化.青少年人群的诉求浮出水面:智能设备的升级和适配无穷无尽.所有的这一切,对前端

移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结. 1.四大浏览器内核 1.Trident (IE浏览器) :因为在早期IE占有大量的市场份额,所以以前有很多网页是根据这个Trident的标准来编写的,但是实际上这个内核对真正的网页标准支持不是很好,同时存在许多安全Bug. 2.Gecko:( FireFox )优点就是功能强大.丰富,可以支持很多复杂网页效果和浏览器扩展接口,缺点是消耗很多的资源,比如内存. 3.Webkit:

1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE10以上不支持. 如果你安装了多个IE,条件注释将会以最高版本的IE为标准. 条件注释的基本结构和HTML的注释(<!– –>)是一样的.因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容. 条件注释使用方法示

记得2010年之前,公司的项目基本上都要用到报表,以前我们常用的方法就是针对客户的需求来定制化开发(基本上是死写代码)来实现,经常导致项目经常性的延期,因为客户的需求经常会变化,随着用户的使用认知度的提高,对报表的要求越来越高,导致程序员不停的修改代码来实现,效率不高.结束遥遥无期...非常的痛苦:当然市面上有很多报表开发工具可以实现,但是针对小公司来说采购一套这样的系统的成本也非常的高,所以我们决定自己来开发一套像目前的润乾.FineReport 这样的报表设计器,来实现快速的报表设计制作.

前端开发面试知识点大纲:HTML&CSS:    对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应 JavaScript:      数据类型.面向对象.继承.闭包.插件.作用域.跨域.原型链.模块化.自定义事件.内存泄漏.事件机制.异步装载回调.模板引擎.Nodejs.JSON.ajax等.其他:   HTTP.安全.正则.优化.重构.响应式.移动端.团队协作.可维护.SEO.UED.架构.职业生涯 作为一

<Web 前端开发精华文章推荐>2013年第八期(总第二十期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章和资源能够帮助到您. HTML5 & CSS3 [特别推荐]14个支持响应式设计的流行前端开发框架 今日推荐:10款在 Web 开发中很有用的占位图片服务 赞!jsPDF – 基于

<Web 前端开发精华文章推荐>2013年第六期(总第十八期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您. HTML5 未来的 Web:九个不可思议的 WebGL 应用试验 Manifesto – HTML5 离线应用程序缓存校验工具 Popline:帅气的浮动 HTML5 文本

自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备.我相信各位童鞋应该和我一个样子,到处查找贴子,学习如何制作WebApp项目,经过我一番查找资料学习后准备分享给大家,希望和大家共同探讨学习WebApp. 那么WebApp与Native App的区别是什么? Native App: 缺点:1.开发成本非常大,一般使用的开发语言为JAVA.C++.Objective-C.2.更新体验

http://www.cnblogs.com/ljchow/archive/2010/07/06/1768749.html 在前端开发必须知道的JS(一) 原型和继承一文中说过下面写篇闭包,加之最近越来越发现需要加强我的闭包应用能力,所以此文不能再拖了.本文讲的是函数闭包,不涉及对象闭包(如用with实现).如果你觉得我说的有偏差,欢迎拍砖,欢迎指教. 一. 闭包的理论 首先必须了解以下几个概念: 执行环境 每调用一个函数时(执行函数时),系统会为该函数创建一个封闭的局部的运行环境,即该函数的执