0

0

对js的一些感悟与分享

零下一度

零下一度

发布时间:2017-07-18 13:44:12

|

1739人浏览过

|

来源于php中文网

原创

javascript 是属于网络的脚本语言!

JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。

JavaScript 是因特网上最流行的脚本语言。

JavaScript 很容易使用!你一定会喜欢它的!

js现在可以运行在

1.浏览器端

2.计算机操作系统上

通过大名鼎鼎的node, node是由c/cpp编写的js运行环境,大概是js通过编译变成c变成汇编变成机器语言。。。大概

node编译
js
操作系统可执行机器语言

包安装工具

1.npm

2.bower

3.yarn

现在大家都推荐这个。。。据说更快更好


构建打包工具(说实话这个我现在还是分不清)

构建工具 任务执行器

帮助压缩文件?sprite?混淆等等需需要手工操作的简化?手工劳动 gulp grunt

打包工具 模块打包工具

模块化的代码最后组装打包上线用的,webpack browserify ,seajs require这两个是在浏览器端js现场打包,现在已经不推荐了


页面中的js

传统引入方式 script src

node动态引入

这个是个很神奇的 node的工具webpack动态的组装你的页面 比如使用node modules里面的插件 你并没有实际用script引入到页面中这样子?暂时不理解的时候,不能用常理来考虑(vue-cli)dev时是动态组装build才把所有动态组装的打包好成一个。。。


es2015==es6 =>true


jquery 属性自加

a.css({'property':'+=value'})


目前我对vue的感想

首先,说下优点确实有的,只操作数据不用操作dom

再说下缺点,搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c,最后搞得很难看懂。为了变方便变得更麻烦要加更多东西


contenteditable

div 模拟textarea 富文本编辑器

#youCantDeleteMe Hot or not? Tell it like it is and hashtag!

但是有些问题的,解决不了光标的问题(跳首),百度贴吧的发帖框就是用这个模拟的,有时间看看他们怎么做的


根据设备跳转

三方可以跳转,都可以获得浏览器传来的userAgent

  1. 运维跳转

  2. 程序跳转

  3. 前端跳转

同时,这三方加上网路运营商甚至路由器都可以恶意dns恶意在页面上加东西
node作为运行时服务器,也是一样的


图片位于正中

  1. background-position center

  2. position absolute


多行省略(现代浏览器)

overflow: hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;

cdn页面真正动态内容

页面被cdn服务器缓存后,需要刷新缓存才能真正改变,那么真正需要勤奋改变的内容需要js来获取(比如当前登录用户信息等等)

js 正则找出所有符合的匹配

var regEx=/js_quantity[a-z]+/g;regEx.exec('js_quantityabc js_quantityminus minus disabled');regEx.exec('js_quantityabc js_quantityminus minus disabled');regEx.exec('js_quantityabc js_quantityminus minus disabled')
[0];regEx.exec('js_quantityabc js_quantityminus minus disabled').index;

不断连续执行exec


async/await

demo(Script snippet #1)

Berlinet企业网站系统(绿色风格)1.0
Berlinet企业网站系统(绿色风格)1.0

本程序是在DFCMS的基础上修正了一些调用和显示上的BUG,增加JS方式调用。 新闻,产品,留言,招聘。功能齐全,模板与程序分离。一般给中小企业客户 做网站,掌握该套程序足够。模板我会陆续提供。今天提供一套绿色风格的模 板,针对家居,运动,健身行业公司性质的模板。管理地址:manage/login.asp 管理账号和密码admin

下载
//测试 async async async await//先来的 返回一个promise 完成时调用resolvevar sleep=function(){ return new Promise(function(resolve,reject){
     setTimeout(function(){         console.log('Asettimeout has been executed, promiss has been resolved');
         resolve(['sleep1','sleep2']);
     },3000);
 });
};//后到的 async(异步)修饰function await修饰执行先来的var start=async function(){ let sleepreturnarray=await sleep(); console.log('%ceven though i do not have a time out, i still will be executed after 3 sec, after the promiss resolveed'+sleepreturnarray[1],'color:red;');
};
start();

async 表示这是一个async函数,await只能用在这个函数里面。

await 表示在这里等待promise返回结果了,再继续执行。

await 后面跟着的应该是一个promise对象(当然,其他返回值也没关系,只是会立即执行,不过那样就没有意义了…)

