- 博客(53)
- 收藏
- 关注
RSS订阅
原创 Weex 开发注意事项
上一篇简绍了weex 的一些基础知识和开发规范，这篇讲些实战中会遇到的坑，和开发技巧相关东西。1、使用webpack 构建时的注意事项 项目中使用的是webpack 3.X 版本，webpack现在已发布4.X 版本，但4.X 会将js banner(注释)放到单独License文件，这和weex在使用前端框架时需要标记banner不符合，暂未找到解决方案。 // webp...
2019-11-29 19:55:33
577
原创 Weex 样式开发规范总结
样式表和 CSS 规则是由 Weex js 框架和原生渲染引擎管理的。出现性能考虑，Weex 目前只支持单个类选择器，并且只支持 CSS 规则的子集。在Weex里，每一个Vue组件的样式都是scoped。一、盒模型Weex 盒模型基于CSS 盒模型，每个 Weex 元素都可视作一个盒子。盒模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界 margin edge, ...
2019-10-31 20:43:37
1785
原创 Weex 简介
最近项目在改造，尝试使用weex代替原有的H5 和原生页面，提高系统运行效率。期间遇到了很多坑，后面会仔细讲讲，先来看下weex的基本信息。一、什么是weex"weex是一个可以使用现代化的 Web 技术开发高性能原生应用的框架"，这是weex官网对其的一句很简介明了的定义。weex是一个可以利用web 前端开发技术来实现Android/ios 原生引用的框架。二、技术特点1...
2019-09-30 20:12:15
17694
1
原创 Webpack 常用插件总结
讲讲webpack常用的几个插件:1、uglifyjs-webpack-plugin作用：压缩混淆js文件用法配置：plugins: [ new UglifyJsPlugin({ uglifyOptions: { // 压缩配置 output: { // 输出 c...
2019-07-05 15:51:42
721
原创 微信小程序事件小结
最近在写微信小程序，分（总）享（结）一些小的开发技巧。1、事件绑定bindtap 微信小程序里面的事件绑定方法是bindtap，此方法只能指定方法名，不能传参数。 <image src="{{item.imgUrl}}" class="swiper-img" bindtap="golink" data-link-url="{{item.linkUrl}}"/&g...
2019-06-06 10:43:46
224
原创 Vue项目JS脚本错误捕获
今天讲下Vue项目的的脚本错误捕获。一、JS 脚本一般的前端项目错误捕获是在window.onerror中进行处理。比如：/** * 监听全局脚本错误 * @param {String} errorMessage 错误信息 * @param {String} scriptURI 出错的文件 * @param {Long} ...
2018-11-30 20:02:33
6079
2
原创 网页劫持
web前端安全除了平常的XSS、CSRF外还存在一种安全问题就是网页劫持。所谓的网页劫持就是非法的网页被修改拦截了。来看下面的具体解释。什么是网页劫持： 使用HTTP请求请求一个网站页面的时候，网络运营商会在正常的数据流中插入精心设计的网络数据报文，让客户端（通常是浏览器）展示“错误”的数据，通常是一些弹窗，宣传性广告或者直接显示某网站的内容。分类： I、跳转型劫持：用户...
2018-03-07 20:59:48
4258
原创 vue项目中实现返回按钮时遇到的坑
公司开发一个音频项目用的是vue 2.0 ,vue-router 2.0 。在实现返回的时候遇到了一个坑，下面讲讲。一般的返回是直接使用this.$router.go(-1)或者使用window.history.back() 如果当前是第一页 往前已经没有历史记录，使用上面的方法就不能返回 或者 直接返回到了空白页，这时我们就需要进行判断当前页是不是第一页。//验证是否存在记录if (BHi...
2018-01-12 11:37:33
23321
1
原创 vue中使用keepAlive组件缓存遇到的坑
项目开发中在用户由分类页category进入detail需保存用户状态，查阅了Vue官网后，发现vue2.0提供了一个keep-alive组件。上一篇讲了keep-alive的基本用法，现在说说遇到的坑。先说项目中的配置 在App.vue中的设置 在router中增加配置meta 上面这个设置后发现问题了，从categor
2017-12-27 10:40:09
21331
4
原创 Vue组件间通信
今天总结下Vue组件建的通信，主要讲父子props、公共事件eventBus、vuex状态管理三种方式。1、父子组件通信父子组件通信一般通过props、emit方式即可实现。
2020-05-31 23:13:09
211
原创 React 中的key & 启发式算法
1、组件中的Key在开发React时，强烈官方强烈推荐定义Key属性，因为这会有效的提升运行效率。2、启发式算法为什么定义了Key属性可以提升效率？这和React提出的O(n) 的启发式算法有关。1、两个不同类型的元素会产生出不同的树；2、开发者可以通过 key prop 来暗示哪些子元素在不同的渲染下能保持稳定；...
2020-03-25 22:06:55
210
原创 URLSearchParams 兼容性引发IOS 10 白屏问题
在使用公司平台提供的组件时，遇到在6s、7p时出现白屏情况，通过review代码发现平台的组件使用了URLSearchParams和es6 的includes。通过caniuse.com 或者MDN查看URLSearchParams兼容发现，对于低版本的IOS 10.3 （2017 年 3月发布）以下是不支持的。使用URLSearchParams 实现URL拼接源码：expo...
2020-01-17 10:51:21
2855
原创 weex scroller滚动列表实践
weex 提供了<scroller>滚动组件，可以容纳子组件进行横向或竖向滚动。如果组件需要进行滚动，可以将<scroller>当作根元素或者父元素使用，否则页面无法滚动（<list>组件除外，<list>默认可以滚动）。使用<scroller>滚动组件，需要注意点的：不允许相同方向的<list>或者&...
2019-12-26 16:21:09
2236
原创 Javascript 模块化规范
模块化的意思就是在解决某一问题时，采用分类的思想把问题进行系统性分解，从而解决问题的方式。目前JavaScript领域广泛使用的模块化规范包括，commonJs规范、AMD规范，CMD规范。今天简单介绍下这三种开发规范。一、commonjs规范 commonjs出现的背景和JavaScript的函数式编程有关，没有标准化模块化系统、标准库少等。所以commonjs就是为了解决...
2018-08-06 19:48:49
3181
原创 webpack source map详解
1. 什么是source map ? 根据名字可以推测出source map就是我们编译后的源文件映射。当使用webpack 编译前端项目时，配置项devtool控制是否生成source map。2. 分类 source map 文件可分为2类，内联型和外联（独立）型： 内联源映射，将映射的数据之间添加在生成的文件中，在.map文件中的‘sourcesConten...
2018-07-12 17:34:47
4801
原创 vue插件开发
vue插件开发主要是用来实现一些全局方法或者全局对象。Vue的插件要求是实现一个install公开方法。其中此install方法的第一个入参是Vue构造器，第二个入参是是一个可选的选项对象。一、开发以一个Alert的弹窗插件为示例，Alert.js;定义一个全局变量Alert ，var alert;对Alert定义一个全局公开方法install，alert.install = functi...
2018-06-20 16:28:05
889
原创 Kohana介绍
最近换了新公司使用的技术是PHP+kohana+vue，目前是现学现用。网上对Kohana的资料比较少，现在将平时学的记录下来。特点： HMVC，主要依赖于Cotroller、View，Model。3、请求验证请求是否来自内部if($this->internal != Request::instance()) { $this->internal = true; //请求来自内...
2018-05-12 17:12:31
4460
原创 Javascript跨域问题总结
今天来总结下前端跨域问题的解决方案，网上有很多这个问题的总结和描述了；跨域问题也是前端的一个老问题了，现在就来简单聊聊。 同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响，它要求请求的协议，端口，域名一致。如果请求的协议，端口，域名任何一个不一样，则出现跨域问题。同源策略的限制有2...
2018-04-10 18:46:08
270
原创 mongDB+nodejs的实践
前面写了一篇文章介绍mongodb的基本用法，很简单。现在来看下利用Nodejs的express框架搭建的一套后端服务器，数据据采用的是mongodb。项目接口如下前端用的Vue框架搭建的，这里不讲主要是讲后端Mock部分如何使用MongoDB。1、安装MongoDB 如果使用npm 管理工具的话，执行 npm install --save connect-mongo mongo...
2018-03-09 16:16:28
335
原创 ES5中的几种继承方式
原生javascript中的继承，是考验对JS掌握程度一个重要反馈，现在来总结JavaScript中的几种继承方式，并分析其利弊。主要有三种方式：构造函数方式、原型链继承方式、组合继承以及寄生组合继承方式。一、借用构造函数 functionSuperType(name){ this.colors=['red','blue','green']; } ...
2018-03-07 23:40:51
655
原创 Flux简介
什么是Flux Flux是Facebook用于构建客户端Web应用程序的一个系统架构。它通过利用单向数据流来补充React的可组合视图组件。它更像是一种模式，而不是一个正式的框架。Flux将一个应用分成四个部分。View： 视图层 Action（动作）：视图层发出的消息（比如mouseClick） Dispatcher（派发器）：用来接收Actions、执行回调函数Store（数据层）：用来...
2018-03-05 11:23:41
16216
原创 React简单概览
学习React 一段时间了，现在总结下个人对React的认识。什么是React React是Facebook推出的一个高效的javascript库，用于构建“可预期的”和“声明式的”Web用户界面，可以用来构建因数据不断变化的大型项目，React 本身只涉及UI层。React的特点 个人认为React有以下几个特点： 组件化 React可构造多种类...
2018-03-04 12:12:07
353
转载 剖析 Promise
最终实现的Promise代码，详细过程情况文章最后的原文链接。// 例1function getUserId() { return new Promise(function (resolve) { // 异步请求 Y.io('/userid', { on: { success: function (i...
2018-02-24 14:16:47
138
原创 HTML5中的canvas简介（一）
HTML5中新增了一个canvas元素，可以通过JavaScript动态的在这个元素上进行绘图。除了基本的绘制2D图形，canvas还提供了名为webGL的3D上下文。 一、基本用法： <canvas width="200" height="200" id="testcanvas"> </canvas> 1）使用canvas必须得设置...
2018-02-10 17:31:30
265
原创 Nodejs笔记（一）
Nodejs作为后端javascript运行的运行平台，Nodejs没有改变javascript语言本身的特性，依旧基于作用域和原型链，同时保留了前端javascript的接口库。一、特点： 1、异步IO，Nodejs中基本的IO操作都是异步的，和前端发送Ajax类似；如文件读取，发送请求。 2、事件与回调函数，Node中基本操作都是基于事件，回调函数用来处理异步调用返回的数...
2018-02-09 17:09:18
276
原创 cookie,sessionStorage,localStorage的区别
网上讲这方面的很多，自己总结了几点：1、相同点：数据都保存在浏览器，同源共享。即相同的域下可以修改读取。2、不同点： 大小数量： IE6或更低版本最多20个cookie，IE7+可以有50个。 cookie大小4KB左右，超过部分会被截掉。sessionStoage，localStoage大小可达5M。 传输：每次请求cookie都会发送到服务器，然后回传给浏览器，sessionS...
2018-01-19 17:32:50
1024
原创 ES6中的let和var的区别
ES6中新增了let命令用来声明变量，let和var 声明的变量有什么区别呢？现在来讲解总结下。1、基本用法：和var 命令类似，直接使用 let 变量 = 值。{ let a = '1'; var b = 'a';}a // error: a is not defined.b // 1 2、有效作用域：let声明的变量只在其命令所在的代码...
2018-01-19 17:03:26
1472
2
原创 javascrit 中事件Event（三）— HTML5事件
这篇主要概述HTML5事件，在HTML5中的事件中对Event进行了扩展，新增了一些新的事件，如contextmenu，beforeunload，DOMContentLoaded，readystatechange事件等。下面讲解重点用的多的几个事件。1、beforeunload：在浏览器关闭（卸载）之前触发，可以通过它取消关闭（卸载）并继续使用原有页面。例：关闭页面前弹出提示框提示...
2018-01-09 15:08:00
1071
原创 javascript 中的事件Event (二) — 事件类型
前面介绍了，javascript中的事件流，事件处理程序以及事件对象Event包含的属性和方法。这篇开始介绍Event的类型，包括常用的UI事件，焦点事件以及鼠标事件等。一、UI事件 UI事件是页面级事件，包括的基本的事件有如下： 1. load : 当页面完全加载完后（包括图片，js文件，css文件等外部资源）触发window上面的load事件。 ...
2018-01-03 09:59:36
722
原创 javascript中的事件Event（一）— 事件流
一、Event基本信息1、事件流：描述的是从页面中接受事件的顺序 IE的事件流是事件冒泡流，Netscape的事件流是事件捕获流。2、事件冒泡 IE的事件流叫做事件冒泡(event bubbing)，即事件开始时由具体的元素接受，然后逐级向上传播到较为不具体的节点。如果点击div。则事件流如下： div --> body --> html --...
2017-12-27 10:44:29
393
原创 Array的基本操作
1 、合并操作 concat : var C = A.concat(B); 用A数组合并B数组，生成新的C数组。 循环插入 使用Array#push() 方法 // 将数组 `b` 插入 `q` for (var i=0; i q.push( b[i] ); }
2017-12-01 14:19:44
267
原创 双向数据绑定
是什么： 基本含义就是数据的操作反映到数据，数据的改变实时展现到界面。原理：实现响应式或双向数据绑定分三个步骤： 1)View中UI元素和Model中的data中的数据绑定 2)当UI元素内容变化时，data中的数据同步变化。即View ==>Model 3)当Model中的data数据变化时，View中的UI元素同步变化
2017-11-30 18:03:46
342
原创 axios遇到的坑
axios 可以使用一个config.js 配置文件来管理它的请求信息。具体配置不细说，使用如下。一，使用配置方式GET方法： let promise = axios.get(url, config).then(...).catch((error) => {...}) ;POST方法： let promise = axios.post(url, data, co
2017-11-30 17:50:07
3200
原创 MongoDB简介
一、基本操作 查询所有数据库列表 ： show dbs 切换到test数据库 ： use test 创建数据库blogdb : use blogdb 创建一个集合 : db.createCollection(“users”) 添加一个文档 : db.users.insert({“name”:“admin”,“password”:“111”}) 查...
2017-10-09 13:46:15
314
原创 nodejs中的http简介
Node.js 提供了http模块分为高效的HTTP服务器和简易的HTTP客户端。1）HTTP服务器 1.http.Server是http模块中的HTTP服务器对象。 2.使用http.createServer创建一个http.Server的实例。 3.http.Server的事件 3.1 request ：当接受客户端请求，提供req和
2017-09-14 14:24:22
346
原创 express简介
Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。Express 框架核心特性： 1）可以设置中间件来响应 HTTP 请求。 2）定义了路由表用于执行不同的 HTTP 请求动作。 3）可以通过向模板传递参数来动
2017-09-14 14:21:36
1025
原创 XSS跨站脚步攻击及防范
XSS(Cross Site Script)跨站脚本攻击。它指的是恶意攻击者往Web 页面里插入恶 意html 代码，当用户浏览该页之时，嵌入其中Web 里面的html 代码会被执行，从而达到侵害用户信息目的。原理： 攻击者先构造一个跨站页面，利用script、<IMG>、<IFRAME>等各种方式使得用户浏览这个页面时，触发对被攻击站点的http 请求。如果被...
2017-09-04 17:35:40
510
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人