前端基础及提高（2）

来源：互联网发布：域名备案信息编辑：程序博客网时间：2024/06/06 00:05

JavaScript 的闭包？
H5 SVG绘制线条与三角形？
HTML5操作本地文件- http://hwaphon.site/?p=396

想要学习一门ui框架，有什么easyui，bootstrap，Foundation等等。
想要搞一个自己的静态博客，有什么wordpress，jekyll，hexo等等
想要学构建工具，有什么grunt，gulp，webpack等等
还有好多的库，jQuery，angular，vue，react等等

前端初级：
如果你是想学好JS：预解析、作用域、作用域链、|| &&、什么是原始类型、什么是引用类型、闭包、for循环运行机制、多重for循环、递归、原型链、继承、（数组、字符串、函数的各种内置方法，不需要全部记住但你得知道它们能干嘛，在将来你用到的时候可以想到那去。看似没有用，但无数的经验告诉我，非常有用。）。
这些必须学会！！！必须静下心来，这些你不学，永远入不了门。这段时间其他什么都不要看，就好好把这些概念理解以及实践。
前端高级：
call，apply，bind，面向对象、函数式编程、搞懂异步、学习算法、设计模式。这是一条很长的路，此地我也没啥经验可讲，一起加油吧。
前端扩展能力：
了解HTTP、linus、（nodejs、php、python、java、c）等、只需要了解即可，当然最好熟练使用其中一项。
HTTP，设计模式，算法，非常建议你去学，对于互联网大部分编程都会用到，你会知道它们是多么的通用，不要仅仅局限在前端，不然很难学好的。

Sources Code from here: https://github.com/wangwei86609/osmanthus
Osmanthus is a framework for rules & flow engines, a lightweight library and based on MVEL library.
前端 http://louiszhai.github.io。
初级读物：
　　《JavaScript高级程序设计》：一本非常完整的经典入门书籍，被誉为JavaScript圣经之一，详解的非常详细，最新版第三版已经发布了，建议购买。
　　《JavaScript王者归来》百度的一个Web开发项目经理写的，作为初学者准备的入门级教程也不错。
　　
中级读物：
　　《JavaScript权威指南》：另外一本JavaScript圣经，讲解的也非常详细，属于中级读物，建议购买。
　　《JavaScript.The.Good.Parts》：Yahoo大牛，JavaScript精神领袖Douglas Crockford的大作，虽然才100多页，但是字字珠玑啊！强烈建议阅读。
　　《高性能JavaScript》：《JavaScript高级程序设计》作者Nicholas C. Zakas的又一大作。
　　《Eloquent JavaScript》：这本书才200多页，非常短小，通过几个非常经典的例子（艾米丽姨妈的猫、悲惨的隐士、模拟生态圈、推箱子游戏等等）来介绍JavaScript方方面面的知识和应用方法。

高级读物：
　　《JavaScript Patterns 》：书中介绍到了各种经典的模式，如构造函数、单例、工厂等等，值得学习。
　　《Pro.JavaScript.Design.Patterns》：Apress出版社讲解JavaScript设计模式的书，非常不错。
　　《Developing JavaScript Web Applications》：构建富应用的好书，针对MVC模式有较为深入的讲解，同时也对一些流程的库进行了讲解
　　《Developing Large Web Applications》：不仅有JavaScript方面的介绍，还有CSS、HTML方面的介绍，但是介绍的内容却都非常不错，真正考虑到了一个大型的Web程序下，如何进行JavaScript架构设计，值得一读。
　　要做优秀的前端工程师，还需要继续努力：《高性能网站建设指南》、《Yahoo工程师的网站性能优化的建议》、“YSLOW”性能优化建议、《网站重构》、《Web开发敏捷之道》、“ jQuery 库”、“前端框架”、“HTML5”、“CSS3”。。。这些都要深入研究！

> 框架及JS

