html,CSS,JS编程异常无法运行HTML?前端开发,编程

一般软件开发中必备的一样工具就是代码编辑器。传统的代码编辑器一般都是以软件安装包的形式安装到电脑里面,代码编辑保存后一般也是通过ftp或者svn等工具提交到服务器的(当然,像.NET开发中Microsoft Visual Studio这样强大的集成工具另说了。)。

在实际的项目开发中这样的方式也是挺便捷的。但是,随着各种云服务的兴起,云存储时代几乎已经是大势所趋了。个人或者小公司搭建一个类似的服务自然代价不菲。这时候利用一些现有的在线代码编辑器,可以为你的项目进度和日常学习带来很大的帮助。特别是一些开源项目的代码维护和分享。

今天给大家带来的就是10个程序员最喜欢的在线代码编辑器。包括HTML,CSS、JavaScriptPHP、Python 、Ruby on Rails和C/C++等。具体的大家可以自己去官方网站详细了解。

当然,另外的也有一些你可能会喜欢的:

好了,废话不多说。来看看具体都有哪些在线代码编辑器。或许有一些你应该会比较熟悉。

CodePen是我最喜欢的代码编辑器之一。 CodePen有一些炫酷而独特的功能,这使得它成为Web开发中最流行的在线代码编辑器之一。

  • 使用CodePen组合展示才华和设计自己的组合主页。
  • 您可以使用Hire Me(聘用我)功能服务找到兼职工作。
  • 任何资源都可以嵌入在任何其他网站。

Dabblet的界面十分简洁,操作起来并不复杂,特别适合新手和想尝试最新HTML5标签和CSS3样式的前端攻城师使用。Dabblet的一大特色是代码编写时可免加CSS前缀。因为,Lea Verou(工具的作者)本人就是免CSS前缀JavaScript脚本 的作者,Dabblet拥有此功能当然是顺理成章的事。HTML和CSS代码间的切换也很方便,点击隐藏工具栏右上方的标签即可。用户可以根据习惯,调整前端代码的预览效果,浏览器内全屏预览将新标签页中打开。

Dabblet支持用Github帐号登录,测试的代码段既可以匿名保存也可以保存在用户的Github:gist中,以便用户将代码段嵌入自己的站点或是进一步分享给其他人。

Mozilla 推出 的HTML/CSS 在线交互式学习网站 Thimble:左侧编辑,右侧实时预览,带有大量真实案例。该站是 Mozilla 新近推出的 Webmaker 计划 的组成部分,旨在帮助普通用户在线学习编写 HTML 和 CSS。

Thimble 提供的是双面板设计, 左侧为带语法高亮的代码编辑,右侧可实时预览 网页效果, 如果用户对效果满意, 可通过右上方的蓝色 “Publish” 按钮一键发布, 还可通过提供的 Twitter 发布按钮与好友分享你的设计成果。

JSFiddle是一个老牌的在线JavaScript代码调试工具。支持JavaScript、CSS、HTML代码可视化在线调试工具,支持多种应用多种主流框架,用起来非常方便,而且还可以将调试好的结果以非常简洁的页面直接嵌其他网页里。

除了可以调试代码外,还可以方便的发布到社区,论坛或者社交媒体上与朋友们分享或者提问。整合了很多的不同的类库供大家选择。

CSSDesk工具是一个标准的CSS沙盒,可以给予CSS初学者最大的帮助,网站分成三栏,我们可以非常方便的通过在左侧实时修改代码来查看某个CSS属性的改变给HTML元素带来的影响,甚至我们可以把整个网站都放到其中来进行调试,并将调试完成的文件保存为HTMl。唯一的遗憾是缺少代码提示,需要手工输入CSS属性。

又一款“Online Source Editor”,基于Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎的在线代码编辑器的基础库。

可以看出,CodeMirror的作者是一个十分向往自由的人。但他的CodeMirror绝对不简单,看看下面这份清单:

上述的这些在线代码编辑器都是基于CodeMirror的,是不是感到惊讶,里面有你熟悉的JS Library。

