前端开发 | 易学教程

前端开发面试题

阅读更多关于前端开发面试题

1、什么标签语义化 HTML中包含的标签有那些行内标签和快级标签的区别是什么行内标签和快级标签有那些(个举例8个) 行内标签和快级标签如何相互转换 display有那些常用值(不少于8个) 2、如何隐藏一个div(不少于6种) 3、 console.log( typeof typeof typeof [1,2,3] ); 4、 var num1 = 12; var num2 = num1; num2 ++; console.log(num1); var obj1 = {name:"ntsc",age:22}; var obj2 = obj1; obj2.age = 27; console.log(obj1.age); 5、 var obj1 = {name:"ntsc",age:19}; var obj2 = obj1; var obj3 = obj2; obj3.age = 24; obj2 = {name:"李四",age:20}; console.log(obj1.age); console.log(obj2.age); console.log(obj3.age); 6、 (function() { var a = b = 5; })(); console.log(b); 7、给String对象定义一个repeatify方法。该方法接收一个整数参数

前端开发缓存问题的解决方案

阅读更多关于前端开发缓存问题的解决方案

在没有使用vue angular react 三大流行框架去开发静态的项目时,困扰我们最多的就是缓存问题,没有三大框架的优势之热刷新功能,如何做到我们修改了我们引用的外部文件里的某些内容,回到页面,刷新一下就能看到最新的效果或是样式呢?说的直白点就是动态的给文件加版本号,在没有接触php我是不知道如何用js去控制,为了安全,前端不具有改写文件的能力,我就想到了同样可以嵌套html内容的php语言,作为一个前端,懂点后端语言真的没坏事,不说废话了,上代码. 第一步:项目下面一定得有一个控制版本的php文件,version.php,内容如下: 1 <?php 2 /** 3 * 4 * @authors shufei 5 * @date 2018-06-17 12:15:27 6 * @version $ver strtotime(date('Y-m-d H:i:s')) 7 */ 8 function AutoVersion( $file ) { 9 $ver = strtotime(date('Y-m-d H:i:s')) ; 10 echo $file .'?t=' .$ver; 11 } 这个 AutoVersion 方法需要一个参数也是文件的file路径 $file,版本号 $ver 赋值为实时的时间戳,当你项目的部分开发完成后可以设置 $ver为固定的一个值第二步

前端面试

阅读更多关于前端面试

