随笔分类 - 个人总结
摘要：问题一，分辨率Resolution适配：不同屏幕宽度，html元素宽高比和字体大小，元素之间的距离自适应，使用rem单位。问题二，单位英寸像素数PPI适配：使用rem单位，文字会发虚。段落文字，使用px单位，用media query或js来适配。标题文字可以直接使用rem单位。问题三，设备像素比例D...
阅读全文
摘要：一、模块划分纵向->第一层（业务无关）：移动端图表库，jQuery，手势库，css动画库纵向->第二层（业务相关）：分享组件，loading组件，纵向->第三层（业务逻辑）：页面组成，页面交互，页面展示，业务流程纵向->第三层->页面组成：头部栏（返回，标题，分享），内容区纵向->第三层->页面交互...
阅读全文
摘要：今天群里有人发问，进入百度翻译http://fanyi.baidu.com/#auto/zh/，输入word-wrap，发现页面错乱。寻找错乱原因。上图开始查找原因：1.从请求入手从chrome的network面板里，能很容易找到翻译请求v2transapi。js语句发起请求，在chrome里能看到...
阅读全文
摘要：几个属性：-webkit-perspective:0;景深（默认0），-webkit-perspective-origin:center center;景深基点（默认中间），-webkit-transform-style:preserve-3d;建立3D空间，-webkit-transform-or...
阅读全文
摘要：1.一开始想各种抽象，菜单栏，头部抽象成组件；甚至业务逻辑也抽象成组件。后来发现，业务逻辑过早抽象成组件，反而增加开发成本。不如，先弄清楚业务逻辑，用最普通的写法实现，然后再考虑抽象。2.MVVM的理解，Model就是最初始的数据，从服务器端获取来的数据，未修饰。View-Model，把Model处...
阅读全文
摘要：一个全能的前端可以做如下事情：1.产品官网，切稿，浏览器兼容性，相关页面特效。2.产品后台，UI框架使用，图表插件，各种web插件使用，前后端通信，相关页面特效。3.H5页面，也分CSS3特效，既移动浏览器兼容性，响应式页面，单页面。4.web组件开发，看各种js源代码，jquery源代码，js框架...
阅读全文
摘要：布局1.定高定宽完全按照设计稿/2的比例，然后整体居中。当急着出页面，或者不适合变宽的时候，选择这个方式。参考网站http://m.tmall.com2.定高变宽有些内容要考虑手机浏览器的不同宽度。比如菜单，栏目列表等等。常用布局手段，display:-webkit-box;或者inline-blo...
阅读全文
摘要：s表达式 + 1 2 3普通表达式 1+2+3json表达式{ +:[1, 2, 3]}优点，一个运算符，无限个参数s表达式 * (+ 1 2) 3普通表达式 1+(2*3)json表达式{ *:[{+:[1,2]} , 3]}优点，阅读代码的时候，无需记住运算优先级。普通表达式则要记住运算优先级s...
阅读全文
摘要：手工布局模块化，先搞定模块样式，再通过布局样式，把模块连接起来，成为一张页面。也就是说，布局样式其实是页面的框架，模块样式是框架预留的坑位。两者可以独立搞。接下来的问题是，跨页面使用布局模块，如何修改一个布局模块样式，体现到各个页面。以前是通过后端语言来实现。本质上，还是一个模块修改 能映射到引用该模块的各个页面。也就是开发的时候，一个模块一个css文件引用；发布的时候，各个css文件合并。复杂的样式变化，得靠CSS预处理语言了。手工前端代码分层Model层后台json数据格式，经过数据格式转换，转化成适合渲染html的数据格式，也就是Model->Viewer Model。业务逻辑层页
阅读全文
摘要：1.css hack:root #test { background-color:purple\9; } /*ie9*/[;color:#f00;]; /*Webkit(chrome和safari)*/color:#666\9; /*IE8*/*color:#999; /*IE7*/_color:#333; /*IE6*/2.垂直居中单行文字内容：line-height 和 height相等，加上overflow:hidden;绝对定位居中：position:absolute;top:50%;margin-top:负元素高度;box布局居中：display:box;box-align:cent
阅读全文
摘要：在前端把图片编码成base64位，通过jsonp post方式把数据传输到后台，后台返回处理结果。
阅读全文
摘要：我认为，程序开发，就是管理代码依赖关系。正交封装代码，可以解耦复杂依赖关系。所谓正交三范式，如同数据库设计三范式，如下:第一范式，运算过程相似的运算单元要消除，消除方法是封装成函数。第二范式，不同参数，多次调用相同函数，使用迭代法。第三范式，一个函数只做一件事，做两件事的是两个函数。相当于，列是运算单元，行是函数调用。一张数据表就是一个程序。这其实是表驱动编程的本质，解决了代码依赖冗余。这些是自底向上。下面是自顶向下。1.布局布局模块化，分离出模块自身css和页面布局css。不同网页，共用一块html代码，通常需要后端MVC框架的HTML模板帮助。现在可用前端MVC框架的模板来实现。2.交互模
阅读全文
摘要：1.草珊瑚的css基础2.草珊瑚的常见移动网站布局3.草珊瑚的前端项目的布局部分，交互部分，通信部分4.草珊瑚的常见CSS经验技巧
阅读全文
摘要：首先要了解如下概念：viewport，窗口大小，containing block，block formatting context，inline formatting context，dirction和unicode-bidi，display和float以及postion的三者关系，盒子模型。一.viewportviewport是你所看到的窗口。它有两个重要属性，一个是css像素，另一个是设备像素。设备像素由分辨率决定，css像素由开发者决定。设备像素和css像素的关系有1.重叠，即1css像素等于1设备像素。2.缩小浏览器，一个设备像素覆盖多个css像素。3.放大浏览器，一个css像素覆盖多
阅读全文
摘要：json数据->html结构->css样式->js交互->页面通信可以把json数据当作参数，html模板当作参数，放入一个约定函数，来生成html结构。这样可以防御json数据结构的变化，或html结构变化。也就是说，函数就是映射。映射就是表，从而函数就是表。代码流程有顺序，分支，循环。其中分支和循环，存在映射。其中循环还存在自映射。既然有映射，那么它就是函数。分支，循环都是函数。、怎么写出，可扩展，易维护的分支，循环语句呢？用表。我们崇尚代码生成代码，函数生成函数，这样就不容易写出出错的代码。于是，我们用函数生成表，用表生成函数。
阅读全文
摘要：如果是大公司的普通程序工程师，那么，代码驾驭力很重要。驾驭代码，如同带兵，如何像韩信，多多益善。大部分情况是，产品提出需求->编写代码->产品需求变化/原需求上加新需求->改写代码。还有产品发布日期。需求变化是一个不争的事实，需求经常变化更是司空见惯。重构，设计模式。等等，还有两个关键字，协作，清晰。看着自己努力打造的代码，被推倒；或者一想到自己的亲生代码，要进行大手术，实在是一件不爽和痛苦的事。不爽在于，原先明明说好要那样做，为什么现在又变了(产品人员也很无奈，现实逼的)！你自己产品没说清楚，现在才来纠正（太多东西，产品人员没注意到）！痛苦在于，按照我现在写的代码结构，照产
阅读全文
摘要：首先是官网下载ST2，然后是下载插件，高亮显示标签BracketHighlighter，html代码格式化插件Tag，JavaScript格式化JSFormat,html代码操作插件Emmet。如果在安装Emmet插件遇到缺少pyv8问题，那么去这里https://github.com/emmetio/pyv8-binaries，有解决方法。1.常用快捷键是Ctrl+Shift+P，使用ST2的命令行，再敲入install 就能安装插件了。但是xp不能这样直接安装。2.Ctrl+P是已打开的标签搜索。在搜索的时候加second@get_function，会定位到second文件里面的get_f
阅读全文
摘要：1.代码逻辑冗余如果说代码记忆度为性，代码执行效率为价，不追求完美，而追求性价比的代码。那么，functionbubble_sort(array){vari,j,temp,array_length=array.length;for(i=0;i<array_length;i++){//第n次for(j=0;j<array_length;j++){//筛选出最大值，调换。虽然有重复比较，但是上一次循环已经得出最大值，所以不怕重复比较。if(array[i]<array[j]){temp=array[i];array[i]=array[j];array[j]=temp;}}}ret
阅读全文
摘要：简单工厂模式：原来是，function A(){console.log("A")}function B(){console.log("B")}function C(){console.log("C")}现在是，var a=factory("A");a();输出Avar b=factory("B");b();输出B策略模式：原来是，function A(){console.log("A")}function B(){console.log("B")}func
阅读全文
浙公网安备 33010602011771号