CodeMirror本身的定位也很明确,短小精悍,但代码质量很高,在Google Group的群里面,人们热烈的进行着用CodeMirror做各式各样改造的讨论,可见对他的欢迎。

假如你有项目需要在线代码编辑,还等什么?CodeMirror,绝对是你最好的选择。

ecoder是一个基于Web的代码编辑器,采用PHP和JavaScript开发。它包括:实时语法加亮,一个文件浏览器,一个文件上传器和一个标签系统能够实现直接在服务器上同时编辑多个文件。

Codeanywhere的特点是:随时随地可以写代码(虽然我认为手机上写代码有点搞笑)。

Cloud9支持将代码一键发布到Heroku、Windows Azure、Google App Engine、CloudFoundry等云空间上,还可以同步应用到Github空间上,总之,除了Cloud9空间不支持绑定自己的域名、无法永久保持应用在线外,Cloud9空间用来测试程序和代码还是不错的。

注:部分内容参考自。有个别编辑器网站可能需要VPN翻墙才能打开。有需要的可以自己去看看。

43、vue常用的修饰符?

.prevent: 提交事件不再重载页面;
.stop: 阻止单击事件冒泡;
.self: 当事件发生在该元素本身而不是子元素的时候会触发;
.capture: 事件侦听,事件发生的时候会调用

45、回答以下代码,alert的值分别是多少?

因为a为全局变量,函数中改变的也是全局a

46、new操作符具体干了什么呢?

1、创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中
3、新创建的对象由 this 所引用,并且最后隐式的返回 this 。

49、vue组件中data为什么必须是一个函数?

因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象。
组件中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。
而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个全都改了。
doctype是一种标准通用标记语言文档类型声明,目的是告诉标准通用标记语言解析器要用什么样的文档类型定义DTD来解析文档,声明必须是HTML文档的第一行,位于html标签之前

52、如何实现浏览器内多个标签页之间的通信

53、响应式和自适应有什么区别?

响应式设计(Responsive design):一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。
自适应设计(Adaptive Design):是为同类别的物理设备建立三种不同的网页(PC),检测到设备分辨率大小后调用相应的网页。

54、Vue 中怎么自定义指令?

指令:分为全局指令和局部指令
//注册一个全局自定义指令 v-focus
 //当绑定的元素插入到DOM中时...

55、 什么是事件代理,它的原理是什么

事件代理:通俗来说就是将元素的事件委托给它的父级或者更外级元素处理 原理:利用事件冒泡机制实现的
优点:只需要将同类元素的事件委托给父级或者更外级的元素,不需要给所有元素都绑定事件,减少内存空间占用,提升性能; 动态新增的元素无需重新绑定事件
watch 为了监听某个响应数据的变化。
computed 是自动监听依赖值的变化,从而动态返回内容,主要目的是简化模板内的复杂运算。
所以区别来源于用法,只是需要动态值,那就用 computed ;需要知道值的改变后执行业务逻辑,才用 watch。
break语句 当前循环中退出
continue语句 继续下一个循环语句

59、列举浏览器对象模型中常用的对象,并列举window对象常用的方法至少五个

60、vue自定义组件@click点击失效的原因和解决办法

原因:click事件作用于组件内部,如果组件内没有写click事件,便会无响应。
2.可以用:将事件传递至组件内,也符合组件间的单向数据流,我就是这样解决的
 
3.使用$emit来实现事件传递
 
2.$router是“路由实例”对象包括了路由的跳转方法,钩子函数等。
1.localStorage长期存储数据,浏览器关闭数据后不丢失;
3.cookie是网站为了标识用户身份而存储在用户本地终端(Client Side)上的数据(通常经过加密)。cookie始终在同源的http请求中携带(即使不需要)都会在浏览器和服务器端间来回传递。sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存;
5.有期时间:localStorage存储持久数据,浏览器关闭后数据不丢失,除非自动删除数据。sessionStorage数据在当前浏览器窗口关闭后自动删除。cookie 设置的cookie过期时间之前一直有效,即使窗口或者浏览器关闭;

