weex入门实践(前端视角)功能介绍 如上图所示,本次weex实践将订单展示页面进行了weex化,这个界面交互简单,用weex完全可以实现,同时也使用了weex提供的大部分基础能力。包括三端共同实现component<a>、moduleshopBase、抽离we文件组件、a链接跳转、list组件使用、开发以及三端调试等。 源码管理以及web拓展在weex里我们谈到组件component以及模块module跟一般的前端框架谈论的组件不太一样。比如在vue中我们会把一些比较通用的UI抽离出来单独引用,我们把这些抽离出来的逻辑UI对象称为组件component。但是weex需要保证三端一致,三端共同实现的公共逻辑UI我们称之为组件。为了保证三端一致,一样的效果需要在三端各自实现一个版 ...
閱讀全文 »

图片流量优化刷新一个页面消耗的流量除了脚本样式文件以外,大头其实在下载的图片。一张图片动辄几十kb,想尽办法优化样式、脚本文件所优化的图片流量其实还不如一张图片大。 本文从两个角度介绍如何对图片流量进行优化。本文进行图片流量优化的前提都是对于移动端而言。 webp首先从图片格式方面着手,webp(google官方网址)是谷歌推出的一种图片格式,优点在于同等画面质量下,体积比jpg、png少了25%以上。以两张jpg、png图片为例: JPG http://cdn1.showjoy.com/images/c9/c9c2221942774550ad53342da23774de.jpg PNG http://cdn1.showjoy.com/images/bb/bb1c8b0d275e4ba2 ...
閱讀全文 »

初次接触vue,刷完了堪称经典的vue官网文档+vue-router文档+vuex文档+vue-cli文档,然后就开始刷项目了。这篇文章总结了项目实践的一些思路。 首先看下项目的总览图(mockplus制作) 这个项目我负责的部分是一个控制台的需求,用户可以在这个模块进行佣金、订单等项目的修改设置,可以看到第1张图相当于控制台首页,页面上有1、2、3、4、5个入口,其中1-4入口进入的页面对应4个页面,但是4个页面主要结构相同,中间商品列表样式信息不同,为了简略4图归为第二张图。入口5对应第三张图。 这几个页面需求并不复杂,大项目本身也是是基于zepto的,单单把这个模块拿出来抽离成单页形式主要为了两点考虑: 控制台毕竟涉及操作dom的需求会很多,为了兼容未来产品迭代的复杂需求。 控 ...
閱讀全文 »

ecmascript6let const1.for 循环中let可以为循环变量因子创建独立的作用域,在for循环中进行事件绑定很方便。 1234567891011121314beforevar a = [];for (var i = 0; i < 10; i++) { (function (i) { a[i] = function () { console.log(i) } })(i); }console.log(a.length)a[6](); // 6 123456789aftervar a = [];for (let i = 0; i < 10; i++) { a[i] = ...
閱讀全文 »

本文讲述4个问题 gzip编码与Content-Length的关系 分块编码与Content-Length的关系 file文件已经在服务端进行gzip压缩,那为何在node中用request请求这张图片时(请求的方法为head/get)返回头首部Content-Length还是未压缩前的图片大小? 响应头一定会包含Content-Length首部吗? 在图片性能监控脚本中对站内某页面的所有图片进行请求(采用request模块),以获取图片的具体大小。(通过response.headers的Content-Length) 1234567// 部分代码request.head('http://file.showjoy.com/images/46/4695c19423cd4046 ...
閱讀全文 »

浏览器1.手机上有四种浏览器类型:内置浏览器、可下载浏览器、代理浏览器、webview。 大多数内置浏览器都被紧密集成到底层的操作系统中,,无法单独升级浏览器。 webview是留给原生应用的一个操作系统浏览接口。(webview是属于操作系统的) 苹果不允许在ios设备上安装其他渲染引擎,所以其他浏览器想要在ios上安装就必须使用苹果的webview。 总体来说webview是独立的程序,用了内置浏览器很多底层组件(比如渲染引擎)。 2.代理浏览器 用户在代理浏览器上访问一个地址,http请求会被代理浏览器接受,但是不会进行常规的http请求,而是将请求发送到代理服务器上,有代理服务器再请进行常规的http请求,请求得到html、css、javascript。代理服务器上有渲染引擎,会将请 ...
閱讀全文 »

移动端H5页面rem缩放方案flexible.js兼容375px方案的思路参考: 移动端高清、多屏适配方案 viewport-and-flexible.js flexible.js github 一个新的项目复用了一些老页面,老页面是使用375px方案进行移动端适配的,meta[viewport]使用的是<meta name="viewport" content="width=375, user-scalabe=no">,而新页面使用的是flexible.js伸缩方案,动态生成meta[viewport]<meta name="viewport" content="initial-scale=[num ...
閱讀全文 »

微信环境下input[type=text]点击软键盘闪现问题— 记一次神奇的bug 在项目测试阶段,在页面刚加载完毕的时候(上方进度条消失)点击输入框,弹出软键盘。但是在大约1秒的时候后软键盘就会自动消失,输入框的焦点消失。 这种现在只会出现在ios下的微信浏览器内,safari不会出现这个问题。 这会造成了很不舒适的用户体验,用户需要点击两次输入框才能真正输入内容。 对于这种全局性质的模糊bug,最好就是采用排除法去定位。在本地服务器内对当前页面的依赖逐步的排除,最后发现是第三方统计脚本引起了这个bug。 以下是肇事代码(省略) 123456789$(window).on('load',function(){ var a = document; __sh ...
閱讀全文 »

前端自动化工程 Installation1sudo npm install -g yazi Getting To Know yazi初始化前端脚手架 init yazi mb init yazi pc init 生成前端项目脚手架,脚手架目录: 1234567891011[test-613] | -- package.json | -- [src] | | -- [images] | | | -- [slice] | | -- index.html | | -- [js] | | | -- index.js | | -- [less] | | | -- style.less | ...
閱讀全文 »

nodejs路径引用问题 gulp-babel的引用路径问题 gulp src 文件流路径 require(‘xx’) 路径问题 本文主要讲述了编写外部构建工具中gulp-babel中依赖es2015插件失败问题、gulp.src路径问题以及require(‘xx’)的路径问题。 gulp的src作用是引入所需要的流,且其使用了node-glob模块实现了文件匹配, 1gulp.src(globs[, options]) 其中options对象中的属性除了node-glob可以使用的除外,还额外增加了options.buffer ,options.read, options.base,关于这三个额外的属性作用可以查看 gulp api。 这里主要介绍node-glob中的cwd属性 1 ...
閱讀全文 »