Skip to content

Instantly share code, notes, and snippets.

@zhuping

zhuping/frontend.md

Last active October 13, 2016 06:33
Show Gist options
  • Save zhuping/3fdd455628561d3e1b5b to your computer and use it in GitHub Desktop.
Save zhuping/3fdd455628561d3e1b5b to your computer and use it in GitHub Desktop.
Download ZIP
前端学习笔记
Raw
frontend.md

记录1

<input type="checkbox" name="province" />，所有浏览器都会给没有value的input[type="checkbox"]一个默认的value值on。 如果给这个input加上一个value="" 就能解决这个问题，但是在原生的ie8（可能<ie8）下会忽略掉这个空value，导致我在用S.IO.serialize('.form')的时候，取出来的值带有on。

记录2

上传组件的整理
目前流行的上传组件都是大同小异，高级浏览器中都是基于HTML5提供File API开发的，不支持File API的浏览采用flash去兼容。File API 提供了File、FileList、Blob、FileReader四个对象。 类型 FileList 包含一组 File 对象。通常 FileList 对象可以从表单中的文件域（<input type="file" multiple />）中拿取。Blob 对象代表浏览器所能读取的一组原始二进制流。Blob 对象中，属性 size 表示流的大小。函数 slice() 可以将一个长的 Blob 对象分割成小块。File 对象继承自 Blob 对象，在 Blob 对象基础上增加了和 File 相关的属性。其中，属性 name 表示文件的名字，这个名字去掉了文件的路径信息，而只保留了文件名。属性 type 表示文件的 MIME 类型。属性 urn 则代表这个文件的 URN 信息。为完成文件读取的操作，一个 FileReader 对象实例会关联 File 或 Blob 对象，并提供三种不同的文件读取函数以及 6 种事件。

上传组件：

百度fex的webuploader：https://github.com/fex-team/webuploader 基于File API和flash
阿里的uploader：https://github.com/kissygalleryteam/uploader/tree/master/doc/ 基于File API和flash
jQuery-File-Upload：https://github.com/blueimp/jQuery-File-Upload 基于File API和flash
plupload： https://github.com/moxiecode/plupload 基于File API和flash
resumable.js： https://github.com/23/resumable.js 基于File API （Firefox 4+, Chrome 11+, Safari 6+ and Internet Explorer 10+）

相关资料

http://www.html5rocks.com/zh/tutorials/file/dndfiles/ https://www.ibm.com/developerworks/cn/web/1101_hanbf_fileupload/ http://www.w3.org/TR/FileAPI/

记录3

45个javascript技巧
http://blog.jobbole.com/58032/

记录4

Nodejs最佳实践：
http://blog.risingstack.com/node-js-best-practices/

记录5

Flux For Stupid People
http://blog.andrewray.me/flux-for-stupid-people/

结合这个例子比较好理解些
https://facebook.github.io/flux/docs/todo-list.html

记录6

由一个问题引起函数的柯里化的讨论
http://segmentfault.com/q/1010000002924576 函数柯里化的介绍
http://blog.jobbole.com/77956/

记录7

ie6下通过css expression表达式xss 触发地址：
http://www.taobao.com/go/app/tdjwidget/i_search.php?width=1350;x:expression(alert(1));&height=70&s_hot=1&s_logo=1&pid=mm_26663432_3458762_11251983&w=unionapijs
该组件是通过php去获取url中的width和height参数，赋值到页面的div上，在ie6下触发xss漏洞
有问题的代码：
$width = isset($__GET["width"]) && $__GET["width"] != '' ? htmlspecialchars($__GET["width"],ENT_QUOTES) : 350;
$height = isset($__GET["height"]) && $__GET["height"] != '' ? htmlspecialchars($__GET["height"],ENT_QUOTES) : 70;
网上找了个过滤xss的php方法

