Category Archives: Frontend

Angular、Vue、React和前端的未来

最近社区针对框架的争论，从发文互怼再到粉丝站队再到大漠穷秋准备离职，令人唏嘘不已。不知从何而起，前端圈已经逐步变成了前端娱乐圈。越来越多的人开始站队 Angular、Vue、React，仅仅围绕这些库或者框架进行前端技术讨论，这实在不是什么好的现象。其实我想基于我个人的经验聊下前端的演进和未来，希望可以贡献微薄的力量，消除一些我个人认为的前端社区不太好的风气。注意：以下只是我个人对于前端和业务的理解和感悟，不代表任何其他人和我所在公司、团队的观点，意见不同欢迎一起讨论。 ======== 以史为鉴，想要知道前端的未来，必须知道前端的过去，抽象前端发展的规律。前端的历史前端的发展始终伴随着端的发展。 PC 端的兴起 06 年左右国内互联网公司开始有了前端工程师的概念，原因很简单，是因为上网访问网页的人数增多，大型互联网公司为了提升用户体验专门剥离了这样一个岗位来解决相关问题。这是第一批专业前端工程师的起源。在这几年中的发展，进行了很多轮的技术方案、框架、浏览器的演进。比如 jQuery 兼容性库，再到 Require.js 异步加载，再到现在 React、Vue、Angular 等附带编程思想的前端库以及前后端分离、前端构建器、样式预处理器等。这些演进都是随着 PC 端的用户量的增多和业务复杂度的提升，为了用户体验和开发者体验而进化的。移动端的兴起 09 年左右，智能手机的兴起导致了移动端开发的热潮。人人拥有智能手机，这种特殊的端的特性，也产生了新的业务形态。因此无线前端相关需求开始爆发，无线前端开发、iOS/Android 工程师等需求量非常大。这几年中的发展，先从最初把 PC 端页面放在手机上渲染，再到出来响应式设计的概念，再到专门做无线端页面，再到独立客户端和 Weex、React Native 这些跨终端的方案。也是出现了非常多的技术演进，这些演进不难看出也是因为用户量的增多和业务复杂度的提升，为了用户体验和开发者体验而进行优化的。 PC 端的衰落 14 年左右，其实 PC 端颓废之势早已显现，但在双十一下被放大。因此阿里系前端在这个时间点附近就开始弱化 PC 端前端的投入。以前 PC 端业务，在无线端流量更大的直接被下掉，核心链路的 PC 端业务能用就可以了，不再做效果、功能迭代优化。甚至很多业务直接不做 PC 端只做无线端。业务指标也从 PC 的 PV、UV 变成了客户端的 DAU 等指标。在这个时间，只做 PC 端的前端，毫无无线端经验的前端，将会慢慢丧失竞争力。PC 兼容库 jQuery 之流也渐渐被替换废弃，因为 PC 的业务很少花费精力做兼容性测试，甚至目前我们团队的业务从来都只测试最新版 Chrome。可以看到，随着端和业务形态的变化，很多前端演进的产物会逐步被替换废掉。移动端的衰落移动端目前还没有衰落，但一个端只要兴起，就会有衰落的时候。总会有新的、更好的、更高效的端来替代老的端。但这个时机是难以预测的。前端的未来回顾前端的历史，前端总是伴随的端的变化而变化：端的出现 -> 业务场景的落地 -> 需要端的开发者 -> 端开发者学习、演进 -> 端的开发效率提升 -> 新的端出现 -> 端的没落 -> 端开发者转领域或者被淘汰这也就是为什么前端需要学习这么多东西，有这么庞大的体系的原因。每一个端都有它自己的特性。比如未来可能会火的 VR、AR 端，它们的特性就不同于二维平面的移动端，掌握 VR、AR 端的开发就需要新学习很多三维图形图像以及图像识别领域的东西。因此如果你想要知道前端的未来，你需要预测端的发展。但端的发展是很难预测的，回到 06 年，有谁会想到会有智能手机，并开创了移动端这个端？而现在火热的 […]