大大说了,目前这这就是异步回调地狱的终极解决方案,当然要结合babel现在。注意, 目前, 终极


vue组件通讯

就算你不喜欢,分到你用你也得用。。。

组件之间的作用域独立,而组件之间经常又需要传递数据。
A 为父组件,下面有子组件 B 和 C。
A 的数据可以通过 props 传递给 B 和 C。
A 可以通过 $broadcast 调用 B 和 C 的 events,从而操作 B 和 C 的数据。
B 和 C 可以通过 $dispatch 调用 A 的 events,从而操作 A 的数据。
当 B 需要操作 C 的数据就会比较麻烦,需要先 $dispatch 到 A,再 $broadcast 到 C。

如果项目比较小的话还好,越大的项目,涉及的组件通信就越多、越频繁,此时管理起来就会非常累,而且容易出错。这就是 Vuex 的意义所在。它可以将数据置于单独的一层,并提供给外部操作内部数据的方法。粗俗一点,就这样理解吧。

=== === ===更新:Vue 2 发布了,去掉了 $dispatch 和 $broadcast,已经不会出现通信事件 ping-pong 的情况了。

我们需要有一个 Vue 实例来充当通信媒介的作用,Vue 官方文档里将它叫做 event bus。export default new Vue(); 当我们需要组件之间事件通信的时候,只需要对这个 event bus 使用 $emit 和 $on 就可以了。

import Bus from './bus.js';

export default Vue.extend({
  template: `
  
{{msg}}
`, data: () => ({ msg: 'Hello World!' }), created() { Bus.$on('setMsg', content => { this.msg = content; }); } });
import Bus from './bus.js';

export default Vue.extend({
  template: `
  
Say Hi
`, methods: { sendEvent() { Bus.$emit('setMsg', 'Hi Vue!'); } } });

Event bus 是一种实践,你也可以在 Vue 1.x 中使用它。


大在小容器中居中

法一

大:position absolute; left 50%;margin-left -[大宽度的一半]; top...跟left一样的省略

小:position relative;

法二

设置为背景图 且background-position center


文本框和按钮同高对齐(less)

form{			font-size: 0;position: relative;			.formitem{				height: 30px;line-height: 30px;				font-size: 14px;vertical-align: middle;
			}			input[type=text]{				.formitem();				border: 1px solid #000;				padding: 0 5px 0 35px;				width: 235-40px;
			}			button{				.formitem();				color: #fff;background-color: #000;				width: 135px;height: 32px;line-height: 32px;
			}			&:before{				content: '';display: inline-block;position: absolute;				left: 38px;				top: 1px;				.sprite(@youjiandingyue_07);
			}
		}

正则替换 保留原始内容

http://([A-Za-z0-9.-]+).sammydress.com
https://$1.sammydress.com

$1 是代表([A-Za-z0-9.-]+)匹配到的模糊内容
$1-$n分别代表第1个和第n个括号内匹配到的内容。

var regEx=/([A-Za-z0-9.-]+)abc/;'sdjlfjslfabc'.replace(regEx,'$1def')

结果是"sdjlfjslfdef"


关于vue一点新的体会

专注于操作数据,数据和视图分离,通过操作数据的方式操作视图,mvvm
而不是$().html()等等这种形式


webstorm 保存不会触发webpack watch


原来是这样啊啊啊啊啊啊


text align justify

text-align:justify 属性是全兼容的,使用它实现两端对齐,需要注意在模块之间添加[空格/换行符/制表符]才能起作用,同样,实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用


vue validator


中文文档


关于postcss中用于不转换rem的注释/*no*//*px*/在webpack build中不生效的解决办法

sass loader会把注释去掉 导致用于告诉postcss不用转换rem的注释也去掉 导致边线px变成小数rem 显示不出来的bug
sass?outputStyle=expanded 展开 带注释的?

module: {loaders: [
            {test: /\.scss$/,//感謝谷歌loader: 'style!css!postcss-loader!sass?outputStyle=expanded',// include: APP_PATH},
        ]
    },

webpack 可以接受形如!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true&includePaths[]=./node_modules 的配置参数后的loader

 

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

9

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

3

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Node.js 教程
Node.js 教程

共57课时 | 9.8万人学习

CSS3 教程
CSS3 教程

共18课时 | 5万人学习

Vue 教程
Vue 教程

共42课时 | 7.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号