在H5流行的年代，由PhoneGap、AppCan等等一些跨平台或者说比较综合的解决方案冒出，但是使用的范围不大，最终被现在的Weex/RN所取代。
前端的框架变化实在是太快了，当你还活在JQuery的年代，了解着bootstrap时候，有人已经在玩 AngularJS了，而更有人已经开始玩React了，再甚至已经出现Vue来结合AngularJS和React了。Weex和React Native的出现，已经足以动摇客户端开发的地位了。
AJAX 学习- http://www.54tianzhisheng.cn/2017/06/23/AJAX/
使用 JavaScript 实现基于模糊控制、遗传算法和粒子群优化的模拟车- https://github.com/Jasonnor/Car-Simulator
浅谈 JS 对象之扩展、密封及冻结三大特性- http://www.tuicool.com/articles/VVBryyj
对于js库作者而言，冻结对象很有用。冻结对象能防止人意外地修改库中的核心对象。
js对象的不可扩展密封冻结的特性
1.扩展特性：Object.isExtensible 方法；Object.preventExtensions 方法
2.密封特性：Object.isSealed 方法；Object.seal 方法
3.冻结特性：Object.isFrozen 方法；Object.freeze 方法；浅冻结与深冻结

> 前端构建工具

基于前端构建工具Webpack（ Gulp、Grunt）实现的构建工具 Ykit- https://github.com/YMFE/ykit

Web 动画，包含了三大类: 1.CSS3 动画; 2.javascript 动画（canvas）; 3.html 动画（SVG）

> H5手势滑屏
H5单页面手势滑屏切换原理- http://www.cnblogs.com/onepixel/p/5300445.html
https://github.com/git-onepixel/guesture
> CSS层模型
DIV重叠 CSS让DIV层叠、叠加- http://www.divcss5.com/shili/s587.shtml
CSS定义了一组定位（positioning）属性来支持层布局模型。div css z-index层重叠顺序。
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)

CSS层模型- http://www.cnblogs.com/zhaoww/p/5839665.html

使用Flexible实现手淘H5页面的终端适配- http://web.jobbole.com/84285/
使用Flexible实现手淘H5页面的终端适配二- http://blog.csdn.net/xw505501936/article/details/51767408

> JS原型模式
JS原型模式(prototype):是指用原型实例指向创建对象的种类，并且通过拷贝这些原型创建新的对象。
深/浅拷贝，create- http://www.cnblogs.com/sungangmo/p/6565999.html
JavaScript中的原型模式- http://liuzhijun.iteye.com/blog/1157453
Javascript原型模式总结梳理- http://www.cnblogs.com/dojo-lzz/p/4542943.html
在大多数面向对象语言中，对象总是由类中实例化而来，类和对象的关系就像模具跟模件一样。Javascript中没有类的概念，就算ES6中引入的class也不过是一种语法糖，本质上还是利用原型实现。在原型编程语言中，类并不是必需的，对象不一定需要由类实例化而来，而是通过克隆另外一个对象来得到。
Javascript的面向对象机制是基于原型模式的，他的对象系统就是使用原型模式，通过克隆来创建的，克隆是创建一个对象的过程和手段。jQuery中尽量避免使用new运算符来创建对象。
在Javascript中原型编程的基本规则：
1.Javascript中绝大多数数据都是对象
2.要得到一个对象，不是通过实例化类，而是找到一个对象作为原型并克隆它,对象会记住它的原型

3.如果对象无法响应某个请求，他会把这个请求委托给它自己的原型

JS轮播

javascript实现图片轮播功能demo- http://download.csdn.net/download/zhangxin961304090/7840201
Js图片轮播功能DEMO- http://blog.csdn.net/bruce128/article/details/51579513
一个轮播图小demo ---之js定时器的妙用- http://blog.csdn.net/u012028371/article/details/52527565

> js 的try catch, instanceof应用- http://blog.csdn.net/ocean20/article/details/7301008/
> typeof 和 instanceOf/constructor / prototype
typeof 和 instanceOf的区别- https://segmentfault.com/a/1190000000730982
判断js中的类型：typeof / instanceof / constructor / prototype- http://blog.csdn.net/zl_jay/article/details/38556829
typeof只有一个实际应用场景，就是用来检测一个对象是否已经定义或者是否已经赋值。
instanceof 运算符是用来测试一个对象是否在其原型链原型构造函数的属性。其语法是object instanceof constructor

