web前端

前端的一些知识

前端开发知识总结

总结分三大部分:html、css和javascript,每部分再分成两个子部分,分别是基础知识和记忆知识。 基础知识指前端开发必须会的东西,比如页面渲染方式、js基础语法等。 记忆知识指一些单纯背背就可以的知识,忘记的话可以查,但是免试官可能喜欢问(哭笑 Html相关 浏览器内核 [记忆知识] 浏览器内核又可以分为渲染引擎和js引擎两部分,后来js引擎越来越独立,内核也就更倾向于指渲染引擎本身的部分。目前常见的内核引擎有Trident、Gecko、Blink、Webkit四种。 Trident 微软开发的内核,从IE4一直用到现在IE11。因为有过一段时间比较牛逼,拖更了很久,导致其与W3C标准脱节,加上大量BUG和安全问题都没有解决,导致现在很多用户用IE是为了下载其它浏览器。现在Win10最新的Edge浏览器已经不用这个内核,而是用自己开发的edge内核。 Gecko 是一个开源内核,源自于古时候与ie对抗的Netscape。目前前端开发经常使用的Firefox浏览器就使用Gecko内核。另外这个内核还兼容很多平台,各种系统都能用。 Webkit 苹果公司开发的内核,早起也被chrome使用。后来因为chrome火了,导致大家以为webkit是谷歌弄得,哈哈。其前身是KDE的KHTML。 Blink 谷歌Chrome目前使用的内核,其前身是Chromium,而Chromium的前身就是webkit。因为商业竞争等各种关系,谷歌弄出了blink与苹果分道扬镳。 参考来源 : [1] 主流浏览器内核介绍(前端开发值得了解的浏览器内核历史) DOM操作 [基础知识] DOM的全称是Document Object Module, 文档对象模型,他是独立于语言而存在的。 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点 window.documnet是浏览器为我们提供的可以操作dom的接口。 随着Html5标准的推广,很多大家常用的JQuery的一些方法与浏览器原生提供的方法差别不大了,可以多了解一下原生的API。 参考来源

Read more

Angular2 的路由总结

Angular2的路由不像backbone是url#route这种结构,使用的是html5的pushstate方法直接从url中获得路由,这就需要进行一定配置才可以使angular2运行。 base href的配置 代码:<base href="/"> base href的配置关系到路由的有效数据的选取 base href同样关系到该网页的js、css等数据的获取,因此不能乱设定。 后台的配置 Angular2的路由方式使得用户刷新页面时,后台默认返回404错误。 需要在后台配置一下,当用户访问的路径为Angular2应用的路径时,返回Angular2首页的数据。(或者只要是匹配不到的路径,直接返回Angular2首页的数据) 注意是后台直接返回数据即可,不是重定向。 子路由的配置 Angular2的路由允许空component,一些目录可以不用配置component。 如果把APP的路由都放到某个子路径下面有助于简化后台重定向时的匹配复杂度。 默认页面的处理 正常访问网址是默认地址是登录页面。 凡是带APP的子路径的地址,默认返回Angular2的数据,否则重定向到首页。

Read more

PhoneGap(Cordova)开发总结

软件架构设计 软件架构可以借鉴MVC的方式,View层负责页面跳转和事件监听,Controller层负责业务逻辑处理,Dao层负责数据发送和接收。 页面跳转/刷新时事件的注册与取消注册 大部分页面需要根据后台数据生成html,这就用到了html的模板技术。当使用类似于template7这类模板引擎时,如何管理生成页面的事件就成为了一个问题。 目前我探索出来的方式是,使用jQuery的on方法,把事件挂载在当前页面的根节点上,这样不管页面内容如何刷新都不会影响到事件的监听。 貌似一些类似于backbone的前端框架可以帮忙解决事件的监听问题。 与服务端数据交互时的问题 Ajax刷新时需要给用户一个等待的反馈,请求结束后也需要给用户一个结果的反馈,由于不同模块反馈的内容不一样,因此如何实现一个公用的方案也需要考虑。 我的想法是,配置一个公用的存储反馈内容的json对象,调用dao层方法的时候把配置和该对象一起传进去,减少业务层逻辑的复杂程度。 id、class与css选择器使用的问题 有时候为了好看,在写css选择器的时候会写上一串限制的参数,如果对于一些经常复用的class这应该是个好方法,但是我发现用着用着就把class当id用了,很多定义的class只使用了一次。我觉得以后在开发前先大致设想好自己想使用的class,提取一些公用的内容,把这种方案的特点发挥到极致。 对于页面中绑定的事件等操作,可以不用写上一串选择器,因为绑定是运行时实时生效,不会因为页面切换导致绑定到其它class上面去了。 view层函数的结构 在写view层方法的时候,我习惯于写上init和load两个方法,其中init负责初始化事件监听,load负责加载和渲染页面,在实践后我觉得这是个非常实用的设计方案,但是目前我的代码仍然有很大的冗余,每个view都要写上init和load的调用。以后开发可以抽象出一个公用的view,然后调用loadView的方法传递一个json对象初始化view,json对象里面有init和load两个函数的定义,而对这两个方法的调用则由公共的view完成,减少代码冗余。 dao层函数的结构 在写dao层方法的时候,可以对jQuery的ajax的方法再进行一次封装,对错误的结果有个统一的处理方式。 在这一层的开发上,需要与后台接口协商好参数名和格式,如果出现相同参数多个名字(后台比较乱)的情况,最好还是加一层封装,预处理一下数据。假如后台返回的数据格式已经非常完善的话,那么直接回给controller层即可。

Read more

Backbone初次体验总结

初次体验Backbone,写上一点总结供以后参考: 模型重写get、set方法,比较有用,可以试逻辑更加清晰。 模型视图的绑定,有效更新视图的方法。(注意除了数据里面,网页参数等也可以用模型) 视图切换。困难点在于用户信息的传递,目前想到的方法为存在url或cookie里,避免因刷新而丢失。 列表用嵌套视图,非常有用,绑定事件非常方便。 视图不建议直接放到el里面,而是放到tagName里面。否则来回切换时根节点会绑定大量事件(另写方法将绑定取消也可以)。

Read more

javascript模拟银行家算法

JavaScript作为一种脚本语言,近年来却越来越火。由于其灵活的语言结构,其用途已经设计编程开发的方方面面,从前台到后台,从算法到数据库。这里就用JavaScript模拟了银行家算法,并结合Html方便快捷的将结果显示出来。 纯JavaScript+css手写,效率应该还不错,各位直接把源代码保存回去就能用~ 下面是完整的页面,各位也可以直接把代码copy下来研究~ 进入银行家算法

Read more

皖ICP备13007154号-1