1、什么是盒子模型？在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。 2、行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素：a、b、span、img、input、strong、select、label、em、button、textarea 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote 空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img 3、CSS实现垂直水平居中一道经典的问题，实现方法有很多种，以下是其中一种实现： HTML结构： <div class="wrapper"> <div class="content"></div> </div> CSS： .wrapper { position: relative; width: 500px; height: 500px; border: 1px solid red; } .content{ position: absolute; width: 200px;

前端开源项目周报0214

阅读更多关于前端开源项目周报0214

由 OpenDigg 出品的前端开源项目周报第八期来啦。我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开源项目，方便前端开发人员便捷的找到自己需要的项目工具等。 qart.js 合并图片和二维码 hyperapp 创建现代UI应用 tilt.js 小巧的requestAnimationFrame preload-webpack-plugin 自动布线的Webpack插件 luxbar 轻量级响应式的CSS导航栏 zanui-weapp 好用易扩展的小程序 UI 库 injection-js JavaScript和TypeScript的依赖注入库 react-async-component 创建能够解决异步的组件 avoriaz VueJS测试实用工具库 vue-datasource 创建VueJS动态表格 vue-qart 用于qartjs的Vue2指令 HyaReader 移动友好的阅读器 weapp-zhihulive 基于Zhihu Live数据的微信小程序 filterous-2 仿Instagram图片处理库 chartjs-wechat-mini-app chartjs微信小程序适配 autoDevTools 移动端控制台插件 react-manga WebApp版开源漫画阅读器 react-native-simple-login react

前端Web开发MVC模式-入门示例

阅读更多关于前端Web开发MVC模式-入门示例

MVC概论起初来之桌面应用开发。其实java的structs框架最能体现MVC框架：model模型是理解成服务器端的模块程序；view为发送给客服端的内容；control为servlet程序控制跳转和工作流。随着前端Ajax兴起、前端开发工作进一步划分：js程序员和ue页面制作、另外从整个前端项目的清晰明朗可以扩展性角度来看，MVC的应用也越来越必要，特别是对大的项目？例如需要给一个页面上的button注册一个onclick事件。 1、我们可以有如下最简洁的写法：（view和model control完全混合） <html> <head> <title> example </title> </head> <body> <input type="button" value="baidu" onclick="alert(this.value);"/> </body> </html> 说明：如上写法的好处：简单、直接；严重的弊端：如果都是这样写法，页面代码很大的时候，修改js代码还需要查找整个页面，导致整个页面非常混乱。批注：类似与 jsp中直接嵌入java片段语句。 2、将html和js代码进行适当分离：（view和model control在同一页面适当分离）修改以上的写法： <html> <head> <title> example </title> </head>

前端mvc的学习笔记之二

阅读更多关于前端mvc的学习笔记之二

从百度空间转过来的一个例子看起来很易懂小例子容易懂，大项目用起来可能就会复杂一些了，看空间的标题名称什么的很有可能还和我是一个公司呢，这里谢过了啊 --------------------------------------------华丽的分割线------------------------------------------------------------------------------------------------------- 前端web开发的MVC模式 - 从一个简单实例讲起 MVC概论起初来之桌面应用开发。其实java的structs框架最能体现MVC框架：model模型是理解成服务器端的模块程序；view为发送给客服端的内容；control为servlet程序控制跳转和工作流。随着前端Ajax兴起、前端开发工作进一步划分：js程序员和ue页面制作、另外从整个前端项目的清晰明朗以可扩展性角度来看，MVC的应用也越来越必要，特别是对大的项目。例如需要给一个页面上的button注册一个onclick事件。 1、我们可以有如下最简洁的写法：（view和model control完全混合） <HTML> <HEAD> <TITLE> example </TITLE> </HEAD> <BODY> <input type="button" value=

简单理解前端web开发的MVC模式

阅读更多关于简单理解前端web开发的MVC模式

随着前端Ajax兴起、前端开发工作进一步划分：js开发和ui页面制作、另外从整个前端项目的清晰明朗以可扩展性角度来看，MVC的应用也越来越必要，特别是对大的项目。例如需要给一个页面上的button注册一个onclick事件。 1、我们可以有如下最简洁的写法：（view和model control完全混合） <HTML> <HEAD> <TITLE> example </TITLE> </HEAD> <BODY> <input type="button" value="baidu" onclick="alert(this.value);"/> </BODY> </HTML> 说明：如上写法的好处：简单、直接；严重的弊端：如果都是这样写法，页面代码很大的时候，修改js代码还需要查找整个页面，导致整个页面非常混乱。 2、将html和js代码进行适当分离：（view和model control在同一页面适当分离）修改以上的写法： <HTML> <HEAD> <TITLE> example </TITLE> </HEAD> <BODY> <input type="button" value="baidu" onclick="tipInfo(this);"/> <SCRIPT LANGUAGE="JavaScript"> <!-- function tipInfo(obj){ alert

10个有趣的Javascript和CSS库

阅读更多关于 10个有趣的Javascript和CSS库

Tailwind CSS Tailwind是用于构建自定义用户界面的实用CSS框架。每个Tailwind小应用都有多种尺寸，这使得创建响应式界面变得非常简单。您可以自定义颜色，边框尺寸，字体，阴影等等，没有任何限制。 Pretty Checkbox 这是一个纯CSS库，用于创建漂亮的复选框和单选按钮。它提供了不同的形状（正方形，曲线，圆形），选择方式（默认，填充，thick），颜色（主要，成功，信息），颜色类型（实心，轮廓）和动画。它支持自定义字体图标，SVG图标和SCSS自定义。 Bulma 这是一个基于Flexbox的免费开源CSS框架。 Bulma有39个.sass文件，可以单独导入。您可以轻松地自定义它，并使用您喜欢的颜色和变量创建自己的主题。 Bulma中的每个元素都是移动端优先的，并针对小屏幕进行了优化。 React Static 由Nozzle.io创建的React静态网站框架。它具有令人难以置信的快速运行时间和性能，并提供惊人的用户体验。它完全使用React构建，支持所有React生态系统，包括CSS-in-JS库，GraphQl和Redux。 Bottender Bottender是一个开发跨平台机器人的JavaScript框架。它是用ES6 / ES7语法编写的，完全支持异步等待功能。您可以使用会话存储，HTTP服务器框架或将其连接到任何平台。

python学习之路前端-jQuery

阅读更多关于 python学习之路前端-jQuery

jQuery简介 JQuery是继 prototype 之后又一个优秀的 Javascript 库。它是轻量级的js库，它兼容 CSS3 ，还兼容各种浏览器（ IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理 HTML （标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供 AJAX 交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。 jQuery是一个兼容多浏览器的 javascript 库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。 jQuery是免费、开源的，使用

前端优化 1 待优化项分析

阅读更多关于前端优化 1 待优化项分析

待优化项分析打包项目资源分析使用现在做主流的框架进行开发，大多都要经历打包这一过程,将核心代码和引入的第三方模块进行打包，但是往往会发现打包的结果不尽人意，在这里使用一个工具可以分析打包文件的构成. 可视化打包分析工具: webpack-bundle-analyzer 1.下载安装 npm install webpack-bundle-analyzer --save-dev vue.config.js 配置 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = { ... chainWebpack:(config)={ if(process.env.NODE_ENV === 'production'&&process.env.npm_config_report){ config .plugin('webpack-bundel-analyze') .use(BundleAnalyzerPlugin) .end() } } } 配置启动指令 package.josn { ... "scripts":{ "report":"npm_config_report= true npm run build " } } 使用 npm run

订阅前端开发