instanceof 操作符用来比较两个操作数的构造函数。只有在比较自定义的对象时才有意义。如果用来比较内置类型，将会和 typeof 操作符一样用处不大。

> Ajax XMLDocument和XMLHttpRequest对象.XMLHttpRequest 对象是AJAX功能的核心
为什么javascript加载xml文件，在Chrome下不成功！- http://www.iteye.com/problems/65523
js读取xml文件并获取文件内容- http://blog.csdn.net/wangnetkang/article/details/7726443
从Ajax到JQuery Ajax学习- http://www.phpstudy.net/b.php/2192.html

用js内置对象XMLHttpRequest 来用ajax- http://www.cnblogs.com/snowinmay/archive/2013/07/17/3195072.html
AJAX——XMLHttpRequest对象主要属性和事件- http://blog.csdn.net/ruoyiqing/article/details/39191287
AJAX——核心XMLHttpRequest对象- http://blog.csdn.net/liujiahan629629/article/details/17126727

------------------------------------------

一些网站后台模板源码分析- http://blog.csdn.net/bcbobo21cn/article/details/51271750
只有20行Javascript代码！手把手教你写一个页面模板引擎- http://blog.jobbole.com/56689/

hybridApp webApp nativeApp
> H5模板
50余款手机 h5页面模版源码- http://download.csdn.net/detail/u011677560/9430850
HTML5页面强力推荐几十套H5手机页面模板源码- http://download.csdn.net/detail/jiangchunhui2009/9573205
移动端H5开发 Turn.js实现很棒的翻书效果 Turn.js的官方网址: http://www.turnjs.com/
HTML5 有哪些让你惊艳的 demo？- https://www.zhihu.com/question/24398907
基于html5+css3实现的精美聊天界面demo- http://download.csdn.net/detail/lupangdelu/8936779#comment
网页模板- http://www.ymjihe.com/html
一款简洁的html5个人博客模板- http://www.duanliang920.com/muban/blog/264.html
个人博客模板源码- http://www.yangqq.com/download/div/

> css3模板
CSS框架- http://www.oschina.net/project/tag/310/css-framework
45个纯 CSS 实现的精美边框效果- http://www.cnblogs.com/lhb25/archive/2012/08/29/css-border-and-box-effect-a.html

CSS3环形特色表单转圈切换表单焦点- http://geek.csdn.net/news/detail/197551?ref=myread
> js模板

alimask是一个使用canvas 生成网站水印图片的JavaScript库- https://github.com/hustcc/alimask?ref=myread
15个有趣的JS和CSS库- https://zhuanlan.zhihu.com/p/26771146
Buefy，HR.js，React VR，Tippy.js，Barba.js，UIkit，Haul，AcrossTabs，Stylelint，Iconate，React-Datasheet，Pure CSS， Simple Icons，Chroma.js，Weex

> h5离线缓存和本地存储
H5 缓存机制浅析移动端 Web 加载性能优化- http://www.cocoachina.com/webapp/20151217/14718.html
HTML 5 Web 存储与应用缓存- http://blog.csdn.net/bamboolsu/article/details/49885955
利用H5本地存储localStorage、sessionStorage- http://www.cnblogs.com/firstForEver/p/5301830.html
Web移动端使用localStorage缓存Js和css文件- http://blog.csdn.net/a497785609/article/details/48321405

H5的6种缓存机制：
1.浏览器缓存机制
2.Dom Storgage（Web Storage）存储机制
3.Web SQL Database 存储机制
4.Application Cache（AppCache）机制
5.Indexed Database （IndexedDB）
6.File System API
另外有两种特殊的情况：
1.手动刷新页面（F5)，浏览器会直接认为缓存已经过期（可能缓存还没有过期），在请求中加上字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。
2.强制刷新页面（Ctrl+F5)，浏览器会直接忽略本地的缓存（有缓存也会认为本地没有缓存），在请求中加上字段：Cache-Control:no-cache（或 Pragma:no-cache），发包向服务重新拉取文件。