63、说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)

行内元素:会水平方向排列,不能包含块级元素,设置width无效,height无效,可设置line-height,margin上下无效,padding上下无效
块级元素:各占据一行,垂直方向排列,可设置width、height等属性,从新行开始结束接着一个断行

64、ie和标准浏览器,有哪些兼容的写法?

65、事件委托是什么?如何阻止事件冒泡?如何阻止默认事件?

事件委托:利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行

66、简述下面页面跳转区别

wx.navigateTo():保留当前页面,跳转到应用内的某个页面。不能跳转tabBar页
wx.redirectTo():关闭当前页面,跳转到应用内的某个页面。不能跳转tabBar页
 可通过getCurrentPages()获取当前的页面栈,决定需要返回几层
wx.reLaunch():关闭所有页面,打开到应用内的某个页面
事件循环中分为宏任务队列和微任务队列
其中setTimeout的回调函数放到宏任务队列里,等到执行栈清空以后执行
promise.then里的回调函数会放到相应宏任务的微任务队列里,等宏任务里面的同步代码执行完再执行
async函数表示函数里面可能会有异步方法,await后面跟一个表达式
async方法执行时,遇到await会立即执行表达式,然后把表达式后面的代码放到微任务队列里,让出执行栈让同步代码先执行

68、小程序的声明周期函数

onLoad()页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数
onShow()页面显示/切入前台时触发
onReady()页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互
onHide()页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面,小程序切入后台等
shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回 false,接收数据后不更新,阻止 render 调用,后面的函数不会被继续执行了)

70、Vue 组件中data 为什么必须是函数

组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。
for of 数组对象都可以遍历,历的是数组元素值 for in 一般用来遍历对象或json,遍历的是数组的索引(即键名key)

72、v-show和v-if指令的共同点和不同点?

共同点:都能控制元素的显示和隐藏;
不同点:实现本质方法不同
 v-show:本质是通过控制css中的display设置为none,控制隐藏,只会编辑一次;
 v-if是动态的向DOM树内添加或删除DOM元素,若初始值为false,就不会编译了,而且v-if不停的销毁和创建会比较销毁性能;
总结:如果要频繁切换某节点,使用v-show(切换开销比较小,初始开销较大)。如果不需要频繁切换某节点使用v-if(初始渲染开销较小,切换开销比较大)。

73、Vue的双向数据绑定原理是什么?

vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

74、canvas在标签上设置宽高和在style中设置宽高有什么区别?

canvas标签的width和height是画布实际宽度和高度,绘制的图形都是在这个上面。
而style的width和height是canvas在浏览器中被渲染的高度和宽度,还会出现被拉伸的效果,和设置的值不符合
如果canvas的width和height没指定或值不正确,就被设置成默认值

75、vue第一次页面加载会触发哪几个钩子?

传参可以使用params和query两种方式。
3、使用query传参使用path来引入路由。
4、params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数,没有也没关系。
5、二者还有点区别,直白的来说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示。

77、vuex是什么?怎么使用?哪种功能场景使用它?

vue框架中的状态管理器
场景:当页面应用中,组件之间的状态、音乐的播放、登录状态、加入购物车等
push()方法是向数组末尾添加一个或者多个元素,并返回新的长度。
pop()方法删除数组的最后一个元素,把数组的长度减1,并且返回它被删除元素的值unshift()方法是向数组的开头添加一个或多个元素,并且返回新的长度。
Shift()方法用于把数组的第一个元素从其中删除,并返回被删除的值
window.onload需要等所有文件都加载完才开始加载,$(document).ready只需等文档结构加载完了就开始加载

80、哪些操作会造成内存泄露

内存泄露指任何对象在不再拥有或不再需要它之后依然存在
setTimeout第一个参数是字符串而不是函数的时候就会造成内存泄露
循环(两个对象彼此引用且彼此保留)

 

82、CSS3新增伪类有那些?

p:only-child 选择属于其父元素的唯一子元素 :checked 单选框或复选框被选中。

