微信公众平台前端组件方案及其优化

微信公众平台前端组件方案 及其优化关于我脳微信公众平台2/27组件脳微信公众平台3/27早期123 Link href=MA456789101 /*2简单123456789101112alerttHell World11)/need C.isC.blablafJ .ink href=MB/ od脳微信公众平台5/27问题乱靠手工维护=没法维护上线经常出问题，经常回退或者补上出现过大量的htmldecode等函数的复制粘贴页面上冗余大量无用的外链js新加进来的开发不敢乱删冗余的东西，一直在叠加目标修改哪个文件就上哪个文件自动打包方案减少手工维护第版前端的依赖管理问题，用AMD/CMD优点：不用手工维护依赖关系，可以分模块上线缺点：请求太多1/*2* A.js3*/4define(liA.jsl X-js11, function5alert (Hell WorldM)；67/need C.js8var C = require(nC.js11);9C.blabla();10第版组件二二 JS + CSS +HTML问题：require(a.html)跨域 解决：伪装成js文件require(”Ahtmljs“)；1 /A.js2 define(HA.jsH? ,C.js,? function3 var html require(uA.html)j4 var css require(Acss);5 alert(Hell Woridn);6 |7 /need Cjsvar Crequire(Cjs);9C.blabla();10 )；1 define(A.html.js function7ret . MHello World!M;3 )；脳微信公众平台9/275 COOT5UIFJWUojravU1 sn-S FV?wrwLZ/6“3dUXH他:“0X闪86021/3甲0!卩0G21355UIIUX|J讪 a“ZAXQ阀&XK139z斛96SR6W 艸 og/dp00213JX6(Kl61羽F8HK伽另vdio5V.c(AKqwKM?农139Z91se0a0呦3 妙!Qd?002曲Hnunaxr?粮讥刁ldu35C.pAKqwiKMff00?X39SUIR9 99Kfc；勺 wM 冲 o洌3g!Qk002皿砂血nu 2ffiiroi飓为蹲5?idix5WP(AoqFJ|ddcCO?139z卽SUSFV?莎首詁逊 a0“!3W!|ddp0025SUIKE：“LRidwaerF.voqonddrE130Z6Failjp5T*5ldmsfrl,ucQfrDiddfr00?BOSUIart亦讥”idiu?e?r(.voarj!rddr(X2139CCI0T2-|U3仍少“Mt讥NP137CU00?Df“冷tr3ZSLas：eids 畑 rbwggdrcar130CCGIIX2IWJsuitrSMf?RETO：LOSC/Cl.U&9l0dC奴mH4I9EQidmaeeGuoaroirddfKGy哋r?朋:FO父Hgg 幼3W!2dp002130ICw羽mId LOH. 科心0 屮 2奴13!ggi9H01Xt：Mxggw“aVKQdP02130698农Sia“ZuogEr00?13!购2 669X901XfiMox工86053妙!01800213Dtoaxio?叫98RC臧讥Nldtoswr(AoqCTitcW?侬139t(3699X?SfXgHoxHias 巧3W!QdP02DDn*H98)1 (Tt联册W5诃8珂.9如01“!应k农139z“ffirr泯仰ldjx)砂幼s”)!Qdp戯13呻9am(F心ldujswr(A*oqwiKMp00?13909062%smFtfc；习Cgpw 幼 3妙炉力00?X3P皿nu/6airs殛;好w畑n(vo 眄 0dCCE139iceotii2%am丙:可討逊 ao&gog”还OOZaa探如SUIWa:irridi/jjerl.voqonddraz13D2紳a,ui*9airsxSe”idixjswrGvoqrofdrcxz13DioecctcrMT#sy?KTTOLOSC.C .U&40l|ddCoc?135sw“airtrog：fe讪 G“WaEyZOK139:啊眾F?idg 口 Huog 口 ck00?13Sw毗|dmcp(.uoq0oiddp002130:uigf少61lrroLO：c.Ci.u&Qi|ddc农130xftsorzgy臥【血油吟ggw“冲w/dp130hub磴w妙Ss 汕.叫 uoqeRdr00?135卩【F96 盃丄 poll C arzi I p3ps9H 6*T /5 COOT5UIFJWUojravU1 sn-S FV?wrw第二版脳微信公众平台12/27脳微信公众平台#/271234567891011121314151617181920 21-静态打包：把页面依赖的全部 组件C.js、A.js、B.js打包成 page.js优点：请求少，提高加载速度缺点：上线又不安全了* Page.js*/C.jsdefine(C.js, ，function() blabla :function(););/A. jsdefineCds1, ,C-is,l, function() alertCHell World);/need C.jsvar Crequire(nC.js);Cblabla(););/B.jsdefine(B.js, ，function() atblabla:function();)；脳微信公众平台#/27第三版第四版为了增加缓存率，我们文件加了版本号：seajs发送的请求不知道版本号seajs.useCpage.js)映射表!发送请求前查表Module = ,page.js,:,pagel23cab445.js脳微信公众平台15/27提前Combo动态打包，请求减少可分模块上线第五版page.jsA.jsC.jsB.jsD.jsE.js脳微信公众平台17/27F.js23h ref=l,ht tp: /res wx qq com/A css .B.css1I1 I456sci ipl src=,lhttp:/res.wx.qqcom/F72脳微信公众平台#/27第六版-多个项目之间共享公共组件 独立SVN维护构建前svn co到对应的模块目录Wap上的方案没压缩前 seajs.js大/20K , 919行 wap_cmd.js大小2K , 45行/defined格符合三个参数vor define function (id, deps, factory) (cacheid)-.7-三空冃return;/其实这里dops是反爲的参数，为了兼容保持此参数！ cacheidfactory;；var require function(id)(id cacheid)/如果纭el. ! null;var mod cacheid;(mod function0 status id )/：/mod的格式是functionCrequire exports, module) ,跟原本的seajs兼容，但是我们这里只是require这个变互 nx)d cache id mod(require);statusid true;rctn mod;脳微信公众平台20/27&9L呱卷蛊compile预编译：国际化/去注释 编译：提取id/依赖optimize组件编译过程优化：压缩js ,雪碧图合并（二倍图） 链接：HTML里提前Combo 后处理：拷贝到目标目录脳微信公众平台24/27脳微信公众平台#/27link脳微信公众平台#/27预编译_国际化国内版跟海外版的不一致，解决方案：生成不同语言包的静态文件，独立 部署,提高运行时性能。国际化： 你好”)或者丄你好) _(”S,你好；raphealguo)国际化特有逻辑：if Czh_CN* = -Czh.CN)r中文平台特有逻辑V else r海外平台特有逻辑7endif开发上一些原则Web工具方法诸如：htmlDecode等多实例的类诸如：Checkbox等-构造函数参数是对象,组件的向前兼 容非常容易解决1工具方法：A.js2define(WiA.function()3return 4API1: function5/PI2: function ()678);9多实例：B.js10define(B.js, ， function()11var B function(opt)12Bprototypemethodlfunction();13Bprototypemethod2function();14reTurn B;15)；-小组件组合成复杂的组件,没继承Wap流量大的页面用原生J s实现重要的资源内联（红色：夕卜链，绿色：内联）利用PC端计算资源，减少w叩端跟后台计算资源，例如图文消息 的图片懒加载一在PC编辑保存时前端替换img src变成Vimg data-src - w叩页滚动到图片位置再把datasc的值填到src部署上游对接CD N文件名后加版本号 HTTP的max-age设置长一点,提高缓存率灰度t fA.html.old al.js脳微信公众平台31/27回退A.html.oldA.htmla2.js脳微信公众平台33/27下一步？ Combo请求太长?本地缓存JS模块？增量更新？1 234S67上个页面诱求Fjs ffi 0. js8/local9torage.setItemC，F.jsM functionOfalertCrFV);*);9/localstorage.setItem(0.js*, fvnction()alert(0)101112vor xedjnods (-F.js-, *C.js “D.js”，从缓存里找到F.jsJ&D.js,发现C.jS跟AjS没拥載13get _oeed_l oad_j s (need jod,);14dxt/mect*srt=http:/rQS.wx.qq.con/C1516 i 17脳微信公众平台35/27Q&A谢谢脳微信公众平台37/2728/27脳微信公众平台29/27脳微信公众平台30/27脳微信公众平台31/27脳微信公众平台