浏览器的缓存机制还不是非常完美的缓存机制。完美的缓存机制应该是这样的：
1.缓存文件没更新，尽可能使用缓存，不用和服务器交互；
2.缓存文件有更新时，第一时间能使用到新的文件；
3.缓存的文件要保持完整性，不使用被修改过的缓存文件；
4.缓存的容量大小要能设置或控制，缓存文件不能因为存储空间限制或过期被清除。

DOM Storage 分为 sessionStorage 和 localStorage。localStorage 对象和 sessionStorage 对象使用方法基本相同，它们的区别在于作用的范围不同。sessionStorage 用来存储与页面相关的数据，它在页面关闭后无法使用。而 localStorage 则持久存在，在页面关闭后也可以使用。
AppCache 的原理有两个关键点：manifest 属性和 manifest 文件。

> CSS3 display:flex box-flex和display:box有什么区别
前者是flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。
后者是2009年的语法，已经过时，是需要加上对应前缀的。
display:box box-flex 是比较早期的 flex 布局用法吧，标准化里面没有了，display:flex 是标准的
所以兼容性的代码，大致如下
{display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */}
box-flex的含义与作用：用来按比例分配父标签的宽度(或高度)空间。
#first_boy { box-flex: 2; }
#second_boy { box-flex: 1; }
#three_boy { box-flex: 1; }

在实际的浏览器测试中，display: flex 不能完全替代display: -webkit-box
display: box 使用可以参考http://www.html5rocks.com/en/tutorials/flexbox/quick/
display: flex 使用可以参考https://css-tricks.com/snippets/css/a-guide-to-flexbox/
兼容性的问题可以参考https://css-tricks.com/old-flexbox-and-new-flexbox/
Android UC浏览器只支持display: box语法。而iOS UC浏览器则支持两种方式
需要注意的是如果要使用line-clamp时需要用display:box;

设备像素，设备独立像素，CSS像素- http://yunkus.com/physical-pixel-device-independent-pixels/?ref=myread
H5 meta viewport 你真的了解吗？- http://yunkus.com/meta-viewport-usage/
JQuery坑，说说哪些大家都踩过的坑- http://www.phpxs.com/post/5678/?ref=myread

> WebView load js

Android WebView加载本地html并实现Java与JS交互- http://www.cnblogs.com/Joanna-Yan/p/4826990.html
webview javascript 注入方法- http://www.cnblogs.com/rayray/p/3680500.html
-------------------------------------------------------------
初级前端团队(1-5人)
· 首先，可以自己配一个集成环境，可以是XAMPP，集 Apache+MySQL+PHP+PERL为一体的集成包，能够轻易地安装原本复杂的各软件。
· MVC模式组织代码。
· 库的选择还是Zepto，简单易用，好吃不贵，只要10K你就能获得在PC端用Jquery写代码的体验。至于模块化神马的就算了，毕竟人手不够，开发任务又比较重，还是以完成需求为第一目标。
总结：xampp+zepto+rem+CDN

中级前端团队（5-20人）：
·Zepto可以作为库，用sea.js进行模块化管理，backbone.js作为基本MVC架构，用于分离数据。underscroe.js做为前端模板引擎。
这个时期团队也会有几个牛人了，可以为整套系统搭建一个半自动化的开发模式，减少不必要的重复工作，交由机器去完成，让开发人员专注于代码。从此
有了基础的“前端架构”的概念。
总结： zepto.js+sea.js+backbone.js+underscroe.js+rem+CDN

