随笔分类 - html5
html5
摘要：Web前端开发工程师面试题
1.说说css的优先级？
2.在移动端中，常常使用tap作为点击事件，好处是？会带来什么问题？
3.原生JS的window,onload与Jquery的$(document).ready(function(){})有什么不同
4.看下面的代码输出什么，foo的值为什么？
var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);
5.如何优化一个网站，可从dom，css，js等几个方面来谈谈？
6.希望获取到页面中所有的checkbox怎么做？(不能使用第三方框架)
7.实现一个函数clone，可以对Javascript中的5种主要的数据类型(Number、String、Object、Array、Boolean)进行复制
8.说说call，apply，bind的作用和区别？
9.看下面的代码输出什么，为什么？
function A(x,y){return x+y;}
function M(x,y){return x-y;}
console.log(A.call
阅读全文
摘要：各种前后端技术关键词杂谈
react native可以把android和ios串起来，javascript可以把react native、react.js和node.js串起来。
新语言开发效率比较高但坑还是比较多的，不过java开发效率确实太慢了，php比较居中，python还是不错的，可以用的项目很多，爬虫、自动化运维、人工智能很多都用到python开发。
后端开发用得比较多的是：java php python nodejs go c# ruby等
桌面版的和网络底层用C/C++还是比较多，python也可以做一部分，大数据数据分析神经网络用matlab、R语言的也不少，nodejs一般只用在高并发，通信部分，不是做全部后端的。
移动开发原生基本是ios(Objective-C、Swift)、android，兼容性开发的主要有：react native、PhoneGap、Hybird模式
NodeJS：nodejs、Express、WebStorm 集成Node.js ,可以运行，编译，测试Node.js App。
阅读全文
摘要：关于全站https必要性http流量劫持、dns劫持等相关技术
微信已经要求微信支付，申请退款功能必须12月7号之前必须使用https证书了（其他目前为建议使用https），IOS也是2017年1月1号要求所有请求使用https了，国内有些https证书要1000元一年，阿里云 云盾证书 有免费型DV SSL，国外有免费的。
http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443
网站迟早要全面https化的(虽然有一点技术难度和访问比较慢但趋势已经非常明显了)，国内运营商域名劫持植入广告太严重了，http请求用各种技术手段都很难防住，所以不是微信、ios强制也应该要尽快切换到https，网站在google、百度上还会对全站https增加排名权重优先收录。
https只能解决http流量劫持，对于dns劫持 https无效
经过测试发现域名是直接被劫持 解析到劫持的服务器ip去
看来还是要用d+服务才保险，具体请看本人另外一篇文章
阅读全文
摘要：用grunt搭建自动化的web前端开发环境实战教程(详细步骤)
jQuery在使用grunt，bootstrap在使用grunt，百度UEditor在使用grunt，你没有理由不学、不用！
前端自动化，这样的一个名词听起来非常的有吸引力，向往力。当今时代，前端工程师需要维护的代码变得及为庞大和复杂，代码维护、打包、发布等流程也变得极为繁琐，同时浪费的时间和精力也越来越多，当然人为的错误也随着流程的增加而增加了更多的出错率。
阅读全文
摘要：前端开发自动化工作流工具，JavaScript自动化构建工具grunt、gulp、webpack介绍
前端自动化，这样的一个名词听起来非常的有吸引力，向往力。当今时代，前端工程师需要维护的代码变得及为庞大和复杂，代码维护、打包、发布等流程也变得极为繁琐，同时浪费的时间和精力也越来越多，当然人为的错误也随着流程的增加而增加了更多的出错率。致使每一个团队都希望有一种工具，能帮助整个团队在开发中能精简流程、提高效率、减少错误率。随之讨论自动化部署也越来越多，并且国内很多大型团队也都有自己成熟的自动化部署工具。据我所知，百度有FIS,腾讯有Modjs，360有燕尾服，还有很多团队在使用Ant，Shell等，而现在讨论较多的是Grunt: 一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：压缩文件，合并文件，简单语法检查。
阅读全文
摘要：关于web开发前端h5框架的选择
看了很多移动版框架都是基于app混合式开发的，不是单独h5网站的
基于h5开发的web框架从组件丰富度，兼容性，相关教程来说bootstrap还是最好的
react和vue2都是用mvvm模式，数据实时更新，适合app里面嵌入的网页使用，但用在传统web网页上对seo不太好，因为数据都放在js里面了，页面html只有简单的结构了。bootstrap比较符合web网站做seo的，兼容跨屏的同时又能保持数据输出。
js框架性能测试对比Table Report
http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html
阅读全文
摘要：html5+php实现文件的断点续传ajax异步上传
准备知识:断点续传，既然有断，那就应该有文件分割的过程，一段一段的传。
以前文件无法分割，但随着HTML5新特性的引入，类似普通字符串、数组的分割，我们可以可以使用slice方法来分割文件。
所以断点续传的最基本实现也就是：前端通过FileList对象获取到相应的文件，按照指定的分割方式将大文件分段，然后一段一段地传给后端，后端再按顺序一段段将文件进行拼接。
而我们需要对FileList对象进行修改再提交，在之前的文章中知晓了这种提交的一些注意点，因为FileList对象不能直接更改，所以不能直接通过表单的.submit()方法上传提交，需要结合FormData对象生成一个新的数据，通过Ajax进行上传操作。
阅读全文
摘要：前端js,css文件合并三种方式,bat命令
前端js文件该如何合并三个方式如下：
1. 一个大文件，所有js合并成一个大文件，所有页面都引用它。
2. 各个页面大文件，各自页面合并生成自己所需js的大文件。
3. 合并多个共用大文件，根据实践情况合并出多个共用js文件，每个页面引用多个共用大文件。
合并两个目的：
1. 为了减少请求数。
2. 代码安全考虑（文件分得越多，越容易被人看清）。
PS：不是压缩混淆，只是合并
阅读全文
摘要：JS实现复制网页内容自动加入版权内容代码和原文链接
实现代码：在body内放入如下代码即可
阅读全文
摘要：bootstrap实现 手机端滑动效果，滑动到下一页，jgestures.js插件
jgestures.js插件可以解决，只需要引入一个JS文件
下面是JS代码：
$(document).ready(function(){
//手势右滑
$('#myCarousel').bind('swiperight swiperightup swiperightdown',function(){
// 执行一些动作...
})
//手势左滑
$('#myCarousel').bind('swipeleft swipeleftup swipeleftdown',function(){
// 执行一些动作...
})
//单点滑动手势,滑动完成后触发(一个手指在屏幕上移动)
$('#myCarousel').bind('swipeone',function(){
// 执行一些动作...
})
});
阅读全文
摘要：js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法
javascript如何捕捉IE窗口失去焦点事件
window.onblur = function(e) {
//you code
};
一个判断页面是否真的关闭和刷新的好方法：
window.onbeforeunload=function(event){};
阅读全文
摘要：默认只显示指定高度，出来按钮 阅读更多，加载全文，点击后显示全文的实现方式
阅读更多
jquery 修改 style 方法：obj.css("key","value");
阅读全文
摘要：jquery选择器中两个class是什么意思？
$(".class1 .class2") 选择class1元素下class2的元素（中间有空格）
$(".class1.class2") 选择同时含有class1和class2的元素（中间没有空格）
$(".class1,.class2") 选择class1或者class2的元素（中间有逗号）
jQuery的选择器和css选择器基本一样，例如：
css选择多个class为：.class1.class2
jQuery选择多个class为：$(".class1.class2")
阅读全文
摘要：Jquery图片上传组件，支持多文件上传
http://www.jq22.com/jquery-info230
jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。
jQuery File Upload有多个文件选择，拖放上传控件拖放支持，进度条，验证和预览图像，音频和视频 。
支持跨域，分块和可恢复的文件上传和客户端图像大小调整。适用于任何服务器端平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.） ，支持标准的HTML表单文件上传。
http://www.jq22.com/yanshi230
多文件上传也是一个个上传的，关键是在选择的时候让他一次性选择多个
阅读全文
摘要：多屏适应响应式布局方案,响应式、自适应布局区别 完整的思维导图
基于webview的Hybrid App混合开发模式，facebook开源的React Native，bootsrtap响应式布局
阅读全文
摘要：基于webview的Hybrid app和React Native及html5
facebook开源的React Native听说这个比基于webview的Hybrid app要好很多
React Native的优势和劣势：
优势相对Hybird app或者Webapp：
1. 不用Webview，彻底摆脱了Webview让人不爽的交互和性能问题
2. 有较强的扩展性，这是因为Native端提供的是基本控件，JS可以自由组合使用
3. 可以直接使用Native原生的动画（在FB Group这个app里面，面板滑出带一点果冻弹动，面板基于某个点展开这种动画随处可见，这种动画用Native code来做小菜一碟，但是用Web来做就难上加难）。
优势相对于Native app：
1. 可以通过更新远端JS，直接更新app，不过这快成为各家大型Native app的标配了.
劣势：
1. 扩展性仍然远远不如web，也远远不如直接写Native code
2. 从Native到Web，要做很多概念转换，势必造成双方都要妥协。
比如web要用一套CSS的阉割版，Native
阅读全文
摘要：HTML5代码规范
html标签里面等号两边不要留空格在IE下可能会识别不了
html5等号前后可以使用空格,但仍不推荐使用。
HTML 代码约定
很多 Web 开发人员对 HTML 的代码规范知之甚少。
在2000年至2010年，许多Web开发人员从 HTML 转换到 XHTML。
使用 XHTML 开发人员逐渐养成了比较好的 HTML 编写规范。
而针对于 HTML5 ，我们应该形成比较好的代码规范，以下提供了几种规范的建议。
阅读全文
摘要：jquery一句话实现快速搜索功能
//快捷搜索公共方法，其中obj为显示行的子节点
function filter(obj, filterNameValue){
$(obj).hide().filter(":contains('"+(filterNameValue)+"')").show();
}
例如：
onkeyup="filter('table tbody tr', this.value)"
onkeyup="filter('select option', this.value)"
需要到显示的子节点
阅读全文
摘要：jquery checkbox相关 prop方法
firefox中 checkbox属性checked="checked"已有，但复选框却不显示打钩的原因
复选框绑定了click事件，点一次选中，再点击取消选中，依次类推。
这个功能在ie中没问题，但是在firefox中测试的时候，前两次都没有问题，可以正常显示选中和取消，但当再去选中的时候，复选框的属性checkbox值变为"checked"，没问题，但是复选框却不在显示选中状态，明明属性值改了，但是却不显示勾选。
正解：后来经偶像指点，原来是jQuery版本问题。我操作属性用的是
$("**").attr("attrName");而jQuery的版本用的是1.9，这就是存在一个兼容性和稳定性问题。
jQuery API明确说明，1.6+的jQuery要用prop，尤其是checkBox的checked的属性的判断，即:
$("input[type='checkbox']").prop("checked");
$("input[type='checkbox']").prop("disabled", false);
阅读全文
摘要：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
但在较复杂的页面上出现问题，间隔，内外边距常困扰开发人员，需要深入源码和文档理解栅格系统才能运用自如。
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
Bootstrap 栅格系统的精妙之处, 通过container, row, column都有15px的padding槽边和 row的margin -15px设置，巧妙实现在 column 中嵌套 row进行nesting 扩展(超过12列)，而不需要再套一层 container
阅读全文