龙生 17 Oct 2019

View Details

js中的Math.random()

random() 方法可返回介于 0 ~ 1 之间的一个随机数。这里有几种用法： 1.从数组中随机获取成员 var items = [12,a,9,p,8]; var randomItem = items[Math.floor(Math.random() * items.length)]; 2.生成从0到指定值的数字数组 var numbersArray = [] , max = 100; for( var i=1; numbersArray.push(i++) < max;); // numbers = [1,2,3 … 100] 3.生成随机的字母数字字符串 function radomcharnum(len){ var str = ""; for(;str.length<len;str+=Math.random().toString(36).substr(2)); return str.substr(0,len); } 3.得到指定范围的整数(需要Math.floor()或者parseInt()或者Math.ceil()) var randomNum = Math.random()*5; console.log(parseInt(randomNum));//1 console.log(Math.floor(randomNum));//0 Math.floor(Math.random()*(max-min+1)+min);//max为期待的最大的数，min为最小的数使用parseInt也是可以的。 from:https://www.cnblogs.com/Catherine001/p/7265597.html

龙生 12 Oct 2019

View Details

一个axios的简单教程

首先要明白的是axios是什么：axios是基于promise（诺言）用于浏览器和node.js是http客户端。 axios的作用是什么呢：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。特点：支持浏览器和node.js 支持promise 能拦截请求和响应能转换请求和响应数据能取消请求自动转换JSON数据浏览器支持防止CSRF（跨站请求伪造）这里你一定会想promise是什么东西，以下是promise的个人理解： promise是什么：是一个对象用来传递异步操作的信息，它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的api，可供进一步的处理。 promise的作用：Promise的出现主要是解决地狱回调的问题，比如你需要结果需要请求很多个接口，这些接口的参数需要另外那个的接口返回的数据作为依赖，这样就需要我们一层嵌套一层，但是有了Promise 我们就无需嵌套。 promise的本质是什么：分离异步数据获取和业务基本使用方法： axios执行GET请求 GET 请求方法执行POST请求 POST请求方法执行多个并发请求多个并发请求 get和post都是基于promise的所以写法上很相似，是用then和catch，使用这种方法来进行发送请求。还有一个axios重要的知识点就是拦截器拦截器在请求或响应被 then 或 catch 处理前拦截它们（拦截器可以做什么：在请求或者响应时拦截下来进行处理）拦截器分为请求拦截器和响应拦截器请求拦截器（interceptors.requst）是指可以拦截每次或指定HTTP请求，并可修改配置项。响应拦截器（interceptors.response）可以在每次HTTP请求后拦截住每次或指定HTTP请求，并可修改返回结果项。拦截器的写法拦截器的工作流程：拦截器工作流程移除拦截器移除拦截器自定义 axios 实例添加拦截器添加拦截器取消使用 cancel token 取消请求可以使用 CancelToken.source 工厂方法创建 cancel token 参考资料：axios中文文档 from:https://www.jianshu.com/p/13cf01cdb81f

龙生 10 Oct 2019

View Details

vue 页面跳转传参

页面之间的跳转传参，正常前端js里写 window.location.href="xxxxx?id=1" 就可以了；但是vue不一样需要操作的是路由history，需要用到 VueRouter, 示例：常用的场景是：列表页点击“查看”按钮，跳转到详情页。在列表页（list.vue）按钮点击事件里写上

detail(row) {

this.$router.push({ path: "detail", query: { id: row.id } });

},

运行时浏览器地址栏展示： http://localhost:8080/#/orders/detail?id=31 在详情页(detail.vue)里写上

let id = Number(this.$route.query.id);

即可获取到参数id了。解析先看看 route是什么,在vscode f12后看到