大厂前端团队（20人以上）：
这个阶段自不必多说，大神遍地走，那还不是想搞什么就搞什么，逼格得有，还要引领前沿技术，不仅要满足业务需求，在性能，SEO，安全，代码架构和质量等等细节要求上追求完美。
前端View层，angularjs或react作为框架，node.js作为中层，处理从后端接口拿来的数据，操作渲染模板文件，相当于干了MVC中controller层的活，底层就是数据库和后端（可以是java、php、phyton等）。grunt或gulp为自动化管理工具。css预处理（sass/less ）。用CDN存放大量静态文件也是必不可少的。
总结： angularjs或react+node.js+sass/less+grunt+rem+CDN

最后说一句，没有最NB的框架和语言，只要合适场景和用户需求的就是最好方案。

---------------------------------------------------------------

> 卡片式设计和 CSS3 实现的立体纸张折叠的效果

卡片式设计（h5）PersonInfoShow - https://github.com/1432468608/PersonInfoShow , http://www.jianshu.com/p/4050f8ed6b1b#
利用css3做出立体折叠效果- http://blog.csdn.net/natalie86/article/details/44851971 , http://felixniklas.com/paperfold/

个人的中小型项目前端架构浅谈- http://blog.csdn.net/qq20004604/article/details/70480932
一个只有 99 行代码的 JS 流程框架- http://geek.csdn.net/news/detail/193241

form表单的两种提交方式，submit和button的用法- http://blog.csdn.net/honey_claire/article/details/7658490
JQuery AJAX Demo- http://blog.csdn.net/messageloop3/article/details/38439577
jQuery中ajax的4种常用请求方式- http://www.cnblogs.com/summers/p/3225375.html

http://www.w3school.com.cn/jquery/ajax_ajax.asp
跨域请求之jQuery的ajax jsonp的使用解惑- http://www.cnblogs.com/know/archive/2011/10/09/2204005.html

> Ajax发起请求，及Jsonp跨域访问

</script>

> iFrame跨域访问
iframe与主框架跨域相互访问方法- http://blog.csdn.net/fdipzone/article/details/17619673
iframe跨域访问- http://www.cnblogs.com/pigtail/archive/2013/01/24/2875310.html

------------------------------------------------

使用jsonp跨域返回的后台数据格式也应该为jsonp格式的- http://search.netwin.cn:7180/nayun-api/news/search/0/%E7%A0%94%E7%A9%B6/0/10/?_=1493880612301&callback=Zepto1493880612287
http://m.netwin.cn/netyun/list.html?searchkey=%E7%A0%94%E7%A9%B6
jQuery ajax - ajax() 方法- http://www.w3school.com.cn/jquery/ajax_ajax.asp
nodejs 爬取各个博客网站的最新或者最热的博客文章- https://github.com/hwaphon/toutiaoBlog

> 使用js提交form表单
利用JS提交表单的几种方法和验证- http://blog.csdn.net/Cloud826/article/details/52209206
form表单的两种提交方式，submit和button的用法- http://blog.csdn.net/honey_claire/article/details/7658490
js表单提交和submit提交的区别- http://www.cnblogs.com/siqi/archive/2012/11/30/2796671.html

css获取屏幕高度、宽度- http://blog.csdn.net/wd4java/article/details/42173603
jquery.banner.js图片更换- http://blog.csdn.net/qq_21989939/article/details/46575781

> jQuery

推荐 10 个 jQuery 的 HTML5 音频播放器- https://coyee.com/article/12121-10-jquery-html5-audio-players-sitepoint

DIV悬浮在页面底部或头部
CSS:
.xuanfu{
left: 0;
position: fixed;
bottom: 0;//这里换成top:0;就悬浮在头部
width: 100%;
z-index: 100;
}
Html:
<div class="xuanfu">这里是要悬浮的内容</div>

> 生成二维码图片 html
jquery.qrcode.js生成二维码插件&转成图片格式- http://blog.csdn.net/u011127019/article/details/51226104
HTML5 实现扫描识别二维码生成二维码- http://blog.csdn.net/jerome_s/article/details/47981825
JS 针对开发者的20款移动开发框架- http://www.csdn.net/article/2013-07-09/2816161

