zepto

前言 这几天，第三轮全站优化结束，测试项目在2G首屏载入速度取得了一些优化成绩，对比下来有10s左右的差距： 这次优化工作结束后，已经是第三次大规模折腾公司框架了，这里将一些自己知道的移动端的建议提出来分享下，希望对各位有用 文中有误请您提出，以免误人自误 技术选型 单页or多页 spa（single page application）也就是我们常常说的web应用程序webapp，被认为是业内的发展趋势，主要有两个优点： ① 用户体验好 ② 可以更好的降低服务器压力 但是单页有几个致命的缺点： ① SEO支持不好，往往需要单独写程序处理SEO问题 ② webapp本身的内存管理难，Javascript、Css非常容易互相影响 当然，这里不是说多页便不能有好的用户体验，不能降低服务器压力；多页也会有变量污染的问题发生，但造成webapp依旧是“发展趋势”，而没有大规模应用的主要原因是： webapp模式门槛较高，很容易玩坏 其实webapp的最大问题与上述几点没有关系，实际上阻碍webapp的是技术门槛与手机性能，硬件方面不必多说，这里主要说技术门槛。 webapp做的好，可以玩动画，可以玩真正意义上的预加载，可以玩无缝页面切换，从某些方面甚至可以媲美原生APP，这也是webapp受到追捧的原因。 但是，以上很容易被玩坏！因为webapp模式不可避免的需要用到框架

在使用zepto时，我先引入zepto.min.js，然后引入fx.js，但是在使用animate函数时，控制台却报如下错误： Uncaught TypeError : this . bind is not a function 解决办法： 1、去github中打开src/fx.js，打开链接，把内容添加到zepto.min.js中，问题就解决了。然后需要什么模块就向zepto.min.js中添加该模块的内容，最后只用引入zepto.min.js。 2、zepto的定制： （1）安装nodejs环境 （2）下载zepto.js并解压 （3）cmd命令行进入解压缩后的目录，执行npm install命令，安装node工具 （4）打开解压后的zepto文件下的make文件，找到target.build 部分，添加需要的模块并保存 （5）cmd执行npm run-script dist，此时zepto目录下会生成一个dist文件，引入dist文件下的zepto.min.js 来源： CSDN 作者： 炸呼呼 链接： https://blog.csdn.net/qq_41181765/article/details/103670083

1、两者的联系和区别(优缺点)，关于原型继承： (1)原型继承在有别于类继承是因为继承不在对象本身，而在对象的原型上（prototype）； (2)每一个对象都有原型，在浏览器中它体现在一个隐藏的__proto__属性上； (3)在一些现代浏览器中可以更改它们：比如在zepto中，就是通过添加zepto的fn对象到一个空的数组的__proto__属性上去，从而使得该数组成为一个zepto对象并且拥有所有的方法； (4)当一个对象需要调用某个方法时，它回去最近的原型上查找该方法，如果没有找到，它会再次往下继续查找；逐级查找，一直找到了要找的方法，这些查找的原型构成了该对象的原型链条； (5)原型最后指向的是null，原型继承，就是将父对像的方法给子类的原型，但是子类的构造函数中不拥有这些方法和属性。 2、关于基于类的继承和原型对比起来，构造函数（类）式继承的不同： (1)构造函数继承的方法都会存在父对象之中，每一次实例，都回将funciton保存在内存中，这样的做法会带来性能上的问题； (2)其次类式继承是不可变的：在运行时，无法修改或者添加新的方法，这种方式是一种固步自封的死方法； (3)而原型继承是可以通过改变原型链接而对子类进行修改的，另外就是类式继承不支持多重继承，而对于原型继承来说，只需要写好extend对对象进行扩展即可。 3、组合模式

代码数量 1.2.0版本代码量为1650行，去掉注释大概1500左右 代码模块 默认版本只包括核心模块，事件模块，ajax模块，form模块和ie模块，其它模块需要自行拓展加入，其中form模块只包含序列化操作和submit提交事件实现，ie模块只包括一点兼容性处理，两者码量极少，因此不做分析 执行结构 典型的即时函数，保证封装性 (function (global, factory) { // amd,cmd的模块化检测 })(this, function(window) { // zepto初始化代码 }) 模块结构 (function (global, factory) { // amd,cmd的模块化检测 })(this, function(window) { // 核心模块 var Zepto = (function () { }(); // 事件模块 ;(function (){ })(Zepto) // ajax模块 ;(function (){ })(Zepto) // form模块 ;(function (){ })(Zepto) // ie模块 ;(function (){ })() }) 架构原理 (function (global, factory) { // amd,cmd的模块化检测 })(this, function(window) { // 核心模块

触发点透事件的原因： 由于两个div重合，例如：一个div调用show()，一个div调用hide()，这个时候当点击上层的div($up)的时候就会影响到下层的那个div($down)，使其也触发相应的事件。 解决办法： （1） github上fastclick库，它也能规避移动设备上click事件的延迟响应，https://github.com/ftlabs/fastclick 将它用script标签引入页面（该库支持AMD，于是你也可以按照AMD规范，用诸如require.js的模块加载器引入），并且在dom ready时初始化在body上，如： $(function(){ new FastClick(document.body); }) 然后给需要“无延迟点击”的元素绑定click事件（注意不再是绑定zepto的tap事件）即可。 当然，你也可以不在body上初始化它，而在某个dom上初始化，这样，只有这个dom和它的子元素才能享受“无延迟”的点击 进一步，对于zepto，如果你打算继续使用它，那么它的tap相关事件已经没有用了，我们可以自己build一个无“touch”模块的zepto，以便减小zepto文件的大小和提高运行效率。zepto的github页面有定制化模块的方法，见 https://github.com/madrobby/zepto 的building部分。