declare module "vue/types/vue" {

interface Vue {

$router: VueRouter;

$route: Route;

}

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。 VueRouter官网传送门 route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等其中 params {}对象，包含路由中的动态片段和全匹配片段的键值对用来实现 /order.detail/1 query {}对象，包含路由中查询参数的键值对。用来实现 /order/detail?id=1 from:https://www.jianshu.com/p/45163cb031be

龙生 06 Oct 2019

View Details

pdf.js使用方法

项目中显示 pdf 的功能,浏览过不少的技术帖,都不太理想,花了点时间研究了下pdf.js正确使用方法,总结下:1.防止自己忘记 2.工作留有痕迹 3.供大家参考借鉴

pdf.js: 将 PDF 文件解析后生成一张 .png 图片,利用 canvas 元素显示在页面上,此方法不推荐使用,

呈现在页面上的pdf会模糊,目前没有找到有效解决办法,给爱钻研的小伙伴提供个思路,在pdf.js官网上有这样一句话 :

Each PDF page has its own viewport which defines the size in pixels(72DPI) and initial rotation.

猜想如果可以改变默认72DPI就可改变呈现的清晰度

上面是最开始探索 pdf.js 使用的方法时的猜想其实 pdf.js 真正使用方法非常简单 (一行代码就可以搞定) pdf.js使用步骤一. 到官网下载 pdf.js 插件并解压 (地址: http://mozilla.github.io/pdf.js/ ) 1: 进入官网 2 : 选择稳定版下载 3: 下载至本地 4 : 解压 5:创建PDF.js文件夹并将刚解压的文件放入其中二.将 PDF.js 文件夹放到项目服务器根目录下小伙伴可能会有点头晕先跟着做稍后解释 1.登录项目服务器 2.登录服务器后将 PDF.js 文件夹拷贝到项目服务器的根目录三. 使用 pdf.js 显示 pdf 文件 1.打开浏览器新建一个标签页输入你的项目服务器地址这里我用我的服务器地址进行演示 10.0.0.5 2.当你访问项目服务器根目录(10.0.0.5) 能够看到 PDF.js 这个文件夹说明这一步已经完成了 3.在PDF.js 中依次打开 web 文件夹 viewer.html 文件 (PDF.js/web/viewer.html) 4.随后会显示截图上的 […]

龙生 04 Sep 2019

View Details

在线查看PDF文件,pdf.js使用方法

PDF.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件，非常强大，能将PDF文件渲染成Canvas。PDF.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，一个负责API解析，一个负责核心解析。首先引入pdf.js文件<script type="text/javascript" src=’pdf.js'></script> PDF.js大部分用法都是基于Promise的，PDFJS.getDocument(url)方法返回的就是一个Promise：

1 2	PDFJS.getDocument('helloworld.pdf').then(function(pdf) { });

PDF的解析工作需要通过pdf.getPage(page)去执行，这个方法返回的也是一个Promise，因此可以去逐页解析PDF：

1 2	pdf.getPage(1).then(function(page) { });

官网地址：http://mozilla.github.io/pdf.js/ 渲染页面各PDF页面有它自己的视窗，它定义了像素大小(n.72dpi和初始旋转。默认情况下，该窗口将缩放到PDF但是通过修改视图可以更改此操作。当创建了视图时，还会创建一个初始转换矩阵，它考虑到期望的规模、旋转，并转换坐标系统(0点)PDF文档底部左边，而画布0是左。

var scale = 1.5;

var viewport = page.getViewport(scale);

var canvas = document.getElementById('the-canvas');

var context = canvas.getContext('2d');

canvas.height = viewport.height;

canvas.width = viewport.width;

var renderContext = {

canvasContext: context,

viewport: viewport

};

page.render(renderContext);

1	还可以自定义canvas大小：

var desiredWidth = 100;

var viewport = page.getViewport(1);

var scale = desiredWidth / viewport.width;

var scaledViewport = page.getViewport(scale);

官方给出的示例:

ar url = '//cdn.mozilla.net/pdfjs/helloworld.pdf';

PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

var loadingTask = PDFJS.getDocument(url);

loadingTask.promise.then(function(pdf) {

console.log('PDF loaded');

var pageNumber = 1;

pdf.getPage(pageNumber).then(function(page) {

console.log('Page loaded');

var scale = 1.5;

var viewport = page.getViewport(scale);

var canvas = document.getElementById('the-canvas');

var context = canvas.getContext('2d');

canvas.height = viewport.height;

canvas.width = viewport.width;

var renderContext = {

canvasContext: context,

viewport: viewport

};

var renderTask = page.render(renderContext);

renderTask.then(function () {

console.log('Page rendered');

});

}, function (reason) {

console.error(reason);

});

另外较大的PDF文件可以用base 64编码方式加载，例如：

var pdfData = atob(

'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +

'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +

'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +

'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +

'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +

'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +

'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +

'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +

'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +

'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +

'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +

'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +

'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');

PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

var loadingTask = PDFJS.getDocument({data: pdfData});

loadingTask.promise.then(function(pdf) {

console.log('PDF loaded');

var pageNumber = 1;

pdf.getPage(pageNumber).then(function(page) {

console.log('Page loaded');

var scale = 1.5;

var viewport = page.getViewport(scale);

var canvas = document.getElementById('the-canvas');

var context = canvas.getContext('2d');

canvas.height = viewport.height;

canvas.width = viewport.width;

var renderContext = {

canvasContext: context,

viewport: viewport

};

var renderTask = page.render(renderContext);

renderTask.then(function () {

console.log('Page rendered');

});

}, function (reason) {

console.error(reason);

});

pdf翻页处理:

// If absolute URL from the remote server is provided, configure the CORS

// header on that server.

var url = '//cdn.mozilla.net/pdfjs/tracemonkey.pdf';

// The workerSrc property shall be specified.

PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

var pdfDoc = null,

pageNum = 1,

pageRendering = false,

pageNumPending = null,

scale = 0.8,

canvas = document.getElementById('the-canvas'),

ctx = canvas.getContext('2d');

/**

* Get page info from document, resize canvas accordingly, and render page.

* @param num Page number.

function renderPage(num) {

pageRendering = true;

pdfDoc.getPage(num).then(function(page) {

var viewport = page.getViewport(scale);

canvas.height = viewport.height;

canvas.width = viewport.width;

var renderContext = {

canvasContext: ctx,

viewport: viewport

};

var renderTask = page.render(renderContext);

renderTask.promise.then(function() {

pageRendering = false;

if (pageNumPending !== null) {

renderPage(pageNumPending);

pageNumPending = null;

}

});

document.getElementById('page_num').textContent = num;

}

function queueRenderPage(num) {

if (pageRendering) {

pageNumPending = num;

} else {

renderPage(num);

}

function onPrevPage() {

if (pageNum <= 1) {

return;

}

pageNum--;

queueRenderPage(pageNum);

}

document.getElementById('prev').addEventListener('click', onPrevPage);

function onNextPage() {

if (pageNum >= pdfDoc.numPages) {

return;

}

pageNum++;

queueRenderPage(pageNum);

}

document.getElementById('next').addEventListener('click', onNextPage);

PDFJS.getDocument(url).then(function(pdfDoc_) {

pdfDoc = pdfDoc_;

document.getElementById('page_count').textContent = pdfDoc.numPages;

renderPage(pageNum);

});

关于page方式的使用：解析结果，我们可以看下这个对象提供的方法：方法返回 getAnnotations A promise that is resolved with an {Array} of the annotation objects. getTextContent That is resolved a TextContent object that represent the page text content. getViewport Contains ‘width’ and ‘height’ properties along with transforms required for rendering. render An object that contains the promise, which is resolved when the page finishes rendering. 我们可以试试调用getTextContent方法，并将其结果打印出来：

pdf.getPage(1).then(function(page) {

console.log(page);

});

输入格式大致如下：

{

"items": [

{

"str": "xxx",

"dir": "xxx",

"width": xxx,

"height": xxx,

"transform": [

48,

45.32495,

679.04

"fontName": "g_d0_f1"

{

"str": " ",

"dir": "ltr",

"width": 9.600000000000001,

"height": 2304,

"transform": [

48,

285.325,

679.04

"fontName": "g_d0_f2"

}

"styles": {

"g_d0_f1": {

"fontFamily": "monospace",

"ascent": 1.05810546875,

"descent": -0.26171875,

"vertical": false

"g_d0_f2": {

"fontFamily": "sans-serif",

"ascent": 0.74365234375,

"descent": -0.25634765625

}

PDF.js能将每页文本的字符串、位置、字体都解析出来。官网用的viewer.js：http://mozilla.github.io/pdf.js/web/viewer.html，首先底图是一个Canvas，内容和PDF一样（通过下面介绍的page.render方法可以得到），底图之上是一个textLayer，这一层就是通过page.getTextContent()得到了字体的位置和样式，再覆盖在Canvas上。 […]

龙生 04 Sep 2019

View Details

常用gulp配置文件

package.josn

{

"name": "g-ex",

"version": "1.0.0",

"description": "a gulp template",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"keywords": [],

"author": "",

"license": "ISC",

"devDependencies": {

"autoprefixer": "^7.1.4",

"babel-core": "^6.26.0",

"babel-preset-env": "^1.6.0",

"gulp": "^3.9.1",

"gulp-babel": "^7.0.0",

"gulp-clean-css": "^3.9.0",

"gulp-concat": "^2.6.1",

"gulp-connect": "^5.0.0",

"gulp-less": "^3.3.2",

"gulp-postcss": "^7.0.0",

"gulp-rename": "^1.2.2",

"gulp-sourcemaps": "^2.6.1",

"gulp-uglify": "^3.0.0",

"http-proxy-middleware": "^0.17.4",

"uglify-es": "^3.1.3"

"dependencies": {

"gulp-file-include": "^1.2.0"

}

gulpfile.js

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

var gulp = require('gulp');

var connect = require('gulp-connect');

var babel = require('gulp-babel');

var sourcemaps = require('gulp-sourcemaps');

var rename = require('gulp-rename');

var uglify = require('gulp-uglify');

var less = require('gulp-less');

var cleanCss = require('gulp-clean-css');

var autoprefixer = require('autoprefixer');

var postCss = require('gulp-postcss');

var proxy = require('http-proxy-middleware');

var fileinclude = require('gulp-file-include');

// 起服务

gulp.task('connect', function() {

connect.server({

root: 'dist',

livereload: true,

port: 8888,

middleware: function(connect, opt) {

return [

// proxy('/printbox', {

// target: 'http://172.20.8.30:8891',

// changeOrigin:true

// }),

// proxy('/user', {

// target: 'http://192.168.0.168:8099/user',//代理的目标地址

// changeOrigin:true,//

// pathRewrite:{//路径重写规则

// '^/user':''

// }

// }),

]

}

});

// html文件

gulp.task('html', function() {

gulp.src('./*.html')

.pipe(fileinclude({

prefix: '@@',//变量前缀 @@include

basepath: './inc',//引用文件路径

indent:true//保留文件的缩进

}))

.pipe(connect.reload())

.pipe(gulp.dest('./dist'));

});

// css文件

gulp.task('less', ['html'], function() {

gulp.src('./css/*.css')

.pipe(connect.reload())

.pipe(gulp.dest('./dist/css'));

gulp.src('./css/images/*.*')

.pipe(connect.reload())

.pipe(gulp.dest('./dist/css/images'));

});

// gulp.task('less', ['html'], function() {

// gulp.src('./src/css/*.less')

// .pipe(less())

// .pipe(postCss([autoprefixer({browsers: ['last 2 versions']})]))

// .pipe(gulp.dest('./dist/css'))

// .pipe(cleanCss())

// .pipe(rename({extname: '.min.css'}))

// .pipe(connect.reload())

// .pipe(gulp.dest('./dist/css/min'))

// });

// js文件

gulp.task('js', function() {

gulp.src('./js/*.js')

.pipe(connect.reload())

.pipe(gulp.dest('./dist/js'));

});

// gulp.task('js',['html'] , function () {

// gulp.src('./src/js/*.js')

// .pipe(sourcemaps.init())

// .pipe(babel({

// presets: ['env']

// }))

// .pipe(gulp.dest('./dist/js'))

// .pipe(uglify())

// .pipe(rename({extname: '.min.js'}))

// .pipe(sourcemaps.write())

// .pipe(connect.reload())

// .pipe(gulp.dest('./dist/js/min'))

// });

// 图片

gulp.task('img', function () {

gulp.src('./images/*.*')

.pipe(connect.reload())

.pipe(gulp.dest('./dist/images'));

gulp.src('./images/*.*')

.pipe(connect.reload())

.pipe(gulp.dest('./dist/images/'));

gulp.src('./images/banners/*.*')

.pipe(connect.reload())

.pipe(gulp.dest('./dist/images/banners'));

gulp.src('./images/blog-post/*.*')

.pipe(connect.reload())

.pipe(gulp.dest('./dist/images/blog-post'));

gulp.src('./images/payments/*.*')

.pipe(connect.reload())

.pipe(gulp.dest('./dist/images/payments'));

gulp.src('./images/products/*.*')

.pipe(connect.reload())

.pipe(gulp.dest('./dist/images/products'));

gulp.src('./images/sliders/*.*')

.pipe(connect.reload())

.pipe(gulp.dest('./dist/images/sliders'));

gulp.src('./images/testimonials/*.*')

.pipe(connect.reload())

.pipe(gulp.dest('./dist/images/testimonials'));

});

// fonts

gulp.task('font', function(){

gulp.src('./fonts/*.*')

.pipe(connect.reload())

.pipe(gulp.dest('./dist/fonts'));

});

// 监控

gulp.task('watch', function() {

gulp.watch(['./*.html','./inc/*.html'], ['html']);

gulp.watch(['./js/*.js'], ['js']);

gulp.watch(['./css/*.css'], ['less']);

});

// 默认任务

gulp.task('default', ['connect', 'watch', 'js', 'less', 'img', 'font']);

from:https://www.cnblogs.com/changzhenan/p/8329864.html

龙生 22 Jul 2019

View Details

js闭包用法

闭包既保证了内部函数的私有性又可以向外公开通过一个已有对象向它注入属性

/**

* 闭包

* 在函数中定义的函数，在外部使用

* 1、在函数内部定义的函数，在外部不能访问

function a(){

/**

* b函数是一个私有函数

function b(){

alert("aaaa");

}

return b;

}

//var bb = a();

//bb();

(function(){

var aa = 5;

function a(){

/**

* 公开api

return {

b:b,

c:c

}

function b(){

alert("b");

}

function c(){

alert("c");

}

window.a = a;

})();

var json = window.a();

json.b();

json.c();

from:https://www.cnblogs.com/friends-wf/p/3781859.html

龙生 12 Jul 2019

View Details

javascript – 闭包之一些常见的写法

/**

* 防御型分号

; (function () {

//code....

console.log('一开始，我自己执行了！！！');

})();

/**

* 形参 -> 实参

* 定义形参->接收实参->最后打印.

(function (a, b, c) {

console.log(a + b + c);

})(1, 2, 3)

// (function(i){

// console.log(i);

// })(window);

/**

* 声明了不需要返回函数(return)

void function () {

// code....

console.log('不需要返回return!');

}();

from:https://www.cnblogs.com/cisum/p/9577246.html

龙生 12 Jul 2019

View Details

全面理解Javascript闭包和闭包的几种写法及用途

一、什么是闭包和闭包的几种写法和用法 1、什么是闭包闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点： 1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。 2. 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。简单的说，Javascript允许使用内部函数—即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。 2、闭包的几种写法和用法首先要明白，在JS中一切都是对象，函数是对象的一种。下面先来看一下闭包的5种写法，简单理解一下什么是闭包。后面会具体解释。

//第1种写法

function Circle(r) {

this.r = r;

}

Circle.PI = 3.14159;

Circle.prototype.area = function() {

return Circle.PI * this.r * this.r;

}

var c = new Circle(1.0);

alert(c.area());

这种写法没什么特别的，只是给函数添加一些属性。

//第2种写法

var Circle = function() {

var obj = new Object();

obj.PI = 3.14159;

obj.area = function( r ) {

return this.PI * r * r;

}

return obj;

}

var c = new Circle();

alert( c.area( 1.0 ) );

这种写法是声明一个变量，将一个函数当作值赋给变量。

//第3种写法

var Circle = new Object();

Circle.PI = 3.14159;

Circle.Area = function( r ) {

return this.PI * r * r;

}

alert( Circle.Area( 1.0 ) );

这种方法最好理解，就是new 一个对象，然后给对象添加属性和方法。

//第4种写法

var Circle={

"PI":3.14159,

"area":function(r){

return this.PI * r * r;

}

};

alert( Circle.area(1.0) );

这种方法使用较多，也最为方便。var obj = {}就是声明一个空的对象。

//第5种写法

var Circle = new Function("this.PI = 3.14159;this.area = function( r ) {return r*r*this.PI;}");

alert( (new Circle()).area(1.0) );

说实话，这种写法我是没用过，大家可以参考一下。总的来说，上面几种方法，第2中和第4中较为常见，大家可以根据习惯选择。上面代码中出现了JS中常用的Prototype，那么Prototype有什么用呢？下面我们来看一下：

var dom = function(){

};

dom.Show = function(){

alert("Show Message");

};

dom.prototype.Display = function(){

alert("Property Message");

};

dom.Display(); //error

dom.Show();

var d = new dom();

d.Display();

d.Show(); //error

我们首先声明一个变量，将一个函数赋给他，因为在Javascript中每个函数都有一个Portotype属性，而对象没有。添加两个方法，分别直接添加和添加打破Prototype上面，来看下调用情况。分析结果如下： 1、不使用prototype属性定义的对象方法，是静态方法，只能直接用类名进行调用！另外，此静态方法中无法使用this变量来调用对象其他的属性！ 2、使用prototype属性定义的对象方法，是非静态方法，只有在实例化后才能使用！其方法内部可以this来引用对象自身中的其他属性！下面我们再来看一段代码：

var dom = function(){

var Name = "Default";

this.Sex = "Boy";

this.success = function(){

alert("Success");

};

alert(dom.Name);

alert(dom.Sex);

大家先看看，会显示什么呢？答案是两个都显示Undefined,为什么呢？这是由于在Javascript中每个function都会形成一个作用域，而这些变量声明在函数中，所以就处于这个函数的作用域中，外部是无法访问的。要想访问变量，就必须new一个实例出来。

var html = {

Name:'Object',

Success:function(){

this.Say = function(){

alert("Hello,world");

};

alert("Obj Success");

}

};

再来看看这种写法，其实这是Javascript的一个"语法糖"，这种写法相当于：

var html = new Object();

html.Name = 'Object';

html.Success = function(){

this.Say = function(){

alert("Hello,world");

};

alert("Obj Success");

变量html是一个对象，不是函数，所以没有Prototype属性，其方法也都是公有方法，html不能被实例化。否则会出现如下错误：但是他可以作为值赋给其它变量，如var o = html; 我们可以这样使用它：

1 2	alert(html.Name); html.Success();

说到这里，完了吗？细心的人会问，怎么访问Success方法中的Say方法呢？是html.Success.Say()吗？当然不是，上面刚说过由于作用域的限制，是访问不到的。所以要用下面的方法访问：

var s = new html.Success();

s.Say();

//还可以写到外面

html.Success.prototype.Show = function(){

alert("HaHa");

};

var s = new html.Success();

s.Show();

关于Javascript作用域的问题，不是一两句能说清楚的，有兴趣的大家可以网上找些资料看看。二、Javascript闭包的用途事实上，通过使用闭包，我们可以做很多事情。比如模拟面向对象的代码风格；更优雅，更简洁的表达出代码；在某些方面提升代码的执行效率。 1、匿名自执行函数我们知道所有的变量，如果不加上var关键字，则默认的会添加到全局对象的属性上去，这样的临时变量加入全局对象有很多坏处，比如：别的函数可能误用这些变量；造成全局对象过于庞大，影响访问速度(因为变量的取值是需要从原型链上遍历的)。除了每次使用变量都是用var关键字外，我们在实际情况下经常遇到这样一种情况，即有的函数只需要执行一次，其内部变量无需维护，比如UI的初始化，那么我们可以使用闭包：

var data= {

table : [],

tree : {}

};

(function(dm){

for(var i = 0; i < dm.table.rows; i++){

var row = dm.table.rows[i];

for(var j = 0; j < row.cells; i++){

drawCell(i, j);

}

})(data);

我们创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，因此在函数执行完后会立刻释放资源，关键是不污染全局对象。 2、结果缓存我们开发中会碰到很多情况，设想我们有一个处理过程很耗时的函数对象，每次调用都会花费很长时间，那么我们就需要将计算出来的值存储起来，当调用这个函数的时候，首先在缓存中查找，如果找不到，则进行计算，然后更新缓存并返回值，如果找到了，直接返回查找到的值即可。闭包正是可以做到这一点，因为它不会释放外部的引用，从而函数内部的值可以得以保留。

var CachedSearchBox = (function(){

var cache = {},

count = [];

return {

attachSearchBox : function(dsid){

if(dsid in cache){//如果结果在缓存中

return cache[dsid];//直接返回缓存中的对象

}

var fsb = new uikit.webctrl.SearchBox(dsid);//新建

cache[dsid] = fsb;//更新缓存

if(count.length > 100){//保正缓存的大小<=100

delete cache[count.shift()];

}

return fsb;

clearSearchBox : function(dsid){

if(dsid in cache){

cache[dsid].clearSelection();

}

};

})();

CachedSearchBox.attachSearchBox("input");

这样我们在第二次调用的时候，就会从缓存中读取到该对象。 3、封装

var person = function(){

//变量作用域为函数内部，外部无法访问

var name = "default";

return {

getName : function(){

return name;

setName : function(newName){

name = newName;

}

}();

print(person.name);//直接访问，结果为undefined

print(person.getName());

person.setName("abruzzi");

print(person.getName());

得到结果如下：

undefined

default

abruzzi

4、实现类和继承

function Person(){

var name = "default";

return {

getName : function(){

return name;

setName : function(newName){

name = newName;

}

};

var p = new Person();

p.setName("Tom");

alert(p.getName());

var Jack = function(){};

//继承自Person

Jack.prototype = new Person();

//添加私有方法

Jack.prototype.Say = function(){

alert("Hello,my name is Jack");

};

var j = new Jack();

j.setName("Jack");

j.Say();

alert(j.getName());

我们定义了Person，它就像一个类，我们new一个Person对象，访问它的方法。下面我们定义了Jack，继承Person，并添加自己的方法。 from:https://www.cnblogs.com/jiayc/p/9365837.html

龙生 12 Jul 2019

View Details

« Previous 1 … 22 23 24 … 58 Next »

February 2025
M	T	W	T	F	S	S
« Jan
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28