> 下载文件或图片 DIV悬浮页面底部
js下载图片到本地- http://blog.csdn.net/jingshui1234/article/details/48807983
HTML <a> download 属性,点击链接来下载图片- http://www.cnblogs.com/babywin/p/6088581.html
ajax请求不能下载文件- http://blog.csdn.net/fan510988896/article/details/71520390
HTML中的a标签实现点击下载- http://www.cnblogs.com/zhaoxiaokai/p/6295190.html
HTML 保存图片到本地- http://www.cnblogs.com/SWSHBON/p/5688204.html

> css3动画

css3常用动画+动画库,CSS动画的两大组成部分：transition和animation。

CSS3 动画- http://www.w3school.com.cn/css3/css3_animation.asp
> animate.css，animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。
查看演示：https://daneden.github.io/animate.css/
github地址：https://github.com/daneden/animate.css
> magic.css动画库
查看演示：http://www.17sucai.com/pins/demoshow/10001
github地址：https://github.com/miniMAC/magic
> Effect.css
> hover.css
查看演示：http://ianlunn.github.io/Hover/
github地址：https://github.com/IanLunn/Hover

7款纯CSS3实现的炫酷动画应用- http://www.html5tricks.com/7-pure-css3-animation.html
44个惊人的超炫CSS3动画演示(1)- http://developer.51cto.com/art/201106/272180.htm

> 判断div（标签）是否隐藏。
判断div中内容是否为空，显示隐藏- http://blog.csdn.net/yangbobo1992/article/details/8062311
显示/隐藏DIV的技巧(visibility与display的差别)？
div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白:
　　style="visibility: none;"
　　document.getElementById("typediv1").style.visibility="hidden";//隐藏
　　document.getElementById("typediv1").style.visibility="visible";//显示

　　通过设置display属性可以使div隐藏后释放占用的页面空间，如下
　　style="display: none;"
　　document.getElementById("typediv1").style.display="none";//隐藏
　　document.getElementById("typediv1").style.display="";//显

8款强大的CSS3/HTML5动画及应用源码- http://geek.csdn.net/news/detail/199824?ref=myread

> 事件冒泡 Jquery/js
js之事件冒泡和事件捕获及其阻止详细介绍- http://www.cnblogs.com/macliu/archive/2017/02/16/6404933.html
jQuery中的事件捕获与事件冒泡- http://www.cnblogs.com/megan610/p/3209007.html
jQuery中的事件冒泡和解决方案- http://blog.csdn.net/woshinannan741/article/details/48832201
js之事件冒泡和事件捕获- http://blog.csdn.net/axzywan/article/details/7498443
JS中的事件捕获和事件冒泡- http://blog.csdn.net/dong123dddd/article/details/50660171
彻底弄懂JS的事件冒泡和事件捕获- http://www.cnblogs.com/qq9694526/p/5653728.html

-------------------------------------

> 移动端HTML5音频与视频问题及解决方案- http://www.cnblogs.com/aaronjs/p/4812119.html
很长一段时间里，我都没理会这个视频处理，安卓用底层，iphone直接用VideoJS，内置flash与h5切换的，flash也有支持问题.
https://github.com/newshorts/InlineVideo

JQuery的父、子、兄弟节点查找，节点的子节点循环- http://www.cnblogs.com/mingforyou/p/4410054.html

> Weex 和 React Native的比较
weex使用V8， ReactNative使用JSCore
weex基于vue.js(2W+ star)。小巧轻量的前端开发框架，组件化，数据绑定，2.0引入virtual dom。
ReactNative使用React(4W+ star)。革命性的前端开发框架，组件化，数据绑定，virtual dom。
ReactNative使用了Choreographer，因此必须在API16以上才可以使用。
weex使用handler来代替Choreographer，可以在API14以上使用。

--------------------------------------

解决h5安卓机在微信上播放视频有广告问题- http://www.cnblogs.com/foreverZ/p/6038950.html
js点击获取当前li标签的index值- http://blog.csdn.net/u011456552/article/details/52291610

0 0