function sacarXss($val){

$val = preg_replace('/([\x00-\x08][\x0b-\x0c][\x0e-\x20])/', '', $val);
$search = 'abcdefghijklmnopqrstuvwxyz';
$search .= 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
$search .= '1234567890!@#$%^&*()';
$search .= '~`";:?+/={}[]-_|\'\\';
for ($i = 0; $i < strlen($search); $i++) {
    $val = preg_replace('/(&#[x|X]0{0,8}'.dechex(ord($search[$i])).';?)/i', $search[$i], $val); // with a ;
    $val = preg_replace('/(&#0{0,8}'.ord($search[$i]).';?)/', $search[$i], $val); // with a ;
}
$ra1 = Array('javascript', 'vbscript', 'expression', 'applet', 'meta', 'xml', 'blink', 'link', 'style', 'script', 'embed', 'object', 'iframe', 'frame', 'frameset', 'ilayer', 'layer', 'bgsound', 'title', 'base');
$ra2 = Array('onabort', 'onactivate', 'onafterprint', 'onafterupdate', 'onbeforeactivate', 'onbeforecopy', 'onbeforecut', 'onbeforedeactivate', 'onbeforeeditfocus', 'onbeforepaste', 'onbeforeprint', 'onbeforeunload', 'onbeforeupdate', 'onblur', 'onbounce', 'oncellchange', 'onchange', 'onclick', 'oncontextmenu', 'oncontrolselect', 'oncopy', 'oncut', 'ondataavailable', 'ondatasetchanged', 'ondatasetcomplete', 'ondblclick', 'ondeactivate', 'ondrag', 'ondragend', 'ondragenter', 'ondragleave', 'ondragover', 'ondragstart', 'ondrop', 'onerror', 'onerrorupdate', 'onfilterchange', 'onfinish', 'onfocus', 'onfocusin', 'onfocusout', 'onhelp', 'onkeydown', 'onkeypress', 'onkeyup', 'onlayoutcomplete', 'onload', 'onlosecapture', 'onmousedown', 'onmouseenter', 'onmouseleave', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onmousewheel', 'onmove', 'onmoveend', 'onmovestart', 'onpaste', 'onpropertychange', 'onreadystatechange', 'onreset', 'onresize', 'onresizeend', 'onresizestart', 'onrowenter', 'onrowexit', 'onrowsdelete', 'onrowsinserted', 'onscroll', 'onselect', 'onselectionchange', 'onselectstart', 'onstart', 'onstop', 'onsubmit', 'onunload');
$ra = array_merge($ra1, $ra2);
$found = true;
while ($found == true) {
    $val_before = $val;
    for ($i = 0; $i < sizeof($ra); $i++) {
        $pattern = '/';
        for ($j = 0; $j < strlen($ra[$i]); $j++) {
            if ($j > 0) {
                $pattern .= '(';
                $pattern .= '(&#[x|X]0{0,8}([9][a][b]);?)?';
                $pattern .= '|(&#0{0,8}([9][10][13]);?)?';
                $pattern .= ')?';
            }
            $pattern .= $ra[$i][$j];
        }
        $pattern .= '/i';
        $replacement = substr($ra[$i], 0, 2).'<x>'.substr($ra[$i], 2);
        $val = preg_replace($pattern, $replacement, $val);
        if ($val_before == $val) {
            $found = false;
        }
    }
}
return $val;
}

过滤掉了所有可能存在的xss
过滤后的样式显示
style="width:1350;x:ex<x>pression(alert(1));px;height:70;x:ex<x>pression(alert(1));px;"

扩展阅读

xss过滤的测试方法：http://drops.wooyun.org/tips/845

记录8

1、优化JavaScript的执行效率
2、降低样式计算的范围和复杂度
3、避免大规模、复杂的布局
4、简化绘制的复杂度、减小绘制区域
5、优先使用渲染层合并属性、控制层数量
6、对用户输入事件的处理去抖动
https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution?hl=zh-cn

记录9

关于“吴亦凡入伍”H5的背后的技术（前端篇）
http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/374931.shtml
其他类似的案例
http://wx.shenchuang.com/article/2015-08-28/1165149.html

记录10

视频宽度自适应：
http://www.w3cplus.com/responsive/making-embedded-content-work-in-responsive-design.html

记录11

移动web开发都会遇到的坑
http://www.cnblogs.com/hutuzhu/p/4565537.html

记录12

web app变革之rem
http://isux.tencent.com/web-app-rem.html

记录13

Git 使用规范流程
http://www.ruanyifeng.com/blog/2015/08/git-use-process.html

记录14

剖析responsive image
riskers/blog#5

记录15

CSS深入理解vertical-align和line-height的基友关系
http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

记录16

image-set实现Retina屏幕下图片显示
http://www.w3cplus.com/css/safari-6-and-chrome-21-add-image-set-to-support-retina-images.html

记录17

异步 JavaScript 进化史
http://zhuanlan.zhihu.com/FrontendMagazine/20322843

记录18

使用Object.observe实现简单的双向绑定
http://zhuanlan.zhihu.com/FrontendMagazine/20047033
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/observe

记录19

图解 Flux
http://zhuanlan.zhihu.com/FrontendMagazine/20263396

  1. View 告知 Action Creator 准备一个 action。
  2. Action Creator 做好 action 并将其发送给 Dispatcher。
  3. Dispatcher 按照顺序将 action 传递给 store。每一个 store 都会受到所有的 action 通知，然后自行觉得是否对这个 action 做出响应，更新 state。
  4. 一旦 store 更新 state 完毕，就会告知订阅了该 store 的 controller view。
  5. 这些 controller view 就会向 store 请求更新了的 state。
  6. 从 store 中获得 state 之后，view controller 将会让它所管辖的子 view 渲染新的 state。
    Flux其实就是一个订阅发布模式，但与传统的pub/sub模式区别在于，Flux的每一个store都会受到所有action的通知，需要通过一个type值来过滤响应，然后emit一个事件，让controller view来监听更新view。

记录20

ReFlux细说
http://www.cnblogs.com/lovesueee/p/4893218.html
因为Flux不是纯粹的订阅发布模式，当有很多store的时候，增加了不必要的资源浪费。所以有了reFlux的产生。
reFlux在保留Action、Stores、Views三个角色的基础上，去除了Dispather。Flux通过Dispatcher来连接Action和Stores，reFlux的action自带了publish功能，Stores自带了Subscriber功能。使代码更简洁了。

记录21

Webpack傻瓜式指南（一）
http://zhuanlan.zhihu.com/FrontendMagazine/20367175

记录22

测试框架 Mocha 实例教程
http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html

记录23

Webpack傻瓜指南（二）开发和部署技巧
http://zhuanlan.zhihu.com/FrontendMagazine/20397902

记录24

React.js architecture - Flux VS Reflux
http://blog.krawaller.se/posts/react-js-architecture-flux-vs-reflux/
大致介绍了下flux和reflux各个不同点

Reflux refinement
http://blog.krawaller.se/posts/reflux-refinement/
介绍了reflux内部同一方法的不同写法

记录25

解决webpack-dev-server无法自动刷新的问题
http://react-china.org/t/webpack-dev-server/2118/3
bundle,js前面加上8080端口访问

记录26

校正倒计时精确度
http://www.xuanfengge.com/js-realizes-precise-countdown.html
因为js单线程执行的缘故，会受到其他不可抗拒的原因，导致阻塞延迟而发生的误差。如果不去校正这个误差，会导致误差越来越大，在倒计时功能直接表现为时间不准。比如打开同一个页面的两个tab，隔断时间发现两个tab的倒计时发生了偏差。解决方案：获取一次服务器时间（考虑到网络请求，页面渲染花去的时间，实际客服端拿到的时间已经不准了，但这个是不可避免的开销），做减减倒计时，同时通过newDate()的方式获取本地客户端的时间，去校正减减倒计时过程中发生的误差。

记录27

使用webpack中遇到的坑

  • 如果js中包含了中文，压缩js无法把中文转为unicode
  • style-loader不兼容低于ie8以下浏览器，因为里面用到了bind及filter方法
解决方案：
  • 找了一圈转码的组件，只找到这个https://github.com/jamesroom/loader-chinese2unicode，试了下不行。无意间看到了使用gulp + webpack打包的实现，看到了https://github.com/shama/webpack-stream这个组件。所以有了下面的配置，算是曲线救国吧
gulp.task('default', ['clean'], function() {
  return gulp.src('src/entry.js')
    .pipe(webpack(require('./webpack.production.config.js')))
    .pipe(uglify({
      output: {
        ascii_only: true
      }
    }))
    .pipe(gulp.dest('build/'));
})
  • style-loader作者态度很强硬，别人提交了兼容ie8的pr就是不合并。他推荐用polyfill的方式。我这里使用了es5-shim来处理兼容
module: {
  loaders: [{
    test: /\.js$/,
    exclude: /\/(node_modules|bower_components)\//,
    loader: 'imports?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham'
  }]
}

记录28

使用react开发项目中遇到的问题记录

  • webpack的研究，provideplugin与externals的区别。配置前者，可以省去变量的引入。配置后者，打包的时候不会把文件一起打包进去，需要自己手动在html中通过script引入。具体可以看下webpack作者在stackoverflow上的回答。http://stackoverflow.com/questions/23305599/webpack-provideplugin-vs-externals
  • react-router的研究，个人感觉有点复杂，而且api跟1.x以下的完全不一样。最新的api：https://github.com/rackt/react-router/tree/latest/docs；相关文章：http://qiutc.me/post/%E8%B0%88%E8%B0%88-react-router.html
  • FB已经放弃使用JSXTransformer去编译jsx模板了，推荐使用babel。然而通过npm安装最新6.x以上的版本还有很多问题，推荐使用5.x版本。

记录29

Object.keys()的巧妙实现

function keys(obj){

  var a = [];

  for(a[a.length] in obj);

  return a;

}

利用for in，把每个key值设置为a[a.length]，巧妙的把每个key push到数组a里面

记录30

node模块cluster学习
nodejs是一个单进程单线程的服务器引擎，不管有多么的强大硬件，只能利用到单个CPU进行计算。所以从v0.8开始，Node新增了一个内置模块“cluster”，故名思议，它可以通过一个父进程管理一坨子进程的方式来实现集群的功能。

资料

解读Node.js的cluster模块
解读Nodejs多核处理模块cluster
Cluster in Node.js tutorial
node-cluster-tutorial

记录31

Javascript是单线程的深入分析
http://www.laruence.com/2009/09/23/1089.html
http://www.cnblogs.com/Mainz/p/3552717.html
defer和async的区别

详解：https://segmentfault.com/q/1010000000640869

@zhuping
Copy link
Author

zhuping commented Oct 13, 2016

使用 jspm 把握 JavaScript 模块的未来
http://www.ibm.com/developerworks/cn/web/wa-use-jspm-javascript-modules/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment