前端

2015 shen JSconf总结（第二天）　

第二天干货非常多，全是实战经验，基本没有什么技术介绍。

##Part Two 2015-07-12

###1. 七牛前端测试实践 - 马逸清
angularjs dom隔离，测试不需mock；依赖注入可以mock (service, controller) 可以使用stub

stub适合返回值依赖，mock行为验证

官方jasmine
View状态测试

phantom，sinon(stub)，fixture(karma)

###2. Node Profiler - 朴灵@阿里云alinode
hack了部分v8代码，跟CPU Profile相关

  • 常用工具: benchmark.js，node-webkit-agent，ab/wrk(压力测试)，–prof & mac-tick-processor(v8)
  • v8以JIT方式执行js(产出机器码)，以函数为单位处理
    Crankshaft架构(可以运行时优化 fulCompiler -> optimizeCompiler) P：bailout, deoptimize
  • Profiler： 更多函数状态，优化建议(v8能否优化) http://alinode.aliyun.com
  • (program) 系统空转

? 第一次访问测试

###3. P2P pipes - mafintosh(dat)

demo: multiplayer game(socket)
websockets, webrtc

**ndjson, nc, crypto, dupsh(two app in-out pipe), airpaste(udp multicast with pipe), blecat(blutooth with pipe), webcat(webrtc with pipe)

###4. 微服务架构下的服务通信 - 老雷leizongmin @ucdok.com/ superid.me一登
后台Node逻辑
SDK - 多进程？- API服务器（人脸识别模块）

=》 SDK - API服务器 -人脸识别进程（多线程）

=》 - 更多应用（后台微服务架构）

–> 服务注册（消息队列总线式 / P2P）+远程调用

实现原理

总线可以用redis实现，通信也用redis订阅机制（服务提供者可以动态加入）
vs amqp-rpc， eureca.io

未来：备份切换，数据量太大

服务发现 + 服务通信

ppt地址 github.com/leizongmin/clouds

etcd + k8s + docker

###5. 前端服务化之路 - Herman@阿里CXDC 客服中心

前后端分离-》前端给后端提供接口（服务化）-》web component
**flipper.js 支持IE8以上 – webcomponents.js 更好的隔离性

###6. JS lang - hax贺诗俊@百姓网
NodeJS + CommonJS -> ES6 module( class, arrow function[this bind], map/set, for..of..[for in] )

WebAssembly

babel(es6 compiler)

###7. JS on Fiber - 庄恒飞@孢子社区fibjs-> 那么社区named.cn
fibjs vs nodejs， Fiber-Driven，No Callback

  • Module lib: CommonJS，async require
  • coroutine.parallel 【改变nodejs单线程】多CPU利用率
    js，用
    brew install fibjs [http://fibjs.org]
    fibjs底层多种线程(fiber) -> js线程-》work线程池【实际改动了v8下一层，解决了nodejs的callback与计算密集】

##Lighting Talk

  1. tangrui.net (js in JVM: 1.6 ringo 1.8 nashorm(vert.x/avatar.js)) cde.io
  2. wangyan @oneapm.com (npm2dot) 转换dot格式
  3. dafeng @strikling.com “GraphQL & Relay”: restful api问题：依赖多次发送->custom endpoint-》 GraphQL帮忙管理
  4. homlinju @fontmin js方案的字体最小化
  5. 一狂 @阿里cxdc www.zouyesheng.com angular问题：不单单使用，模块化加载，自己的渲染机制，怎么合作？模块内定义dir最后手动触发bootstrap
  6. EvanYou @vue webpack vue-element.js
  7. xeodou crazyapp.net/#/explore

###8. Persistent data structure in JS-NiYue@splunk
persistent data structure [like COW] -> concurrency
real good:

  1. performance（判断状态是否变化）
  2. features on copy（undo/redo，recording/reply，time traveling）

实现策略：COW -> structual sharing
问题：内存消耗，内存回收

mori, Immutable

一页千级dom元素？
LightTable演示

###9. WebIDE with React - hulufei @coding.net
React - Flux - karma

Components: <WebIDE/>

1
2
3
4
5
var App = React.createClass({
	render: function() {
		<div><Menu/><Tree/></div>
	}
})

Flux: Dispatchor -> store -> view -> action
<Editor/>与<SettingModel/> 通信：
SettingStore -> SettingAction

Addons: store或action引用API层

roit, ace rather than codemirror
QA：store划分标准：组件需要，共享； 数据放store里面方便做数据缓存，返回promise；Flux写太多模板代码；

###10. WebGL & WebVR - Martin @Zurich - archilogic.com @g33konaut

faces + vertices -> GL buffers -> shader code -> print

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var renderer = THREE.WebGLRenderer();
var box = new THREE.Mesh(
	new THREE.BoxGeometry(100, 100, 100),
	new Three.MeshBasicMaterial()
);


scene.add(box);

var light = new THREE.PointLight()
light.position.set();
renderer.render(function(){
	box.rotation.y += Math.PI / 200;
});
//OBJMITLoader()

//VR
var vrEffect = new THREE.VREffect(render),
	vrControls = new THREE.VRControls()

###11. maintainable nodejs - 死马 不四@天猫前端,dead-horse@github koa
提供固定的输出

异步try-catch -> promise 可以传递error
默认的错误监听函数，可以利用事件方式让外层感知

bluebird, co

前端

JavaScript实用代码片段

最近抽空在忙小项目，总结了下一些项目中碰到的常见问题，搜集对应的实用JS代码片段，跟大家分享。

1.产生限定范围内不重复的随机数

在深js也碰到了完全相同的问题，即抽奖程序的核心算法，结果是bug频出。这里给出js抽奖程序，大家去鄙视一下。
一种思路是在给定大小数组中每次抽取一个随机位置的数进行剔除，这个程序的问题是必须始终维护抽取的数组，好处是不会重复抽取：

var originalArray=[];
for (var i=0;i<len;i++) { 
    originalArray[i]= i; 
} 
var getRandom = function(){
    var index=Math.floor(Math.random()*originalArray.length); //随机取一个位置 
    var value = originalArray[parseInt(index)];
    originalArray.splice(index,1);
    return value;
}
有什么其他好方法不妨分享一下。 ## 2\. 数字保留两位小数 数字进行截断保留两位小数只想到如下方法 
floatNum = Math.round(floatNum*100)/100;
但是还有情况是仅展示两位小数，这时只要用原生的API方法就可以了 
floatNum.toFixed(2)

3. 触发change事件

这是在使用AmazeUI中按钮组时碰到的问题，按钮组并没有对应的js封装，所以点击div模拟的按钮并不能触发实际单选按钮的change事件，因此需要jquery来手动触发。估计Bootstrap应该有进行更好的封装吧。

$button.children().attr('checked',true).trigger("change");
这里使用`children`仅是为了获得包含在外层`div`下的单选按钮，还得设置check状态 ## 4\. 单选按钮选择信息获取 按钮组中究竟选择了哪一个可以使用下面代码获得 
$('input[name="radio-options"]:checked').val()

5. 中文编解码

在URL中传递中文就需要进行URI编码转为16进制的数字表示

location.href = "result.html?u="+encodeURIComponent(name)+"&b="+invest_status.profit+"&r="+invest_status.rounds;
展示也得使用相应的URI函数解码进行 
user = decodeURI(name);
发现不少浏览器现在已经支持直接在URL中插入中文，估计这里有些变化了。 ## 6\. 转换为数字类型 两种方法，一种是 
option = parseInt(IntNumStr);
另一种是 
option = Number(IntNumStr);
注意单选按钮的选择值就可以用这个方法进行转换 ## 7\. 浏览器url信息处理 主要是处理GET请求的分隔符"&"与值的获得，也就是运用`.split("&")`和`.split("=")` 
infos = url.split('&'), user = (infos[0].split('='))[1];
搜到一个大而全的[处理工具](https://github.com/websanova/js-url) ## 8\. 网页title设置 直接给`document.title`赋值即可 ## 9\. 异步加载与性能优化 promise ## 10.文件上传处理 

window.Blob slice
file

11. 多场景管理

12. 简单模板与双向绑定

前端

出自jquery作者简单js模板中的技巧

短短的一段代码，看懂之后能真正认识javascript语言中的各种技巧 来自JavaScript Micro-Templating

// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
  var cache = {};
  // tmpl解析函数，参数str通常为模板tag的id，参数data为传入的数据
  this.tmpl = function tmpl(str, data){ 
   //首先判断传入str第一个字符是否为非单词字符，\W等价于[^A-Za-z0-9_]，注意判断条件取反
    var fn = !/\W/.test(str) ? 
      //为真，说明开头字符为单词字符，即str表示id，则首先查找缓存中的模板函数
      cache[str] = cache[str] || 
        //未缓存则并取出模板中的内容运行tmpl解析函数，由于未传入data参数，故返回模板函数指针进行缓存
        tmpl(document.getElementById(str).innerHTML) : 

      // 为假，说明开头字符为非单词字符，即str表示模板内容，则创建相应的模板函数fn对象
      new Function("obj", //fn接受一个参数obj，实质即data
         //函数内容，p为需要显示的内容以数组形式保存，内部函数print即调用p的push方法将所有参数压入（该函数用法不明）
        "var p=[],print=function(){p.push.apply(p,arguments);};" + 

        //使用with关键字，将参数obj即data带入到执行环境中，这样模板中的变量即可使用
        "with(obj){p.push('" +
        // 在创建fn函数对象时即将str模板内容转换为完全的js代码，
        // 例子：<i class='a'><%=user.id%></i>
        str
        // 先清除各种换行符以方便后面作为替代符号进行使用
          .replace(/[\r\t\n]/g, " ")
        // 将模板开头标志替换为缩进符，
        // 例子：<i class='a'>\t=user.id%></i>
          .split("<%").join("\t")           
        // 模板中非脚本部分（即html标签）中的单引号替换为换行符，其中$1即正则中小括号能匹配的内容
        // 例子：<i class=\ra\r>\t=user.id%></i>
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
        // 将模板中直接显示的变量提取出来，用单引号与逗号进行分隔,由于字符串使用单引号，故而上一步需要记录
        // 例子：<i class=\ra\r>',user.id,'</i>
          .replace(/\t=(.*?)%>/g, "',$1,'")
        // 将代替模板开头标志的缩进符替换为push调用结束，注意例子中的\t在上一步已被删去
          .split("\t").join("');")
        // 将模板结束标志替换为p.push调用开始，意为模板标志之间的html标签即以字符串的形式压入p数组
        // 注意例子中的%>也在显示变量那步被删除
          .split("%>").join("p.push('")
        // 还原模板中原有字符串部分的单引号
        // 例子：<i class=\\'t\\'>',user.id,'</i>
          .split("\r").join("\\'")
        // fn函数返回最终拼接的字符串,p.push('<i class=\\'t\\'>',user.id,'</i>');，注意push方法是可以压入多个元素的
      + "');}return p.join('');");

    //如果传入data，则返回运行模板函数后的最终结果，否则返回模板函数fn指针
    return data ? fn( data ) : fn; 
  };
})();
前端

制作Bookmarklet书签

基本模板就是这样，主要是javascript:起了作用，导致代码执行。

javascript:(function(){

if(window.bookmarklet!=undefined){bookmarklet();}
else{document.body.appendChild(document.createElement('script')).src='http://YOURURL/bookmarklets.js';}

})();
本站总访问量次