83、 请解释一下CSS3的flexbox(弹性盒布局模型),以及适用场景?

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中,block 布局是把块在垂直方向从上到下依次排列的;而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制,可以由开发人员自由操作。
试用场景:弹性布局适合于移动前端开发,在Android和ios上也完美支持。

84、下面代码输出什么?

85、解释一下变量的提升

变量的提升是JavaScript的默认行为,这意味着将所有变量声明移动到当前作用域的顶部,并且可以在声明之前使用变量。初始化不会被提升,提升仅作用于变量的声明。

严格模式用于标准化正常的JavaScript语义。严格模式可以嵌入到非严格模式中,关键字'use strict'。使用严格模式后的代码应遵循JS严格的语法规则。例如,分号在每个语句声明之后使用。

87、Vue里面router-link在电脑上有用,在安卓上没反应怎么解决?

88、vue更新数组时能够触发视图更新的数组方法

created(创建完成):在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted(挂载完成):在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

90、为什么要初始化CSS样式

因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
display:none 不显示对应的元素(不占位),在文档布局中不再分配空间(回流+重绘)
visibility:hidden 隐藏对应元素(占位),在文档布局中仍保留原来的空间(重绘)
null 表示一个对象被定义,但是放了个空指针,转换为数值时为0
undefined 表示声明的变量未初始化,转换为数值时为NaN

93、同步和异步的区别?

同步的概念在操作系统中:不同进程协同完成某项工作而先后次序调整(通过阻塞、唤醒等方式),同步强调的是顺序性,谁先谁后。异步不存在顺序性。
同步:浏览器访问服务器,用户看到页面刷新,重新发请求,等请求完,页面刷新,新内容出现,用户看到新内容之后进行下一步操作。
异步:浏览器访问服务器请求,用户正常操作,浏览器在后端进行请求。等请求完,页面不刷新,新内容也会出现,用户看到新内容。

94、请给出异步加载js方案,不少于两种

95、项目做过哪些性能优化?

1、减少HTTP请求数
6、减少DOM元素数量
主要是通过 children,它同样是一个数组

97、媒体查询是什么?怎么使用?

媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式。
Promise.all可以将多个Promise实例包装成一个新的Promise实例。用于将多个Promise实例,包装成一个新的Promise实例。都成功才会返回成功
promise.race类似于Promise.all() ,区别在于 它有任意一个返回成功后,就算完成,但是 进程不会立即停止
import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法 require是运行时调用,所以require理论上可以运用在代码的任何地方 import是编译时调用,所以必须放在文件开头 require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量 import是解构过程,但是目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require storage能提供5M左右的存储空间,cookie能提供4k左右的存储空间 storage每个域都有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混淆 storage中的数据仅仅是本地存储,不会和服务器发生任何交互 cookie的内容会跟随着请求一并发送到服务端(每个新页面请求时,都会携带cookie,无形中造成带宽浪费)

101、跨域请求的解决办法有哪些?

古老的方法 JSONP跨域(动态创建script来读取他域的动态资源)
跨域资源共享(CORS)
nodejs中间件代理跨域

102、vue的指令有哪些

103、vue的计算属性和方法有什么区别

methods中定义的函数,只要页面上调用,就无条件的执行
computed中的计算属性依赖的数据不发送变化时,只读取,不会重新计算,计算属性的结果无需在data中定义,在页面中可以直接使用,会在vue实例上产生一个缓存,如果依赖的数据不发生变化,则会读取缓存

用于保留组件状态或避免从新渲染(缓存的作用 | 缓存使用频率高的页面,提高渲染效率)
可以让当前组件或者路由不经历创建和销毁,而是进行缓存,凡是被keep-alive组件包裹的组件,除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当中
 include:字符串或者正则表达式。只有匹配的组件会被缓存
 exclude:字符串或者正则表达式。任何匹配的组件都不会被缓存。

105、列举vue生命周期钩子函数

hash:在地址栏url中的#符号,虽然在url中,却不会被包含在http请求中,对后端没有影响,因此改变不会重新加载页面
history:利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求

107、箭头函数有什么特点

不能使用 new 构造函数 箭头函数不能当作Generator函数

108、vue组件间如何传值

父子组件通信 --通过自定义属性和props来实现
子父组件通信 --通过自定义事件和$emit实现

109、vue等单页面应用及其优缺点

用户体验好,快,内容的改变不需要重新加载整个页面,对服务器压力较小 前后端分离,如vue项目 完全的前端组件化,前端开发不再以页面为单位,更多采用组件化思想,代码结构和组织方式更加规范,便于修改和调整 首次加载页面的时候需要加载大量静态资源,相对时间相对较长 不利于seo优化,单页页面,数据渲染前,意味着没有seo 浏览器的前进、后台导航不能使用 能够原封不动的把嵌入页面展示出来 如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷 网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用 如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决 会产生很多页面,不容易管理 iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差 代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化 很多的移动设备(PDA手机)无法完全显示框架,设备兼容性差 iframe框架页面会增加服务器的http请求,对于大型网站是不可取的 现在基本上都是用Ajax来代替iframe,所以iframe已经渐渐的退出了前端开发

111、css选择器有哪些?哪些属性可以继承

需要在border外侧添加空白时 上下相连接的两个盒子之间的空白,需要相互抵消时 需要在border内侧添加空白时 上下相连的两个盒子之间的空白,希望等于两者之和时

113、介绍js的基本数据类型

114、介绍js有哪些内置对象

不在同一行声明多个变量
使用字面量方式创建对象、数组,(替代new Array)
函数不应该有的时候有return,有的时候没有return
fon-in循环中的变量,用var关键字说明作用域,防止变量污染

116、如何实现数组的随机排序?

118、使用js实现获取文件扩展名?

119、列举几个你知道的js框架么?能讲出他们各自的优点和缺点?

jQuery:实现脚本与页面的分离,最少的代码做最多的事情,插件丰富/不向后兼容,插件兼容, AngularJs:双向数据绑定,模块化/无法完美兼容低版本,太笨重 vue:性能好,简单易用,前后的分离,单页面应用/不利于seo优化,报错不明显 React:虚拟DOM,跨浏览器兼容,模块化,单项数据流,兼容性好/不适合单独做一个完整的框架
文档流:将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为普通流/文档流
文本流:文档的读取和输出顺序,也就是我们通常看到的由左到右、由上而下的读取和输出形式
 ready:表示文档结构已经加载完成(不包含图片等非文字媒体文件)
 onload:表示页面包含图片等文件在内的所有元素都加载完成

121、vue数据双向绑定原理

采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。
模型(Model)指的是后端传递的数据。 视图(View)指的是所看到的页面。 一是将模型(Model)转化成视图(View),即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。 二是将视图(View)转化成模型(Model),即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。 M和V指的意思和MVVM中的M和V意思一样。 使用MVC的目的就是将M和V的代码分离。 MVC和MVVM的区别并不是VM完全取代了C,只是在MVC的基础上增加了一层VM,只不过是弱化了C的概念,ViewModel存在目的在于抽离Controller中展示的业务逻辑,而不是替代Controller,其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用,使开发更高效,结构更清晰,增加代码的复用性。
封装组件:主要是为了解耦,具备高性能、低耦合,在通用组件的时候要留一个插槽
第一步:在compoents文件夹中新建一个vue文件
第二步:在main.js中全局引入,先import,再注册到VUE中
第三步:在任何页面直接使用自己定义的组件
url地址显示:query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示 注意点:query刷新不会丢失query里面的数据,params刷新会丢失params里面的数据。
当你修改了data的值然后马上获取这个dom元素的值,是不能获取到更新后的值,
你需要使用$nextTick这个回调,让修改后的data值渲染更新到dom元素之后在获取,才能成功。
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。

127、vue-loader是什么?使用他的用途有哪些?

像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时

130、vue开发过程中用过的性能优化的方式?

3:三方插件懒加载(按需加载) 4:减少引入外部文件大小

我要回帖

更多关于 异常ai编程游戏官网 的文章